웹 기본
시맨틱 태그(Semantic Tag)
시맨틱 태그는 제목·탐색 메뉴·본문처럼 콘텐츠의 의미와 역할에 맞게 사용하는 HTML 태그입니다.
쉬운 설명
화면이 똑같이 보여도 HTML에서 어떤 요소를 썼는지는 다를 수 있어요. 제목에는 h1, 주요 탐색 링크에는 nav, 핵심 본문에는 main처럼 역할에 맞는 태그를 사용할 수 있어요. 이렇게 하면 브라우저와 보조 기술이 문서 구조를 이해하는 데 도움이 돼요. 색이나 위치는 CSS로 별도 지정해요.
이런 상황에서 만나요
AI가 만든 소개 페이지가 모두 div로만 구성돼 있어요. 제목과 메뉴, 본문의 역할이 코드에서도 드러나도록 정리하려는 상황이에요.
화면의 역할을 HTML에서도 구분해요
<h1>AI 스터디</h1>
<nav aria-label="주요 메뉴"> <a href="/studies">스터디 목록</a> </nav>
<main> <h2>이번 주 스터디</h2> <p>함께 만드는 첫 웹 앱</p> </main>
- 1페이지의 주제를 제목 요소로 표시해요.
- 2주요 페이지로 이동하는 링크를 탐색 영역으로 묶어요.
- 3페이지의 핵심 내용을 본문 영역으로 구분해요.
“모양을 유지하면서 제목·메뉴·본문에 맞는 HTML 요소를 사용해 줘”라고 요청해 보세요. 코드뿐 아니라 제목의 순서와 키보드로 링크·버튼을 이동하며 사용하는 동작도 확인해요.
헷갈리기 쉬운 점
div를 전부 시맨틱 태그로 바꾸면 되나요?
그렇지는 않아요. 특별한 의미 없이 스타일이나 배치를 묶는 용도에는 div를 쓸 수 있어요. 요소의 실제 역할에 맞게 선택해야 해요. 모양이 비슷하다는 이유로 제목 태그를 글자 크기 조절에만 쓰지는 않아요.
의미에 맞는 태그를 썼다고 접근성이 모두 해결되지는 않아요. 입력란의 이름, 이미지 대체 설명, 키보드 조작 같은 항목도 함께 확인해야 해요.
왜 알아야 할까요?
화면 모양만 보고 놓치기 쉬운 구조 문제를 AI에게 구체적으로 요청할 수 있어요. 제목으로 내용을 탐색하거나 보조 기술로 페이지를 이용하는 사람도 고려할 수 있어요.
조금 더 자세히
시맨틱은 의미를 담는다는 뜻입니다. HTML 요소는 역할에 따라 문서 구조나 기본 동작을 제공합니다. 동작을 실행하는 요소에는 button, 다른 주소로 이동하는 요소에는 href가 있는 a처럼 목적에 맞는 요소를 선택합니다.
아래 예시는 문서의 주요 부분을 간추린 것입니다. h1은 페이지의 주제, nav는 주요 탐색, main은 핵심 본문을 나타냅니다. 검색 순위가 자동으로 올라간다는 보장은 아니며, 콘텐츠와 문서 구조를 정확하게 표현하는 데 목적이 있습니다.
직접 사용할 때 확인해 보세요
- 모양이 아닌 실제 역할에 맞춰 선택한다
- 제목 구조와 입력 요소의 이름을 확인한다
- 키보드로 이동하고 조작해 본다
참고 자료
관계 지도
