개념 구분: 요소는 태그가 아니다
HTML을 다룰 때 ‘요소(Element)‘와 ‘태그(Tag)‘를 혼용하는 경우가 많다 흔히 “p 태그"처럼 부르지만 두 개념은 엄연히 다르다 이 차이는 HTML 4.01 명세부터 명확히 강조되었다
요소는 태그가 아니다. 어떤 이들은 요소를 태그라 부르기도 한다(예: “the P tag”). 하지만 요소와 태그(시작 태그든 종료 태그든)는 별개임을 기억해야 한다. 예를 들어, HEAD 요소는 마크업에 시작 태그와 종료 태그가 모두 생략되더라도 항상 존재한다.
즉, 요소는 문서의 구조적 구성원을 의미하며, 태그는 이 요소의 시작과 끝을 마크업에 표기하는 구문일 뿐이다
HTML5 명세의 정의
HTML 5.1 명세 역시 이 관계를 명확히 정의한다 태그는 요소의 범위를 지정하며 특정 조건에서는 생략될 수 있다고 설명한다
태그는 마크업에서 요소의 시작과 끝을 구분하는 데 사용된다. (…) 특정 일반 요소의 시작과 종료 태그는 생략될 수 있다. (…) 요소의 콘텐츠는 반드시 시작 태그 직후(경우에 따라 암시적일 수 있음)와 종료 태그 직전(이 또한 암시적일 수 있음) 사이에 위치해야 한다.
또한 태그 생략이 요소의 부재를 의미하지 않는다는 점도 중요하다
특정 태그는 생략될 수 있다. (…) 요소의 시작 태그를 생략하는 것이 그 요소가 존재하지 않음을 의미하지 않는다. 그것은 암시될 뿐, 여전히 그 자리에 존재한다. 예를 들어, HTML 문서는 마크업 어디에도
<html>문자열이 나타나지 않더라도 항상 루트<html>요소를 가진다.
태그 생략과 파싱 원리
HTML5 이전의 HTML은 SGML(Standard Generalized Markup Language)에 기반하며 DTD(Document Type Definition)를 통해 문서 구조의 유효성을 정의했다 DTD는 어떤 요소 타입이 존재하며 어떤 조합으로 사용될 수 있는지 명시한다 SGML 파서는 DTD를 기준으로, 마크업에 명시적인 태그가 없더라도 유효한 구조가 단 하나라면 요소를 추론해 DOM 트리를 구성할 수 있었다
예를 들어 <p> 요소는 중첩될 수 없다
따라서 <p>Para 1 <p>Para 2 같은 마크업이 있다면, 파서는 DTD 규칙에 따라 첫 번째 <p> 요소의 종료 태그 </p>가 두 번째 <p> 시작 태그 앞에 암묵적으로 존재한다고 해석한다
결과적으로 <p>Para 1</p><p>Para 2</p>와 동일한 구조로 파싱된다
HTML5는 DTD에 의존하는 대신, 어떤 태그를 생략할 수 있는지 자체적으로 명확하게 정의함으로써 비슷한 결과를 구현한다
마무리
- 요소(Element): 문서의 논리적 구조를 형성하는 객체
- 태그(Tag): 이 요소를 텍스트 마크업으로 표현하는 구문적 장치
개발자는 브라우저가 파싱하여 생성한 DOM의 ‘요소’를 다루는 것이며, 소스 코드의 ‘태그’는 그 요소의 범위를 지정하는 표식에 불과하다는 점을 이해하는 것이 중요하다