[HTML] 시맨틱 요소의 종류

 

 

[그림] 코드스테이츠, 시멘틱 요소로 구성된 화면

시멘틱 요소	설명
<header>	일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치하며, 사이트의 제목이 보통 들어감. 선택적으로 상단바나 검색창 등이 안에 들어갈 수 있음
<nav>	내비게이션(navigation)의 약자로, 일반적으로 상단바 등 사이트를 안내하는 요소에 사용. 보통은 안에 <ul>을 넣어 목록 형태로 사용
<main>	문서의 주된 콘텐츠를 표시
<section>	섹션(section)이란 제목을 가지고 있으며, HTML 문서의 전체적인 내용과 관련이 있는 콘텐츠들의 집합을 의미 (ex. 소개, 뉴스 항목, 연락처 정보 등)
<article>	문서의 전체적인 내용과는 별도의 독립적인 내용이 들어갈 때 사용, 재사용 가능 (ex. 신문 기사, 제품 카드, 블로그 게시글 등)
<aside>	본문의 주요 부분을 표시하고 남은 부분을 설명하는 요소, 특별한 일이 아니면 사이드바나 광고창 등 중요하지 않은 부분에 사용
<footer>	일반적으로 페이지나 해당 파트의 가장 아랫부분에 위치하며, 사이트의 라이선스, 주소, 연락처 등을 넣을 때 사용
<hgroup>	제목을 표시할 때 사용하는 요소 ex. <h1>~<h6>

🔻 레퍼런스 및 시맨틱 요소 더보기 🔻

• 나무위키: HTML/태그

• MDN:Semantics

• w3School:HTML Semantic Elements

• tcpschool: element_semantic