제목 및 섹션

지난 섹션에서는 페이지에 있는 단어가 무엇을 의미하는지 모르더라도 시맨틱 요소가 문서에 의미 있는 구조를 제공할 때 검색엔진, 보조 기술, 미래의 유지관리 담당자, 새로운 팀원 등 다른 사람이 문서의 개요를 이해하는 방법을 배웠습니다.

이 섹션에서는 문서 구조를 알아보고, 이전 섹션의 섹션 요소를 요약하며, 애플리케이션의 개요를 마크업합니다.

코딩할 때 작업에 적합한 요소를 선택하면 HTML을 리팩터링하거나 주석 처리할 필요가 없습니다. 작업에 적합한 요소를 사용하는 것을 고려하고 있다면 작업에 적합한 요소를 선택하는 경우가 많습니다. 사용하지 않는다면 아마 없을 것입니다.

이제 마크업 의미 체계를 이해하고 올바른 요소를 선택하는 것이 중요한 이유를 알게 되었습니다. 다양한 요소에 대해 알아봤으면 일반적으로 큰 노력 없이도 올바른 요소를 선택할 것입니다.

<header> 사이트

사이트 헤더를 만들어 보겠습니다. 의미 체계가 없는 마크업으로 시작하여 HTML 섹션과 제목 요소의 이점을 알아볼 수 있는 적합한 솔루션을 찾습니다.

헤더의 의미 체계에 대해 거의 또는 전혀 모르면 다음과 같은 코드를 사용할 수 있습니다.

<!-- start header -->
<div id="pageHeader">
  <div id="title">Machine Learning Workshop</div>
  <!-- navigation -->
  <div id="navigation">
    <a href="#reg">Register</a>
    <a href="#about">About</a>
    <a href="#teachers">Instructors</a>
    <a href="#feedback">Testimonials</a>
  </div>
  <!-- end navigation bar -->
</div>
<!-- end of header -->

CSS는 거의 모든 마크업이 올바르게 표시되도록 합니다. 그러나 모든 것에 비시맨틱 <div>를 사용하면 실제로 추가 작업이 발생합니다. CSS로 여러 <div>를 타겟팅하려면 ID 또는 클래스를 사용하여 콘텐츠를 식별합니다. 이 코드에는 각 닫는 </div>에 관한 주석도 포함되어 있어 각 </div>이 닫은 여는 태그를 나타냅니다.

id 및 class 속성은 스타일 지정과 JavaScript를 위한 후크를 제공하지만 스크린 리더 및 대부분의 검색엔진에 시맨틱 값을 추가하지 않습니다.

role 속성을 포함하여 시맨틱을 제공하여 스크린 리더에 적합한 접근성 객체 모델 (AOM)을 만들 수 있습니다.

<!-- start header -->
<div role="banner">
  <div role="heading" aria-level="1">Machine Learning Workshop</div>
  <div role="navigation">
    <a href="#reg">Register</a>
    <a href="#about">About</a>
    <a href="#teachers">Instructors</a>
    <a href="#feedback">Testimonials</a>
  </div>
  <!-- end navigation bar -->
<div>
<!-- end of header -->

이렇게 하면 최소한 시맨틱을 제공하고 CSS에서 속성 선택기를 사용할 수 있지만, 각 </div>가 닫히는 <div>를 식별하기 위한 주석은 여전히 추가됩니다.

HTML을 알고 있다면 콘텐츠의 목적을 생각하기만 하면 됩니다. 그러면 role를 사용하지 않고 닫는 태그에 주석을 달지 않고도 의미론적으로 이 코드를 작성할 수 있습니다.

<header>
  <h1>Machine Learning Workshop</h1>
  <nav>
    <a href="#reg">Register</a>
    <a href="#about">About</a>
    <a href="#teachers">Instructors</a>
    <a href="#feedback">Testimonials</a>
  </nav>
</header>

이 코드는 두 가지 시맨틱 랜드마크(<header> 및 <nav>)를 사용합니다.

