반응형
SECTION 태그란?
HTML에서 section 태그는 웹 페이지의 구획을 나누는 데 사용됩니다. 이렇게만 얘기하면 무슨 소리지? 라고 생각될텐데요. 저도 이런 태그는 있으나 없으나 똑같은 것 아닌가? 라고 생각했습니다.
그런데, 검색엔진은 이런 구획 나누는 태그를 좋아한다고 하네요. 시맨틱 구조이기 때문이죠.
<html>안에 <body>가 들어가고, <body>안에 <main>이 들어가겠죠?
<section>은 <main>안에 들어가는 태그입니다.
사용법
<main>
<section>
<!-- 이 안에는 A 컨텐츠, H, P가 들어갑니다 -->
</section>
<section>
<!-- 여기는 B컨텐츠가 들어갑니다 -->
</section>
</main>
- 컨텐츠가 A 내용, B 내용으로 구분된다면 각각 <section> </section> 태그로 그룹핑합니다
예시
<section>
<h2>소개</h2>
<p>회사 소개 내용...</p>
</section>
<section>
<h2>서비스</h2>
<ul>
<li>서비스 1</li>
<li>서비스 2</li>
<li>서비스 3</li>
</ul>
</section>
위의 코드에서는 첫 번째 section 태그에는 "소개"라는 제목과 회사 소개 내용이 포함되어 있습니다. 두 번째 section 태그에는 "서비스"라는 제목과 목록 형태로 서비스 내용이 포함되어 있습니다.
section 태그를 활용해서 컨텐츠 영역을 구분한거죠. section별로 CSS를 따로 꾸밀 수도 있고, 유지보수와 가독성을 향상시킨답니다.
반응형
'HTML' 카테고리의 다른 글
| 웹페이지의 메타데이터와 스타일을 정의하는 HTML <head> 태그 (0) | 2023.06.01 |
|---|---|
| HTML의 시작 태그, 코딩의 스타트 <html> 태그의 역할과 사용법 (0) | 2023.05.31 |
| HTML 리스트 생성 <ol> 태그 - 순서가 존재하는 목록 생성 (0) | 2023.05.30 |
| 사용자의 상호작용을 위한 버튼을 만들자 HTML <button> 태그 (0) | 2023.05.30 |
| HTML 리스트 생성 <ul> 태그 - 순서없이 마커로 목록 생성 (0) | 2023.05.29 |
