Leeyanggoo
[HTML] 섹션(Section)과 관련된 태그를 알아보자!! 본문
지난 HTML의 포스트에서 웹 페이지를 구조를 만들 때 의미를 고려한 태그를 사용하여 구현하는 시멘틱(semantic)과 논리적 순서(logical sequence) 마크업을 소개해드렸습니다.
웹 페이지의 구조가 의미에 따라 구성되어 있다면, 그 구조를 이루는 태그들 또한 각자 의미와 쓰이는 경우가 있습니다.
이번엔 그 태그들 중에 구획을 나누는 <section> 태그에 대해 자세히 알아봄으로써 좀 더 접근성 있고, 명확한 정보를 갖춘 웹 페이지를 구현하는 데 한 걸음 더 나아가 봅시다!
위의 웹 페이지 구조를 보면 <section> 태그가 다양한 곳에 쓰이는 걸 알 수 있습니다. 왜 그런 것인지 <section> 태그와 관련된 태그를 알아보겠습니다!
🔎 header : 문서의 소개, 제목, 탐색에 도움이 되는 콘텐츠를 나타냅니다. 또한 <header>는 구획을 나눌 때 구획의 제목이 되는 요소(<h1>~<h6>)들을 감싸기 위해 사용합니다.
🔎 nav : 문서의 현재 페이지 또는 다른 페이지로 가는 링크는 보여주는 구획을 나타낼 때 쓰입니다. 주로 메뉴, 목차, 색인 등에 쓰는 경우가 많습니다.
🔎 main : <body> 태그의 주요 콘텐츠를 나타낼 때 쓰입니다. 주요 콘텐츠는 문서의 핵심 주제나 소개하려는 주된 내용을 뜻합니다. 때문에 <main> 태그는 문서에서 반복되기보다는 유일하게 쓰이는 것이 좋습니다. 만약 <main> 태그가 반복된다면 해당 문서의 주요 콘텐츠를 가리키기가 어렵게 됩니다.
🔎 section : <section> 태그는 문서의 맥락이 같은 요소들을 주제별로 묶어서 독립적인 구획을 나타내는 태그입니다. 즉 단락처럼 하나의 주제를 가진 글을 묶어놓듯이, <section> 태그는 같은 주제를 가진 요소들을 하나로 묶어놓을 때 사용합니다.
🔎 article : <section> 태그가 일반적인 구획을 나눈다면, <article> 태그는 문서·페이지·애플리케이션 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타냅니다. 주로 게시판과 블로그 글, 매거진이나 뉴스 기사 등이 있습니다.
🔎 aside : 문서의 주요 내용과 간접적으로만 연관된 부분을 나타냅니다. 주로 웹 페이지의 메인 콘텐츠와 관련된 정보, 광고 등 부분적인 정보를 담고 있으며, 사이드바 형태로 구획을 나누는 형태가 많습니다.
🔎 footer : 일반적으로 구획의 작성자, 저작권 정보, 관련 문서 등의 내용을 담고 있으며, 하단에 배치하는 경우가 많습니다. 작성자, 저작권 정보, 관련 문서 등으로 연결되는 링크가 있기도 합니다.
🔎 address : 가까운 HTML 요소의 사람, 단체, 조직 등에 대한 연락처 정보를 나타냅니다. 정확한 <address> 태그의 사용을 위해서 연락처가 가리키는 개인이나 조직, 단체의 이름을 포함하는 것이 좋습니다. 보통 <footer> 태그 안에 위치해서 작성자의 주소나 연락처를 연결하는 경우가 많습니다.
🔎 h1 ~ h6 : <h> 태그는 6단계로 나뉘어 있으며, 구획 제목을 나타냅니다. <h> 태그는 단순히 글자를 키우는 것이 아니라 그만큼 1부터 6까지 중요도를 나타내기 때문에 웹 페이지의 구조에 맞게 사용하는 게 좋습니다. 예를 들어 페이지당 <h1> 태그는 하나만 쓰는 것이 좋고, 나머지 구획의 중요도에 따라 <h2>부터 순차적으로 사용하는 게 적합합니다.