기본 헤더입니다. <header> 요소가 항상 랜드마크인 것은 아닙니다. 중첩 위치에 따라 의미 체계가 다릅니다. <header>가 최상위 수준인 경우 이는 랜드마크 역할인 banner 사이트이며 role 코드 블록에서 확인할 수 있습니다. <header>가 <main>, <article> 또는 <section>에 중첩되어 있는 경우 랜드마크는 해당 섹션의 헤더로만 식별되며 랜드마크가 아닙니다.

<nav> 요소는 콘텐츠를 탐색으로 식별합니다. 이 <nav>는 사이트 제목에 중첩되어 있으므로 사이트의 기본 탐색입니다. <article> 또는 <section>에 중첩되어 있다면 이 섹션에서만 내부 탐색입니다. 시맨틱 요소를 사용하여 의미 있는 접근성 객체 모델(AOM)을 만들었습니다. AOM을 사용하면 스크린 리더가 사용자에게 이 섹션이 탐색하거나 건너뛸 수 있는 주요 탐색 블록으로 구성되어 있음을 알릴 수 있습니다.

</nav> 및 </header> 닫는 태그를 사용하면 각 종료 태그가 닫힌 요소를 식별하기 위해 주석이 필요하지 않습니다. 또한 요소마다 서로 다른 태그를 사용하면 id 및 class 후크가 더 이상 필요하지 않습니다. CSS 선택자는 특이도가 낮을 수 있습니다. 따라서 충돌을 걱정하지 않고 header nav a를 사용하여 링크를 타겟팅할 수 있습니다.

HTML이 매우 적고 클래스나 ID가 없는 헤더를 작성했습니다. 시맨틱 HTML을 사용할 경우에는 필요하지 않습니다.

<footer> 사이트

사이트 바닥글을 코딩해 보겠습니다.

<footer>
  <p>&copy;2022 Machine Learning Workshop, LLC. All rights reserved.</p>
</footer>

<header>와 마찬가지로 바닥글이 랜드마크인지 여부는 바닥글이 중첩된 위치에 따라 다릅니다. 사이트 바닥글은 랜드마크이며 모든 페이지에 원하는 사이트 바닥글 정보(예: 저작권 정보, 연락처 정보, 개인 정보 보호 및 쿠키 정책 링크)를 포함해야 합니다. 사이트 바닥글의 암시적 role는 contentinfo입니다. 그 외의 경우 바닥글은 Chrome의 AOM 스크린샷 (<header>와 <footer> 사이에 <header> 및 <footer>의 <article>가 있음)에서 볼 수 있듯이 암시적 역할 및 랜드마크가 아닙니다.

이 스크린샷에는 바닥글이 두 개 있습니다. 하나는 <article>에 있고 다른 하나는 최상위 수준입니다. 최상위 바닥글은 암시적 역할 contentinfo를 갖는 랜드마크입니다. 다른 바닥글은 명소가 아닙니다. Chrome에서는 FooterAsNonLandmark로 표시되지만 Firefox에서는 section로 표시됩니다.

그렇다고 해서 <footer>를 사용해서는 안 된다는 의미는 아닙니다. 블로그가 있다고 가정해 보겠습니다. 블로그에 암시적 contentinfo 역할이 있는 사이트 바닥글이 있습니다. 각 블로그 게시물에는 <footer>도 있을 수 있습니다. 블로그의 기본 방문 페이지에서 브라우저, 검색엔진, 스크린 리더는 기본 바닥글이 최상위 바닥글이고 다른 모든 바닥글은 중첩된 게시물과 관련되어 있음을 인식합니다.

<footer>가 <article>, <aside>, <main>, <nav> 또는 <section>의 하위 요소인 경우 랜드마크가 아닙니다. 게시물이 단독으로 표시되는 경우 마크업에 따라 해당 바닥글이 홍보될 수 있습니다.

바닥글은 연락처 주소 요소인 <address>로 래핑된 연락처 정보를 찾을 수 있는 위치인 경우가 많습니다. 이 요소는 실제 우편 주소가 아니라 개인이나 조직의 연락처 정보를 포함하는 데 사용되는 것으로 잘 알려져 있지 않습니다.

