outline과 heading의 중요성
-
검색엔진: 도서의 목차와 같이
heading을 이용하여 문서의 구조를 잘 정리하면 검색엔진이 그 페이지의 정보를 파악하는데 도움이 된다. -
웹접근성: 스크린리더기를 사용하는 사용자들은 웹 문서에서
heading만 따로 추려서 음성으로 전달받은 다음 관심있는 영역을 골라 직접 이동한다.
Outline
- 간결하게 추려 낸 주요 내용
- 웹 문서의 개요는 헤딩과 섹션 요소로 구성됨
웹 브라우저에서 문서의 구조를 확인할 수 있는 방법
HeadingsMap - chrome extension
문서의heading이 어떻게 정돈이 되있는지 문서의 개요를 파악할 수 있다.
Heading
- 문서 개요를 형성하는 필수 아이템
<h*>태그는 절대 생략해서는 안된다.- 문서의 골격을 설명하는 가장 중요한 태그
- 웹 브라우저와 스키린리더에 문서 개요를 드러내는 방법
<h1>은 반드시 한번만 작성되어야 하는것은 아니다.<h1>~<h6>은 단계적으로 중요도를 나타낸다.<h1>부터 순차적으로 표기하는게 적절하다.- 단계를 누락하거나 건너뛰는것은 ❌
Title vs Heading
<title>요소는 문서의 제목, 한번만 사용 가능<h*>요소는 섹션의 제목, 문서에 여러번 사용 가능
Sectioning Root
HTML5 명세에는 정의되어있지만 현재 브라우저들은 구현하지 않음
브라우저 제조사가 오랜 시간 HTML5 개요 알고리즘을 구현하지 않았기 때문에 정의만 알고 넘어가자
<body>,<blockquote>,<details>,<dialog>,<figure>,<fieldset>,<td>- HTML5에서 새롭게 추가된 명세
- 독립적인 개요를 생성하는 개요 컨테이너
- 문맥 아닌 콘텐츠를 전체 개요에서 격리하는 역할
- 섹셔닝 루트 외부에서 내부 개요에 접근 불가
Sectioning Root안쪽에 있는heading은 개요로 취급하지 않는다.
HTML5 개요 알고리즘
- HTML5 명세에는 정의되어있지만 현재 브라우저들은 구현하지 않음
- 웹 개발자가 헤딩의 수준을 부적절하게 마크업하더라도 보정해주는 기능이 들어있음
Sectioning Content
- HTML5에서 새롭게 추가된 명세
- 명시적 개요를 생성하는 개요 컨테이너
Sectioning Tag를 사용하지 않으면 암시적인 개요를 형성한것이 됨
- 적절한 수준의
<h*>태그를 자식 요소로 사용해야 한다. heading과sectioing content를 1:1로 맵핑해서 사용하자
Sectioing Tag
개요의 범위를 명시적으로 지정하는 역할
<article>: 블로그 포스트, 기사, 본문, 맥락을 하나로 묶어줄때 사용, 독립적으로 배포 가능<aside>: 페이지의 주요 내용이 아닌 부가적인 내용이 담긴 곳<nav>: 사이트의 주된 탐색 메뉴<section>: 서로 연관있는 내용들을 하나로 묶어줄때 사용
명시적 섹션 & 암시적 섹션
- 명시적 섹션:
heading과 함께sectioning content를 사용하여 섹션의 범위를 명시적으로 알 수 있는 섹션 - 암시적 섹션:
sectioing content를 사용하지 않고,heading만을 사용하여 암시적으로 개요가 생성된 섹션
어색한 섹션
- 최상위
heading이 없는 경우:<h1>을 건너뛰고 작성한 경우sectioing content를 사용했지만heading를 누락한 경우
Front-End 😲