코드잇 위클리 페이퍼: 시맨틱 태그

About this offer

시맨틱 태그란? 시맨틱 태그(Semantic Tag)는 태그 이름만으로 문서의 구조나 콘텐츠의 역할을 알 수 있는 HTML 요소 입니다. <header> , <nav> , <main> , <article> , <section> , <footer> 등이 대표적입니다. 반면 <div> 와 <span> 은 그 자체로 특정한 콘텐츠 역할을 뜻하지 않는 일반 컨테이너입니다. 적절한 의미를 가진 태그가 있을 때는 시맨틱 태그를 사용하고, 의미를 부여할 필요가 없는 단순한 그룹에는 <div> 나 <span> 을 사용할 수 있습니다. <header> <nav aria-label="주 메뉴"> <!-- 메뉴 링크 --> </nav> </header> <main> <article> <h1>시맨틱 태그란?</h1> <p>태그의 의미를 활용해 문서 구조를 표현합니다.</p> </article> </main> <footer> <!-- 저작권 정보 --> </footer> 시맨틱 태그를 사용하면 좋은 점 1. 문서 구조와 코드의 의미가 분명해집니다 <div> 만 여러 겹 사용하는 것보다 <header> , <main> , <footer> 처럼 역할에 맞는 태그를 쓰면 각 영역이 무엇을 담당하는지 코드만 보고도 파악하기 쉽습니다. 태그 이름이 구조를 설명하므로 코드 가독성이 좋아지고, 불필요한 컨테이너 중첩을 줄이는 데도 도움이 됩니다. 이런 구조는 다른 개발자와 협업할 때도 유용합니다. 페이지의 영역과 역할을 빠르게 파악할 수 있어 코드를 수정하거나 기능을 추가하기가 수월해집니다. 2. 보조 기술을 통한 탐색에 도움이 됩니다 스크린 리더와 같은 보조 기술은 시맨틱 태그를 바탕으로 페이지의 랜드마크와 콘텐츠 구조를 파악할 수 있습니다. 사용자는 이를 활용해 페이지의 주요 영역을 알아보고, <nav> 나 <main> 같은 랜드마크 사이를 탐색할 수 있습니다. 다만 시맨틱 태그가 모든 환경에서 키보드 점프 기능을 자동으로 만들어 주는 것은 아닙니다. 실제 탐색 방식은 브라우저와 보조 기술에 따라 다를 수 있으며, 올바른 제목 구조와 폼 레이블, 이미지 대체 텍스트 등도 함께 갖춰야 접근성이 좋아집니다. 3. 검색 엔진이 문서 구조를 이해하는 데 도움이 됩니다 시맨틱 마크업은 검색 엔진을 포함한 기계가 페이지의 주요 콘텐츠와 영역을 이해하는 데 유용한 단서를 제공합니다. 하지만 시맨틱 태그를 사용했다고 검색 결과 순위나 노출이 자동으로 올라가는 것은 아닙니다. 태그는 콘텐츠의 의미와 구조를 올바르게 표현하는 데 사용해야 합니다. 자주 사용하는 시맨틱 태그 태그 주된 역할 <header> 페이지나 특정 영역의 머리말 <nav> 주요 탐색 링크 모음 <main> 페이지의 핵심 콘텐츠 <article> 독립적으로 배포하거나 재사용할 수 있는 콘텐츠 <section> 주제별 콘텐츠 영역. 보통 제목과 함께 사용 <aside> 본문과 간접적으로 관련된 보조 콘텐츠 <footer> 페이지나 특정 영역의 바닥글 모든 콘텐츠를 시맨틱 태그로 감쌀 필요는 없습니다. 적절한 의미를 표현할 요소가 없을 때는 <div> 나 <span> 을 사용하면 됩니다. 중요한 것은 태그를 단순히 모양 때문에 선택하지 않고, 콘텐츠의 역할에 맞게 사용하는 것입니다. 정리 시맨틱 태그는 HTML 문서의 구조와 콘텐츠의 역할을 명확하게 전달합니다. 이를 사용하면 코드를 읽고 유지보수하기 쉬워지고, 보조 기술과 검색 엔진이 문서 구조를 파악하는 데도 도움이 됩니다. 다만 접근성은 시맨틱 태그만으로 완성되지 않으며, SEO 효과도 검색 순위 상승을 보장하지 않습니다. 페이지를 만들 때는 먼저 각 콘텐츠가 어떤 역할을 하는지 생각하고, 그 역할에 맞는 태그를 선택하는 습관을 들여야겠습니다. 시맨틱 문서 구조 한눈에 보기

Offer details

Provider

velog

Source

velog-rss

Score

54.4

Confidence

49%