<footer>
  <p>&copy;2022 Machine Learning Workshop, LLC. All rights reserved.</p>
  <address>Instructors: <a href="/hal.html">Hal</a> and <a href="/eve.html">Eve</a></address>
</footer>

문서 구조

이 모듈은 <header> 및 <footer>로 시작합니다. 랜드마크 또는 '섹션' 요소로만 고유하기 때문입니다. 가장 일반적인 페이지 레이아웃을 논의하여 '풀타임' 섹션 요소를 다루겠습니다.

헤더, 2개의 사이드바, 바닥글이 있는 레이아웃을 성배 레이아웃이라고 합니다. 다음과 같은 여러 가지 방법으로 이 콘텐츠를 마크업할 수 있습니다.

<body>
  <header>Header</header>
  <nav>Nav</nav>
  <main>Content</main>
  <aside>Aside</aside>
  <footer>Footer</footer>
</body>

블로그를 만드는 경우 <main>로 된 도움말이 있을 수 있습니다.

<body>
  <header>Header</header>
  <nav>Nav</nav>
  <main>
    <article>First post</article>
    <article>Second post</article>
  </main>
  <aside>Aside</aside>
  <footer>Footer</footer>
</body>

시맨틱 요소를 사용하면 브라우저에서 의미 있는 접근성 트리를 만들어 스크린 리더 사용자가 더 쉽게 탐색할 수 있습니다. 여기에서 banner 및 contentinfo는 <header> 및 <footer> 사이트를 통해 제공됩니다. 여기에 추가된 새 요소에는 <main>, <aside>, <article>, 이전에 사용한 <h1>, <nav>, 아직 사용하지 않은 <section>가 포함됩니다.

<main>

단일 <main> 랜드마크 요소가 있습니다. <main> 요소는 문서의 기본 콘텐츠를 식별합니다. 페이지당 하나의 <main>만 있어야 합니다.

<aside>

<aside>는 문서의 기본 콘텐츠와 간접적으로 또는 약간 관련된 콘텐츠에 사용됩니다. 예를 들어 이 도움말에서는 HTML에 대해 설명합니다. 세 가지 사이트 헤더 예 (div, 역할, 의미 체계)에 관한 CSS 선택자 특정성에 관한 섹션의 경우 접사적으로 관련된 내용을 <aside>에 포함할 수 있습니다. 대부분의 경우와 마찬가지로 <aside>는 사이드바나 콜아웃에 표시될 수 있습니다. <aside>는 랜드마크이기도 하며 complementary의 암시적 역할이 있습니다.

<article>

<main>에 중첩되었으며 <article> 요소 두 개를 추가했습니다. 첫 번째 예에서는 주요 콘텐츠가 한 단어이거나 실제로는 콘텐츠의 단일 섹션인 경우에는 이러한 설정이 필요하지 않았습니다. 그러나 두 번째 예에서와 같이 블로그를 작성하는 경우 각 게시물은 <main>에 중첩된 <article>에 있어야 합니다.

<article>는 원칙적으로 독립적으로 재사용할 수 있는 완전한 콘텐츠 섹션 또는 독립된 콘텐츠 섹션을 나타냅니다. 기사를 신문의 기사라고 생각하세요. 인쇄물로 볼 때 저신다 아던(Jacinda Ardern)의 뉴질랜드 총리에 대한 뉴스 기사는 한 섹션(국제 뉴스일 수도 있음)에만 표시될 수 있습니다. 신문 웹사이트의 경우 동일한 뉴스 기사가 홈페이지, 정치 섹션, 오세아니아 또는 아시아 태평양 뉴스 섹션에 표시될 수 있으며 뉴스 주제에 따라 스포츠, 라이프스타일, 기술 섹션에도 나타날 수 있습니다. 기사는 Pocket 또는 Yahoo News!

<section>

<section> 요소는 사용할 특정 시맨틱 요소가 더 이상 없는 경우 문서의 일반 독립형 섹션을 포함하는 데 사용됩니다. 극소수의 예외를 제외하고 섹션에는 제목이 있어야 합니다.

