[ h1~h6 ]
- 6단계의 제목(heading) 태그
- h1이 가장 크고 h6이 가장 작음
- 검색엔진이 heading을 페이지 구조로 인식
<h1>제목 1</h1>
<h2>제목 2</h2>
<h3>제목 3</h3>
⚠️ 주의사항
- 글자 크기/두께 목적으로 사용 금지 → CSS font-size 사용
- h1은 문서 내에 하나만 사용 권장
- 계층 순서를 지켜야 함 (h1 → h2 → h3 순서)
[ p, hr, br ]
- <p> : 문단 나눔, 문단과 문단 사이에 빈 줄 생성
- <br> : 단순 줄바꿈, 문단 구분 아님
- <hr> : 수평선 삽입
- <!-- 주석 --> : 화면에 표시되지 않음, 주석 안에 또 다른 주석 금지
<p>문단 내용</p>
<br>
<hr width="80%" size="2" noshade align="left">
<!-- 이것은 주석 -->
[ formatting ]
| 태그 |
설명 |
| <b> |
굵게 (시각적 표현만, 의미 없음) |
| <strong> |
굵게 + 의미적 강조 (권장) |
| <i> |
기울임 |
| <em> |
기울임 + 의미 강조 |
| <big> |
크게 |
| <small> |
작게 |
| <sub> |
아래 첨자 |
| <sup> |
위 첨자 |
| <mark> |
형광펜 강조 효과 (HTML5) |
| <code> |
코드 표현 |
| <kbd> |
키보드 입력 표현 |
| <address> |
주소 (이탤릭체로 표시) |
[ 목록 (Lists) ]
1. ul (비순차 목록)
- Unordered List, 순서 없는 목록
- type 속성으로 글머리표 지정 (disc, circle, square)
- <ul> 태그의 속성으로 사용되면 목록 전체에 영향, <li> 태그에 사용되면 해당 항목에만 영향
<ul type="disc|circle|square">
<li>항목1</li>
<li type="circle">항목2</li>
</ul>
2. ol (순차 목록)
| 속성 |
설명 |
| type |
글머리 종류 지정 (1, A, a, I, i) |
| start |
시작 번호 지정 (<ol>에서 사용) |
| value |
특정 항목의 번호 지정 (<li>에서 사용) |
<ol type="A" start="3">
<li>항목1</li>
<li value="5">특정 번호 지정</li>
</ol>
3. dl (정의 목록)
- Definition List, 단어와 그 의미를 표현
- <dt> : 정의 용어 (Definition Term)
- <dd> : 정의 설명, 들여쓰기 됨 (Definition Description)
<dl>
<dt>HTML</dt>
<dd>Hyper Text Markup Language</dd>
<dt>WWW</dt>
<dd>World Wide Web</dd>
</dl>
[ a (Anchor) ]
<a href="http://www.naver.com" target="_blank">네이버</a>
| 속성 |
설명 |
| href |
연결될 주소 (필수 속성) |
| target |
링크가 열릴 위치 |
1) target 속성값
| 값 |
설명 |
| _blank |
새 탭(창)에서 열기 |
| _self |
현재 프레임에서 열기 (기본값) |
| _top |
모든 프레임 취소 후 열기 |
| _parent |
상위 프레임에서 열기 |
2) Named Anchor - 문서 내 특정 위치로 이동
- <a name="label"> 으로 문서 내 위치 지정
- <a href="#label"> 으로 해당 위치로 이동하는 링크 지정
<!-- 이동 목적지 지정 -->
<p id="chapter1">1장 시작</p>
<!-- 해당 위치로 이동하는 링크 -->
<a href="#chapter1">1장으로 이동</a>
<a href="#top">맨 위로</a>
[ 구조적 요소 (Semantic Tags) ]
- HTML4의 <div id="header"> 방식 → HTML5의 의미 있는 태그로 대체
- 문서 구조를 명확하게 하고 검색엔진, 스크린 리더가 구조를 파악할 수 있음
| 태그 |
설명 |
| <header> |
페이지/섹션의 머릿글 (로고, 내비, 검색창 등), 1회 이상 사용 가능 |
| <footer> |
페이지/섹션의 바닥글 (저작권, 관련 링크 등) |
| <nav> |
내비게이션 링크 모음 (주메뉴, 퀵메뉴 등) |
| <section> |
논리적 영역 구분, 여러 <article>로 구성 가능 |
| <article> |
독립적으로 완결된 개별 컨텐츠 (하나의 글, 기사 등) |
| <aside> |
메인 컨텐츠와 별도의 부가 컨텐츠 (광고, 사이드바 등) |
<header>
<nav>...</nav>
</header>
<section id="content">
<article>...</article>
<article>...</article>
</section>
<footer>...</footer>
[ 텍스트 및 기타 요소 ]
| 요소 |
설명 |
| <mark> |
형광펜 강조 효과 |
| <ruby> / <rt> |
한자 위에 발음 표시 (루비 텍스트) |
| <time> |
날짜/시간을 기계가 읽을 수 있게 인코딩 |
| <figure> / <figcaption> |
이미지 + 캡션을 명시적으로 묶음 |
| <details> / <summary> |
접기/펼치기 토글 영역 |
| <datalist> |
입력 필드에 자동완성 후보 제공 |
<!-- mark -->
<p><mark>형광펜 강조</mark> 효과</p>
<!-- ruby -->
<ruby>大<rt>대</rt>韓<rt>한</rt></ruby>
<!-- time -->
<time datetime="2024-03-09">2024년 3월 9일</time>
<!-- figure -->
<figure>
<img src="photo.jpg">
<figcaption>사진 설명</figcaption>
</figure>
<!-- details -->
<details open>
<summary>복사중...
<progress max="100" value="15">15%</progress>
</summary>
<dl>
<dt>초당 전송량:</dt><dd>867Kb/s</dd>
</dl>
</details>
<!-- datalist -->
<label>도시 이름 <input list="cities"></label>
<datalist id="cities">
<option value="Seoul">
<option value="Busan">
</datalist>
[ table ]
- 테이블(표)을 표시할 때 사용
- border 속성 기본값은 0, 테두리를 보이게 하려면 1 이상 지정
1. 내부 요소
| 태그 |
설명 |
| <caption> |
표의 제목 |
| <thead> / <tbody> / <tfoot> |
헤더 / 본문 / 푸터 구분 |
| <tr> |
행 (Table Row) |
| <td> |
데이터 셀 (Table Data) |
| <th> |
제목 셀, 굵게 표시됨 (Table Heading) |
2. 속성
| 속성 |
설명 |
| border |
테두리 두께 |
| width |
표 너비 |
| cellspacing |
셀 간 간격 |
| cellpadding |
셀 내부 여백 |
| align |
정렬 |
| bgcolor |
배경색 |
| colspan |
가로 방향 셀 합치기 |
| rowspan |
세로 방향 셀 합치기 |
<table border="1" cellspacing="0" cellpadding="5" style="border-collapse:collapse">
<caption>표 제목</caption>
<thead>
<tr>
<th>이름</th>
<th>나이</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">가로 셀 합치기</td>
</tr>
<tr>
<td rowspan="2">세로 셀 합치기</td>
<td>데이터</td>
</tr>
</tbody>
</table>