📚 HTML5 시멘틱태그

✳ 시멘틱태그란?

semantics - 의미가 부여된 태그 (#<div> 대체사용)

• 구획의 용도와 내용의 의미를 알게 해 줌.
• 검색엔진 등 사이트를 분석하는데 도움을 줌.

---

✳ 시멘틱태그 사용하는 이유?

1. HTML 문서의 가독성과 유지보수가 쉬움
2. 검색엔진 최적화(SEO)
3. 웹 접근성

---

✳ 시멘틱태그의 종류

<header> : 페이지 최상단 위치(ex. 제목, 로고, 검색창)

<footer> : 페이지 최하단 위치 (ex. 작성자, 저작권정보 등)

 

<nav> : 링크들 (현재페이지 내 구획 또는 다른 페이지)

 

<aside> : '사이드바'로 이용, 주 내용과 간접적 연관 부분

 

<main> : <boby>의 주요 콘텐츠. 메인콘텐츠가 들어감.

 

<section> : 콘텐츠 내 큰 단위의 독립적 구획, 다른 시멘틱 태그의 의미에 해당

 

<article> : 독립적으로 재사용되거나 반복적으로 나타나는 구획. (ex. 게시판, 뉴스, 갤러리의 목록상 각 항목 등

 

<address> : 해당 문서의 연락 정보를 나타나며, 이탤릭체(italic)로 표현.

 

<details> : 사용자가 직접 조작하여 보거나 숨길 수 있는 부가적인 세부사항(additional details)을 명시할 때 사용

 

<summary>: <details> 요소에서 화면에 보일 제목을 명시할 때 사용합니다.

 

<figure> : 이미지, 다이어그램, 사진 등 독립적인 콘텐츠 정의 시 사용

 

<figcaption> : <figure> 요소의 설명 캡션(caption) 정의

 

<mark> : 형광펜으로 칠한 것처럼 하이라이트 된 텍스트를 정의할 때 사용

 

<time> : 날짜와 시간 데이터를 정의할 때 사용

 

---

 

✳ 시멘틱태그를 사용한 HTML 문서 구조