저신다 아르데른의 예로 돌아가서, 신문의 홈페이지에서는 신문의 이름과 그 뒤에 단일 <main>가 포함되며 각각 '세계 뉴스' 및 '정치'와 같은 헤더가 있는 여러 <section>로 나뉩니다. 각 섹션에는 일련의 <article>가 표시됩니다. 각 <article> 내에서 하나 이상의 <section> 요소도 찾을 수 있습니다. 이 페이지를 보면 전체 '헤더 및 섹션' 부분이 <article>입니다. 그런 다음 이 <article>는 site header, site footer, 문서 구조를 비롯한 여러 <section>로 나뉩니다. 기사 자체에도 각 섹션과 마찬가지로 헤더가 있습니다.

<section>은 액세스 가능한 이름이 없으면 랜드마크가 아닙니다. 액세스 가능한 이름이 있는 경우 암시적 역할은 region입니다. 랜드마크 역할은 문서의 더 큰 전체 섹션을 식별하기 위해 드물게 사용해야 합니다. 랜드마크 역할을 너무 많이 사용하면 스크린 리더에 '노이즈'가 발생하여 <main>에 2~3개의 중요한 하위 섹션이 포함된 경우 각 <section>의 액세스 가능한 이름을 포함하여 페이지의 전체 레이아웃을 이해하기 어려워질 수 있습니다.

제목: <h1>-<h6>

6개의 섹션 제목 요소(<h1>, <h2>, <h3>, <h4>, <h5>, <h6>)가 있습니다. 각각은 6가지 섹션 제목 수준 중 하나를 나타내며 <h1>이 가장 높거나 가장 중요한 섹션 수준, <h6>가 가장 낮습니다.

제목이 문서 배너 <header>에 중첩되면 애플리케이션 또는 사이트의 제목입니다. <main>에 중첩되면 <main>의 <header> 내에 중첩되었는지와 관계없이 전체 사이트가 아니라 해당 페이지의 헤더입니다. <article> 또는 <section>에 중첩되면 페이지의 하위 섹션에 대한 헤더입니다.

제목 수준은 텍스트 편집기의 제목 수준과 비슷하게 사용하는 것이 좋습니다. 기본 제목으로 <h1>로 시작하고 하위 섹션의 제목으로 <h2>를, 하위 섹션에 섹션이 있는 경우 <h3>로 시작합니다. 제목 수준을 건너뛰지 마세요. 여기에서 섹션 제목에 대한 도움말을 참조할 수 있습니다.

일부 스크린 리더 사용자는 페이지 콘텐츠를 이해하기 위해 제목에 액세스할 수 있습니다. 원래 MS Word나 Google Docs에서 제목을 기반으로 개요를 생성할 수 있는 것처럼 제목이 문서의 개요를 작성하도록 되어 있었으나 브라우저는 이 구조를 구현하지 않았습니다. 브라우저는 다음 예와 같이 중첩된 제목을 점점 더 작은 글꼴 크기로 표시하지만 실제로는 윤곽선을 지원하지 않습니다.

이제 MachineLearningWorkshop.com의 개요를 설명하는 데 필요한 지식을 충분히 얻으셨습니다.

MLW.com의 <body> 개요

다음은 머신러닝 워크숍 사이트에 소개된 콘텐츠의 개요입니다.

모든 콘텐츠가 독립적이고 완전한 콘텐츠가 아니므로 <section>이 <article>보다 더 적절합니다. 각각 제목이 있지만 <footer>로 사용할 만한 섹션은 없습니다.

당연히 사용할 수는 있지만, 텍스트를 굵게 또는 크게 표시하기 위해 제목을 사용하지 말고 대신 CSS를 사용하세요. 텍스트를 강조하고 싶다면 시맨틱 요소도 사용할 수 있습니다. 속성에 대해 자세히 알아본 후 텍스트 기본사항에 대해 논의하면서 이 내용을 다루고 페이지 콘텐츠 대부분을 채웁니다.

이해도 테스트

제목과 섹션에 대한 이해도를 테스트하세요.