제목 및 섹션

이전 섹션에서는 페이지의 단어가 무엇을 의미하는지 모르더라도 시맨틱 요소가 문서에 의미 있는 구조를 제공하면 검색엔진, 보조 기술, 향후 유지관리자, 새 팀원 등 다른 사용자가 문서의 개요를 이해할 수 있다는 것을 배웠습니다.

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

코딩할 때 작업에 적합한 요소를 선택하면 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>가 최상위 수준인 경우 role 코드 블록에서 확인했을 수 있는 랜드마크 역할인 사이트 banner입니다. <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>가 있는 <article> 및 <header>와 <footer> 사이의 <footer>가 있음)에 표시된 것처럼 바닥글에 암시적 역할이 없으며 랜드마크가 아닙니다.

이 스크린샷에는 두 개의 바닥글이 있습니다. 하나는 <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, role, semantic)의 CSS 선택자 특이성에 관한 섹션의 경우, 간접적으로 관련된 aside는 <aside>에 포함될 수 있으며, 대부분의 경우와 마찬가지로 <aside>는 사이드바 또는 콜아웃 상자에 표시될 가능성이 높습니다. <aside>는 complementary의 암시적 역할을 하는 랜드마크이기도 합니다.

<article>

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

<article>는 원칙적으로 독립적으로 재사용할 수 있는 완전한 또는 독립적인 콘텐츠 섹션을 나타냅니다. 신문 기사처럼 생각하면 됩니다. 인쇄물에서 뉴질랜드 총리인 저신다 아던에 관한 뉴스 기사는 세계 뉴스 등 한 섹션에만 표시될 수 있습니다. 신문사 웹사이트에서는 동일한 뉴스 기사가 홈페이지, 정치 섹션, 오세아니아 또는 아시아 태평양 뉴스 섹션에 표시될 수 있으며, 뉴스 주제에 따라 스포츠, 라이프스타일 또는 기술 섹션에 표시될 수도 있습니다. 기사는 Pocket 또는 Yahoo News!와 같은 다른 사이트에도 표시될 수 있습니다.

<section>

<section> 요소는 사용할 수 있는 더 구체적인 시맨틱 요소가 없을 때 문서의 일반적인 독립형 섹션을 포함하는 데 사용됩니다. 섹션에는 제목이 있어야 하며, 예외는 거의 없습니다.

저신다 아던의 예로 돌아가서, 신문의 홈페이지에서 배너에는 신문 이름이 포함되고, 그 뒤에 단일 <main>가 오고, 이는 여러 <section>로 나뉘며, 각 섹션에는 '세계 뉴스' 및 '정치'와 같은 헤더가 있습니다. 각 섹션에는 일련의 <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에서 제목을 기반으로 개요를 생성할 수 있는 것처럼 문서의 개요를 작성하기 위한 것이었지만 브라우저에서는 이 구조를 구현하지 않았으며 제안된 개요 알고리즘은 HTML 사양에서 삭제되었습니다. 이전에는 브라우저가 섹션 요소에 중첩된 <h1> 요소를 더 작은 글꼴 크기로 표시했지만, 최신 브라우저는 이러한 기본 스타일을 삭제했으며 자동 문서 개요를 지원하지 않습니다.

이제 MachineLearningWorkshop.com의 개요를 작성할 수 있는 충분한 지식을 갖추었습니다.

MLW.com의 <body> 개요

다음은 머신러닝 워크숍 사이트의 표시되는 콘텐츠 개요입니다.

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

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

이해도 테스트

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