시맨틱은 예쁜 모양보다 코드의 의미와 역할을 말합니다
HTML의 의미는 요소가 문서에서 어떤 목적을 가지는지와 관련됩니다. 크게 굵은 문단과 실제 제목 요소는 겉모양이 비슷해도 구조적 역할이 다를 수 있습니다. CSS를 잘 적용했다는 결과와 의미를 제대로 표현했다는 결과를 나눠 봅니다. 근거: MDN Semantics, 2026-11-04.
근거: MDN Semantics · 2026-11-04 확인
두 제목 표기를 내용 역할로 비교합니다
작성자 예제 <p class="big">준비물</p>와 <h2>준비물</h2>를 보세요. 실제로 하위 섹션을 여는 제목이라면 단순한 글자 크기보다 문서 계층에 맞는 제목 역할이 필요합니다. 반대로 강조할 문장을 무조건 제목으로 바꾸면 구조가 달라질 수 있습니다. 이 조각은 설명용이며 이 작업에서 브라우저 표시나 탐색 결과를 확인한 예제가 아닙니다.
근거: MDN Semantics · 2026-11-04 확인
컨트롤과 링크는 실제 행동에서 선택합니다
다른 문서로 이동하는 동작인지 현재 작업을 실행하는 동작인지 먼저 적습니다. 표준 요소가 제공하는 의미·키보드 행동을 확인하고 겉모양 때문에 역할을 임의로 바꾸지 않습니다. 문서에는 제목·목록·표 등 실제 관계를 표현하되 이름이 시맨틱해 보이는 태그를 많이 붙이는 것이 목표는 아닙니다. 사용자에게 필요한 정보 계층과 일치해야 합니다.
근거: MDN Semantics · 2026-11-04 확인
검수는 구조·표시·조작을 별도로 대조합니다
허가된 문서에서 제목 계층과 이름·역할을 보고, 실제 화면의 가독성과 키보드 흐름도 확인합니다. 어느 하나만 통과해 검색 노출·접근성 전체를 보장하지 않습니다. 잘못된 역할을 발견하면 본래 내용·행동을 정의한 뒤 요소와 스타일을 함께 보완합니다. 성공은 의미와 실제 기능이 맞는 상태이며 이 글은 코드 변경·운영 검증 결과를 제시하지 않습니다.
원문으로 이어 읽기
확인일: 2026-11-04. 정의와 적용 범위, 발행일과 판본을 함께 살펴봅니다. 원문이 존재한다는 사실만으로 개별 주장의 정확성과 재사용 권리가 자동 보장되지는 않습니다.