Text tag

텍스트 태그는 단순히 글자를 화면에 보여주는 것을 넘어, 검색 엔진이나 스크린 리더에게 이 글자가 어떤 의미인지를 알려주는 아주 중요한 역할을 합니다.

---

1. 블록 레벨 태그 (구조를 잡는 태그)

이 태그들은 한 줄을 통째로 차지하며, 글의 전체적인 흐름과 구역을 나눕니다.

• <hn> (Heading): 제목을 나타냅니다. <h1>부터 <h6>까지 있으며, 숫자가 작을수록 중요도가 높고 글자 크기도 큽니다.
• <p> (Paragraph): 본문의 문단을 나눌 때 사용합니다. 가장 많이 쓰이는 텍스트 태그입니다.
• <br> (Break): 줄 바꿈을 합니다. 닫는 태그가 없는 빈 태그입니다.
• <hr> (Horizontal Rule): 가로 구분선을 긋습니다. 주제가 바뀔 때 시각적으로 분리하는 용도입니다.
• <blockquote> (Block Quote): 긴 인용문을 나타낼 때 사용하며, 보통 들여쓰기가 적용됩니다.

---

2. 인라인 태그 (글자 스타일과 의미 강조)

문장 안에서 특정 부분의 스타일을 바꾸거나 의미를 부여할 때 사용하며, 필요한 공간만큼만 차지합니다.

💡 강조와 굵게

• <strong>: 매우 중요한 내용임을 나타냅니다. 브라우저에서는 굵게 표시되며, 검색 엔진이 핵심 키워드로 인식합니다.
• <b> (Bold): 단순히 시각적으로만 글자를 굵게 만듭니다. 특별한 의미 강조는 없습니다.

💡 강조와 기울임

• <em> (Emphasis): 문장에서 특정 단어를 강조할 때 사용합니다. 브라우저에서는 기울임꼴로 표시됩니다.
• <i> (Italic): 단순한 시각적 기울임꼴입니다. 기술적 용어나 생각 등을 나타낼 때 씁니다.

💡 출처 표기

• <cite>: 작품의 제목이나 출처(책, 영화, 노래 등)를 언급할 때 사용하며, 보통 기울임꼴로 표시됩니다.

---

🖥️ 실전 예제 코드: "작가 소개 페이지"

배운 태그들을 한데 모아 하나의 글을 구성해 보겠습니다.

HTML

 

<h1>최고의 작가, 김코딩을 소개합니다</h1>
<hr>

<p>그는 자바스크립트의 대가이며, <strong>클린 코드</strong>를 지향합니다.</p>

<blockquote>
    "코드는 사람이 읽기 위해 작성되어야 하며, <br>
    기계가 실행하는 것은 부차적인 일이다."
    <cite>- 마틴 파울러, '리팩터링' 중</cite>
</blockquote>

<p>김코딩의 <i>좌우명</i>은 <em>"오늘도 즐겁게 코딩하자"</em>입니다. <b>건강</b>도 챙기면서 말이죠.</p>

---

학습 정리

• <hn> 태그는 검색 엔진 최적화(SEO)를 위해 순서대로 사용하는 것이 좋다.
• **<strong>**과 **<em>**은 시각적 효과뿐만 아니라 의미적 강조가 포함된 태그이다.
• 단순히 예쁘게 보이려고 태그를 고르기보다, 콘텐츠의 목적에 맞는 태그를 고르는 습관을 들이자.

---

웹의 뼈대를 이루는 텍스트 태그들을 완벽히 정리하셨습니다!

---