시맨틱(Semantics) 태그

프로그래밍에서 시맨틱은 코드 조각의 의미를 나타낸다.

시맨틱 태그를 사용 시 이점

• 검색 엔진은 의미론적 마크업을 페이지의 검색 랭킹에 영향을 줄 수 있는 중요한 키워드로 간주한다.

• 시각 장애가 있는 사용자가 화면 판독기로 페이지를 탐색할 때 의미론적 마크업을 푯말로 사용할 수 있다.

• 의미없고 클래스 이름이 붙여져있거나 그렇지 않은 끊임없는 div 들을 탐색하는 것보다, 의미있는 코드 블록을 찾는 것이 훨씬 쉽다.

• 개발자에게 태그 안에 채워질 데이터 유형을 제안한다. 이것은 코드의 가독성을 높이고 유지보수를 쉽게한다.

• 의미있는 이름짓기(Semantic naming)는 적절한 사용자 정의 요소 / 구성 요소의 이름짓기(namimg)를 반영한다.

시맨틱 관련 태그(element)

<header>

• 소개 및 탐색에 도움을 주는 콘텐츠를 나타낸다.
• 제목, 로고, 검색 폼, 작성자 이름 등의 요소를 포함할 수 있다.

<footer>

• 가장 가까운 구획 콘텐츠나 구획 루트의 푸터를 나타낸다.
• 일반적으로 구획의 작성자, 저작권 정보, 관련 문서 등의 내용을 담는다.

<nav>

• 문서의 네비게이션 항목을 정의, 컨텐츠를 탐색할 때 사용하는 정보를 알려준다.

<section>

• 문서들의 구역들을 정의
• 서로 다른 영역을 구분하기 위해 사용
• section안에 article이 있다.

<article>

• 본문에 사용한다.
• 문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타낸다.
• 사용 예제로 게시판, 블로그 글, 잡지, 뉴스 기사 등이 있다.
• 하나의 문서에 여러 개의 <article>을 가질 수 있다.

<main>

• 문서에서 가장 중심이 되는 컨텐츠를 정의

<aside>

• 광고와 같이 문서의 주요 내용과 연관이 적은 부분을 나타낸다.
• 주로 사이드바 혹은 콜아웃 박스로 표현한다.

<details>

• 기본적으로 화면에 표시되지 않는 정보들을 정의

<figure>

• 삽화와 같은 부가적인 요소를 정의

<mark>

• 참조, 하이라이트 표시를 필요로하는 문자를 정의

<time>

• 시간을 정의

시맨틱 태그 기본 구조