[HTML/CSS] 02. 시맨틱 마크업 (Semantic Markup)이란?

🔍 <div>와 <span>

 

<div>와 <span>은 HTML에서 가장 기본적인 컨테이너 요소로, 각각 다른 용도와 성격을 가지고 있다.

This is a <div> A </div> with some text inside.
This is a <span> B </span> with some text inside.

 

• <span> : 인라인 태그.
• <div> : 블록 레벨 요소

 

span은 옆으로 이어지는 인라인 태그기 때문에 줄바꿈이 발생하지 않지만, <div>는 한 공간을 차지하기 때문에 줄바꿈 발생하게 된다.

 

 

 

🔍 Semantic 태그란?

 

Semantic 태그는 HTML5에서 추가된 태그로, 웹 페이지의 구조를 더욱 의미론적으로 표현하는 데 사용된다.

div와 span 등의 일반적인 컨테이너 태그를 사용하여 웹 페이지를 구성하면, 이 태그들은 그 자체로는 어떤 의미도 가지지 않기 때문에 웹 페이지의 내용을 이해하기 어려워진다.

 

 

 

• <header>: 페이지의 머리글.
• <nav>: 내비게이션 메뉴.
• <main>: 주요 콘텐츠를 감싸는 태그.
• <section>: 관련 있는 콘텐츠 그룹화.
• <article>: 독립적인 콘텐츠 영역.
• <footer> : 페이지의 바닥글.

 

반면에, Semantic 태그는 태그 자체로 의미를 가지기 때문에 각 영역이 무슨 역할을 하는지 태그 자체로 알 수 있게 해준다.

 

이러한 Semantic 태그는 검색 엔진 최적화(SEO)에도 도움이 된다. 검색 엔진은 Semantic 태그를 분석하여 웹 페이지의 내용을 더욱 정확하게 인식하고, 검색 결과에서 더욱 높은 순위로 표시한다.

 

따라서 Semantic 태그는 웹 페이지의 구조를 더욱 의미론적으로 표현하고, 검색 엔진 최적화에도 도움이 되므로, 웹 개발에서 중요한 역할을 한다.

 

 

 

🔍 태그들은 다 기억해야 할까?

 

html에는 많은 태그와 속성이 있기 때문에 다 기억할 수 없다.

각 태그들에 어떤 종류가 있는지 MDN 공식 문서를 통해 찾아 볼 수 있다.

태그명 tag MDN

 

이런 검색어를 통해 검색하면 된다.