구조를 만드는 시멘틱 태그
웹 표준인 HTML5가 제정되기 전까지는 문서 구조를 <div>태그로 잡고 id 속성으로 구분했다.
이 방식의 문제점은 다음과 같다.
1. 문서 구조를 한눈에 파악하기 어려워서 이후에 유지보수 하기가 어렵다.
2. 웹 접근성 도구나 검색 엔진이 문서의 구조를 파악하기 어렵다.
이러한 문제를 해결하기 위해서 HTML 표준안에서 웹 문서의 일반적인 구조를 표현하는 시멘틱 태그들이 추가되었다.
시멘틱 태그들은 이런 표준화된 웹 문서 레이아웃을 표시하는데 도움을 준다.
-- 시멘틱 태그들은 HTML 문서 본문의 구조를 나타내는 태그이므로 모두 body 태그 내부에 사용된다.
<header> 태그 (MDN)
:: 문서의 머릿말 부분을 나타내는 태그.
:: 전체 페이지에 대한 소개나 탐색을 위한 내용이 포함된다.
:: <header>태그는 주로 <body>태그의 자식으로 사용되지만 꼭 그래야하는 건 아니다.
:: 단, <header>태그는 <address>나 <footer>, <header>태그의 자손일 순 없다.
-- 즉, <address><header></header></address> 불가
:: 또한, <header>태그는 <footer>나 <header> 태그의 조상이 될 수 없다.
-- 즉, <header><footer></footer></header> 불가
-- <header id="h1"><header id="h2"></header></header> 불가
:: 구획 콘텐츠가 아니므로 자체적으로 구획을 생성하지 않는다.
-- 개요에 표시되는 구획으로 나누려면 내부에 제목 태그 (h1~h6)나, <section>등의 구획 태그를 사용해야 한다.
<nav> 태그 (MDN)
:: 동일한 사이트 내의 다른 문서나 다른 사이트의 문서로 연결하는 링크 모음을 나타내는 태그.
:: <nav>태그는 주로 <header>의 자손으로 사용되지만 꼭 그래야만 하는 것은 아니다.
:: 사이드바에서 메뉴 카테고리를 표시할 수도 있고, 푸터에서 사이트맵을 표시할 수도 있다.
:: 구획 콘텐츠 태그이므로 구획을 생성한다.
<footer> 태그 (MDN)
:: 문서의 꼬리말 부분을 나타내는 태그.
:: 주로 구획의 작성자, 저작권 정보, 관련 문서 등의 내용이 포함된다.
:: <footer>태그는 주로 <body>태그의 자식으로 사용되지만 꼭 그래야하는 건 아니다.
:: 단, <footer>태그는 <address>, <header>, <footer>태그의 자손일 순 없다.
-- 즉, <address><footer></footer></address> 불가
:: 또한, <footer>태그는 <header>와 <footer>의 조상이 될 순 없다.
-- 즉, <footer><header></header></footer> 불가
-- <footer id="f1"><footer id="f2"></footer></footer> 불가
:: 구획 콘텐츠가 아니므로 자체적으로 구획을 생성하지 않는다.
-- 개요에 표시되는 구획으로 나누려면 내부에 제목 태그 (h1~h6)나, <section>등의 구획 태그를 사용해야 한다.
<address> 태그 (MDN)
:: 문서와 관련된 단체, 조직 등에 대한 연락처 정보를 나타내는 태그.
:: 브라우저 기본 스타일로 기울임체가 적용된다.
:: 주로 <footer> 태그의 자식으로 사용되지만 <header>나 각각의 <article>에도 사용할 수 있다.
:: 단, <address>태그는 <address>태그의 조상이나 자손이 될 수 없다.
-- 즉, <address id="a1"><address id="a2"></address></address> 불가
:: 또한, <address>태그 내부에는 제목 콘텐츠나 구획 콘텐츠, <header>나 <footer>태그는 사용할 수 없다.
-- <address><h1></h1></address>나 <address><section></section></address> 불가
::구획 콘텐츠가 아니며 구획을 나누는 태그를 가질 수 없으므로 개요에 표시되지 않는다.
<section> 태그 (MDN)
:: HTML 문서에서 독립적인 구획을 나타내며, 문서의 흐름 중 내용을 주제에 따라 묶을때 사용된다.
:: 주로 <header>와 <footer>, <aside> 부분을 제외한 본문 영역을 구분짓기 위해서 사용한다.
:: 구획 태그이므로 개요에 표시되는 구획을 나타내지만 이를 식별한 수단으로 제목 태그를 사용하는 걸 추천한다.
:: 필요하다면 <section>태그를 <header>안에 쓸 수도 있고, <header>안에 <section>태그를 넣을 수도 있다.
:: 단, <section>태그를 <address>의 자손으로 쓰는건 허용되지 않는다.
:: 주제에 따른 분류가 아니라 단순히 스타일링이 목적이라면 <div>를 쓰는 걸 추천한다.
<article> 태그 (MDN)
:: 문서 내에서 독립적으로 구분해서 배포하거나 재사용 가능한 구획을 나타낸다.
:: 주로 본문 영역을 나타내는 <section>태그 내부에서 독립적인 내용들을 나타나는데 사용된다.
:: 구획 태그이므로 개요에 표시되는 구획을 나타내지만 이를 식별한 수단으로 제목 태그를 사용하는 걸 추천한다.
:: <article>태그를 <section>태그 내부에 쓸 수도 있고, 그 반대도 가능하다.
:: 단, <article>태그를 <address>태그의 자손으로 쓰는건 허용되지 않는다.
:: <article>태그를 중첩해서 사용할 경우 내부<article>은 외부<article>과 관련된 글을 나타낸다.
-- ex) 글의 댓글을 나타내는 <article>은 글을 나타내는 <article>요소에 중첩한 <article>로 나타낼 수 있다.
<aside> 태그 (MDN)
:: 문서의 주요 내용과 직접적인 연관이 없는 부분을 나타낸다.
:: 디자인적으로는 주로 사이드바 혹은 콜아웃 박스로 표현한다.
:: <aside>태그의 요소는 문서의 주요 내용과는 관련이 없으므로 문서의 주요 개요엔 포함되지 않는다.
시멘틱 태그를 이용해서 레이아웃을 그려본 예
:: 레이아웃 자체는 CSS 박스 모델에 따라서 그려볼 수 있다.
:: 이를 어떤 시멘틱 태그로 표현할 것인가를 추가함으로 구획의 역할을 더 쉽게 확인할 수 있다.
썸네일용