HTML 기본 태그 완벽 가이드: p, h, br, hr, div, span 활용법

 HTML은 웹 페이지의 뼈대를 구성하는 마크업 언어입니다. 이 글에서는 웹 페이지 제작의 기본이 되는 <p>, <h1>~<h6>, <br>, <hr>, <div>, <span> 태그의 활용법을 예시와 함께 자세히 알아보겠습니다.

1. <p> 태그: 단락을 나누는 마법

<p> 태그는 문단을 구분할 때 사용합니다. 브라우저는 <p> 태그로 감싸진 텍스트를 하나의 단락으로 인식하고, 자동으로 위아래에 공백을 추가하여 가독성을 높여줍니다.

<p>
  HTML은 웹 페이지를 만드는 데 사용되는 기본적인 언어입니다. 이 언어를 사용하면 텍스트, 이미지, 링크 등 다양한 콘텐츠를 웹 페이지에 표시할 수 있습니다.
</p>
<p>
  HTML은 배우기 쉽고 사용하기 간편한 언어입니다. 웹 개발에 관심이 있다면 HTML을 배우는 것이 좋습니다.
</p>

 

결과

HTML은 웹 페이지를 만드는 데 사용되는 기본적인 언어입니다. 이 언어를 사용하면 텍스트, 이미지, 링크 등 다양한 콘텐츠를 웹 페이지에 표시할 수 있습니다.

HTML은 배우기 쉽고 사용하기 간편한 언어입니다. 웹 개발에 관심이 있다면 HTML을 배우는 것이 좋습니다.

 

 

---

 

2. <h1>~<h6> 태그: 제목의 중요도를 나타내는 마법

<h1>부터 <h6>까지의 태그는 제목을 표시할 때 사용합니다. <h1>은 가장 중요한 제목을, <h6>은 가장 덜 중요한 제목을 나타냅니다. 검색 엔진은 이 태그들을 통해 웹 페이지의 구조와 내용을 파악합니다.

<h1>HTML 기본 태그 배우기</h1>
<h2>1. `p` 태그</h2>
<h3>단락 나누기</h3>

 

결과

 

---

 

3. <br> 태그: 줄바꿈을 위한 마법

<br> 태그는 줄을 바꿀 때 사용합니다. 단락을 나누는 <p> 태그와 달리, <br> 태그는 단순히 줄만 바꿉니다.

<p>
  HTML은<br>
  웹 페이지를 만드는 데<br>
  사용되는 언어입니다.
</p>

 

결과

HTML은
웹 페이지를 만드는 데
사용되는 언어입니다.

 

 

---

 

4. <hr> 태그: 구분선을 긋는 마법

<hr> 태그는 수평선을 그어 내용을 구분할 때 사용합니다.

<p>HTML 기본 태그</p>
<hr>
<p>CSS 기본 속성</p>

 

결과

HTML 기본 태그

---

CSS 기본 속성

 

 

---

 

5. <div> 태그: 영역을 나누는 마법

<div> 태그는 웹 페이지를 여러 영역으로 나눌 때 사용합니다. <div> 태그 자체는 눈에 보이지 않지만, CSS를 이용하여 스타일을 지정하면 웹 페이지 레이아웃을 구성하는 데 유용하게 활용할 수 있습니다.

<div style="background-color: lightgray;">
  <h2>HTML</h2>
  <p>웹 페이지의 구조를 담당합니다.</p>
</div>
<div style="background-color: lightblue;">
  <h2>CSS</h2>
  <p>웹 페이지의 스타일을 담당합니다.</p>
</div>

 

결과

HTML

웹 페이지의 구조를 담당합니다.

CSS

웹 페이지의 스타일을 담당합니다.

 

 

---

 

6. <span> 태그: 텍스트 일부를 꾸미는 마법

<span> 태그는 텍스트의 특정 부분에 스타일을 적용할 때 사용합니다. <span> 태그 자체는 눈에 보이지 않지만, CSS를 이용하여 스타일을 지정하면 텍스트의 일부분만 다른 색상이나 폰트로 표시할 수 있습니다.

<p>
  HTML은 <span style="color: blue;">웹 페이지</span>를 만드는 데 사용되는 언어입니다.
</p>

 

결과

HTML은 웹 페이지를 만드는 데 사용되는 언어입니다.

 

 

---

 

마무리

지금까지 HTML의 기본 태그인 <p>, <h1>~<h6>, <br>, <hr>, <div>, <span>의 활용법을 알아보았습니다. 이 태그들을 잘 활용하면 웹 페이지의 구조를 논리적으로 구성하고 가독성을 높일 수 있습니다.

 

 

HTML 순서대로 배우기