HTML 텍스트 관련 태그

📌 `<hn>` 태그 (제목 태그)

✅ 제목을 나타내는 태그 (heading)
✅ h1 ~ h6 사용 (1이 가장 크고 중요, 6이 가장 작고 덜 중요)
✅ 검색 엔진이 문서 구조를 인덱싱할 때 활용
✅ 브라우저가 제목 앞뒤에 자동으로 여백 추가

<h1>가장 중요한 제목</h1>
<h2>두 번째로 중요한 제목</h2>
<h3>세 번째로 중요한 제목</h3>

✅ 텍스트 단락(문단)을 만드는 태그
✅ 단락은 항상 새 줄에서 시작되며, 브라우저가 자동으로 공백 추가

<p>첫 번째 단락입니다.</p>
<p>두 번째 단락입니다.</p>

✅ 새 단락을 시작하지 않고 줄 바꿈을 원하는 경우 사용
✅ 닫는 태그 없이 단독으로 사용 가능
✅ XHTML에서는  처럼 닫는 태그를 붙이는 것이 필수

<p>첫 번째 문장입니다.<br>두 번째 문장입니다.</p>

✅ 텍스트 일부를 스타일링하기 위한 인라인 컨테이너
✅ 특정 부분만 CSS 스타일 적용 가능

<p>이 문장 중 <span style="color:red;">이 부분</span>만 빨간색입니다.</p>

✅ 인용할 때 사용하는 태그
✅ 브라우저에서 자동으로 들여쓰기 적용
✅ 스크린 리더 사용 시 다른 텍스트와 구분하여 읽음

<blockquote>이것은 인용문입니다.</blockquote>

✅  태그 → 경고 OR 중요한 내용을 강조 (화면 낭독기에서도 강조됨)
✅  태그 → 단순히 글자를 굵게 표시할 때 사용

<strong>경고: 이 내용은 중요합니다!</strong>
<b>이 부분은 단순히 굵게 표시됩니다.</b>

✅  태그 → 문장에서 특정 부분을 강조 (화면 낭독기에서도 강조됨)
✅  태그 → 단순한 시각적 구분을 위해 기울이기 적용

<em>이 문장은 강조됩니다.</em>
<i>이 문장은 단순히 기울여집니다.</i>

태그	설명	예시
`<abbr>`	줄임말 표시 (`title` 속성 사용 가능)	`<abbr title="HyperText Markup Language">HTML</abbr>`
`<cite>`	웹 문서, 포스트 참고 내용	`<cite>HTML MDN 문서</cite>`
`<code>`	소스 코드 표시 (고정폭 글꼴)	`<code>function saveData()</code>`
`<small>`	작은 글씨로 표시	`<p>가격: 23,000원 <small>(부가세 별도)</small></p>`
`<sub>`	아래 첨자 표시	`<p>물의 화학식은 H<sub>2</sub>O입니다.</p>`
`<sup>`	위 첨자 표시	`<p>E = mc<sup>2</sup></p>`
`<s>`	취소선 표시	`<p><s>34,000원</s> 23,800원</p>`
`<u>`	밑줄 표시	`<u>밑줄이 있는 텍스트</u>`
`<ins>`	새로운 내용 삽입	`<ins>이 문장은 추가된 내용입니다.</ins>`
`<del>`	기존 내용 삭제	`<del>이 문장은 삭제된 내용입니다.</del>`

✔ HTML 태그 정리! 🚀