h1–h6 — 문서 구조를 잡는 제목문서의 계층 구조를 만듭니다. 한 페이지에 h1은 보통 한 번만 사용하고, 소제목은 h2~h6으로 단계적으로 내려갑니다.
<h1>가장 큰 제목 (페이지 주제)</h1>
<h2>섹션 제목</h2>
<h3>하위 섹션 제목</h3>검색엔진과 스크린리더가 제목 구조를 활용합니다. 디자인은 CSS로 조절하세요.
p — 문단/텍스트 기본 블록일반 텍스트 문단을 표현합니다. 문단 사이에는 기본 여백이 생깁니다.
<p>이것은 하나의 문단입니다.</p>
<p>문단은 생각 단위를 나눌 때 사용합니다.</p>이것은 하나의 문단입니다.
문단은 생각 단위를 나눌 때 사용합니다.
a — 하이퍼링크다른 문서나 같은 페이지의 위치로 이동합니다.
<a href="https://example.com" target="_blank" rel="noopener">새 창으로 열기</a>
<a href="#p">이 문서 내의 문단 섹션으로 이동</a>img — 이미지 삽입이미지를 표시합니다. alt는 대체 텍스트로, 접근성과 SEO에 필수입니다.
아래 예시 코드는 via placeholder의 임시이미지를 사용했습니다.
<img src="https://placehold.co/200x120" alt="예시 이미지" loading="lazy" width="200" height="120">br — 줄바꿈문단을 나누지 않고 한 줄만 바꿀 때 사용합니다. 남용은 피하세요.
첫 줄<br>둘째 줄<br>셋째 줄hr — 구분선내용 사이를 논리적으로 구분할 때 사용합니다.
위 내용
<hr>
아래 내용ul — 순서 없는 목록점(bullet)으로 항목을 나열합니다.
<ul>
<li>사과</li>
<li>바나나</li>
<li>체리</li>
</ul>ol — 순서 있는 목록<ol start="3">
<li>STEP 3</li>
<li>STEP 4</li>
</ol>li — 목록 항목ul 또는 ol의 자식으로 항목 하나를 뜻합니다. 중첩 목록을 만들 수도 있습니다.
<ul>
<li>프론트엔드
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
<li>백엔드</li>
</ul>div — 블록 레이아웃 컨테이너의미 없는 영역 컨테이너입니다. 레이아웃과 그리드 구성에 자주 사용합니다.
<div class="카드">카드 레이아웃의 한 칸</div>span — 인라인 컨테이너문장 중 일부만 스타일을 다르게 주고 싶을 때 사용합니다.
<p>이 문장 중 <span style="color:#2563eb">이 부분만 파란색</span>입니다.</p>이 문장 중 이 부분만 파란색입니다.
strong — 강한 강조(의미적 중요)강조 + “중요함”의 의미를 가집니다. 스크린리더는 강한 억양으로 읽습니다.
<p>주의: <strong>비밀번호를 공유하지 마세요!</strong></p>주의: 비밀번호를 공유하지 마세요!
em — 강조/억양문맥상 억양을 주는 강조입니다. 중첩 시 더 강한 강조가 됩니다.
<p>이건 <em>정말</em> 맛있다!</p>이건 정말 맛있다!
blockquote — 인용 블록다른 사람의 말/문서를 인용할 때 사용합니다.
<blockquote>
“배우고 때로 익히면 또한 기쁘지 아니한가”
</blockquote>“배우고 때로 익히면 또한 기쁘지 아니한가”
code — 인라인 코드짧은 코드 조각을 문장 중에 표시합니다.
<p>터미널에서 <code>python app.py</code>를 실행하세요.</p>터미널에서 python app.py를 실행하세요.
pre — 서식 유지 코드/텍스트 블록공백과 줄바꿈이 그대로 유지됩니다. 종종 code와 함께 사용합니다.
<pre>
for i in range(3):
print(i)
</pre>for i in range(3):
print(i)table — 표 (tr/th/td)행(tr), 헤더 셀(th), 데이터 셀(td)로 구성됩니다.
<table>
<tr>
<th>이름</th> <th>점수</th>
</tr>
<tr>
<td>민수</td> <td>95</td>
</tr>
</table>| 이름 | 점수 |
|---|---|
| 민수 | 95 |
| 지민 | 88 |
thead/tbody/tfoot를 사용하면 구조가 더 명확해집니다.
figure/figcaption — 미디어와 설명 캡션이미지, 코드, 표 등과 그 설명을 함께 묶습니다.
<figure>
<img src="https://placehold.co/320x180" alt="샘플 썸네일">
<figcaption>도표 1. 샘플 썸네일</figcaption>
</figure>form — 입력 폼사용자 입력을 서버로 제출하는 컨테이너입니다.
<form action="/search" method="get">
<label for="q">검색어</label>
<input id="q" name="q" placeholder="예: HTML">
<button type="submit">검색</button>
</form>input — 다양한 한 줄 입력타입에 따라 동작이 달라집니다. 자주 쓰는 타입: text, email, password, number, checkbox, radio, date, file.
<label>이메일<input type="email" placeholder="you@example.com" required></label>
<label>비밀번호<input type="password" minlength="6"></label>
<label>수량<input type="number" min="1" max="5" value="1"></label>
<label><input type="checkbox" checked> 이용약관 동의</label>
장바구니:
<label><input type="radio" name="opt" value="fast" checked> 빠른배송</label>
<label><input type="radio" name="opt" value="eco"> 묶음배송</label>label을 함께 쓰면 클릭 범위가 넓어져 접근성과 사용성이 좋아집니다. 파일 업로드는 input type="file"을 사용합니다.
div 남용보다 header/nav/main/section/article/footer 같은 시맨틱 태그도 고려해 보세요.| CSS 글꼴 설정 (0) | 2025.09.30 |
|---|---|
| CSS 선택자 (0) | 2025.09.27 |
| HTML 폼태그와 입력요소들 (3) | 2025.09.24 |
| HTML 표 만들기 (table태그) (0) | 2025.09.24 |
| HTML 시멘틱 태그 (0) | 2025.09.23 |
