HTML Semantic

Semantic
브라우저 검색엔진 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 함
Semantic의 사전적 의미는 ‘의미론적인’, ‘의미가 통하는’이다.
검색 로봇 또는 스크린 리더등의 기계가 쉽게 해석하고 분석 할 수 있도록 만들어진 태그
HTML4에서는 <div>와 id 속성을 이용하여 화면을 구성
id의 이름을 정하는 규칙이 없기때문에 문서의 구조를 이해하는데 한계. 웨어러블 장치나 스마트 기기를 이용하여 웹문서를 읽는 데 부적합 구조
해결책으로 HTML5에서는 웹문서 레이아웃을 표준화 하는 semantic tag를 이용
사이트의 제목과 로고, 검색 창 등이 있는 헤더(header), 여러 내용이 있는 본문(contents : section + articles), 본문 외 내용을 나타내는 사이드바(aside), 저작권 정보와 제작자 정보를 표시하는 푸터(fotter)로 이루어져 있다.

HRML 요소는 non-semantic 요소, semantic 요소로 구분
non-semantic 요소는 div, span 등이 있으며 이들 태그는 content에 대하여 어떤 설명도 하지 않는다.
semantic 요소는 form, table, img 등이 있으며 이들 태그는 content의 의미를 명확히 설명한다. 

 

semantic tag

header - 머리말 지정
header는 주로 <form> 태그를 사용하여 검색 창을 넣거나 <nav> 태그를 사용하여 사이트의 메뉴를 삽입
본문에 사용하여 해당 부분의 머리말로도 사용

nav - 문서를 연결하는 navigation link
동일 사이트 내의 문서나 다른 사이트의 문서로 연결하는 링크 모음
<nav>는 단독으로 사용되거나 <header>, <footer>, <aside>내에서 사용

section - 주제별 콘텐츠 영역 표시
<section>은 문맥 흐름 중에서 contents를 주제별로 묶을 때 사용
<section>안에 여러 개의 <article>을 넣어 contents의 내용을 표현

aside - 본문 이외의 내용 표시
일반적으로 사이트의 왼쪽이나 오른족 또는 하단에 위치
본문 내용 외에 주변에 표시되는 기타내용을 표현

footer - 제작 정보와 저작권 정보 등 표시
일반적으로 사이트의 하단부에 표현