시맨틱 HTML은 내용이 맡은 역할에 맞는 요소로 문서의 의미와 구조를 표현하는 방식이다. 제목을 제목 요소로 쓰고 주요 이동 경로를 nav로 묶는 것이 그 예다. main은 주된 내용을, section은 주제에 따라 구분할 만한 영역을 나타낸다. header와 footer는 화면의 위아래 위치보다 문서나 구획의 머리말과 꼬리말이라는 역할에 관계한다.

새로운 질서의 「의미 있는 상자」처럼 HTML 요소에 역할을 기록하면 스크린 리더와 검색 도구, 나중에 코드를 다시 읽는 자신에게 단서가 남는다. 모든 영역을 div로 묶으면 이름만으로 그 역할을 알기 어렵지만, 모든 문단에 section을 보태는 것도 답은 아니다. 영역을 나눌 이유와 읽는 순서를 살피는 일이 접근성과 유지 보수에 도움이 된다.

상자에 이름표를 붙이기

1. 원문과 답장을 함께 조판하기에서 제목과 인용, 내 설명, 주요 이동 경로를 적고 역할에 맞는 요소를 고른다.
2. 꾸밈을 벗긴 문서 읽기로 내용의 순서를 살펴보자. CSS를 잠시 걷었을 때도 제목과 본문을 구분할 수 있는지 확인한다.
3. 화면을 종이로 옮겨 읽기에서도 순서를 비교한다. 인쇄가 잘됐다는 사실만으로 구조가 적절하다고 판단하지는 않는다. 구역을 나눈 이유가 모호하다면 상자의 역할 질문에 남겨 다시 살핀다.

기타 등등

• b와 strong은 기본 화면에서 둘 다 굵게 보일 수 있지만 같은 의미는 아니다. 모양이 같다는 사실이 역할까지 같다는 뜻은 아니다. 출처
• i는 다른 어조나 관용 표현처럼 주변 글과 구별되는 부분을 나타낼 수 있다. 글자를 기울이는 시각 효과와 요소의 의미를 구분해야 한다. 출처

#개념 #HTML