[HTML] Sectioning Elements

 

 

웹 문서를 설계할 때는 구조적으로 잘 설계하는 것이 필요하다. 

"왜 설계를 잘해야 할까?" 묻는다면, 그 이유는 "글의 구조를 쉽게 파악하기 위해서" 라고 말할 수 있다.

 

 

그리고 설계를 잘해놓으면 검색 엔진 최적화(SEO)에도 도움이 된다는 사실!

 

 

✏️ 검색 엔진 최적화(SEO)란?

- 웹사이트가 검색 엔진 결과 페이지(SERP)에서 더 높은 순위에 노출되도록 하는 과정으로, 이는 웹사이트의 가시성을 높이고 유기적 트래픽을 증가시키는 데 중요한 역할을 한다. 지속적인 과정이며, 검색 엔진 알고리즘의 변화에 따라 전략을 조정해야 한다.

cf. 몇 만명의 구독자를 가진 유튜브 채널 주인이 유입률을 고려하여, 썸네일을 주기적으로 변경해준다고 이야기한 영상을 본 적이 있다. 그것과 비슷한 맥락이 아닐까?!

 

 

아무튼 다시 웹 문서 설계로 돌아가서, 웹 문서 설계를 시작할 때 고려해야 할 점 두 가지는

   1. 구획을 잘 나누는 것

   2. 적절한 Sectioning Elements를 사용하기

이다.

 

---

 

✏️ Sectioning Elements 란?

- Sectioning Elements는 문서의 구조를 구성하는 요소들로, 콘텐츠를 의미 있는 섹션으로 나누고 구조화하는 데 사용된다.

웹 페이지의 개요나 목차를 형성하는 데 중요한 역할을 하며, 이 요소들을 사용함으로써 웹 접근성과 검색 엔진 최적화(SEO)가 향상된다.

- Sectioning Elements 종류에는 <article>, <section>, <nav>, <aside>, <header>, <footer>와 같은 태그들이 있다. 

 

 

 

✏️ Sectioning Elements 종류

- 앞서 말한 태그들에 대해 좀 더 자세히 알아보자!

 

1. <header> 태그

- 웹 페이지나 섹션의 소개나 탐색 정보를 담기 위해 사용된다.

- 주로 맨 위 상단에 위치하며, 사이트의 로고, 제목, 메뉴, 검색 바 등을 포함한다. 

- 하지만 <header> 태그는 단순히 페이지 상단에만 사용되는 것이 아니라, 문서의 다른 구역(예: <article>, <section> 등)의 시작 부분에도 사용되어 해당 부분의 개요나 소개를 제공하는 역할을 한다. 이는 구조적인 의미를 강화하고, 콘텐츠의 접근성을 높이는 데 기여한다.

- 제목 태그(<h1>, <h2> 등)를 꼭 명시해줘야 한다.

 

2. <section> 태그

- <section> 태그는 문서의 일반적인 섹션을 나타내며, 주로 관련된 콘텐츠와 기능을 그룹화하는 데 사용된다. (<div> 태그 같은 느낌)

- 각 <section>은 테마나 의미적으로 연관된 콘텐츠로 구성되어야 하며, 제목 태그(<h1>, <h2> 등)를 꼭 명시해줘야 한다.

- 개별적인 주제나 콘텐츠 블록을 구조화하는 데 도움을 주는 태그이다. 

 

3. <article> 태그

- <article> 태그는 독립적으로 구분되거나 재사용 가능한 콘텐츠를 정의할 때 사용된다.

- 예를 들어 블로그 포스팅 글, 뉴스 기사, 사용자 댓글과 같이 자체적으로 완전한 의미를 가진 내용을 포함하는 경우에 적합하다.

- 문서, 페이지, 애플리케이션, 사이트 내에서 독립적으로 배포하거나 재사용할 수 있는 구조를 마련하는 태그이다. 

- 이 태그도 마찬가지로 제목 태그(<h1>, <h2> 등)를 꼭 명시해줘야 한다.

 

4. <aside> 태그

- <aside> 태그는 간접적으로 관련된 콘텐츠를 나타내며, 주로 사이드바, 글의 삽입 구절, 배너, 위젯 등에서 사용된다.

- 이는 메인 콘텐츠와는 별개로 광고, 바이오, 웹 링크 리스트와 같은 요소를 포함할 수 있으며, 문서의 주 콘텐츠와는 독립적인 콘텐츠를 제공할 때 사용된다.

- 이 태그도 제목 태그(<h1>, <h2> 등)를 꼭 명시해줘야 한다.

 

 

 

✏️ ETC Elements

 

1. <main> 태그

- 웹 페이지의 주요 콘텐츠를 나타내기 위해 사용된다. 문서 내의 중심이 되는 콘텐츠를 감싸며, 사이드바, 푸터, 내비게이션 링크 등의 페이지 반복 영역을 제외(해당 부분은 <aside> 태그)한 주된 내용을 포함한다.

- <main> 태그 목적은 웹 접근성을 향상시키는 것이며, 스크린 리더가 콘텐츠의 핵심 부분을 쉽게 식별하고, 사용자가 중요 정보에 빠르게 접근할 수 있도록 돕는 중요한 목적을 가지고 있다.

- 주의할 점은 하나의 문서에는 하나의 <main> 태그만 사용하는 것이 좋다. 예를 들어, 블로그 포스트나 뉴스 기사 페이지에서 <main> 태그는 글 본문을 감싸는 용도로 사용되어 글의 주된 내용을 명확하게 구분한다. 이렇게 함으로써 웹 페이지의 구조가 더 명확해지고, 검색 엔진 최적화(SEO)에도 긍정적인 영향을 미친다.

 

2. <nav> 태그

- <nav> 태그는 탐색 링크의 집합을 위한 것으로, 주로 메인 메뉴, 목차, 인덱스 등 웹 사이트 내의 다른 페이지나 현재 페이지의 다른 부분으로의 링크를 포함한다.

- 이 태그는 사용자가 사이트 내에서 문서간에 이동할 수 있는 요소를 포함하는 경우 사용되며, 구조적인 의미를 제공하여 접근성과 SEO를 향상시킨다. 

- 따라서 구체적인 내용보다는 구조적인 기능에 중점을 둔다고 볼 수 있다.

 

 

3. <footer> 태그

- <footer> 태그는 문서나 섹션의 바닥글을 정의할 때 사용되며, <header>는 상단, <footer>는 하단이라고 보면 된다.

- 주로 저자 정보, 저작권 정보, 연락처 정보, 사이트맵, 백 링크 등을 포함한다.

- 문서의 마지막 부분에 위치하며, 추가 정보나 관련 문서로의 링크를 제공하는 역할을 한다. 

 

 

 

✏️ 제목 태그(Heading Tags)의 필요성 ?

- <header>, <section>, <article>, <aside> 태그 같은 경우에는 문서의 구조적인 의미를 갖는 섹셔닝 요소이기 때문에, 제목 태그(Heading Tags, 예: <h1>, <h2>, 등)를 포함하는 것이 권장된다. 각각의 섹션은 고유한 내용을 포함하며, 이 내용을 요약하거나 대표하는 제목이 있어야 그 구조와 목적이 명확해진다. 

 

- 반면에, <main>, <nav>, <footer> 태그는 제목 태그를 필수적으로 포함할 필요가 없다. 이들 태그는 각각 주요 콘텐츠, 탐색 링크 집합, 페이지의 바닥글 정보를 나타내는 용도로 사용되며, 각각의 역할과 목적이 이미 명확하기 때문.

 

이렇게 각 태그의 사용 목적과 콘텐츠의 성격에 따라 제목 태그의 필요성이 달라진다. 

 

 

 

 

💡 효과적으로 웹 문서를 설계하고 싶다면 웹 접근성과 SEO를 고려하여 적절한 구조와 의미를 가진 태그를 사용하도록 하자!