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

📌 시맨틱 태그(Semantic Tag)란?

  - 시맨틱 태그는 HTML5에서 새롭게 추가된 태그로, 웹페이지의 구조와 의미를 명확하게 하기 위해 만들어졌다.

     구조를 설계하는 데 있어 <div>와 <span>으로도 충분하지만 해당 구조가 헤더의 역할을 하는지, 네비게이션의 역할을 하는지

     직관적으로 알기 어렵다. 이때 <header>, <footer>와 같은 시맨틱 태그를 이용하면 웹페이지의 구조와 내용을

     명확하게 전달할 수 있어 내용을 파악하기 쉬워진다.

 

 

 

📌 시맨틱 태그의 장점

    1. 문서 구조 파악이 용이하다
        시맨틱 태그는 적절한 의미를 가진 구조로 구성되어 있다. 웹 페이지 상단부를 뜻하는<header>, 페이지 하단부를 뜻하는
        <footer>와 같이 직관적인 구조를 가진 시맨틱 태그를 사용하면 웹페이지의 구조를 파악하는 데 도움이 된다.

 

    2. 검색 엔진 최적화(SEO)가 용이하다
        검색 엔진은 웹 페이지의 내용을 분석하여 검색 결과의 우선순위를 결정한다. 기존 <div>태그는 레이아웃 구성에 중점을 두고 있어
        페이지 내용을 이해하기 어렵고 검색 엔진의 높은 우선순위를 받기 어려우나, 페이지 구조를 의미적으로 명시하는 시맨틱 태그는
        검색 엔진이 페이지 내용을 쉽게 이해하고 적절한 검색 결과를 제공하기 쉬워진다.

 

    3. 웹 접근성이 향상된다
        시맨틱 태그는 스크린 리더를 사용하는 사용자, 시각 장애인, 일반사용자 모두에게 웹 페이지 접근성을 향상시킨다.
        기존 <div>나 <span>태그는 의미가 명확하지 않아 스크린 리더가 콘텐츠를 제대로 읽어주지 못할 수도 있으나,
        시맨틱 태그는 의미를 가지고 있어 이러한 문제가 발생하지 않는다.

 

 

 

📌 시맨틱 태그의  종류

  - 자주 사용되는 태그 위주로 몇 가지만 정리해보았다.

태그	설명
<header>	문서 또는 섹션 페이지 상단의 로고, 메뉴와 같은 것들을 담을 때 사용한다.
<nav>	  문서의 메인 내비게이션을 구현할 때 사용한다.
<main>	문서 페이지 내 주요 컨텐츠를 담는 영역에 사용된다.
<article>	뉴스 기사, 블로그 포스팅과 같은 독립적인 컨텐츠를 담는 컨테이너 역할을 한다.
<section>	문서 페이지 내 주요 컨텐츠를 구획할 때 사용한다.
<aside>	사이드바, 광고 같은 별도의 컨텐츠 영역을 정의한다.
<footer>	문서 또는 섹션 페이지 하단의 저작권 정보, 연락처 정보 같은 내용을 담을 때 사용한다.
<h1>~<h6>	제목을 나타내는 태그로, 주로 콘텐츠의 구조를 나타내는 데 사용된다. 숫자가 작을수록 큰 제목을 나타낸다.
<address>	문서 작성자의 연락처 정보를 담을 때 사용하며, 보통 footer와 함께 사용된다.
<time>	날짜와 시간을 나타내는 태그로, 주로 게시물 작성일자, 이벤트 시작, 종류시간 등을 나타낼 때 사용된다.