728x90
section 태그
html5에서 새롭게 시맨틱한 마크업을 위해 추가 된 태그 중 주제별 영역들을 그룹화하는용도로 사용합니다.
섹션 관련 태그(Section Related Tag)
태그 | 설명 |
<main> | 문서의 주요 콘텐츠 영역 설정 해당 문서의 중심 주제 또는 주요 기능과 직접적으로 관련되어 있거나 확장되는 콘텐츠로 구성 |
<section> | 주제별 그룹의 콘텐츠 섹션을 설정 주로 제목 요소(h1~h6)를 자식 요소로 포함하고 있음 |
<article> | 문서의 완전히 독립적인 컨텐츠 섹션을 설정 포럼(forum) 포스트, 블로그 포스트, 보도 기사, 논평(comment) 등 |
<aside> | 주요 콘텐츠의 보조적 컨텐츠 섹션을 설정 (사이드 메뉴나 광고) 텍스트, 인라인 요소, 블록 레벨 요소 포함 가능 |
<header> | 문서의 소개 및 메뉴 그룹 컨텐츠 섹션을 설정 (제목이나 내비게이션, 검색 등의 내용 포함) 요소 중 <header>,<footer>태그는 포함 불가 |
<nav> | 문서에 대한 메뉴 링크를 제공하는 섹션 (메뉴나 목차 등을 정의) 텍스트, 인라인 요소, 블록 레벨 요소 포함 가능 |
<footer> | 문서 관련 정보 및 관련 링크 콘텐츠 섹션을 설정 (작성자나 저작권 정보, 관련된 링크) 요소 중 <header>,<footer>태그는 포함 불가 |
<address> | 문서 관련 연락처 콘텐츠 섹션을 설정 (문서나 글의 저자 또는 회사와 연락할 수 있는 정보) |
<h1>~<h6> | 각 섹션의 제목을 설정 <h1> 요소가 가장 중요한 제목을 정의 <h6> 요소로 갈 수 록 중요도가 낮아짐 |
section과 article의 차이점
section과 article 태그는 비슷하지만 다릅니다!
즉, section은 영역을 감싸거나 구분할 때,
article은 영역을 나누지만 언제든 그 영역이 다른 페이지나 영역에 가져다 쓸 수 있는 것입니다.