지난 포스트에서 공간 분할 태그인 <div>와 <span>에 대해서 알아봤습니다. 이들은 브라우저 구조를 나눠주긴 하지만, 한 눈에 쉽게 구조를 알아보긴 어려운데요. 그래서 등장한 것이 시맨틱 태그입니다.
시맨틱 태그
시맨틱 태그란 태그만을 보고 브라우저의 구성 구조를 알아볼 수 있도록 하는 태그를 말합니다. <div>와 <span>처럼 자체적인 기능은 없고 구조 구분에 사용되는 태그입니다.
시맨틱 태그와 기존의 <div>, <span>는 그럼 어떨때 사용해야할까요? 우선 시맨틱 태그는 문서의 구조를 정의할 때 사용합니다. 페이지 제목과 배너를 다루는 부분, 본문 내용을 다루는 부분, 메뉴바를 표시하는 부분, contact 등의 정보를 넣는 부분 등으로 각 부분에 적합한 구조 태그가 있으므로 적재적소에 시맨틱 태그를 사용할 수 있습니다. 시맨틱 태그에 밀려버린 <div>, <span>은 이제는 구조보다 요소들을 묶어서 CSS 효과들을 적용시키고 싶은 경우에 주로 사용하게됩니다.
이제 시맨틱 태그가 뭔지 알았으니 시맨틱 태그에는 어떤 것들이 있는지 알아보겠습니다.
<header>
브라우저의 헤더 부분을 정의하는 태그입니다. 헤더라는 것은 주로 사이트의 최상단부의 로고나, 메뉴바, 배너, 검색창 등을 일반적으로 헤더라고 부릅니다.
<nav>
<nav>는 같은 페이지의 다른 위치나 다른 페이지로 이동시키는 링크들을 모아두는 태그입니다. 헤더에서도 언급했던, 메뉴바와 같은 것들이 <nav>에 포함되기도 합니다.
<section>
<section>은 콘텐츠가 주로 표시되는 영역을 나타내는 태그입니다. 즉, 페이지의 메인이 되는 본문 내용이 section에 들어간다고 볼 수 있습니다.
<article>
<article>도 콘텐츠를 나타내는 태그입니다. 다만, article은 독립적인 콘텐츠로서 한 페이지에서 다른 페이지로 옮겨도 그 형태를 유지하는 경우에 article로 묶습니다.
독특한 점은 <section>내부 요소로 <article>이 삽입될 수도 있고, <article>내부 요소로 <section>이 삽입될 수도 있다는 점 입니다.
<aside>
본문 외의 내용들을 묶을 때 사용하는 태그입니다. 본문이 아닌 블로그 메뉴의 사이드바나, 광고같은 본문에 비해서 중요성이 낮다고 판단되는 콘텐츠들을 주로 <aside>로 묶습니다.
<footer>
<footer>는 브라우저 최하단에 표시되는 정보들을 묶어서 나타내는 태그입니다. 보통 페이지의 최하단을 보면 작성자나 사업자 정보 등이 쓰여있는데요. 이런 것들을 묶어놓는 태그라고 할 수 있습니다.
<address>
<address>는 연락할 수 있는 수단을 표기하는 부분을 묶은 태그입니다.
