[HTML] 시맨틱 태그가 뭘까

❓ 시맨틱 태그

시맨틱 태그(SemanticTags)를 번역하면 "의미론적 태그"이다.

HTML 에서 시맨틱 태그는 웹 페이지의 구조를 정의하고 의미를 부여하는 태그를 말한다.

 

주요 목적은 단순히 div 나 span 태그를 반복해서 사용하지 말고!

태그 자체가 가진 의미를 활용해 웹 페이지를 구성해서 코드의 가독성도 높이고,

웹 접근성과 SEO 성능을 개선하는 것이다.

 

++) SEO?

SEO 는 검색 엔진 최적화이다.

웹 페이지가 검색 엔진에서 더 잘 검색되도록 최적화하는 과정을 의미한다.

즉, 구글이나 네이버에 검색해서 상단에 뜨는 웹 페이지들은 SEO 가 잘 되어 있을 가능성이 높다.

 

---

❗ 예시 (+ 예시 외에도 정말 많음!)

1. 헤더 영역

헤더는 웹 페이지의 상단에 위치하며, 일반적으로 사이트 제목, 로고, 내비게이션 링크 등을 포함한다.

<header>
  <h1>웹 페이지 제목</h1>
  <nav>
    <ul>
      <li><a href="#">홈</a></li>
      <li><a href="#">소개</a></li>
      <li><a href="#">연락처</a></li>
    </ul>
  </nav>
</header>

 

 

2. 컨텐츠 영역

웹 페이지의 본문은 여러 개의 영역으로 나누어질 수 있다.

<article> 태그는 독립적인 컨텐츠 블럭을 정의하며, 블로그 글이나 뉴스 기사와 같은 컨텐츠에 적합하다.

<section> 태그는 문서 내의 구획을 나누는 데 사용되며, 보통 제목을 포함한다.

<article>
  <h2>블로그 글 제목</h2>
  <p>블로그 글의 내용</p>
</article>

<section>
  <h2>부제목</h2>
  <p>부제목에 대한 내용</p>
</section>

 

 

3. 푸터 영역

페이지의 하단에 위치하며, 일반적으로 저작권 정보, 연락처 정보 등을 포함한다.

<footer>
  <p>&copy; 2024 나의 웹사이트. All rights reserved.</p>
</footer>

 

 

 

전체 화면

 

---

📝 정리

1. 시맨틱 태그는 HTML 요소에 의미를 부여하여 웹 페이지의 구조를 명확하게 한다.

2. SEO 는 검색 엔진이 페이지를 더 잘 이해하도록 도와서 검색 순위에 영향을 준다.

3. 시맨틱 태그를 사용하면 웹 접근성과 가독성이 향상된다.

 

---

💡 참고 문헌

https://developer.mozilla.org/ko/docs/Glossary/Semantics

Semantics - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN

https://developer.mozilla.org/ko/docs/Glossary/SEO

SEO - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN