HTML 시멘틱 태그

시멘틱 태그

시멘틱(Semantic)은 "의미의, 의미론적인" 이라는 뜻이다.

시맨틱 태그에 의해 컴퓨터가 HTML 요소의 의미를 보다 명확히 해석하고 그 데이터를 활용할 수 있는 시맨틱 웹이 실현될 수 있다. 즉, HTML5에 도입된 시맨틱 태그는 개발자와 브라우저에게 의미있는 태그를 제공하게 된다.

시멘틱 태그의 장점

• 검색엔진최적화(SEO):검색엔진은 태그를 기반으로 페이지 내 검색 키워드의 우선순위를 판단한다. 따라서 제목은 h1, 중요한 단어는 strong 또는 em을 사용하는 등 의미에 맞는 올바른 태그르 사용하는 것이 중요하다.
• 시각장애가 있는 사용자가 스크린 리더를 사용하여 페이지를 탐색할 때 도움이 된다.
• 시맨틱 태그를 사용한 코드 블록을 찾는 것은 끝없는 div(div > div > div ...)를 탐색하는 것보다 훨씬 쉽다.
• W3C에 따르면 "시맨틱 웹을 사용하면 애플리케이션, 기업 및 커뮤니티에서 데이터를 공유하고 재사용할 수 있다"고 한다.

종류

<header>	<header> 태그는 태그는 사이트의 소개 및 메뉴 그룹을 나타내는 섹션을 설정합니다.
<nav>	<nav> 태그는 내부 페이지 및 외부 페이지에 대한 탐색 링크를 제공하는 페이지 섹션을 설정합니다.
<section>	<section> 태그는 주제별 그룹의 콘텐츠 섹션 나타낼 때 사용합니다.
<main>	<main> 태그는 문서의 주요 콘텐츠를 정의합니다.
<aside>	<aside> 태그는 주요 콘텐츠의 보조적 컨텐츠 섹션을 설정합니다.
<article>	<article> 태그는 사이트의 독립적인 컨텐츠 섹션을 설정합니다.
<footer>	<footer> 태그는 사이트 관련 정보 및 관련 링크 콘텐츠 섹션을 설정합니다.
<details>	<details> 태그는 선택 목록과 자동 완성 기능을 설정합니다.
<summary>	<summary> 태그는 접기/펼치기 목록을 설정합니다.
<figure>	<figure> 태그는 인용, 도표, 사진, 코드 등의 독립적인 콘텐츠를 설정합니다.
<figcaption>	<figcaption> 태그는 요소의 설명 또는 제목을 설정합니다.
<mark>	<mark> 태그는 참조용 표시를 정의합니다.
<time>	<time> 태그는 시간의 특정 기간을 나타낼 때 사용합니다.
<meter>	<meter> 태그는 범위를 측정하는 게이지 정보를 정의합니다.
<progress>	<progress> 태그는 작업의 진행 상태를 표시하는 바를 나타냅니다.