HTML 구조-2

이번 글에서는 시맨틱 태그라고 불리는 아주 중요한 내용을 다뤄보자!

 

시맨틱 태그

시맨틱 태그는 HTML 태그가 특정 목적, 역할 및 의미적 가치(semantic value)를 가지는 것이다!

     ex) 앞의 글에서 보았던 <h1> 태그는 "이 페이지에서 최상위 제목"인 텍스트를 감싸는 역할(또는 의미)을 나타낸다.

 

Non semantic 요소로는 div, span 등이 있으며, a, form, table 태그들도 시맨틱 태그로 볼 수 있다.

HTML5에서는 기존에 단순히 콘텐츠의 구획을 나타내기 위해 사용한 div 태그를 대체하여 사용하기 위해 의미론적 요소를 담은 태그들이 추가되었다

 

위의 이미지에 나와있는 대표적인 시맨틱 태그 목록을 살펴보자!

1. header : 문서 전체나 섹션의 헤더(머리말 부분)
2. nav : 네비게이션(목록 등)
3. aside : 사이드에 위치한 공간, 메인 콘텐츠와 관련성이 적은 콘텐츠
4. section : 문서의 일반적인 구분, 컨텐츠의 그룹을 표현
5. article : 문서, 페이지, 사이트 안에서 독립적으로 구분 되는 영역
6. footer : 문서 전체나 섹션의 푸터(마지막 부분)

시맨틱 태그 사용 예시

이렇게 복잡한데 그냥 <div>를 사용해서 전부 나타내면 안 될까? No No! 왜 시맨틱을 사용해야 되는지에 대해 알아보자.

의미론적 마크업

• 개발자 및 사용자 뿐만 아니라 검색엔진 등에 의미 있는 정보의 그룹을 태그로 표현
• 단순히 구역을 나누는 것뿐만 아니라 의미를 가지는 태그들을 활용하기 위한 노력
• 요소의 의미가 명확해지기 때문에 코드의 가독성을 높이고 유지보수를 쉽게함
• 검색 엔진 최적화(SEO)를 위해서 메타태그, 시맨틱 태그 등을 통한 마크업을 효과적으로 활용해야 함

의미 있는 정보들을 보기 쉽게 표현하기 위해 사용하는 것이다.

개발자라면 혼자 하는 것이 협업을 하기 때문에 알아보기 쉽게 서로의 약속과 같은 것이라고 보면 된다.

 

그렇다면 이런 텍스트로 작성된 코드가 어떻게 우리가 사용하는 웹 사이트가 되는 것일까?

바로 렌더링(Rendering)이라는 과정을 통하여 변하게 된다.

DOM(Document Object Model) 트리

• 텍스트 파일인 HTML 문서를 브라우저에서 렌더링 하기 위한 구조이다.
• HTML 문서에 대한 모델을 구성하고, 문서 내의 각 요소에 접근 / 수정에 필요한 프로퍼티와 메서드를 제공한다.

DOM 트리의 구조

이렇게 시맨틱 태그와 DOM 트리에 대해 공부해 보았다!

다음 글에서는 HTML 문서를 구조화하기 위해 세부 요소에 대해 알아보자