웹 문서 구조를 만드는 시맨틱 태그

의미 요소(semantic element)

의미 요소란 그 자체로 의미를 가지고 있는 요소를 가리킵니다.

즉, 요소가 자기 스스로 브라우저와 개발자 모두에게 자신이 사용된 의미를 명확히 전달해 주는 요소를 의미합니다.

 

의미 요소가 아닌 div 요소나 span 요소 등은 해당 요소가 무슨 목적으로 사용되었는지 코드를 살펴봐야 알 수 있습니다.

하지만 의미 요소인 table 요소는 코드를 보지 않아도 해당 요소가 표를 만드는 데 사용되었다는 것을 이름만 살펴봐도 바로 알 수 있습니다.

헤더 영역을 나타내는 <header> 태그

헤더란 도입부에 해당하는 콘텐츠를 가지고 있는 부분을 의미합니다.

사이트 전체의 헤더도 있지만 특정 영역의 헤더도 있습니다. (한 문서 내에 여러 개의 header 요소가 존재 가능)

사이트에서 헤더는 주로 맨 위쪽이나 왼쪽에 있으며, 검색 창이나 사이트 메뉴를 삽입합ㄴ디ㅏ.

 

 

내비게이션 영역을 나타내는 <nav> 태그

<nav> 태그는 같은 웹 문서안에서 다른 위치로 연결하거나 다른 웹 문서로 연결하는 링크를 마듭니다.

<nav>태그는 웹 문서의 위치에 영향을 받지 않으므로 헤더나 푸터, 사이드 바 안에 포함할 수도 있고 독립해서 사용할 수도 있습니다.

<nav>태그를 여러 개 사용할 경우 각각 id 속성을 지정하면 내비게이션 마다 다른 스타일 적용할 수 있습니다.

 

 

핵심 콘텐츠를 담는 <main> 태그

<main> 태그는 웹 문서에서 핵심이 되는 내용을 넣습니다.

여기에는 메뉴, 사이드바, 로고처럼 페이지마다 똑같이 들어간 정보는 넣을 수 없고, 웹 문서마다 다르게 보여주는 내용으로 구성합니다.

<main> 태그는 웹 문서에서 한 번만 사용할 수 있습니다.

 

 

 

독립적인 콘텐츠를 담는 article 태그

<article> 태그는 사전적 의미인 신문이나 잡지의 기사처럼 웹에서 실제로 보여 주고 싶은 내용을 넣습니다.

<article> 태그의 내용은 그 자체만으로도 이해가 되어야 하며, 웹 사이트의 나머지 부분과는 별도로 읽을 수 있어야 합니다.

문서 안에는 <article> 태그를 여러 개 사용할 수 있고, 이 안에는 <section> 태그를 넣을 수도 있습니다.

 

 

콘텐츠 영역을 나타내는 section 태그

<section> 태그는 웹 문서에서 콘텐츠 영역을 나타냅니다. 

<article> 태그와 비슷해 보이지만 <section> 태그는 몇 개의 콘텐츠를 묶는 용도로 사용하고, <article> 태그는 블로그의 포스트처럼 독립된 콘텐츠로 씁니다.

 

 

사이드 바 영역을 나타내는 <aside> 태그

<aside> 태그는 본문 내용 외에 왼쪽이나 오른쪽, 혹은 아래쪽에 사이드 바를 만듭니다.

보통 웹 사이트에서 사이드 바는 필수 요소가 아니므로 필요한 경우에만 사용합니다.

 

 

<figure> 태그와 <figcaption> 태그

책이나 신문 등에 포함되는 이미지 바로 아래에는 해당 이미지를 설명하는 캡션이 위치하게 됩니다.

HTML5에서는 위와 같은 목적을 위해 figure 요소와 figcaption 요소를 제공하고 있습니다.

figure 요소는 HTML 문서에서 그래픽과 비디오 등의 독립적인 콘텐츠를 정의할 때 사용합니다.

figcaption 요소는 위와 같은 figure 요소를 위한 캡션을 정의할 때 사용합니다.

 

 

푸터 영역을 나타내는 <footer> 태그

<footer> 태그는 웹 문서에서 맨 아래쪽에 있는 푸터 영역을 만듭니다.

푸터에는 사이트 제작 정보나 저작권 정보, 연락처 등을 넣습니다.

또한 푸터 영역에는 <header> 태그를 비롯하여 <section>, <article> 등 다른 시맨틱 태그를 모두 사용할 수 있습니다.

이러한 시맨틱 태그를 이용해 푸터 안에 다양한 정보를 넣습니다.

 

---

출처 : Do it! HTML+CSS+자바스크립트 웹 표준의 정석 [고경희 (이지퍼블리싱)]