HTML5에서 두드러지는 특징 중 하나는 시맨틱 태그들이 도입되었다는 것입니다. 이런 시맨틱 태그를 사용해 웹 문서 구조를 만들게 되면 문서를 이해하기도 쉽고 유지 보수 하기도 훨씬 쉬워집니다.
<header>태그는 말 그대로 머리말(header)에 해당합니다. 즉, 사이트 전체의 머리말이 될 수도 있고,
블로그 포스트의 머리말이 될 수도 있습니다.
사이트 전체의 머리말일 경우 <header>태그 안에서 <h1>에서 <h6>까지의 태그를 사용해 사이트
제목으로 사용할 수도 있고 <img> 태그를 사용해 사이트 로고를 삽입하기도 합니다. 또한 <header>태그
Style Sheet)를 사용해서 각 <div>를 원하는 형태로 배치하였습니다. 이때 div 요소를 서로 구분하기
위하여 id="header"나 id="nav"와 같이 식별자를 붙입니다. 페이지 상단의 내용 부분을 <div id="header">
안에 <form> 태그를 사용해서 검색 창을 삽입하거나 사이트 메인 메뉴를 삽입할 수도 있습니다. 사이트 전체의
머리말일 경우 주로 사이트 상단이나 왼쪽에 배치 합니다.
본문에 사용된 <header>일 경우엔 본문의 머리글이기 때문에 <h1>에서 <h6>까지의 태그를
사용해 본문 내용 중 제목과 부제목을 표시하는 경우가 많습니다.
<hgroup>태그는 제목과 그와 관련된 부제목을 묶어주는 것입니다. <hgroup>태그는 웹 페이지의 구조를 좀더 간단히 조직하기 위해 필요한 태그입니다. 즉, 제목과 부제목을 <hgroup>으로 묶게 되면 웹 페이지 전체 구조를 만들 때 문서에서 중요한 뼈대가 어떤 것인지를 쉽게 알 수 있고 그만큼 문서를 빠르고 정확하게 조직할 수 있습니다.
<nav> 태그는 문서 안에서, 혹은 다른 문서로 링크하기 위한 내비게이션 링크를 표현 합니다.
HTML5에서는 <nav> 태그가 있기 때문에 이 요소를 사용하면 어느 부분이 내비게이션인지를 손쉽게 알 수
있습니다. <nav> 태그는 <header>나 <footer> 또는 <aside> 태그 안에 포함시킬 수도
있고 독립해서 사용할 수도 있습니다. 즉 위치에 영향을 받지 않습니다.
문서 안에 여러 개의 <nav>태그를 사용할 경우 따로 ID를 지정해 주어 스타일시트에서 그 스타일을 지정하면
됩니다.
article이라는 단어의 사전적인 의미가 신문 또는 잡지의 '기사(記事)'인 것처럼 <article>태그 역시
웹 상의 실제 내용을 말합니다. 그리고 신문기사가 여기저기에 인용 될 수 있는 것처럼 <article>태그를
사용한 콘텐츠는 웹에서 다른 곳으로 배포되거나 재사용될 수 있습니다. 보통 블로그의 포스트나 웹 사이트의 내용,
사용자가 등록한 코멘트, 웹 콘텐츠의 독립적인 항목 등이 모두 여기에 해당될 수 있습니다.
웹 콘텐츠를 자동 검색하는 로봇에서는 <article>태그가 사용된 콘텐츠를 발견하면 배포 가능한 콘텐츠라는
것을 쉽게 쉽게 알아 낼 수 있게 됩니다.
문서 안에 여러 개의 <nav>태그를 사용할 경우 따로 ID를 지정해 주어 스타일시트에서 그 스타일을 지정하면
됩니다.
책에서 소제목을 붙여 놓은 단락을 섹션(section) 또는 절이라고 하는데, HTML5에서도 제목을 붙여서 콘텐츠 그룹을
묶는 것을 <section>태그라고 합니다. 웹 사이트의 시작 페이지라면 '사이트 소개'나 '뉴스', '연락 정보'
등의 섹션으로 나눌 수도 있고, 여러 탭으로 이루어진 뉴스 페이지라면 하나의 탭을 하나의 섹션으로 할 수도 있습니다.
또한 <section>태그는 웹에서 재배포 되어서는 안 될 콘텐츠를 지정할 때도 사용합니다.
하지만 단순히 콘텐츠를 묶기 위해 <section> 태그를 사용하는 것은 바람직하지 않습니다.
스타일을 적용하거나 스크립트를 사용하기 위해 콘텐츠 중 일부를 묶고 싶다면 <div> 태그를 사용하면 됩니다.
<section> 태그로 절을 나눈 후 그 안에 <article> 태그를 넣거나 또 다른 <section> 태그를
넣을 수도 있습니다.
본문을 이용하다 보면 실제 블로그 포스트를 표시하는 부분 외에 왼쪽이나 오른쪽에 기타 내용들이 표시되는 부분이
있습니다. 흔히 '사이드 바'라고 부르는 이런 부분을 표시하는 요소가 <aside>태그 입니다. 사이드 바는
필수 요소가 아니기 때문에 필요하지 않은 경우에는 화면에 표시하지 않아도 됩니다.
HTML4에서는 웹 사이트에 저작권 정보나 사이트 제작자 정보를 표시하기 위해서 <div id="footer">또는
<div id="copyright">같은 별도의 영역을 만들고 거기에 필요한 정보를 입력했습니다. 하지만 HTML5에서는
간단하게 <footer>태그에 내용만 입력하면 됩니다.
<footer>태그는 그 안에 다른 어떤 요소도 포함할 수 있습니다.
