웹 기본

시맨틱 태그(Semantic Tag)

시맨틱 태그(Semantic Tag)는 콘텐츠의 의미와 역할을 이름으로 드러내는 HTML 태그입니다.

쉬운 설명

콘텐츠의 의미와 역할을 이름으로 드러내는 HTML 태그.

배경과 쓰임까지 이해하기

시맨틱 태그(Semantic Tag)는 HTML 요소가 어떤 역할인지 이름만 보고도 알 수 있게 해주는 태그입니다. `header`, `nav`, `main`, `article`, `button`처럼 페이지 구조와 기능의 의미를 표현합니다.

의미 없는 `div`만 사용하는 것보다 검색 엔진과 스크린 리더가 페이지를 이해하기 쉬워지고 기본 키보드 동작도 활용할 수 있습니다. 한마디로, 시맨틱 태그는 웹 콘텐츠의 역할을 정확한 이름으로 표시하는 HTML 태그입니다.

클릭 동작을 `div`에 넣기보다 `button`을 쓰고, 주요 콘텐츠는 `main`, 독립된 글은 `article`로 표현합니다.

이런 거 할 때 나와요 브라우저, 검색 엔진, 스크린 리더가 페이지 구조와 조작 요소의 역할을 더 정확히 이해할 수 있습니다.
이렇게 생겼어요 시맨틱 태그(Semantic Tag)은(는) HTML, Accessibility, SEO 같은 주변 개념과 함께 문서, 설정 화면, 오류 메시지에서 자주 보입니다.
나오는 화면 예시 웹 기본 작업을 하다가 HTML, Accessibility, SEO를 확인하는 화면

태그 이름만 의미 있게 바꾼다고 접근성이 완성되지는 않습니다. 제목 순서, 레이블, 키보드 동작도 함께 확인해야 합니다.

브라우저, 검색 엔진, 스크린 리더가 페이지 구조와 조작 요소의 역할을 더 정확히 이해할 수 있습니다.

Checklist

현재 개념 시맨틱 태그(Semantic Tag)