시멘틱 HTML 태그
시멘틱 HTML의 의미
Sementic(의미있는) + tags 합쳐진 말로 의미있는 태그이다.
HTML5에서 등장했으며 태그자체에 웹사이트 구조에 대한 의미를 부여한다.
CSS 스타일로 적용이 아니라 태그 자체에 의미를 부여하는 것이다.
Sementic Markup 이라고도 한다.
시멘틱 HTML의 이점
- 웹 접근성 향상: 시각적 뿐만 아니라 스크린리더나 키보드를 사용할 때 웹 페이지의 구성을 쉽게 파악할 수 있다.
- 검색 엔진 최적화(SEO) 향상: 검색엔진이 HTML 태그분석 하는 것에 도움을 주어 웹 사이트 노출 순위를 높일 수 있다.
- 가독성 향상 및 유지보수성: 태그를 통해 역할과 기능을 파악할 수 있어 구조 이해가 쉬워진다.
시멘틱 HTML의 요소
-
<article>독립적으로 고유한 정보를 나타냄, 하위에 section태그와 함께 사용하기도 함
-
<aside>주요 내용과 관련이 없는 부분, 주로 배너 같은 곳에 사용함
-
<details>open으로 토글 될 때만 내용을 보여주는 위젯
-
<figcaption>figure에 대한 설명
-
<figure>사진과 같이 독립된 컨텐츠 <figcaption>로 설명을 붙일 수 있음
-
<footer>웹페이지 하단에 대표적으로 저자, 저작권 데이터 또는 문서와 관련된 링크를 포함
-
<form>정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획
label input과 같은 태그와 함께 쓰임 -
<header>소개 및 탐색에 도움을 주는 콘텐츠를 나타냄
제목, 로고, 검색 폼, 작성자 이름 등의 요소도 포함할 수 있음 -
<main>문서 <body>의 주요 콘텐츠를 나타냄
-
<mark>현재 맥락에 관련이 깊거나 중요해 표시 또는 하이라이트함
-
<nav>문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획
자주 쓰이는 예제는 메뉴, 목차, 색인 -
<section>문서의 독립적인 구획
-
<summary><detail>태그에서 요약 미리보기
-
<time>시간의 특정 지점 또는 구간
개발블로그입니다.