제목 및 섹션

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

이 섹션에서는 문서 구조를 살펴봅니다. 이전 섹션의 섹션별 요소를 요약합니다. 애플리케이션의 개요를 표시합니다.

코딩할 때 작업에 적합한 요소를 선택하면 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>로 시작합니다. 랜드마크 또는 '섹션' 요소로 기능할 때만 고유하기 때문입니다. 그럼 이제 가장 일반적인 페이지 레이아웃에 대해 논의해 보세요.

헤더, 사이드바 두 개, 바닥글 하나가 있는 레이아웃을 홀리 그레일 레이아웃이라고 합니다. 이 콘텐츠를 마크업하는 방법에는 다음을 비롯한 여러 가지가 있습니다.

<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>는 원칙적으로 독립적으로 재사용할 수 있는 전체 또는 독립된 콘텐츠 섹션을 나타냅니다. 기사를 신문의 기사라고 생각하세요. 인쇄판에서 뉴질랜드 총리 저신다 아던에 대한 뉴스 기사는 세계 뉴스와 같은 한 섹션에만 게재될 수 있습니다. 이 신문사의 웹사이트에서는 동일한 뉴스 기사가 홈페이지, 정치 섹션, 오세아니아 또는 아시아 태평양 뉴스 섹션에 표시될 수 있으며 뉴스 주제에 따라 스포츠, 라이프스타일, 기술 섹션에 나타날 수 있습니다. Pocket이나 Yahoo!

<section>

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

Jacinda Ardern의 예시로 돌아가서, 신문 홈페이지의 배너에는 신문 이름이 포함되며, 그 뒤에 'World news'와 같은 헤더가 있는 여러 <section>으로 나뉘는 단일 <main>가 포함됩니다. 'Politics'라는 용어와 각 섹션에는 일련의 <article>가 있습니다. 각 <article> 내에서 하나 이상의 <section> 요소를 찾을 수도 있습니다. 이 페이지를 보면 전체 '헤더와 섹션'이 부분은 <article>입니다. 그런 다음 이 <article>는 site header, site footer, 문서 구조를 비롯한 여러 <section>로 나뉩니다. 기사 자체에는 헤더가 있으며, 각 섹션마다 헤더가 있습니다.

<section>는 액세스 가능한 이름이 없는 한 랜드마크가 아닙니다. 액세스 가능한 이름이 있으면 암시적 역할은 region입니다. 랜드마크 역할은 문서의 더 큰 전체 섹션을 식별하기 위해 드물게 사용해야 합니다. 랜드마크 역할을 너무 많이 사용하면 '노이즈'가 생길 수 있습니다. <main>에 두세 개의 중요한 하위 섹션(각 <section>의 액세스 가능한 이름 포함)이 포함된 경우 페이지의 전체 레이아웃을 이해하는 것이 바람직하지 않습니다.

제목: <h1>~<h6>

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>의 6가지 섹션 제목 요소가 있습니다. 각각은 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를 사용하세요. 텍스트를 강조하고 싶다면 이를 위한 시맨틱 요소도 있습니다. 이에 대해 설명하고 텍스트 기본에 대해 논의하면서 페이지 콘텐츠 대부분을 채웁니다. 살펴봤습니다

이해도 확인

제목과 섹션에 관한 지식을 테스트합니다.