웹의 뼈대를 잡는 시맨틱 태그

시맨틱 태그란?

시맨틱 태그는 태그 자체가 의미를 가지고 있는 태그로 브라우저와 개발자 모두에게 컨텐츠가 어떤 역할을 하는지 명확히 설명해주는 역할을 한다.
과거에는 단순히 <div> 태그로 영역을 나눴으나, 현재는 태그만 봐도 구조를 알 수 있도록 시맨틱 태그를 사용하는 것을 강력히 권장한다.

예전 회사에서는 <header>처럼 시맨틱 태그 사용 대신, <div id="header"> 사용하라고 했다.
그 이유는 당시 인터넷 익스플러로 옛날 버전에서 시맨틱 태그가 제대로 인식되지 않아 레이아웃이 깨지는 현상 때문이였다.
하지만 지금은 웹 표준화가 완전히 자리 잡았으며, 시맨틱 태그 사용이 기본이 되었다.

시맨특 태그 종류

<header>: 페이지나 섹션의 머리말 (로고, 메뉴 등)
<nav>: 다른 페이지로 이동하는 링크 모음 (네비게이션)
<main>: 문서의 핵심이 되는 주요 본문 (페이지당 1회 사용)
<section>: 주제별로 연관된 콘텐츠의 묶음
<article>: 뉴스 기사나 블로그 포스트처럼 독립적인 게시물
<aside>: 본문 옆의 사이드바나 부가 정보

시맨틱 태그 사용 시 무슨 장점이 있을까?

검색 엔진 최적화(SEO)
구글이나 네이버 같은 검색 로봇은 코드를 읽을 때, <main> 같은 태그를 발견하여 핵심 내용이라고 판단하고, 검색 결과 노출데 도움을 준다.
웹 접근성
텍스트를 읽어주는 스크린 리더 프로그램을 사용해 화면을 읽을때, 시맨틱 태그를 통해 영역 구분을 해주어 도움을 준다.