HTML 태그의 종류와 사용법

HTML에서는 다양한 태그들을 사용하여 웹 페이지의 내용과 구조를 만들어갑니다. 몇 가지 기본적인 태그들과 그 사용법을 살펴보겠습니다.

 

•  1. 제목 태그 (<h1> ~ <h6>): 웹 페이지의 제목이나 부제목을 나타내기 위해 사용되며, <h1>이 가장 크고 중요한 제목을 나타내고, <h6>까지 갈수록 작아집니다.

<h1>메인 제목</h1>
<h2>부제목</h2>
<h3>소제목</h3>

이를 코드를 브라우저를 통해 보면 다음과 같이 생성됩니다.

 

H1 태그 사용 예시

• 단락 태그 (<p>): 텍스트를 단락으로 구분하여 표시할 때 사용합니다

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

예시 코드를 작성하여 브라우저를 통해 보면 다음과 같이 생성됩니다.

 

p 태그 사용 예시

• 목록 태그 (<ul> & <ol>): 순서가 없는 목록(<ul>)과 순서가 있는 목록(<ol>)을 만들 때 사용합니다. 각각의 항목은 <li> 태그로 표시합니다.

<ul>
  <li>사과</li>
  <li>바나나</li>
  <li>딸기</li>
</ul>

<ol>
  <li>첫 번째 항목</li>
  <li>두 번째 항목</li>
  <li>세 번째 항목</li>
</ol>

예시 코드를 작성하여 브라우저를 통해 보면 다음과 같이 생성됩니다.

 

ul, ol, li 태그 사용 예시

• 테이블 태그 (<table>): 표를 만들기 위해 사용되며, <tr>로 행을 나타내고, <th>로 열 제목을 나타내고, <td>로 셀의 내용을 나타냅니다.

<table>
  <tr>
    <th>이름</th>
    <th>나이</th>
  </tr>
  <tr>
    <td>홍길동</td>
    <td>25</td>
  </tr>
  <tr>
    <td>김철수</td>
    <td>30</td>
  </tr>
</table>

예시 코드를 작성하여 브라우저를 통해 보면 다음과 같이 생성됩니다.

Table, tr, th, td 태그 사용 예시

• 링크 태그 (<a>): 웹 페이지에서 다른 페이지로 이동할 수 있는 하이퍼링크를 생성합니다. href 속성에 이동할 주소를 지정합니다.

<a href="https://www.example.com">예시 웹사이트로 이동</a>

예시코드를 사용하면,

a 태그 사용 예시

지금까지 HTML에서 가장 기본이 되는 태그들을 살펴보았습니다. 수 많은 그리도 다양한 종류의 웹사이트들이 존재하지만 결국에는 이러한 기본적인 태그들을 바탕으로 이루어진다고 할 수 있습니다. 태그들을 외우려고 하기 보다는 이러한 태그들이 있다는 정도만 알고 있으면서, 여러가지 HTML 문서들을 접하다보면 자연스럽게 숙지 될 내용이기 때문에 가볍게 읽고 넘기셔도 좋을 것 같습니다.