HTML
단면 요소

Angular 2 AngularJS ASP.NET CSS Java Language JavaScript jQuery PHP Python Language twitter-bootstrap
수색…


비고

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>

노트:

<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> 요소를 그룹화 요소로 인식하며 섹션 요소는 인식하지 않습니다.

메인 컨텐츠로 사용되도록 의도 된 다른 엘리먼트에 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>

노트:

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>

W3C 권고안

꼬리말 요소

<footer> 요소는 페이지의 꼬리말 부분을 포함합니다.

다음은 p 단락 태그를 포함하는 <footer> 요소의 예입니다. 

<footer>
    <p>All rights reserved</p>
</footer>


Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow