HTML 이란? - section 태그에 대해서 -9

 

안녕하세요 여러분!

오늘은 어제에 이어 <section>태그에 대해서 알아보고자 합니다!

 

---

 

ⓒ Photography by pexels - https://www.pexels.com/

 

 

 

---

 

1️⃣ section 태그란?

<section> 태그는 HTML5에서 도입된 구조적 요소로, 문서 내에서 관련된 콘텐츠 그룹을 나누기 위해 사용됩니다. <div>와 같은 일반적인 블록 요소와 달리, <section> 태그는 의미론적 의미를 가지고 있으며, 특정 주제나 목적을 가진 콘텐츠를 나타내는 데 적합합니다.

 

---

 

2️⃣ 주요 특징

 

1. 콘텐츠 그룹화: <section> 태그는 하나의 주제나 목적을 가진 콘텐츠를 그룹화합니다. 예를 들어, 뉴스 기사, 블로그 포스트에서 각각의 섹션을 나눌 수 있습니다.
2. 의미론적 구조: 문서의 논리적인 구성을 돕습니다. 검색 엔진이나 스크린 리더와 같은 도구들은 <section> 태그를 통해 콘텐츠의 흐름과 중요도를 더 쉽게 이해할 수 있습니다.
3. 제목 요소와 함께 사용: <section> 태그 내에는 보통 제목 요소(<h1> ~ <h6>)를 사용해 해당 섹션의 내용을 설명합니다. 제목이 없으면 의미가 떨어지기 때문에, 대부분의 경우 <h2> 또는 <h3> 같은 제목 요소와 함께 사용합니다.
4. 다른 레이아웃 요소와의 차이점
   • <div>: 레이아웃을 위한 순수한 블록 요소로, 의미적인 구분이 없습니다. 구조나 의미보다는 스타일링을 위해 주로 사용됩니다.
   • <article>: 독립적이고 자기완결적인 콘텐츠를 나타내며, 다른 문서에서 가져와도 완전한 의미를 지닙니다. <section>은 이런 독립성을 요구하지 않습니다.

<section>
  <h2>News</h2>
  <p>This is the latest news about web development.</p>
</section>

<section>
  <h2>Blog</h2>
  <p>Recent blog posts go here.</p>
</section>

 

 

---

 

3️⃣ 사용방법

 

• 특정 주제나 내용의 그룹이 명확하게 있을 때.
• 문서 내에서 여러 주제로 나뉘어진 영역을 명확하게 정의하고 싶을 때.

 

---

 

section태그는 내용의 구분이 명확할때

그룹지어주기 참 좋은데,

 

너무 남용하는것은 좋지 않고

논리적이고 의미있는 그룹을 나눌때 사용하는것이 바람직합니다!

 

오늘은 <section>태그에 대해서 알아보았는데요,

 

HTML 주요 태그들에 대해서 거의 다 알아보고 있는것 같아요!

 

그럼 다음시간까지 전 이만~!