시맨틱 태그(Semantic Tag)

쉬운 설명

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

실제로는 이렇게 만나요

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

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

헷갈리기 쉬운 점

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

왜 알아두면 좋을까요?

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