[HTML] html 시맨틱 태그란? 시맨틱 태그를 사용해야하는 이유

시맨틱 태그

 

 시맨틱의 사전적 의미는 의미론적이라는 것이다. 이에따라 시멘틱 웹의 의미는 의미론적인 웹, 이라고 해석되는데 이는 사람 뿐 아니라 기계도 쉽게 이해할 수 있는 웹이라는 의미이다.

 

 기존 사용하던 <div>태그 등은 사용자에게는 쉽게 이해가 되지만 기계(검색엔진 등)에게는 의미가 없는 태그이다. 이러한 의미없는 태그를 논 시멘틱 태그라고 한다.

 

 시맨틱 앱의 경우 논시맨틱하지 않는 태그, 즉 시맨틱 태그를 최대한 사용해 HTML 문서를 의미론적으로 설계하는 것이 중요하다. 이를 위해 HTML5에서 추가된 것들이 시맨틱 태그들이다.

 

시맨틱 태그를 사용하면 아래의 장점이 있다.

1. SEO(Search Engine Optimization, 검색 엔진 최적화)에 유리하다.
2. 유지 보수성 : main, section등 의미있는 태그명을 사용하므로서 해당 영역을 한 눈에 파악 가능해진다.

 

html의 시맨틱 태그 종류

 

시맨틱 태그

<main> : 메인 영역을 정의한다. 내부에 article, footer, nav, header등을 포함하는 최상당 태그로 사용한다.

 

<nav> : 네비게이션 영역을 나타낸다. nav는 페이지 내부에서 다른 영역으로 이동, 외부로 이동하는 버튼 등을 포함하는 영역이다.

 

<aside> : 페이지 좌측이나 우측 사이드 위치 공간을 나타낸다. 본문 외 부수적인 내용을 표현할 때 사용한다.

 

<articel> : 기사, 블로그 게시물, 로그인 영역 등 페이지 내에서 독립적인 영역을 나타낸다.

 

<footer>  : 웹 페이지 하단의 푸터 영역을 나타낸다. footer에는 일반적으로 저작권, 연락처, 주소 등의 정보를 포함한다.

 

<section> : 페이지 내에서 논리적으로 관련 있는 내용 영역을 각각 구분할 때 사용한다. 즉, 태그 내의 내용들은 관련이 있는 내용들이 들어간다.

 

<details> : 사용자가 볼 수 있는 세부 영역을 나타낸다. 숨기거나 펼칠 수 있다.

 

<summary> : details 태그 내에 사용. 화면에 보일 제목을 명시. 제목을 클릭하여 details을 펼치거나 닫을 수 있다.

 

<address> : 컨텐츠 작성자, 소유자 등의 정보를 담는다.

 

<mark> : 페이지에서 중요한 부분을 나타낸다.

 

<hgroup> : 제목과 관련된 부제목들을 묶는다.

 

<figure> : 이미지, 동영상 등을 삽입할 때 사용한다.

 

<figcaption> : figure태그에 대한 제목을 나타낸다.

 

* details 태그 예시

<details>

    <summary>

        제목

    </summary>

    <p>제목에 대한 내용</p>

</details>

디테일 태그