의미론적 태그

HTML5 이전에 많은 웹페이지에서 <div>태그에 id와 class를 이용하여 문서의 구역을 표시했다고 합니다.

<div id="header"> <div class="article"> <div id="nav"> <div id="footer">와 같이 말이죠

이렇게 쓰이는 태그들이 많아지자 HTML5에서는 의미론적인 태그로 <header>, <nav>, <article>, <footer> 등의 태그들을 사용할 수 있게 됐습니다.

여기서 <div>와 의미론적 태그들은 보이는 것에는 차이가 없지만 의미적으로 차이가 있습니다.

<div>는 브라우저가 <div>안에 담고있는 내용이 어떤 걸 담고 있는지 알지 못합니다.

하지만 의미론적 태그들을 이용하면 그 내용들이 어떤 것을 담고 있는지 의미를 브라우저가 분명하게 알 수 있도록 해줍니다.

<header>를 쓰면 제목, <nav>를 이용하면 네비게이션(목자) 등의 의미를 알 수 있도록 말이죠.

출처 : www.w3school.com

위 사진의 태그들은 HTML5에서 제공하는 의미론적 태그들입니다. 이번 포스팅에서는 오른쪽에 나와있는 태그들에 대해서만 알아보도록 하겠습니다.

<header>

<header>태그는 문서 안에서 제목임을 명시하는 의미론적 태그입니다.

즉, 콘텐츠의 내용을 소개하는 용도로 사용됩니다. <header>는 문서 안에서 여러 개 존재할 수 있습니다.

<nav>

<nav> 태그는 현재 문서에서 현재 문서의 안 또는 다른 문서로 가는 링크를 보여주는 구역을 의미하는 태그입니다.

이때, <nav>는 문서의 모든 링크를 표시하는 것이 아니라 주요 링크에 대해서 표현합니다.

<section>

<section> 태그는 일반적으로 제목이 있는 주제별 컨텐츠를 다루는 태그입니다. 즉, 문서 안의 내용을 다른 주제로 구분짓기 위하여 사용합니다.

문서 안에서 구역을 정의하는 의미론적 태그입니다.

<article>

<article> 태그는 별도의 컨텐츠를 담고있는 태그입니다.

<article>은 <article> 안의 내용만으로도 무슨 내용을 담고 있는지 알 수 있는 내용으로 구성되어야 하며 나머지 웹페이지와는 독립적으로 읽을 수 있어야 합니다.

※ <article>이 <section>을 감싸는 경우와 그 반대의 경우

앞서 말했듯이 <section>은 문서 안에서 구역을 정하는 태그인 반면 <article>은 독립적인 콘텐츠를 담고있는 태그입니다.

W3C에서는 <artlcle>과 <section>를 어떻게 중첩시킬지에 대해서는 정의하지 않고 있습니다.

따라서 우리는 인터넷에서 <article>이 <section>을 감싸거나 그 반대의 경우를 볼 수 있습니다. 또한, <section>이 <section>을 <article>이 <article>을 감싸는 모습도 볼 수 있습니다.

쉽게 정의한다면 <section>은 문서 간에 서로 관련이 있다면 사용할 수 있는 의미론적 태그이고 <article>은 내용이 독립적인 경우 사용할 수 있는 의미론적 태그가 될 것입니다.

<aside>

<aside>는 사이드바와 같이 주요 컨텐츠와는 다른 부차적인 컨텐츠를 정의하는데 사용하는 태그입니다. (주변 컨텐츠 와는 관련있는 컨텐츠가 담겨있어야 합니다.)

<footer>

<footer>는 문서의 각종 정보를 포함하는데 사용된다. 예를 들어 문서의 저자, 저작권 정보, 접근 방법, 이용약관 등이 <footer>에 들어갑니다.