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

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

## 상자에 이름표를 붙이기

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

## 기타 등등

- `b`와 `strong`은 기본 화면에서 둘 다 굵게 보일 수 있지만 같은 의미는 아니다. 모양이 같다는 사실이 역할까지 같다는 뜻은 아니다. [출처](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/strong)
- `i`는 다른 어조나 관용 표현처럼 주변 글과 구별되는 부분을 나타낼 수 있다. 글자를 기울이는 시각 효과와 요소의 의미를 구분해야 한다. [출처](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/i)

#개념 #HTML