[HTML] 시맨틱 태그(Semantic Tag)

시맨틱 태그(Semantic Tag) 란?

<div> 태그처럼 block element지만, <div>와 다르게 의미를 포함하고 있는 HTML 태그. HTML5부터 등장함.

※ 참고 : <span> 태그는 inline element라고 하며, 줄바꿈이 없습니다.

 

 

 

시맨틱 태그를 이용하여 얻는 장점

1. HTML5 기반 웹 페이지 일관성 향상 -> 음성 서비스 등 접근성 서비스들에 정보 제공

2. 코드 가독성 향상

3. SEO(Search Engine Optimization, 검색 엔진 최적화) 향상 -> 검색엔진 크롤링 봇에게 정보 제공

 

 

<nav> : 페이지 링크들이 모여 있는 네비게이션 바

<article> : 배포가 가능한 콘텐츠(게시글)

<figure> : 게시글에 포함된 미디어 콘텐츠

<figcaption> : <figure> 의 캡션

<aside> : 사이드바 메뉴

<section> : 콘텐츠들을 특정 몇 개의 주제별로 묶을 때 사용