텍스트와 문단 구성
웹 페이지의 핵심은 결국 "글(Text)"입니다. 마치 워드 프로세서(한글, 워드)에서 글씨 크기를 키우고, 굵게 만들고, 밑줄을 치는 것처럼 HTML에서도 글의 의미에 맞게 태그를 입혀주어야 합니다.
🪆 러시아 인형(마트료시카) 구조의 제목
<h1> 책 제목 (가장 큼)
<h2> 대단원 (h1의 하위 주제)
<h3> 소단원 (h2의 하위 주제)
단순히 글자를 크게 키우기 위해 h1을 남발하면 안 됩니다! 반드시 책의 목차처럼 논리적인 순서(h1 하위 계층에 h2, h2 하위 계층에 h3)를 지켜야 검색 엔진이 글을 잘 읽어갑니다.
- h1~h6 태그: 책의 제목과 목차에 해당합니다.
<h1>은 책의 제목이므로 한 페이지에 하나만 쓰는 것이 좋습니다. - p 태그: 책의 본문 문단(Paragraph)입니다. 내용이 끝날 때마다 p로 묶어주어야 줄바꿈이 일어납니다.
- strong 태그: 형광펜으로 밑줄을 긋는 것과 같습니다. 스크린 리더도 이 부분을 특히 강하게 억양을 주어 읽어줍니다.
| 태그명 | 주요 속성 | 설명 |
|---|---|---|
<h1> ~ <h6> | - | 제목(Heading)을 나타내며, h1이 가장 크고 중요합니다. |
<strong> | - | 의미론적으로 매우 중요한 텍스트를 굵게 표시합니다. (웹 접근성 측면에서 스크린 리더가 강하게 읽어줌) |
<b> | - | 단순히 시각적으로만 텍스트를 굵게 표시합니다. (과거 방식이며, 특별한 중요성이 없는 경우에만 사용) |
<em> | - | 의미론적으로 *강조(억양)*할 텍스트를 기울임꼴로 표시합니다. |
<i> | - | 단순히 시각적으로만 텍스트를 *기울임꼴*로 표시합니다. (최근에는 아이콘 폰트를 넣는 관례적 용도로 많이 쓰임) |
<br> | - | 강제로 줄바꿈(Line Break)을 합니다. (닫는 태그 없음) |
<h1>메인 제목</h1>
<h2>서브 제목</h2>
<p>이것은 하나의 완전한 단락(문단)입니다.</p>
<p>
텍스트 안에서 <strong>중요한 단어</strong>나
<em>강조할 억양</em>을 표시할 때 사용합니다.
</p>
줄을 바꿀 때는<br>이렇게 합니다.
<hr>
<p>
<span class="highlight">특정 부분만</span> CSS로 꾸밀 수도 있습니다.
</p>