수색…
비고
HTML5 표준은 주요 요소를 섹션 요소로 나열하지 않습니다.
기사 요소
<article> 요소는 기사, 블로그 게시물, 사용자 의견이나 RSS로, 예를 들어, 페이지의 컨텍스트 외부에서 배포 할 수있는 대화 형 위젯처럼 자체에 포함 된 콘텐츠가 포함되어 있습니다.
- article 요소가 중첩되어 있으면 inner article 노드의 내용이 outer article 요소와 관련되어야합니다.
여러 게시물 ( article ) 및 의견 ( article )이있는 블로그 ( section )는 다음과 같이 보일 수 있습니다.
<section>
<!-- Each individual blog post is an <article> -->
<article>
<header>
<h1>Blog Post</h1>
<time datetime="2016-03-13">13th March 2016</time>
</header>
<p>The article element represents a self contained article or document.</p>
<p>The section element represents a grouping of content.</p>
<section>
<h2>Comments <small>relating to "Blog Post"</small></h2>
<!-- Related comment is also a self-contained article -->
<article id="user-comment-1">
<p>Excellent!</p>
<footer><p>...</p><time>...</time></footer>
</article>
</section>
</article>
<!-- ./repeat: <article> -->
</section>
<!-- Content unrelated to the blog or posts should be outside the section. -->
<footer>
<p>This content should be unrelated to the blog.</p>
</footer>
불필요한 사용을 피하십시오.
페이지의 주요 내용 (머리글, 바닥 글, 탐색 모음 등 제외)이 단순히 하나의 요소 그룹 일 때. <article> <main> 요소는 <main> 요소를 생략 할 수 있습니다.
<article>
<p>This doesn't make sense, this article has no real `context`.</p>
</article>
대신이 기사를 <main> 요소로 바꾸면 이것이이 페이지의 main 내용임을 나타냅니다.
<main>
<p>I'm the main content, I don't need to belong to an article.</p>
</main>
다른 요소를 사용하는 경우 여러 장치 및 HTML5가 아닌 브라우저에서 올바른 해석과 렌더링을 위해 <main> ARIA 역할 을 지정해야합니다.
<section role="main">
<p>This section is the main content of this page.</p>
</section>
노트:
<main>요소 자손은<article>
<article> 요소에 대한 공식 HTML5 사양을 보려면 여기를 클릭하십시오.
주요 요소
<main> 요소는 웹 페이지의 주요 내용 을 포함합니다. 이 콘텐츠는 개별 페이지에 고유하며 사이트의 다른 곳에 나타나면 안됩니다. 머리글, 바닥 글, 탐색, 로고 등과 같은 반복되는 내용은 요소 외부에 배치됩니다.
-
<main>요소는 단일 페이지에서 최대 한 번만 사용해야합니다. -
<main>요소는article,aside,footer,header또는nav요소의 하위 항목으로 포함되어서는 안됩니다.
다음 예제에서는 단일 블로그 게시물 (및 참조 및 의견과 같은 관련 정보)을 표시합니다.
<body>
<header>
<nav>...</nav>
</header>
<main>
<h1>Individual Blog Post</h1>
<p>An introduction for the post.</p>
<article>
<h2>References</h2>
<p>...</p>
</article>
<article>
<h2>Comments</h2> ...
</article>
</main>
<footer>...</footer>
</body>
블로그 게시물은
<main>요소에 포함되어있어이 페이지의 주요 콘텐츠이므로 웹 사이트 전체에서 고유합니다.<header>및<footer>태그는<main>요소의 형제 입니다.
노트:
HTML5 사양은
<main>요소를 그룹화 요소로 인식하며 섹션 요소는 인식하지 않습니다.
- ARIA 역할 속성 :
main(기본값) ,presentation메인 컨텐츠로 사용되도록 의도 된 다른 엘리먼트에
role="main"ARIA 역할 속성을 추가하는 것은 HTML5를 지원하지 않는 사용자 에이전트를 돕고 그렇게하는 사람들을 위해 더 많은 컨텍스트를 제공하는 것을 권고한다.
<main>요소는 기본적으로 주 역할을하므로 제공 할 필요가 없습니다.
<main> 요소에 대한 공식 HTML5 사양을 보려면 여기를 클릭하십시오.
탐색 요소
<nav> 요소는 주로 웹 사이트의 기본 탐색 블록 이 포함 된 섹션에 사용하기위한 것이며 웹 페이지의 다른 부분 (예 : 목차의 앵커) 또는 다른 페이지로의 링크를 포함 할 수 있습니다.
인라인 항목
다음은 하이퍼 링크의 인라인 집합을 표시합니다.
<nav>
<a href="https://google.com">Google</a>
<a href="https://www.yahoo.com">Yahoo!</a>
<a href="https://www.bing.com">Bing</a>
</nav>
필요한 경우 목록 항목 사용
콘텐츠가 항목 목록을 나타내면 목록 항목을 사용하여이를 보여주고 사용자 환경을 향상시킵니다.
아래 에서 role="navigation" 참고하십시오 .
<nav role="navigation">
<ul>
<li><a href="https://google.com">Google</a></li>
<li><a href="https://www.yahoo.com">Yahoo!</a></li>
<li><a href="https://www.bing.com">Bing</a></li>
</ul>
</nav>
불필요한 사용을 피하십시오.
<footer> 요소에는 사이트의 다른 부분 (FAQ, T & C 등)에 대한 링크 목록이있을 수 있습니다. 이 경우 footer 요소만으로도 충분합니다. <footer> 의 <nav> 요소로 링크를 추가로 감쌀 필요 가 없습니다.
<!-- the <nav> is not required in the <footer> -->
<footer>
<nav>
<a href="#">...</a>
</nav>
</footer>
<!-- The footer alone is sufficient -->
<footer>
<a href="#">...</a>
</footer>
노트:
<main>요소 자손은<nav>
role="navigation"추가<nav>요소에 ARIA 역할 을 추가하면 HTML5를 지원하지 않는 사용자 에이전트가 도움을주고 HTML5를 지원하는 사용자 에이전트가 더 많은 컨텍스트를 제공하도록 권장됩니다.<nav role="navigation"><!-- ... --></nav>
화면 판독기 : (시각 장애인이나 시각 장애인이 사이트를 탐색 할 수있게하는 소프트웨어)
화면 판독기와 같은 사용자 에이전트는 요구 사항에 따라
<nav>요소를 다르게 해석합니다.
- 페이지를 렌더링 할 때
<nav>요소의 우선 순위를 높일 수 있습니다- 엘리먼트의 렌더링을 지연시킬 수있다.
- 사용자의 필요에 맞게 특정 방식으로 페이지를 조정할 수 있습니다.
예 : 시각 장애인을 위해<nav>요소 내의 텍스트 링크를 크게 만듭니다.
<nav> 요소에 대한 공식 HTML5 사양을 보려면 여기를 클릭하십시오.
섹션 요소
<section> 요소는 주제별로 내용을 그룹화하는 일반적인 섹션을 나타냅니다. 모든 섹션은, 일반적으로의 자식으로 제목 요소 식별 할 수 있어야한다 section .
-
<article>내에서<section>요소를 사용할 수 있으며 그 반대도 가능합니다. - 모든 섹션에는 테마 (이 영역을 식별하는 제목 요소)
-
<section>요소를 일반적인 스타일링 '컨테이너'로 사용하지 마십시오.
스타일을 적용하기 위해 컨테이너가 필요한 경우 대신<div>사용하십시오.
다음 예에서는 여러 챕터가있는 단일 블로그 게시물 을 표시합니다. 각 챕터는 섹션 (각 섹션의 제목 요소로 식별 할 수있는 주제별로 그룹화 된 콘텐츠 집합) 입니다.
<article>
<header>
<h2>Blog Post</h2>
</header>
<p>An introduction for the post.</p>
<section>
<h3>Chapter 1</h3>
<p>...</p>
</section>
<section>
<h3>Chapter 2</h3>
<p>...</p>
</section>
<section>
<h3>Comments</h3> ...
</section>
</article>
노트:
개발자는 요소의 콘텐츠를 신디케이트하는 것이 합리적 일 때 article 요소를 사용해야합니다.
<main> 요소에 대한 공식 HTML5 사양을 보려면 여기를 클릭하십시오.
머리글 요소
<header> 요소는 가장 가까운 상위 섹션 내용 또는 섹션 루트 요소에 대한 소개 내용을 나타냅니다. 일반적으로 <header> 에는 일련의 소개 또는 탐색 도구가 들어 있습니다.
참고 : 헤더 요소는 섹션 내용이 아닙니다. 그것은 새로운 섹션을 소개하지 않습니다.
예 :
<header>
<p>Welcome to...</p>
<h1>Voidwars!</h1>
</header>
이 예에서 <article> 에는 <header> 있습니다.
<article>
<header>
<h1>Flexbox: The definitive guide</h1>
</header>
<p>The guide about Flexbox was supposed to be here, but it turned out Wes wasn’t a Flexbox expert either.</p>
</article>
꼬리말 요소
<footer> 요소는 페이지의 꼬리말 부분을 포함합니다.
다음은 p 단락 태그를 포함하는 <footer> 요소의 예입니다.
<footer>
<p>All rights reserved</p>
</footer>