[HTML] 03. 태그(Tag)의 문법 구조 완전 이해

HTML은 태그(Tag)로 구성된 언어입니다.
HTML을 이해한다는 것은 결국 태그의 구조와 원리를 이해하는 것입니다.

이번 글에서는 단순 사용법이 아니라,
왜 이런 문법을 가지는지, 그리고 브라우저는 이를 어떻게 해석하는지까지 알아보겠습니다.

1. 태그의 기본 형태


<태그이름> 내용 </태그이름>

HTML 태그는 기본적으로 다음 3가지 요소로 구성됩니다.

① 여는 태그 (Opening Tag)
② 내용 (Content)
③ 닫는 태그 (Closing Tag)

예시


<p>안녕하세요</p>

여기서

→ 문단 시작
안녕하세요 → 텍스트 노드
→ 문단 종료

이 전체를 하나의 요소(Element)라고 부릅니다.

2. 태그 vs 요소(Element) 차이

많이 헷갈리는 부분입니다.

태그(Tag) → 또는
요소(Element) → 내용 전체

실무에서는 “태그”와 “요소”를 구분해서 이해하는 것이 좋습니다.

3. 속성(Attribute)의 구조

태그는 추가 정보를 가질 수 있습니다.
이를 속성(Attribute)이라고 합니다.


<태그이름 속성이름="값">

예시 ① 링크


<a href="https://google.com">구글</a>

a → 앵커(링크) 태그
href → 이동할 주소

예시 ② 클래스 속성


<p class="text-red">내용</p>

class는 CSS에서 스타일을 지정할 때 사용됩니다.

4. 닫는 태그가 없는 요소 (빈 요소)

모든 태그가 닫는 태그를 가지는 것은 아닙니다.


<br>
<hr>
<img>
<meta>
<input>

이들은 내용이 없기 때문에 빈 요소(Empty Element)라고 합니다.

5. 태그의 중첩(Nesting) 구조

HTML은 태그 안에 또 다른 태그가 들어갈 수 있습니다.


<p>
  이것은 <strong>중요</strong>합니다.
</p>

중첩 구조는 반드시 안쪽부터 닫아야 합니다.

❌ 잘못된 예


<p><strong>텍스트</p></strong>

브라우저는 자동으로 수정하려고 시도하지만, 예상과 다르게 렌더링될 수 있습니다.

6. 브라우저 내부 동작 (DOM 생성 과정)

브라우저는 HTML을 읽으면서 DOM 트리를 생성합니다.


<body>
  <h1>제목</h1>
  <p>문단</p>
</body>

DOM 트리는 다음과 같이 구성됩니다.


body
 ├── h1
 │     └── "제목"
 └── p
       └── "문단"

JavaScript는 이 DOM을 조작하여 화면을 변경합니다.

7. 실행 결과 (Output)


<p>
  이것은 <strong>중요</strong>합니다.
</p>

이것은 중요합니다.

8. 핵심 정리

HTML은 태그 기반 언어이다
요소(Element)는 여는 태그 + 내용 + 닫는 태그 전체이다
속성(Attribute)은 추가 정보를 제공한다
HTML은 계층 구조(DOM 트리)로 해석된다
중첩 순서를 반드시 지켜야 한다

이 구조를 이해하면, 이후 CSS와 JavaScript가 훨씬 쉬워집니다.

'Computer Science > HTML' 카테고리의 다른 글

[HTML] 06. 목록(List) 태그 완전 정리 (ul, ol, li) (0)	2026.02.07
[HTML] 05. 텍스트(글자) 관련 태그 완전 정리 (0)	2026.02.07
[HTML] 04. 블록 요소 vs 인라인 요소 완전 정리 (0)	2026.02.07
[HTML] 02. HTML 기본 구조 (0)	2026.02.07
[HTML]01. HTML이 뭐예요? (0)	2026.02.07