Bomb Kirby Running

HTML

section 관련 태그 알아보기

^. ̫ .^ 2023. 2. 22. 17:49

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은 영역을 나누지만 언제든 그 영역이 다른 페이지나 영역에 가져다 쓸 수 있는 것입니다.

 

section과 artical의 차이점


지원하는 브라우저 및 버전