텍스트 및 문단

텍스트와 문단 구성

웹 페이지의 핵심은 정보 전달(텍스트)입니다. HTML은 단순한 글자를 넘어 제목, 문단, 강조, 줄바꿈 등 글의 구조와 의미를 부여하는 다양한 텍스트 태그를 제공합니다.

HTML Text and Paragraph Structure Concept

1. 텍스트 태그 체계 시각화

가장 자주 쓰이는 제목, 문단, 그리고 인라인 강조 태그들의 형태를 보여줍니다.

2. 텍스트 관련 태그 요약

태그	설명
`<h1> ~ <h6>`	제목(Heading)을 나타냅니다. 숫자가 작을수록 큰 제목입니다. SEO에 매우 중요합니다.
`<p>`	문단(Paragraph)을 나눕니다. 태그 위아래로 약간의 여백이 자동으로 생성됩니다.
`<br>`, `<hr>`	`<br>`은 단순 줄바꿈(Enter)이며, `<hr>`은 주제 전환을 의미하는 수평선(가로줄)을 긋습니다.
`<strong>`, `<em>`	문장 내에서 중요성을 강조할 때 사용합니다. (strong=굵게, em=기울임)

3. 텍스트 태그 실습

검색 엔진이 좋아하는 구조적인 마크업 작성 방법을 확인해 보세요.

<div class="content-box"> <h1>웹 접근성과 SEO</h1> <hr> <p> 검색 엔진 봇은 웹사이트를 스캔할 때 <strong>글씨 크기가 아닌 태그의 종류</strong>를 보고 문서의 구조를 파악합니다.<br> 따라서 단순히 폰트를 키운 <span>보다 <h1> 태그를 사용하는 것이 훨씬 <mark>효율적</mark>입니다. </p> <h2>주의할 점</h2> <p> 디자인적인 이유만으로 <em><h1></em>을 남용하지 마세요. 한 페이지에는 가급적 하나의 <h1>만 존재하는 것이 좋습니다. </p> </div>

태그

설명

<h1> ~ <h6>

제목(Heading)을 나타냅니다. 숫자가 작을수록 큰 제목입니다. SEO에 매우 중요합니다.

<p>

문단(Paragraph)을 나눕니다. 태그 위아래로 약간의 여백이 자동으로 생성됩니다.

<br>, <hr>

<br>은 단순 줄바꿈(Enter)이며, <hr>은 주제 전환을 의미하는 수평선(가로줄)을 긋습니다.

<strong>, <em>

문장 내에서 중요성을 강조할 때 사용합니다. (strong=굵게, em=기울임)