HTML 시멘틱태그(sementic tag)

2022.04.05

시멘틱태그(sementic tag)?

HTML의 구조를 설계하는데 있어 태그에 의미를 부여 함으로써
사이트의 구조를 파악하기 용이할 수 있도록 도와주기 위해 만들어진 태그

시멘틱태그를 사용하면 좋은점

1. SEO 최적화에 유리
2. 웹 접근성에 효율적
3. 유지보수의 용이성

시멘틱태그의 종류

<header>: 머리글, 헤더
<nav>: 네비게이션, 목차, 리스트 등 다른 페이지로의 이동을 위한 링크 공간 위주로 표현
<aside>: 좌측, 우측 사이드 위치의 공간을 의미. 본문 외 부수적인 내용
<section>: 카테고리 별로 섹션을 구분하는 용도의 태그. 같은 테마를 가진 여러개의 콘텐츠의 그룹화
<article>: 기사, 블로그 등 텍스트 위주의 페이지 구성할때 주로 표현
<footer>: 바닥글, 문서 하단에 들어가는 정보 구분 공간을 표현
<address>: 작성자나 사이트 소유자의 정보를 부가적으로 담는 기능
<main>: 문서의 중심 주제, 주요 내용
<details>: 주변 문맥에서 표시된 구절의 관련성이나 중요성을 참조 또는 표기 목적으로 표시되거나 강조된 텍스트
<figure>: 이미지, 사진 등 독립적인 컨텐츠
<figcaption>: <figure>요소 설명
<mark>: 현재 맥락에 관련이 깊거나 중요나 부분 강조