HTML 기초 · 텍스트 요소 · 링크와 이미지

<태그이름>내용</태그이름>

<!DOCTYPE html>

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>페이지 제목</title>
  </head>
  <body>
    <h1>안녕하세요!</h1>
    <p>첫 번째 HTML 문서입니다.</p>
  </body>
</html>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="페이지 설명">
<meta name="keywords" content="HTML, 웹, 기초">
<meta name="author" content="홍길동">
<title>나의 첫 HTML 페이지</title>

<h1>1단계 — 페이지당 1개 권장</h1>
<h2>2단계 — 주요 섹션</h2>
<h3>3단계 — 소제목</h3>
<h4>4단계</h4>
<h5>5단계</h5>
<h6>6단계 — 가장 작은 제목</h6>

<div>이 영역은 한 줄 전체를 차지합니다.</div>
<p>이 문장에서 <span>이 부분만</span> 별도로 스타일을 줄 수 있습니다.</p>

<ul>
  <li>사과</li>
  <li>바나나</li>
  <li>딸기</li>
</ul>

<ol>
  <li>재료를 준비한다</li>
  <li>물을 끓인다</li>
  <li>재료를 넣는다</li>
</ol>

<ul>
  <li>과일
    <ul><li>사과</li><li>바나나</li></ul>
  </li>
  <li>채소
    <ul><li>당근</li><li>시금치</li></ul>
  </li>
</ul>

<!-- 이것은 주석입니다. 화면에 표시되지 않습니다. -->

<p>이 약은 <strong>하루 3번</strong> 복용해야 합니다.</p>

<p>나는 <em>정말</em> 배가 고프다.</p>

<blockquote cite="https://example.com">
  <p>"Education is not the filling of a pail, but the lighting of a fire."</p>
</blockquote>

<p><cite>해리포터와 마법사의 돌</cite>은 J.K. 롤링이 쓴 소설입니다.</p>

<p>선생님은 <q>열심히 하면 반드시 된다</q>고 말씀하셨습니다.</p>

<p>변수 선언은 <code>let</code> 또는 <code>const</code>를 사용합니다.</p>

<pre><code>
function greet(name) {
  console.log("안녕하세요, " + name + "!");
}
</code></pre>

<p>서울 강남구<br>테헤란로 123<br>4층 401호</p>

<p>첫 번째 섹션</p>
<hr>
<p>두 번째 섹션 — 위 hr이 시각적 구분</p>

<p>물의 화학식: H<sub>2</sub>O</p>
<p>피타고라스 정리: a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup></p>

<p>시험 범위: <mark>3장부터 5장까지</mark></p>
<p>가격: <del>50,000원</del> → 35,000원</p>
<p>회의 날짜: <del>3월 5일</del> <ins>3월 7일</ins></p>
<p><abbr title="HyperText Markup Language">HTML</abbr>은 웹의 기본 언어입니다.</p>

<a href="이동할 주소">링크 텍스트</a>

<a href="https://www.naver.com">외부 사이트</a>
<a href="about.html">같은 폴더 다른 파일</a>
<a href="../index.html">상위 폴더 파일</a>
<a href="#section2">페이지 내 앵커</a>
<a href="mailto:hong@example.com">이메일</a>
<a href="tel:010-1234-5678">전화 (모바일)</a>

<a href="https://www.google.com" target="_self">현재 탭 (기본)</a>
<a href="https://www.google.com" target="_blank">새 탭</a>

<a href="https://www.google.com" target="_blank" rel="noopener noreferrer">
  안전한 새 탭 열기
</a>

<img src="photo.jpg" alt="서울 남산타워 사진">
<img src="logo.png" alt="회사 로고" width="200" height="100">
<img src="banner.jpg" alt="배너" width="800">

<!-- 순수 장식용은 alt를 비움 -->
<img src="decoration.png" alt="">

<!-- 의미 있는 이미지는 구체적으로 -->
<img src="chart.png" alt="2026년 1분기 매출 증가 그래프">

<img src="https://www.example.com/images/photo.jpg" alt="외부">
<img src="/images/logo.png" alt="서버 루트 기준">

프로젝트/
├── index.html       ← 현재 파일
├── images/
│   └── logo.png
└── pages/
    └── contact.html

<!-- index.html 기준 -->
<img src="images/logo.png" alt="로고">
<a href="pages/contact.html">연락처</a>

<!-- pages/contact.html 기준 -->
<img src="../images/logo.png" alt="로고">  <!-- ../는 상위 폴더 -->

<figure>
  <img src="https://picsum.photos/400/300" alt="랜덤 풍경 사진">
  <figcaption>사진 1: 자연의 아름다운 풍경</figcaption>
</figure>

<a href="https://www.google.com" target="_blank" rel="noopener noreferrer">
  <img src="google-logo.png" alt="구글 홈페이지로 이동">
</a>