[HTML 기초] 시맨틱(semantic) 태그

삐개·2022년 1월 17일

HTML 기초 semantic 시맨틱

퍼블리싱/개발 공부를 위한 HTML 기초 정리

목록 보기

11/11

시맨틱 웹(Semantic Web)

시맨틱 웹(Semantic Web)은 의미론적인 웹이라는 뜻입니다.
의미론적 웹은 HTML 상에 존재하는 요소들이 컨텐츠의 의미를 브라우저와 개발자에게 알려주는 작성 방식입니다.

더 쉽게 풀어쓰자면, 태그명에 의미(용도)가 나타나있는 태그를 이용한 것이 시맨틱 웹입니다.

시맨틱 HTML을 작성해야하는 이유

시맨틱 HTML을 작성하면, 개발자는 물론 브라우저까지도 태그의 의미를 알게됩니다. 이는 웹 접근성 측면에서 큰 이점이 있으며 동시에 웹페이지에 담긴 정보를 브라우저가 분석할 수 있게 해줍니다.
그리고 검색 엔진 최적화(Search Engine Optimization)에 유리합니다. 검색 엔진은 웹페이지의 여러 정보들을 수집해서 검색 키워드에 알맞게 노출시킵니다. 시맨틱 웹을 작성하면 이런 검색 엔진에 노출되기 좋아 사이트 이용자들을 끌어오기 좋습니다.
마지막으로, 유지 보수가 쉬워집니다. 단순한 div와 span의 나열로 작성된 HTML은 시맨틱한 문서에 비해 가독성이 떨어집니다. 태그에 적절한 id, class명을 부여하는 것도 일일 뿐더러, 부여하더라도 구조와 의미를 한 눈에 파악하기 어려운 경우도 흔합니다.
시맨틱 태그를 사용하면 태그명 그 자체가 용도를 나타내기에, 유지보수 측면에서 비교적 유리하다고 할 수 있습니다.

그러면 시맨틱 요소에 해당하는 시맨틱 태그를 알아보겠습니다.

시맨틱 태그(Semantic Tags)

의미론적인 HTML 작성 방법 중, 태그 명 그 자체가 영역의 의미를 나타내는 태그들이 있습니다. 이를 시맨틱 태그라고 합니다.

시맨틱 태그를 이용한 레이아웃 예시

header는 웹 사이트의 상단에 위치하는 태그입니다. 주로 로고나 검색, 로그인, 장바구니 등의 글로벌 링크가 위치합니다.
nav 태그를 자식으로 포함하는 경우가 많습니다. 필수는 아닙니다.

nav

nav는 페이지의 특정 컨텐츠나 다른 페이지로 이동할 수 있는 버튼 등을 모아둔 메뉴 영역입니다. 네비게이션이라고 불리며, GNB/LNB/SNB/FNB 등 여러 가지 형태로 nav를 사용할 수 있습니다.
하위요소로 ul li a등을 주로 포함합니다.

main

본문 내용을 나타내는 태그입니다. IE 환경에선 지원하지 않습니다.
웹 페이지에서 단 한번만 사용해야 합니다.

aside

전체 내용과는 연관성이 있지만, 주 컨텐츠와는 분리되는 영역을 나타낼 때 사용합니다.
주로 사이드바에 적용되며 세로로 따로 배치됩니다.

section

주 내용에서 흐름을 나눠주는 태그입니다. 책으로 따지면 챕터 역할에 해당합니다.
일반적으로 제목 태그(heading tags)를 포함시켜 사용합니다.

article

독립적인 내용을 나타낼 때 사용합니다. 여기서 독립적인 내용이란, 전체 내용과는 독립적이면서 하나의 완성된 컨텐츠로 취급할 수 있는 내용을 말합니다. 따라서 웹 사이트의 다른 부분과는 상관없이 그 자체만으로도 이해할 수 있어야 합니다.
위젯, 블로그 발행 글, 광고 영역 등에 해당됩니다.
section처럼 제목 태그를 포함시켜 사용합니다.
article이나 section을 자식으로 포함해도 문제되지 않습니다.

figure, figcaption

figure는 이미지 영역을 나타내는 태그입니다. img와 figcaption을 자식으로 포함시켜 사용합니다.
figcapton은 이미지에 대한 설명을 나타냅니다. 반드시 figure를 부모로 두어야 하고, 형제로 img를 둡니다.
figcapton의 내용은 alt와는 구별되어야 합니다. 동일한 내용이 들어가면 스크린 리더기는 중복된 내용을 출력할 것이기 때문입니다. 이미지에 대한 설명, 또는 사진과 관련 있는 설명은 figcaption에 포함시키고 alt에는 이미지를 표현할 수 있는 단어나 문장을 포함시키면 됩니다.