웹 페이지를 구성할 때 텍스트는 매우 중요한 역할을 합니다. HTML5에서는 텍스트를 표현하고 의미를 부여하기 위한 다양한 태그들을 제공하고 있습니다. 이 포스팅에서는 제목, 본문, 글자 형태 등을 나타내는 주요 텍스트 태그들에 대해 자세히 알아보겠습니다.
1. 제목 (Headings) 태그
제목 태그는 문서의 구조와 내용을 명확히 하고, 검색 엔진 최적화(SEO)에도 큰 영향을 미칩니다. HTML5에서는 <h1>부터 <h6>까지 6단계의 제목 태그를 제공합니다.
<h1>가장 중요한 제목</h1>
<h2>두 번째로 중요한 제목</h2>
<h3>세 번째로 중요한 제목</h3>
<h4>네 번째로 중요한 제목</h4>
<h5>다섯 번째로 중요한 제목</h5>
<h6>여섯 번째로 중요한 제목</h6><h1> 태그가 가장 높은 단계의 제목을 나타내며, 하위 단계로 갈수록 제목의 중요도가 낮아집니다. 제목 태그는 단순히 텍스트를 크게 만드는 용도가 아니라, 문서의 구조와 내용을 잘 반영할 수 있도록 사용해야 합니다.
2. 글자 형태 (Text Formatting) 태그
HTML5에서는 텍스트의 의미와 형태를 지정하기 위한 다양한 태그들을 제공합니다.
2.1 <b>, <strong>
<b> 태그와 <strong> 태그는 모두 텍스트를 굵게 표시합니다. 하지만 <strong> 태그는 강조의 의미를 갖는 반면, <b> 태그는 단순히 시각적인 표현만을 위한 것입니다.
<p>이 텍스트는 <b>볼드체</b>입니다.</p>
<p>이 텍스트는 <strong>중요한</strong> 내용입니다.</p>2.2 <i>, <em>
<i> 태그와 <em> 태그는 모두 텍스트를 이탤릭체로 표시합니다. <em> 태그는 강조의 의미를 가지며, <i> 태그는 단순히 이탤릭체로 표시하기 위한 용도입니다.
<p>이 텍스트는 <i>이탤릭체</i>입니다.</p>
<p>이 텍스트는 <em>강조된</em> 내용입니다.</p>2.3 <mark>
<mark> 태그는 텍스트를 하이라이트 효과로 표시합니다.
<p>이 텍스트는 <mark>하이라이트</mark> 됩니다.</p>2.4 <del>, <ins>
<del> 태그는 텍스트 한가운데 라인(line)을 추가하여 문서에서 삭제된 텍스트를 표현할 때 사용합니다.
또한, <ins> 요소는 텍스트 아래쪽에 라인을 추가하여 문서에서 추가된 텍스트를 표현합니다.
이와 같이 <del> 요소와 <ins> 요소는 문서에 대한 업데이트나 수정을 표현할 때 사용하며, 브라우저는 이를 일반 텍스트에 라인을 추가하는 것으로 표현할 것입니다.
<p>이 텍스트는 <del>삭제</del><ins>추가</ins>되었습니다.</p>2.5 <sub>, <sup>
<sub> 태그는 아랫첨자(subscript) 텍스트를 표현할 때 사용합니다.
<sub> 요소 내부의 텍스트는 일반 텍스트 라인보다 아래쪽에 절반 크기의 작은 문자로 표현되며,
<sup> 태그는 윗첨자(superscript) 텍스트를 표현할 때 사용합니다.
<sup> 요소 내부의 텍스트는 일반 텍스트 라인보다 윗쪽에 절반 크기의 작은 문자로 표현되며,
<p>물의 화학식은 H<sub>2</sub>O입니다.</p>
<p>E = mc<sup>2</sup></p>3. 본문 태그
본문을 구성하는 태그들은 문서의 주요 내용을 담고 있습니다.
3.1 <p>
<p> 태그는 하나의 문단을 나타냅니다.
<p>첫 번째 문단입니다.</p>
<p>두 번째 문단입니다.</p>3.2 <br>
<br> 태그는 줄바꿈을 나타냅니다. 빈 태그(empty tag)이므로 종료 태그가 없습니다.
<p>첫 번째 줄입니다.<br>
두 번째 줄입니다.</p>3.3 <pre>
<pre> 태그는 미리 서식을 지정한 텍스트를 나타냅니다. 태그 내부의 텍스트는 작성한 그대로 브라우저에 표시됩니다.
<pre>
function test() {
console.log("Hello, world!");
}
</pre>3.4 <hr>
<hr> 태그는 수평선을 그립니다. 주제의 분리나 구획을 나타낼 때 사용합니다.
<h2>HTML</h2>
<p>HTML은 웹 페이지의 구조를 나타내는 언어입니다.</p>
<hr>
<h2>CSS</h2>
<p>CSS는 웹 페이지의 디자인을 담당하는 언어입니다.</p>3.5 <q>
<q> 태그는 짧은 인용문을 나타내는 인라인 요소입니다. 브라우저는 자동으로 인용문 앞뒤에 큰따옴표를 추가하여 표시합니다.
<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p><q> 태그는 인용문의 출처를 표시하는 cite 속성을 포함할 수 있습니다. cite 속성값은 인용문의 출처 URL을 나타냅니다.
<p>According to the <a href="https://www.worldwildlife.org/">
<cite>World Wildlife Fund</cite></a>, their goal is to:
<q cite="https://www.worldwildlife.org/about">Build a future where people live in harmony with nature.</q></p>이 예제에서는 <q> 태그의 cite 속성을 사용하여 인용문의 출처 URL을 명시하고 있습니다. 그리고 <cite> 태그를 사용하여 인용문의 출처를 텍스트로 표시하고 있습니다.
일부 브라우저(예: Safari)에서는 <q> 태그에 자동으로 큰따옴표를 추가하지 않을 수 있습니다. 이런 경우에는 CSS의 q::before와 q::after 가상 요소를 사용하여 큰따옴표를 추가할 수 있습니다.
<style>
q::before {
content: '"';
}
q::after {
content: '"';
}
</style><q> 태그는 스크린 리더와 같은 보조 기술에서 인용문을 알리는 역할을 하므로, 인용문을 나타낼 때는 <q> 태그를 사용하는 것이 좋습니다.
인용문이 여러 문단에 걸쳐 있거나 블록 레벨 요소를 포함하는 경우에는 <blockquote> 태그를 사용하는 것이 적절합니다. <q> 태그는 인라인 요소이므로 블록 레벨 요소를 포함할 수 없습니다.
3.6 <blockquote>
<blockquote> 태그는 긴 인용문을 나타냅니다. 브라우저는 인용문을 들여쓰기하여 표시합니다.
<blockquote>
<p>웹의 힘은 그것의 보편성에 있다. 장애에 구애없이 모든 사람이 접근할 수 있는 것이 필수적인 요소이다.</p>
<cite>팀 버너스리</cite>
</blockquote>4. 추가 - 태그와 관련해 알아두면 좋은 개념
4.1 시맨틱 마크업(Semantic Markup)
시맨틱 마크업이란 태그의 의미를 고려하여 적절한 태그를 사용하는 것을 말합니다. 단순히 텍스트를 표시하는 것이 아니라, 그 텍스트의 의미와 구조를 나타내는 데 적합한 태그를 선택하는 것이 중요합니다. 예를 들어, 제목에는 <h1> ~ <h6> 태그를, 단락에는 <p> 태그를, 인용문에는 <blockquote> 나 <q> 태그를 사용하는 식입니다. 시맨틱 마크업은 검색 엔진 최적화(SEO)와 접근성 향상에 도움이 됩니다.
4.2 인라인 요소와 블록 레벨 요소
HTML 요소는 인라인 요소와 블록 레벨 요소로 나눌 수 있습니다.
인라인 요소는 줄 바꿈 없이 한 줄에 나란히 표시되며,
블록 레벨 요소는 새로운 줄에서 시작하여 가용한 전체 너비를 차지합니다.
인라인 요소의 예: <a>, <strong>, <em>, <q>, <span> 등
블록 레벨 요소의 예: <p>, <div>, <h1> ~ <h6>, <ul>, <ol>, <blockquote> 등4.3 텍스트 레벨 시맨틱 요소
HTML5에서는 텍스트 레벨에서의 의미를 나타내기 위한 새로운 시맨틱 요소들이 도입되었습니다.
<time>: 날짜나 시간을 나타냅니다.
<data>: 기계가 읽을 수 있는 형태로 콘텐츠를 나타냅니다.
<output>: 계산이나 사용자 행동의 결과를 나타냅니다.
<kbd>: 키보드 입력을 나타냅니다.
<var>: 변수를 나타냅니다.
<samp>: 프로그램 출력을 나타냅니다.
<code>: 컴퓨터 코드를 나타냅니다.4.4 전역 속성(Global Attributes)
전역 속성은 모든 HTML 요소에 사용할 수 있는 공통 속성입니다. 이 중 텍스트 콘텐츠와 관련하여 유용한 속성들이 있습니다.
title: 요소에 대한 추가 정보를 제공합니다. 마우스 커서를 요소 위에 올리면 툴팁으로 표시됩니다.
lang: 요소의 언어를 명시합니다. 스크린 리더가 적절한 발음을 선택하는 데 도움이 됩니다.
dir: 텍스트의 방향을 지정합니다. (ltr: 왼쪽에서 오른쪽, rtl: 오른쪽에서 왼쪽)
contenteditable: 요소의 내용을 사용자가 편집할 수 있게 만듭니다.
spellcheck: 요소의 맞춤법 검사 여부를 지정합니다.
마치며
이상으로 HTML5의 주요 텍스트 태그들에 대해 알아보았습니다. 이 태그들을 적절히 사용하면 웹 페이지의 구조와 내용을 명확하게 나타낼 수 있고, 접근성과 SEO에도 도움이 됩니다.
텍스트 콘텐츠의 의미와 중요도에 맞는 태그를 선택하고, 문서의 구조를 잘 나타낼 수 있도록 제목과 본문 태그를 사용하는 것이 중요합니다.
다음 포스팅에서는 링크와 미디어 관련 태그에 대해 알아보도록 하겠습니다.
#HTML #HTML5 #웹개발 #프론트엔드 #텍스트태그 #마크업 #제목태그 #글자형태태그 #본문태그
