우리가 알고있는 일반적인 태그들(div, p, a)은 각각 특정한 기능을 가진 태그인 반면 시맨틱 태그는 기능을 위한 태그가 아니다. 있으나 없으나 문서의 모습이나 형태가 변하지 않는다.
시맨틱(semantic) 태그란 단어 의미대로 의미론적 태그다.
따라서 시맨틱 태그를 이해하려면 지금까지 알아온 태그와 달리 추상적으로 바라볼 필요가 있다.
예를들어 대학 건물을 짓는다고 생각해보자. 건물만 지어놓고 건물에 이름을 만들지 않아도 기능적으로는 아무런 문제는 없다. 강의실을 사용할 수도 있고 컴퓨터 실습실도 사용할 수 있다. 다만 처음 오는 사람은 무엇이 어디에 있는지, 어떤 기능을 하는 건물인지 직접 들어가봐야 알 수 있다. 따라서 건물에 공대건물, 법대건물, 도서관 건물 등과 같이 이름을 써놓으면 처음 오는 사람도 수월하게 원하는 곳으로 갈 수 있다.
이렇게 건물에 이름 짓는 것과 같은 역할을 하는 것이 시맨틱 태그(semantic tag)의 역할이다.
시맨틱 태그(semantic tag)
위 그림처럼 시맨틱 태그를 사용하면 사이트의 레이아웃을 의미론적으로 구성하고 이해할 수 있다. 레이아웃은 설계자에 따라 변할 수 있지만 대략 위 그림같은 구조를 기본으로 한다.
시맨틱 태그의 종류와 설명
<article> section 내에서 하나의 기사를 article 태그로 감쌀 수있다. 그런데 article 내에서도 section 태그가 있을 수 있다.
<aside> 페이지의 주요 내용 외의 내용을 정의한다. 페이지의 주요 내용 주변(사이드 바)에 위치하여 관련된 내용을 배치할 수 있다. (예) 광고
<details> 사용자가 보거나 숨길 수 있는 추가적인 세부 정보를 정의한다.
<figcaption> figure 에 대한 자막 정의
<figure> 사진이나 다이어그램과 같은 부가적인 요소를 정의
<footer> 화면 하단에 위치하는 사이트나 문서의 정보를 정의
<header> 화면 상단에 위치하는 사이트나 문서의 정보를 정의
<main> 문서의 주가 되는 컨텐츠를 정의
<mark> 참조나 하이라이트 표시를 필요로 하는 문자를 정의
<nav> 문서의 네비게이션 항목을 정의
<section> 문서의 section은 하나의 주제를 그룹할 때 사용. (자동차, 건축, 컴퓨터, 등등..)
<summary> details에 대한 보이는 요소를 정의
<time> 날짜/시간 정의
그런데 시맨틱 태그는 의미론적인 태그이므로 쓰나 안쓰나 사이트의 모습은 똑같은데 무엇 때문에 굳이 시맨틱 태그를 써야하는지 의문이 들 것이다.
구체적으로 HTML 문서에 시맨틱 태그를 사용함으로서 얻는 이점은 다음과 같다.
시맨틱 태그의 사용 필요성
① 개발자로 하여금 문서의 의미론적인 구조를 쉽게 파악할 수 있게 해준다.
② 검색엔진에게도 의미론적으로 중요한 부분과 덜 중요한 부분을 파악할 수 있게 해주어 효율적인 검색을 하도록 만든다. 이렇게 쉽게 검색되는 문서를 만들수록 검색엔진에 쉽게 노출된다. (아무리 좋은 내용을 가진 문서라도 검색엔진에 노출이 안되면 아무도 볼 수 없다.)
- 시맨틱 태그의 사용 예
다음은 flex 속성을 사용하여 레이아웃을 만들 때 시맨틱 태그를 같이 사용하는 예제다.
html/css flex, flexbox 반응형 웹을 위한 css 레이아웃 속성 정리
① 먼저 시맨틱 태그로 html 문서를 만든다.
② flexbox 레이아웃을 만든다.
시맨틱 태그를 설정해놔서 개발자가 레이아웃을 쉽게 설계할 수 있다. 이 부분은 생략~~!
만약 시맨틱 태그가 없고 코드가 복잡하다면 코드를 보고 레이아웃을 쉽게 변경하거나 적용하기가 어려울 수 있다.