시맨틱 태그
많은 웹 사이트를 분석하여 웹 문서 레이아웃의 표준화를 하는 태그가 많이 추가되었다. (물론 아직 많이 사용하진 않는다.)
‘semantic’은 의미가 통한다는 의미이기 때문에 태그만 보면 ‘아 여기구나’라고 알 수 있다.
우리가 흔히 쓰는 의미 없는 상자 태그인 div 대신에 각 구역의 의미가 담긴 태그를 사용하는 것이다.
HTML5의 시맨틱 태그를 사용해야 하는 이유는 웹 표준성이다. 우리가 웹 사이트의 태그를 보고 필요한 내용을 즉각 찾아낼 수 있어 편리해지고, 어떤 내용인지 바로 알 수 있기 때문이다.
header : 머리말
head부분이 아니고 body안에 머릿말에 들어가는 태그이다. header 부분에는 검색창이나 메뉴를 삽입한다.
- nav 태그 : 문서를 연결하는 네비게이션
보통 메뉴에 사용하는 태그이다. header, aside, footer 어디에든 사용 가능하다.
(참조 : HTML5 & CSS3 웹 표준의 정석)
section : 주제별 콘텐츠 영역
콘텐츠의 주제를 묶을 때 사용하는 태그이다.
article : 콘텐츠 내용
사전적의미로 신문이나 잡지의 기사를 뜻하는 내용이니, 일맥상통한다. 여기서는 블로그 포스트, 코멘트, 독립적인 웹 콘텐츠를 넣는다.
보통 section은 문맥상 콘텐츠를 주제별로 묶을 때 사용하기 떄문에 article 태그 안에 section 태그를 넣기도 한다.
aside : 본문 이외의 내용
블로그나 웹 사이트의 왼쪽이나 오른쪽, 하단 사이드바를 만드는 태그이다. 문서의 메인 컨텐츠에 영향을 끼치지 않는 내용을 삽입한다.
iframe : 외부 태그 삽입하기
HTML, CSS란에 있는 예제태그가 모두 iframe 태그를 통해 가져온 것이다. 즉 외부 문서를 삽입하는 태그이다.
footer : 제작정보, 저작권 정보 표시
address : 사이트 제작 정보, 연락처 정보
주로 footer 태그 안에서 사용되며 연락처 정보 등을 남긴다.
div는 뭔데 그럼?
div는 콘텐츠를 묶어서 css 등을 사용해야 할 때 사용합니다. (물론 주로 div로 다 한다.)