HTML 개요 알고리즘 이해

Yudrey·2022년 3월 18일
0

패스트캠퍼스 강의를 정리한 내용입니다.
"The RED : 견고한 UI 설계를 위한 마크업 가이드 by 정찬명"

Outline

  • 개요, 윤곽
  • 간결하게 추려 낸 주요 내용
  • 웹 문서의 개요는 헤딩과 섹션으로 형성

Outline Keyword

  • Heading
  • SECTIONING
  • 명시적/암시적 섹션
  • 어색한 섹션

Title vs Heading

<title>

  • 문서의 제목
  • 문서에서 한 번만 사용 가능

<h*>

  • 섹션의 제목
  • 문서에서 여러 번 사용 가능

Heading

  • 문서 개요를 형성하는 기본(==필수) 아이템
  • 웹 브라우저와 화면낭독기에 문서 개요를 드러내는 기본적인 방법
  • heading 태그는 문서의 골격을 설명하는 가장 중요한 태그이므로 생략하지 않도록 주의
  • "헤딩 없이 개요(목차) 없다"

SECTIONING ROOT

*명세에는 구현되어 있으나, 브라우저 제조사가 오랜시간 HTML5 아웃라인 알고리즘을 구현하지 않았기 때문에 실무에 사용하는 것을 권장하지 않음

<body>
<blockquote>
<details>
<dialog>
<figure>
<fieldset>
<td>
  • HTML5에서 새롭게 추가된 명세
  • 독립적인 개요를 생성하는 개요 컨테이너
  • 섹셔닝 루트 외부에서 내부 개요에 접근 불가
<h1>A</h1>
<h2>B</h2>
<blockquote>
	<h3>C</h3>
    
* HTML5 명세 의도
Depth가 A > B 로 출력 (blockquote 내부 접근 불가)

*브라우저/화면낭독기
Depth가 A > B > C 로 출력
  • 문맥 아닌 콘텐츠를 전체 개요에서 격리하는 역할

Sectioning Content

  • 개요의 범위를 명시적으로 지정하는 역할

  • Sectioning Tag 종류

    • <article> : 기사, 본문, 맥락. 독릭접으로 배포 가능
    • <aside> : 페이지의 주요 내용이 아닌 부수적인 내용 (ex.배너, 연관 콘텐츠)
    • <nav> : 사이트의 주된 탐색 메뉴
    • <section> : 주제별로 나누거나 묶는 역할
  • HTML5에서 새롭게 추가된 명세

  • 명시적 개요를 생성하는 개요 컨테이너

  • Sectioning Tag가 없으면 암시적 개요 형성

  • 적절한 수준의 헤딩을 자식 요소로 사용해야 함

Sectioning Tag <article> vs <section>
주제별로 묶인 콘텐츠라는 점에서는 동일하지만, article 태그는 독립적으로 사용하더라도 하나의 완결된 형태의 콘텐츠로 간주할 수 있을 때 사용

<h1>A</h1>
<article>
  <h1>B</h1>
  <section>
	<h1>C</h1>
  </section>
</article>
    
* HTML5 명세 의도
Depth가 A > B > C 로 출력 (blockquote 내부 접근 불가)

*브라우저/화면낭독기
Depth가 A, B, C 로 출력

Check Point
"섹셔닝 요소를 적극 사용하되 아웃라인 알고리즘(섹셔닝 루트, 헤딩 수준 자동 보정) 명세에는 의존하지 말 것"

명시적 세션

  • 헤딩과 함께 섹셔닝 콘텐츠(article, aside, nav, section)를 사용하여 섹션의 범위를 명시적으로 알 수 있는 섹션
예제)
<h1>A</h1>
<article>
  <h2>B</h2>
  <section>
	<h3>C</h3>
  </section>
</article>

암시적 세션

  • 섹셔닝 콘텐츠(article, aside, nav, section)를 사용하지 않고, 헤딩만을 사용하여 암시적으로 개요가 생성된 섹션
예제)
<h1>A</h1>
<h2>B</h2>
<h3>C</h3>

어색한 섹션

  • 최상위 헤딩이 없는 경우
예제)
<body>
  <p>A</p>
  <article>
	<h2>B</h2>
  </article>
</body>
*h1 요소가 없이 h2 요소 바로 작성
  • 헤딩 없이 Sectioning Content을 사용한 경우
예제)
<article>
  <p>A</p>
  <section>
	<p>B</p>
  </section>
</article>

Summary

  • 헤딩을 사용하고 헤딩과 섹션(article, aside, nav, section)을 1:1로 매핑
  • HTML5 개요 알고리즘(섹셔닝 루트, 헤딩 수준 자동 보정)에 의존하지 않도록 주의
profile
Frontend Developer

0개의 댓글