HTML 과 Tag 간단 정리

최홍식·2025년 8월 10일

HTML(HyperText Markup Language)

HTML 은 웹 페이지의 구조를 정의하는 마크업 언어입니다.

하이퍼 텍스트(HyperText)

하이퍼 텍스트란 다른 문서나 웹 페이지로 연결되는 텍스트를 의미합니다. 흔히 어떤 텍스트를 누르면 특정 링크로 이동되는 것을 볼 수 있는데, 이걸 하이퍼 텍스트라고 합니다.

아래 예시의 MDN HTML 문서를 클릭하면, 특정 페이지로 이동되는 걸 확인할 수 있습니다.

더 자세한 정보는 MDN HTML 문서에서 확인하세요.
실제 HTML 로 작성된 코드는 아래와 같습니다.

// HTML 작성 예시
<p>더 자세한 정보는 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML">MDN HTML 문서</a>에서 확인하세요.</p>

정보의 연결성

하이퍼텍스트 덕분에 웹은 단순한 문서의 모음이 아닌 정보가 서로 연결된 네트워크로 형성될 수 있습니다.

💡 웹의 뼈대는 하이퍼 텍스트다 !
최초에 웹을 만든 팀 버너스 리는 문서들을 서로 연결하는 방식으로 웹을 구상했고, 하이퍼텍스트는 이 아이디어의 뼈대입니다.

마크업(Markup)

마크업은 텍스트에 의미나 구조를 부여하는 표시를 말합니다.

평범한 텍스트에 “이건 제목이야”, “이건 문단이야”, “이건 이미지야” 등 의미를 부여해서 브라우저가 이해할 수 있도록 만드는 것입니다.

마크업 예시

아래 예시에서 <h1> 은 “이건 제목(heading)이야 !” 라고 알려주는 마크업 태그라고 합니다.

<h1>이건 제목이야</h1>

이처럼 마크업은 평범한 텍스트에 태그라는 것으로 감싸면 의미를 갖는 텍스트가 됩니다.

태그 (Tag)

태그는 위에서 설명한 것 처럼 콘텐츠를 감싸서 의미를 정의하는 것입니다.

태그의 종류

쌍태그 (Paired Tags)

쌍 태그는 두 개의 태그로 하나의 콘텐츠를 감싸는 구조입니다.

<p>문단 내용</p>

<p> : 열림 태그 (Opening Tag) - 태그의 시작
문단 내용 : 콘텐츠 - 사용자에게 보여지는 정보
</p> : 닫힘 태그 (Closing Tag) - 태그의 끝
- 태그 이름 앞에 / 가 붙으면 닫는 것을 의미합니다.

빈 태그 / 단일 태그 (Self-closing Tags)

단일 태그는 콘텐츠를 감싸지 않고, 열림 태그만 있고 닫힘 태그는 없는 구조입니다.

<img src="cat.jpg" alt="고양이 사진"> // 이 태그 하나로 이미지를 삽입하는 역할을 한다.
<br>
<hr>
<input type="text">

쌍태그와 달리, 콘텐츠 없이 태그 하나만으로 의미를 전달합니다. 이런 태그들은 태그 자체에 의미가 부여되어 있고, 콘텐츠가 필요하지 않습니다.

💡 빈 요소(Void Elements)
콘텐츠를 포함하지 않고, 태그 자체로 의미가 있는 요소를 의미합니다.
- 콘텐츠가 없기 때문에 불필요한 닫힘 태그는 생략됩니다.
- MDN 참고 링크

자주 사용하는 태그

태그	의미	예시
`<h1>`~`<h6>`	제목 (숫자가 작을수록 중요)	`<h1>`제목`</h1>`
`<p>`	문단	`<p>`문단입니다`</p>`
`<a>`	하이퍼링크	`<a href=https://www.naver.com>네이버로 이동하기</a>`
`<img>`	이미지	`<img src="img.jpg" alt="이미지">`
`<ul>`, `<li>`	리스트 (순서 없음)	`<ul>` `<li>`아이템`</li></ul>`
`<div>`	구역 (의미 없음)	`<div>묶음</div>`
`<span>`	인라인 요소 묶음	`<span>강조</span>`

요소 (Element)

요소는 태그가 콘텐츠를 감싸면서 의미를 부여한 하나의 단위입니다. 기본적으로 열림 태그 + 콘텐츠 + 닫힘 태그로 구성되며, 이 전체 구조를 요소라고 부릅니다.

<p>나는 문단입니다.</p>

또한 콘텐츠가 필요 없는 단일 태그도 하나의 요소로 간주됩니다.

<input type="text">

요소의 중첩 (Elements Nesting)

HTML 요소는 또 다른 요소를 내부에 포함할 수 있습니다. 이를 중첩이라고 하며, 올바른 순서로 열고 닫는 것이 굉장히 중요합니다.

<p>문단 중 <strong>강조된 내용</strong>이 있습니다.</p>

<strong> 요소는 <p> 요소 안에 중첩되어 있습니다.
중첩된 태그는 열린 순서의 역순으로 닫아야 합니다.

아무 태그나 막 중첩할 수 있을까?

HTML에서는 콘텐츠 카테고리에 따라, 어떤 요소 안에 어떤 태그를 사용할 수 있는지가 명확히 정의되어 있습니다.

예를 들면, 아래와 같이 <ul> 태그 안에는 반드시 <li> 태그만을 사용할 수 있습니다.

<ul>
  <li>항목1</li>
  <li>항목2</li>
</ul>

만약, 아래와 같이 코드를 작성한다면 HTML 문법 오류가 발생합니다.

<ul>
  <p>문단</p>  <!-- ❌ ul 안에는 p 불가 -->
</ul>

이번 글에서는 간단하게 이런게 있다는 것 정도만 인지해 주시고, 콘텐츠 카테고리와 관련된 내용은 따로 글을 작성하도록 하겠습니다.

💡HTML 콘텐츠 카테고리란?
HTML 요소는 단순히 나열만 하는 것이 아니라, 어떤 종류의 콘텐츠인지, 어디에 사용해야 하는지에 따라 정해진 카테고리로 분류됩니다.

의미 있고 문법적으로 올바른 HTML을 작성하기 위해서는 이 카테고리 구분을 정확히 이해하는 것이 매우 중요합니다.
- MDN 참고 링크