이전 섹션에서는 페이지의 단어 의미를 모른다고 해도 시맨틱 요소가 문서에 의미 있는 구조를 제공하면 검색엔진, 보조 기술, 향후 유지보수 담당자, 새 팀원 등 다른 사용자가 문서의 개요를 이해할 수 있는 방법을 알아보았습니다.
이 섹션에서는 문서 구조를 알아보고, 이전 섹션의 섹션 요소에 대해 복습하며, 애플리케이션의 개요를 마크업합니다.
코드를 작성할 때 작업에 적합한 요소를 선택하면 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>©2022 Machine Learning Workshop, LLC. All rights reserved.</p>
</footer>
<header>와 마찬가지로 바닥글이 랜드마크인지 여부는 바닥글이 중첩된 위치에 따라 다릅니다. 사이트 바닥글인 경우 랜드마크이며 저작권 표시, 연락처 정보, 개인 정보 보호 및 쿠키 정책 링크와 같이 모든 페이지에 표시할 사이트 바닥글 정보를 포함해야 합니다. 사이트 바닥글의 암시적 role은 contentinfo입니다. 그렇지 않으면 바닥글에 암시적 역할이 없고 랜드마크가 아닙니다. 이는 Chrome의 AOM 스크린샷에서 확인할 수 있습니다 (<article>와 <header> 사이에 <header>와 <footer>가 있는 <footer>가 있음).
이 스크린샷에는 <article>에 있는 바닥글과 최상위 바닥글이라는 두 개의 바닥글이 있습니다. 최상위 바닥글은 암시적 역할이 contentinfo인 랜드마크입니다. 다른 바닥글은 랜드마크가 아닙니다. Chrome은 FooterAsNonLandmark로 표시하고 Firefox는 section으로 표시합니다.
그렇다고 <footer>를 사용하지 말라는 의미는 아닙니다. 예를 들어 블로그가 있는 경우 암시적 contentinfo 역할이 있는 사이트 바닥글을 사용할 수 있습니다. 각 블로그 게시물에도 <footer>가 있을 수 있습니다. 블로그의 기본 방문 페이지에서 브라우저, 검색엔진, 스크린 리더는 기본 바닥글이 최상위 바닥글이고 다른 모든 바닥글은 중첩된 게시물과 관련이 있음을 알고 있습니다.
<footer>가 <article>, <aside>, <main>, <nav> 또는 <section>의 하위 요소인 경우 랜드마크가 아닙니다. 게시물이 자체적으로 표시되는 경우 마크업에 따라 해당 바닥글이 승격될 수 있습니다.
바닥글은 연락처 주소 요소인 <address>로 래핑된 연락처 정보를 찾을 수 있는 위치인 경우가 많습니다. 이 요소는 이름이 잘 지정되지 않은 요소 중 하나입니다. 실제 우편 주소가 아닌 개인 또는 조직의 연락처 정보를 묶는 데 사용됩니다.
<footer>
<p>©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, role, semantic)의 CSS 선택기 구체성에 관한 섹션의 경우 간접적으로 관련된 aside는 <aside>에 포함될 수 있습니다. 대부분과 마찬가지로 <aside>는 사이드바 또는 콜아웃 상자에 표시될 가능성이 높습니다. <aside>는 암시적 역할이 complementary인 랜드마크이기도 합니다.
<article>
<main>에 중첩된 <article> 요소 두 개를 추가했습니다. 기본 콘텐츠가 단어 하나이거나 실제로는 단일 콘텐츠 섹션인 첫 번째 예에서는 필요하지 않았습니다. 하지만 두 번째 예와 같이 블로그를 작성하는 경우 각 게시물은 <article>에 중첩된 <main>에 있어야 합니다.
<article>은 원칙적으로 독립적으로 재사용할 수 있는 완전하거나 자체 포함된 콘텐츠 섹션을 나타냅니다. 기사를 신문 기사처럼 생각해 보세요. 인쇄물에서 뉴질랜드 총리인 저신다 아던에 관한 뉴스 기사는 한 섹션(예: 세계 뉴스)에만 표시될 수 있습니다. 신문 웹사이트에서 동일한 뉴스 기사는 홈페이지, 정치 섹션, 오세아니아 또는 아시아 태평양 뉴스 섹션, 뉴스 주제에 따라 스포츠, 라이프스타일 또는 기술 섹션에 표시될 수 있습니다. 기사는 Pocket 또는 Yahoo News!와 같은 다른 사이트에도 표시될 수 있습니다.
<section>
<section> 요소는 사용할 더 구체적인 시맨틱 요소가 없는 경우 문서의 일반적인 독립형 섹션을 포함하는 데 사용됩니다. 섹션에는 제목이 있어야 합니다(예외는 거의 없음).
저신다 아던 예시로 돌아가서 신문 홈페이지에서 배너에는 신문 이름이 포함되고 그 뒤에 여러 <section>으로 나뉘고 각 섹션에 '세계 뉴스' 및 '정치'와 같은 제목이 있는 단일 <main>이 포함됩니다. 각 섹션에는 일련의 <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> 개요 작성
다음은 머신러닝 워크숍 사이트의 표시되는 콘텐츠의 개요입니다.
콘텐츠의 어떤 부분도 독립형의 완전한 콘텐츠가 아니므로 <article>보다 <section>이 더 적합합니다. 각 섹션에는 제목이 있지만 <footer>에 적합한 섹션은 없습니다.
이 시점에서는 말할 필요도 없지만 제목을 사용하여 텍스트를 굵게 또는 크게 만들지 마세요. 대신 CSS를 사용하세요. 텍스트를 강조하려는 경우 시맨틱 요소도 있습니다. 속성을 자세히 살펴본 후 텍스트 기본사항을 설명하면서 이를 다루고 페이지 콘텐츠의 대부분을 채울 것입니다.
이해도 테스트
제목과 섹션에 관한 지식을 테스트하세요.
사이트 로고 또는 제목과 기본 탐색을 포함하는 사이트 영역을 포함하는 데 사용되는 요소는 무엇인가요?
<heading><header><title>페이지에 허용되는 <main> 요소의 수는 몇 개인가요?