시맨틱 태그란..?
Semantic은 '의미의','의미론의'라는 뜻으로 시맨틱 태그는 태그 자체만으로 해당 태그가 어떤 기능을 나타내는지 의미를 포함하고 있는 태그입니다.
이전 HTML4에서 <div>를 사용하여 웹 문서를 만들었을때, 시각장애인 낭독기(screen reader) 혹은 검색엔진에서 웹소스를 읽어올때, 어느부분이 본문인지, 어느부분이 헤더부분인지 구별하기가 쉽지 않았습니다. 그래서 HTML5부터 표준화된 문서구조를 만들어주는 시맨틱태그가 등장하였습니다.
시맨틱 태그는 HTML5부터 도입되었으며, 대표적으로 <form>, <table>, <article> 같은 태그입니다.
일반적으로 <div>, <p> 같은 태그는 해당 태그 안에 이미지가 들어갈지, 텍스트가 들어갈지 어떤 값이 들어가 있을지 예측 할 수 없습니다. 하지만 시맨틱태그는 태그 이름만으로 어떤 값이 들어갈지, 어떤 용도로 사용될지 예측할 수 있습니다.
예를들어 <table> 태그안에는 표가 들어갈 것이라는걸 예측 할 수 있고, <article> 태그안에는 글이 들어갈 것이라는걸 예상 할 수 있습니다.
HTML5 이전에는 header나 footer를 나타내기 위해
<div class="header"> header </div>
<div class="footer"> footer </div>처럼 사용되었다면, HTML5 이후로는
<header> header </header>
<footer> footer </footer>처럼 간단하게 시맨틱 태그를 사용하여 작성할 수 있습니다.
시맨틱 태그를 사용하는 이유
검색 엔진 최적화(SEO: Search Engine Optimization)
검색엔진이 웹페이지의 자료를 수집하거나 순위를 방식에 맞게 웹페이지를 구성하여, 검색 결과의 상위에 나올 수 있게하는 행위를 말합니다.
SEO를 위해서는 검색어를 페이지에 적절하게 배치해야 합니다. 검색엔진은 결과를 보여줄 때, HTML의 태그들을 분석합니다. 이 때, Semantic한 문서는 검색엔진이 유의미한 결과를 낳을 수 있도록 합니다.
웹페이지의 의미부여
의미요소(Semantic Element)는 HTML로 만든 문서에 추가적으로 의미를 부여해줍니다.
시맨틱 태그를 사용하여 의미를 부여해준다면, 해당 페이지를 유지보수하기 위해서 다시 문서를 분석할 경우, 시간을 절약할 수 있습니다.
협업을 진행하며, 개발자들 사이에서 변수의 지정이나, 개발도구의 환경등 여러가지 표준을 만들고 작업을 시작하는 것처럼, 시맨틱태그를 사용하여 웹페이지를 제작하면 해당 웹페이지를 함께 작업하는 사람들이 훨씬 쉽고 빠르게 접근이 가능합니다.
시맨틱 태그의 종류
<header> 문서나 Section의 상단 정보 영역을 의미
<footer> 문서나 Section의 하단 정보 영역을 의미
<article> 문서나 사이트에서 독립된 컨텐츠 영역을 지정
<aside> 페이지의 왼쪽 혹은 오른쪽에 위치한 컨텐츠영역
<details> 추가정보를 기술하는 영역을 의미
<figcaption> <figure>의 제목을 지정
<figure> 문서흐름상 이해를 위해 필요한 그림, 동영상을 포함할때 사용
<main> 문서의 주 컨텐츠영역을 지정
<mark> 마크되거나 강조된 텍스트를 의미
<nav> 문서를 연결하는 네비게이션
<section> 주제별 컨텐츠 영역, 컨텐츠별로 페이지의 묶음단위를 의미
IE8 이하버젼 대응하기
html5에서 추가되는 태그나 css3 속성들은 지원하지 않기 때문에 특별히 지정을 해줘야 합니다. css 에서 시맨틱 태그를 블럭처리하거나 자바스크립트로 시맨틱 태그 요소를 새로 생성하는 방법이 있습니다만 번거롭습니다. 그래서 간단하게 html5shiv.js 파일을 로드하는 방법을 많이 이용합니다. IE8 이하 버젼만 적용되면 되므로 아래처럼 <head>태그 사이에 작성해주면 됩니다.
<head>
....
<!-- [if lt IE 9>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif] -->
</head>