HTML 기본태그 정리 | 백과 블로그

CSSHTML

HTML 기본태그 정리

Hyper Text Markup Language(HTML) 에서 사용하는 기본 태그 정리하기

백과

2026년 5월 31일

목차

🏷️ HTML 기본 태그 정리

들어가기

웹 문서를 만들때 사용하는 기본 태그를 정리합니다.

ℹ️Info

본 문서는 HTML5 버전을 기준으로 설명하지만, 대부분 호환 가능합니다.

✒️ 글꼴 태그

HTML에서 글꼴을 변경하는 방법은 CSS를 사용하는 것이 표준입니다.

예전에는 <font> 태그를 사용했지만, 현재 웹 표준(HTML5)에서는 지원하지 않으므로 CSS 스타일 속성을 활용해야 합니다. 참고 링크

Heading 태그

웹 페이지의 제목 또는 부제목 등을 나타낼때 사용합니다.

보통 H1, H2 와 같이 표기하며, 숫자가 작을 수록 큰 제목을 의미합니다.

즉, H1 은 제목을, H2는 부제목을 H3는 단락 등을 의미할 수 있습니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>제목</h1>
    <h2>부제목</h2>
    <p>문단입니다.</p>
  </body>
</>

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p>안녕하세요 백과 블로그 입니다.</p>
    <p>저는 다양한 기술을 학습하고 블로그를 통해 지식을 공유하고자 합니다.</p>
    <p>많관부!!</p>
  </body>
</html>

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p>위 내용과 아래 내용은 같은</p>
    <hr />
    <p>구분됩니다.</p>
  </body>
</html>

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p>위 내용과 아래 내용은 같은</p>
    <br />
    <p>띄워쓰기로 구분됩니다.</p>
  </body>
</html>

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p>내용중 일부를 다음과 같이 <i>Italic</i> 하게 표기할 수 있습니다.</p>
    <p>em 태그 또한 <em>Italic</em> 하게 표기할 수 있습니다.</p>
  </body>
</html>

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p>b태그를 사용하여 일부 <b>텍스트를 강조</b>할 수 있습니다.</p>
    <p>strong 태그 또한 일부 <strong>텍스트를 강조</strong>할 수 있습니다.</p>
  </body>
</html>

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ol>
      <li>First item</li>
      <li>Second item</li>
      <li>Third item</li>
    </ol>
    <hr />
    <ol type="A">
      <li>First item</li>
      <li>Second item</li>
      <li>Third item</li>
    </ol>
  </body>
</html>

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul style="list-style-type: square">
      <li>첫 번째</li>
      <li>두 번째</li>
    </ul>
  </body>
</html>

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <dl>
      <dt>자바 (Java)</dt>
      <dd>객체 지향 프로그래밍 언어입니다.</dd>

      <dt>스프링 부트 (Spring Boot)</dt>
      <dd>자바 기반의 웹 프레임워크입니다.</dd>
    </dl>
  </body>
</html>

🔥Danger

🚨 주의사항

<dl> 태그는 하나 이상의 <dt>-<dd> 쌍의 태그를 갖고 있어야 한다.

단, <dt>-<dd> 태그가 반드시 하나의 짝으로 지어져야 하는 것은 아니다. 예, 다음과 같은 짝으로도 올 수 있다.

<dl>
	<dt>종류<dt>
	<dd>벤치프레스<dd>
	<dd>(가슴운동)<dd>
</dl>
<dl>
	<dt>벤치프레스<dt>
	<dt>(가슴운동)<dt>
	<dd>헬스의 3대 운동중 하나도 가슴 부위를 발달 시키는 운동이다.<dd>
</dl>

`<li>`, `<dt>-<dd>`태그는 밖에서 독립적으로 사용할 수 없다.

`<ul>` 태그 하위요소로는 `<li>`태그가 위치해야 한다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <table border="1">
      <tr>
        <th>기술 스택</th>
        <th>역할</th>
      </tr>
      <tr>
        <td>Java / Spring Boot</td>
        <td>백엔드 개발</td>
      </tr>
      <tr>
        <td>Next.js</td>
        <td>프론트엔드 개발</td>
      </tr>
    </table>
  </body>
</html>

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <table border="1">
      <caption>
        개발팀 프로젝트 인원 현황
      </caption>

      <thead>
        <tr>
          <th>구분</th>
          <th>담당자</th>
          <th>인원수</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>백엔드</td>
          <td>홍길동 외 2명</td>
          <td>3명</td>
        </tr>
        <tr>
          <td>프론트엔드</td>
          <td>이영희 외 1명</td>
          <td>2명</td>
        </tr>
      </tbody>

      <tfoot>
        <tr>
          <td colspan="2">총원</td>
          <td>5명</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>