HTML5 모범 사례; 섹션 / 헤더 / 외부 / 기사 요소

546

웹 (및 스택 오버플로)에 HTML5에 대한 충분한 정보가 있지만 이제는 "모범 사례"에 대해 궁금합니다. 섹션 / 헤더 / 기사와 같은 태그는 새로운 것이며,이 태그를 언제 / 어떻게 사용해야하는지에 대한 의견이 모두 다릅니다. 그렇다면 다음 레이아웃과 코드에 대해 어떻게 생각하십니까?

웹 사이트 레이아웃

  1  <!doctype html>
  2      <head>
  3          <title>Website</title>
  4      </head>
  5  
  6      <body>
  7          <section>
  8              <header>
  9                  <div id="logo"></div>
 10                  <div id="language"></div>
 11              </header>
 12  
 13              <nav>
 14                  <ul>
 15                      <li>menu 1</li>
 16                      <li>menu 2</li>
 17                      <li>menu 3</li>
 18                      <li>menu 4</li>
 19                      <li>menu 5</li>
 20                  </ul>
 21              </nav>
 22  
 23              <div id="main">
 24                  <div id="main-left">
 25                      <article>
 26                          <header><h1>This is a title</h1></header>
 27  
 28                          <p>Lorem ipsum dolor sit amet, consectetur
 29                          adipiscing elit. Quisque semper, leo eget</p>
 30  
 31                          <p>Lorem ipsum dolor sit amet, consectetur
 32                          adipiscing elit. Quisque semper, leo eget</p>
 33  
 34                          <p>Lorem ipsum dolor sit amet, consectetur
 35                          adipiscing elit. Quisque semper, leo eget</p>
 36  
 37                          <p>Lorem ipsum dolor sit amet, consectetur
 38                          adipiscing elit. Quisque semper, leo eget</p>
 39                      </article>
 40                  </div>
 41  
 42                  <div id="main-right">
 43                      <section id="main-right-hot">
 44                          <h2>Hot items</h2>
 45                          <ul>
 46                              <li>Lorem ipsum</li>
 47                              <li>dolor sit</li>
 48                              <li>...</li>
 49                          </ul>
 50                      </section>
 51  
 52                      <section id="main-right-new">
 53                          <h2>New items</h2>
 54                          <ul>
 55                              <li>Lorem ipsum</li>
 56                              <li>dolor sit</li>
 57                              <li>...</li>
 58                          </ul>
 59                      </section>
 60                  </div>
 61              </div>
 62  
 63              <div id="news-items">
 64                  <header><h2>The latest news</h2></header>
 65  
 66                  <div id="item_1">
 67                      <article>
 68                          <header>
 69                              <img src="#" title="titel artikel" />
 70                              <h3>Lorem ipsum .....</h3>
 71                          </header>
 72                          <p>Lorem ipsum dolor sit amet,
 73                          adipiscing elit. Quisque semper, </p>
 74                          <a href="#">Read more</a>
 75                      </article>
 76                  </div>
 77  
 78  
 79                  <div id="item_2">
 80                      <article>
 81                          <header>
 82                              <img src="#" title="titel artikel" />
 83                              <h3>Lorem ipsum .....</h3>
 84                          </header>
 85                          <p>Lorem ipsum dolor sit amet,
 86                          adipiscing elit. Quisque semper, </p>
 87                          <a href="#">Read more</a>
 88                      </article>
 89                  </div>
 90  
 91  
 92                  <div id="item_3">
 93                      <article>
 94                          <header>
 95                              <img src="#" title="titel artikel" />
 96                              <h3>Lorem ipsum .....</h3>
 97                          </header>
 98                          <p>Lorem ipsum dolor sit amet,
 99                          adipiscing elit. Quisque semper, </p>
100                          <a href="#">Read more</a>
101                      </article>
102                  </div>
103              </div>
104  
105              <footer>
106                  <ul>
107                      <li>menu 1</li>
108                      <li>menu 2</li>
109                      <li>menu 3</li>
110                      <li>menu 4</li>
111                      <li>menu 5</li>
112                  </ul>
113              </footer>
114          </section>
115      </body>
116  </html>

7. section전체 웹 사이트에서? 아니면 div?

각 줄 section은 header?로 시작합니다 .

23 행. div맞습니까? 또는 이것은 section?

라인 24.로 왼쪽 / 오른쪽 열을 분할하십시오 div.

줄 25. article태그를 위한 적당한 장소 ?

26 행. h1-tag를 -tag에 넣어야 header합니까?

나는 이것이입니다 결정 있도록 라인 (43)의 콘텐츠는 메인 기사와 관련되지 않은 sectiona와 없습니다 aside.

44 행.없는 H2 header

53 행. section없이header

line 63. 모든 (관련되지 않은) 뉴스 항목이있는 Div

라인 64. headerh2와 함께

라인 65. 흠, div또는 section? 또는 이것을 제거 div하고 article-tag 만 사용하십시오.

105 행. 바닥 글 :-)

html header article

— 바스 반 도르 스트
소스

456bereastreet.com/archive/201103/…

— Christophe Roussy

486

사실, 머리말 / 꼬리말에 관해서는 아주 옳습니다. 다음은 각각의 주요 HTML5 태그를 사용하고 사용하는 방법에 대한 기본 정보입니다 (아래에 링크 된 전체 소스를 읽는 것이 좋습니다).

section – 주제 관련 컨텐츠를 그룹화하는 데 사용됩니다. div 요소처럼 들리지만 그렇지 않습니다. div에는 의미가 없습니다. 모든 div를 섹션 요소로 교체하기 전에 항상 스스로에게 물어보십시오.“모든 내용이 관련되어 있습니까?”

따로 – 접선으로 관련된 콘텐츠에 사용됩니다. 일부 컨텐츠가 기본 컨텐츠의 왼쪽 또는 오른쪽에 나타나기 때문에 aside 요소를 사용해야하는 이유는 충분하지 않습니다. 주요 내용의 의미를 줄이지 않고 별도의 내용물을 제거 할 수 있는지 스스로에게 물어보십시오. 인용 부호는 접선 적으로 관련된 내용의 예입니다.

헤더 – 헤더 요소와 일반적으로 허용되는 헤더 (또는 마스트 헤드) 사용에는 중요한 차이가 있습니다. 일반적으로 페이지에는 하나의 헤더 또는 '마스트 헤드'만 있습니다. HTML5에서는 원하는만큼 가질 수 있습니다. 이 사양은 "소개 또는 탐색 보조 도구 그룹"으로 정의합니다. 사이트의 모든 섹션에서 헤더를 사용할 수 있습니다. 실제로 대부분의 섹션에서 헤더를 사용해야합니다. 이 스펙은 섹션 요소를 "일반적으로 제목이있는 주제별 컨텐츠 그룹"으로 설명합니다.

탐색 – 주요 탐색 정보를 제공합니다. 그룹화 된 링크 그룹만으로도 nav 요소를 사용할 수 있습니다. 반면 사이트 전체 탐색은 탐색 요소에 속합니다.

바닥 글 – 위치에 대한 설명과 같지만 그렇지 않습니다. 바닥 글 요소에는 포함 요소에 대한 정보가 포함되어 있습니다. 작성자, 저작권, 관련 내용에 대한 링크 등 HTML5는 일반적으로 전체 문서에 대해 하나의 바닥 글이있는 반면 HTML5를 사용하면 섹션 내에 바닥 글을 가질 수도 있습니다.

출처 : https://clzd.me/html5-section-aside-header-nav-footer-elements-not-as-obvious-as-they-sound/

또한 article위의 소스에는없는 에 대한 설명이 있습니다 .

article – 독립적이고 독립적 인 컨텐츠를 지정하는 요소에 사용됩니다. 기사는 독자적으로 이해해야합니다. 모든 div를 기사 요소로 교체하기 전에 항상 다음과 같이 스스로에게 묻습니다. "나머지 웹 사이트와 독립적으로 읽을 수 있습니까?"

— 나단 JB
소스

68

이 답변이 얼마나 많은 표를 얻었는지 나에게 수수께끼입니다. <article>요소에 대해 이야기 하지 않고 언급 된 요소를 대조하지 않으며 그룹화하지도 않습니다. 이 답변은 "모범 사례"를 제공하지 않으며 OP의 명시 적 질문에도 답변하지 않습니다!

— Robert Siemer

2

@RobertSiemer 나에게 그것은 또한 귀하의 의견이 24 개의

— 공감대

@RobertSiemer cuz 그것은 멋져 보인다, 어떻게 생각하십니까? 귀하의 의견을 확인하고 다음 답변으로 확인하기 전까지는 나쁘지 않았습니다.

— Det

238

불행히도 지금까지 주어진 답변 (가장 많은 투표 포함)은 "정상적인"상식, 명백한 잘못 또는 혼동입니다. 없음 중요한 키워드의 ^하나는 팝업 없습니다!

나는 3 가지 답변을 썼다 :

여기서 논의 된 html 요소의 역할을 이해하려면 일부 요소가 문서를 섹션화해야합니다. 각각의 모든 HTML 문서가 될 수 받는 따른 단면 HTML5 개요 알고리즘 내용의 개요 - ⁠or⁠ 테이블 (TOC)을 생성하기위한 목적. 개요는 일반적으로 보이지 않지만 (현재) 저자는 결과 개요가 의도를 반영하는 방식으로 html을 사용해야합니다.

당신과 섹션 만들 수 있습니다 정확히 이러한 요소와 다른 아무것도 :

(명시 적) 하위 섹션 만들기
- <section> 섹션
- <article> 섹션
- <nav> 섹션
- <aside> 섹션
형제 섹션 또는 하위 섹션 만들기
- 으로 지정되지 않은 유형의 섹션 <h*>^² (모든이 작업을 수행, 아래 참조)
현재 명시 적 (하위) 섹션을 레벨 업하기

섹션 이름은 다음과 같습니다.

<h*> 생성 된 섹션 이름 자체
<section|article|nav|aside>섹션이 <h*>있으면 첫 번째 섹션에 이름이 지정됩니다.
- 이들은 <h*>섹션 자체를 만들지 않는 유일한 것입니다

섹션에는 한 가지가 더 있습니다. 다음 컨텍스트 (예 : 요소)는 "개요 경계"를 만듭니다. 그들이 포함하는 어떤 섹션이든 그들에게 비공개입니다 :

문서 자체 <body>
와 테이블 셀 <td>
<blockquote>
<details>, <dialog>, <fieldset>, 및<figure>
그 밖의 아무것도

example HTML <body> <h3>if you want siblings at top level...</h3> <h3>...you have to use untyped sections with <h*>...</h3> <article> <h1>...as any other section will descent</h1> </article> <nav> <ul> <li><a href=...>...</a></li> </ul> </nav> </body> has this outline 1. if you want siblings at top level... 2. ...you have to use untyped sections with <h*>... 2.1. ...as any other section will descent 2.2. (unnamed navigation)

이것은 두 가지 질문을 제기합니다.

차이점은 무엇이며 <article>그리고 <section>?

둘 다 할 수 있습니다 :
- 서로 내포되다
- 다른 상황이나 중첩 수준에서 다른 개념을 취하십시오.
<section>s는 책 장과 같습니다
- 그들은 대개 형제 자매를 가지고 있습니다 (다른 문서에있을 수도 있습니다).
- 함께 그들은 책의 장과 같은 공통점이 있습니다.
하나의 저자, 하나 <article>는 최소한 가장 낮은 수준
- 표준 예 : 단일 블로그 주석
- 블로그 항목 자체도 좋은 예입니다
- 블로그 항목 <article>과 그 주석 <article>도<article>
- 그것은 일련의 유사한 부분이 아닌 "완전한"것입니다.
<section>의 <article>책은 책의 장과 같습니다
<article>의 s <section>는 볼륨의시와 같습니다 (시리즈 내).

어떻게 <header>, <footer>그리고 <main>에 적합?

그들은 섹션에 영향 을 미치지 않습니다
<header> 과 <footer>
- 각 섹션의 구역을 표시 할 수 있습니다.
- 섹션 내에서도 여러 번 가질 수 있습니다
- 이 섹션 의 주요 부분 과 차별화
- 저자의 취향에 의해서만 제한됨
- <header>
  - 이 섹션의 제목 / 이름을 표시 할 수 있습니다
  - 이 섹션의 로고가 포함될 수 있습니다
  - 섹션의 상단 또는 상단에있을 필요는 없습니다.
- <footer>
  - 이 섹션의 크레딧 / 저자 표시
  - 섹션 상단에 올 수 있습니다
  - 심지어 위에있을 수 있습니다 <header>
<main>
- 한 번만 허용
- 최상위 섹션의 주요 부분 (즉, 문서 <body>)을 표시합니다.
- 하위 섹션 자체에는 주요 부분에 대한 마크 업이 없습니다.
- <main>문서의 일부 하위 심지어 "숨기기"를 할 수있는 동안 문서의 <header>및 <footer>수 없습니다 (마크 업이 그 하위의 / 바닥 글 헤더를 표시 할 것)
  - 그러나 <article>섹션 ³ 에서는 허용되지 않습니다
- "실제"를 문서의 머리글, 바닥 글, 기본이 아닌 내용과 구별하는 데 도움이됩니다.

^{⁽¹⁾ 마음에 온다 : 개요, 알고리즘, 암시 적 절편을}
^{² I 사용을 <h*>위한 속기로 <h1>, <h2>, <h3>, <h4>, <h5>및 <h6>}
^{³ 도 아니다 <main>허용되지 <aside>나 <nav>,하지만 그건 놀라운 일이다. – 실제로 : <main>내림차순 <section>섹션 만 숨기 거나 최상위 레벨에 표시 할 수 있습니다 .<body>}

— 로버트 시머
소스

33

답은시 자체와 같습니다. 내가 가장 좋아하는 부분은 다음과 같습니다 sections in an article are like chapters in a book, articles in a section are like poems in a volume- 최고의 가장 직관적 article대 section내가 설명 봤어요!

— Sergey Lukin

1

몇 가지 요점으로 요약 된 상용구가없는 광범위한 지식입니다. 공유해 주셔서 감사합니다! 때로는 SO에서 가장 좋은 대답은 인정되거나 가장 높은 점수가 아닙니다.

3

나는 그것이 진부한 것을 안다. 그러나 "이것은 받아 들여지는 대답이어야한다!". 각주와 모든 것! 감사!

— 유진

유진과 피트 또는 맞습니다. 이 답변을 투표하는 동안 불완전하고 잘못된 답변에 투표 할 수 있습니다. 그것은 저자들에게 해가되는 것이 아니며, 최고의 답변을 가장 먼저 보게하는 비용입니다. 선택한 답변에 대한 robert의 의견 외에도 웹의 다른 곳에서 표절 된 (불완전한) 내용 때문에 마음에 들지 않습니다.

— IAmNaN

이 매우 상세한 답변과 많은 것들을 명확하게 해주었습니다. 감사합니다!

— Alaeddine

111

div 요소는 머리글, 탐색 메뉴, 섹션, 기사, 옆으로 및 바닥 글과 같은 새 요소로 바꿀 수 있습니다.

해당 문서의 마크 업은 다음과 같습니다.

<body>
     <header>...</header>
     <nav>...</nav>
     <article>
          <section>
               ...
          </section>
     </article>
     <aside>...</aside>
     <footer>...</footer>
</body>

이 기사에서 더 많은 정보를 찾을 수 있습니다 .

— 실러
소스

25

이 상용구 구조는이 페이지의 공간에 가치가 없습니다. 1) 언급 된 HTML 요소 중 어느 것도 문서의 어떤 위치와도 관련이 없습니다. 2) <header>와 <footer>가 문서 레벨 요소라는 잘못된 암시. 3) <section>이 <article> -child로만 의도 된 것으로 잘못 암시합니다. @ DanDascalescu

— Robert Siemer

2

더 @RobertSiemer에 동의하지 못했습니다. 이것은 여전히 HTML5 요소에 대한 가장 일반적인 오해 중 하나이며 사랑하는 마크 업 언어의 의미 론적 장애가되고 있습니다.

— 카노

@RobertSiemer 재 : 2), 수 없습니다 <header>및 <footer>내에서뿐만 아니라, 문서 수준 요소가 될 <section|article|nav|aside>부분?

— Flimm

1

@Flimm, 그렇습니다. 나의 요점은 : 대답은 틀리지 않았다 – 그것은 단지 많은 대답을하지 않는다.

— Robert Siemer

63

HTML5 구조화에 관한 W3 위키 페이지를 읽는 것이 좋습니다 .

<header>사이트의 헤더 내용을 포함하는 데 사용됩니다. <footer> 사이트의 바닥 글 내용을 포함합니다. <nav>탐색 메뉴 또는 페이지의 다른 탐색 기능이 포함되어 있습니다.

<article>
RSS 항목 (예 : 뉴스 항목)으로 신디케이트 될 경우 의미 가있는 독립형 컨텐츠를 포함합니다 .

<section>다른 기사를 다른
목적이나 주제 로 그룹화 하거나 단일 기사의 다른 섹션을 정의하는 데 사용됩니다.

<aside> 주요 컨텐츠와 관련이 있지만 컨텐츠의 흐름의 중심이 아닌 컨텐츠 블록을 정의합니다.

여기에 정리 한 이미지 가 포함 됩니다.

html5

코드에서 이것은 다음과 같습니다.
<body>
  <header></header>    
  <nav></nav>    
  <section id="sidebar"></section>    
  <section id="content"></section>    
  <aside></aside>    
  <footer></footer>
</body>
일부 HTML5 요소를 자세히 살펴 보겠습니다.

<section>

이 <section>요소는 서로 다른 기능 영역이나 주제 영역을 포함하거나 기사 또는 스토리를 다른 섹션으로 나눕니다. 따라서이 경우 : "sidebar1"에는 "RSS 구독"및 "상점에서 음악 구입"과 같이 사이트의 모든 페이지에 유지 될 수있는 다양한 유용한 링크가 포함되어 있습니다. "main"에는이 페이지의 주요 내용 인 블로그 게시물이 포함되어 있습니다. 사이트의 다른 페이지에서이 내용이 변경됩니다. 상당히 일반적인 요소이지만 여전히 낡은 것보다 의미가 더 큽니다 <div>.

<article>

<article>에 관련되어 <section>있지만 분명히 다릅니다. <section>콘텐츠 또는 기능의 개별 섹션을 그룹화 하는 반면 <article>개별 블로그 게시물, 비디오, 이미지 또는 뉴스 항목과 같은 개별 독립형 콘텐츠를 포함하기위한 것입니다. 이 방법으로 생각하십시오-당신이 각각 독자적으로 읽을 수 있고 RSS 피드에서 별도의 항목으로 신디케이트하는 것이 합리적 일 수있는 많은 컨텐트 아이템을 가지고 있다면 <article>마크 업에 적합합니다. 이 예에서는 <section id="main">블로그 항목을 포함합니다. 각 블로그 항목은 RSS 피드의 항목으로 신디케이트하기에 적합하며 컨텍스트를 벗어나 독자적으로 읽을 때 의미가 있으므로 <article> 다음과 같이하십시오.
<section id="main">
    <article></article>        
    <article></article>        
    <article></article>
</section>
허? 기사 내부에 섹션을 중첩시킬 수도 있다는 점에 유의하십시오. 예를 들어, 이러한 블로그 게시물 각각에 고유 한 섹션의 일관된 구조가있는 경우 기사 내에 섹션을 넣을 수도 있습니다. 다음과 같이 보일 수 있습니다.
<article>
  <section id="introduction"></section>      
  <section id="content"></section>
  <section id="summary"></section>
</article>
<header> 과 <footer>

위에서 이미 언급했듯이 <header>및 <footer>요소 의 목적은 각각 머리글과 바닥 글 내용을 래핑 하는 것입니다 . 특정 예에서 <header>요소에는 로고 이미지 <footer>가 포함 되고 요소에는 저작권 표시가 포함되지만 원하는 경우보다 정교한 내용을 추가 할 수 있습니다. 또한 노트 각 페이지에 하나 이상의 머리글과 바닥 글이 수 -뿐만 아니라 우리가 언급 한 최상위 머리글과 바닥 글을, 당신은 또한 가질 수 <header>및 <footer>각 안에 중첩 요소 <article>가 단지에 적용 할 경우에을, 특정 기사. 위 예제에 추가 :
<article>
  <header></header>    
  <section id="introduction"></section>      
  <section id="content"></section>      
  <section id="summary"></section>      
  <footer></footer>
</article>
<nav>

이 <nav>요소는 현재 사이트의 다른 페이지 또는 현재 페이지의 다른 영역으로 이동하는 탐색 링크 또는 기타 구성 (예 : 검색 양식)을 표시하기위한 것입니다. 스폰서 링크와 같은 다른 링크는 포함되지 않습니다. 물론 제목 및 기타 구조화 요소를 포함 할 수 <nav>있지만 필수는 아닙니다.

<aside>

우리 <aside>는 두 번째 사이드 바를 마크 업 하기 위해 요소를 사용했음을 알았을 것입니다 : 최신 깁과 연락처를 포함하는 사이드 바. 이는 완벽하게 적합 <aside>주요 흐름과 관련된 정보의 조각을 마킹이지만, 직접에 적합하지 않다. 그리고이 경우의 주요 내용은 밴드에 관한 것입니다! <aside>블로그 게시물 (들)의 저자, 밴드 전기 또는 앨범을 구입할 수있는 링크가있는 밴드 디스크 그래피에 대한 정보는 다른 좋은 선택입니다 .

그게 어디 떠나요 <div>?

그렇다면 우리의 페이지에서 사용할 수있는이 모든 위대한 요소들이 겸손한 시대에 <div>번호가 매겨져 있습니까? 아니. 실제로, <div> 여전히 완벽하게 유효합니다. 컨텐트 영역을 그룹화하는 데 사용할 수있는 더 적합한 다른 요소가없는 경우이 스타일을 사용해야합니다. 이는 요소를 순수하게 스타일링 / 시각적 목적으로 그룹화하기 위해 요소를 사용하는 경우에 자주 사용됩니다. 일반적인 예는 a <div>를 사용 하여 페이지의 모든 내용을 래핑 한 다음 CSS를 사용하여 모든 내용을 브라우저 창에 가운데로 맞추거나 특정 배경 이미지를 전체 내용에 적용하는 것입니다.

— 저스틴
소스

1

그러나 중첩 된 섹션의 <section class="summary">경우보다 사용하는 것이 더 합리적 이지 <section id="summary">않습니까? 한 페이지에 여러 기사가있는 경우 후자의 방법을 사용하면 동일한 페이지 (HTML 가짜 pa)에 ID가 중복됩니다. 권리?

— JP Lew

예, 아마도 해당 인스턴스에서 클래스를 대신 사용합니다.

— Justin

1

언급 한 모든 태그를 "메인"으로 싸서 "본문"으로 싸서서는 안됩니까?

— Francisco Aguilera 1

1

main태그 추가 좋은 것입니다. 넣을 위치는 페이지의 고유 한 내용이 무엇인지에 따라 결정됩니다. 이 예에서는 방금 중앙에 놓을 것이라고 생각합니다 section. 더 읽기 : w3.org/TR/2012/WD-html-main-element-20121217 "문서의 기본 컨텐츠 섹션에는 해당 문서에 고유 한 컨텐츠가 포함되며 사이트와 같은 일련의 문서에서 반복되는 컨텐츠는 제외됩니다 탐색 링크, 저작권 정보, 사이트 로고 및 배너 및 검색 양식 "

— Justin

MDN 문서와 마찬가지로 여전히 모호합니다

— oldboy

23

[ "주요 답변"에 설명 ]

7. 전체 웹 사이트 주변의 섹션 ? 아니면 div 만 ?

둘 다. 스타일링 :을 사용하면 <body>이미 있습니다. sectioning / semantics의 경우 : 예제 HTML에서 자세히 설명 했듯이 그 효과는 유용성과 반대입니다. 이미 래핑 된 내용에 대한 추가 래퍼는 개선되지 않지만 소음입니다.

각 섹션은 헤더로 시작합니까?

아니요, 일반적으로“헤더”로 요약 된 내용을 넣을 위치는 저자가 선택합니다. 추가 표시없이 해당 헤더 내용을 명확하게 인식 할 수 있으면이 없이도 완벽하게 유지 될 수 <header>있습니다. 저자의 선택이기도합니다.

23 행.이 div가 맞습니까? 또는 이것은 섹션 이어야 합니까?

은 <div>아마도 잘못된 것입니다. 그것은 의도에 달려 있습니다 : 스타일링을 위해서만 맞습니다. 의미 론적 인 목적이라면 잘못된 것 입니다. 다른 대답에 표시된 것처럼<article> 대신 해야합니다 . 스타일과 섹션을 모두 결합한 경우에도 적합합니다.<article>

<section>책의 장과 같이이 섹션 앞뒤에 유사한 섹션이 없으므로 여기에서 잘못 보입니다. (의 목적입니다 <section>).

라인 24. div로 왼쪽 / 오른쪽 열을 분할하십시오 .

이유없이?

25 행. 기사 태그의 올바른 위치 ?

그렇습니다.

26 행. h1 -tag를 헤더 -tag 에 넣어야 합니까?

아니요. 고독한 <h*>요소는 아마도 <header>앞으로 다가올 것의 제목이라는 것이 이미 명확하기 때문에 아마도 들어 가지 않아도 될 것입니다. – 예를 들어 <header>태그 라인 (으로 표시 <p>) 도 포함하는 것이 합리적 입니다.

내용은 주요 기사와 관련이 없으므로이 부분 은 제외 하고 섹션 이라고 결정했습니다 .

콘텐츠 와 관련<aside> 하여 "접선 적으로 관련 " 되어야 한다는 것은 오해입니다 . 요점은 : <aside>컨텐츠가 " 접선 적으로 관련되어"있거나 전혀없는 경우를 사용하는 것입니다!

그럼에도 불구하고, <aside>적절한 선택 <article>이 <section>아니라,“핫 아이템”과“새로운 아이템”이 책의 두 장처럼 읽히지 않는 것보다 여전히 낫습니다 . 전체의 두 부분이 아닌 대체 정렬 방식과 같은 방식으로 완벽하게 이동할 수 있습니다.

라인 44. 헤더 없는 H2

중대하다.

53 행. 헤더가 없는 섹션

글쎄, <header>하지만 <h2>제목은이 섹션의 어느 부분이 헤더인지 명확하게 남깁니다.

63 행. 모든 (관련되지 않은) 뉴스 항목이있는 Div

<article>또는 <aside>더 좋을 수도 있습니다.

라인 (64) 의 헤더 와 H2를

이미 논의했다.

라인 65. 흠, 사업부 또는 섹션 ? 또는이 div를 제거 하고 기사 -tag 만 사용 하십시오

바로 그거죠! 을 제거하십시오 <div>.

105 행. 바닥 글 :-)

매우 합리적입니다.

— 로버트 시머
소스

하나의 답변을 불완전한 3 개로 나누는 것은 도움이되지 않습니다.

— Christian Strempfer '

6

@ChristianStrempfer 많은 사람들이 OP의 특정 질문에 대한 특정 답변을 읽지 않고 (이 답변), 현재 다루고있는 주제에 대한 자세한 내용을 읽으려고 실제로 도움이됩니다. – 나는 한 번의 큰 답변으로 주 답에 대한 표를 얻지 못할 것이라고 생각합니다. – 당신은 무엇을 제안합니까?

— Robert Siemer

나는 그것들을 하나의 대답으로 병합하는 것이 좋습니다. 수집 투표는 분할에 대한 좋은 주장이 아닙니다. 특히 세 번째 답변 은 주 답변을 참조 할 때 단독으로 진행될 수 없습니다.

— Christian Strempfer '

@ChristianStrempfer 그것은 내 취향에 너무 길 것입니다. – 그래도 테이블 개선을 위해 노력하고 있습니다 ...

— Robert Siemer

20

에 따르면 내 "주"대답 설명 문제의 문서 개요에 따라 마크 업해야합니다.

다음 두 표에서 내가 보여줍니다.

원본 HTML과 개요
가능한 의도 된 개요와 HTML

original html (shortened) _{<body> <section> <header> <div id=logo></div> <div id=language></div> </header> <nav> ... </nav> <div id=main> <div id=main-left> <article> <header> <h1>The real thing</h1> </header> </article> </div> <div id=main-right> <section id=main-right-hot> <h2>Hot items</h2> </section> <section id=main-right-new> <h2>New items</h2> </section> </div> </div> <div id=news-items> <header> <h2>The latest news</h2> </header> <div id=item_1> <article> <header> <h3>...</h3> </header> <a>read more</a> </article> </div> <div id=item_2> <article> <header> <h3>...</h3> </header> <a>read more</a> </article> </div> <div id=item_3> <article> <header> <h3>...</h3> </header> <a>read more</a> </article> </div> </div> <footer> <ul><li>...</ul> </footer> </section>} original html relevant for outline _{<body> <section> // logo and language <nav> ... </nav> <article> <h1>The real thing</h1> </article> <section> <h2>Hot items</h2> </section> <section> <h2>New items</h2> </section> <h2>The latest news</h2> <article> <h3>...</h3> </article> <article> <h3>...</h3> </article> <article> <h3>...</h3> </article> // footer links </section>} resulting outline 1. (untitled document) 1.1. (untitled section) 1.1.1. (untitled navigation) 1.1.2. The real thing (h1) 1.1.3. Hot items (h2) 1.1.4. New items (h2) 1.1.5. The latest news (h2) 1.1.6. news item_1 (h3) 1.1.7. news item_2 (h3) 1.1.8. news item_3 (h3) The outline of the original is definitively not what was intended.

다음 표는 개선 된 버전에 대한 제안입니다. 다음 마크 업을 사용합니다.

~~<removed>~~
<NEW_OR_CHANGED_ELEMENT>
<element MOVED_ATTRIBUTE=1>

possible intended outline 1. (main) 1.1. The real thing 1.2. (hot&new) 1.2.1. Hot items 1.2.2. New items 2. The latest news 2.1. news item_1 2.2. news item_2 2.3. news item_3 modified html _{<body> <section> <header> <ASIDE> <div id=logo></div> <div id=language></div> </ASIDE> </header> <nav> ... </nav> <ARTICLE id=main> <div id=main-left> <article ID=main-left> <header> <h1>The real thing</h1> </header> </article> </div> <ARTICLE id=main-right> <ARTICLE id=main-right-hot> <h2>Hot items</h2> </ARTICLE> <ARTICLE id=main-right-new> <h2>New items</h2> </ARTICLE> </ARTICLE> </ARTICE> <ARTICLE id=news-items> <header> <h2>The latest news</h2> </header> <div id=item_1> <article ID=item_1> <header> <h3>...</h3> </header> <a>read more</a> </article> </div> <div id=item_2> <article ID=item_2> <header> <h3>...</h3> </header> <a>read more</a> </article> </div> <div id=item_3> <article ID=item_3> <header> <h3>...</h3> </header> <a>read more</a> </article> </div> </ARTICLE> <footer> <NAV> <ul><li>...</ul> </NAV> </footer> </section>``} resulting outline 1. (untitled document) 1.1. (untitled logo and lang) 1.2. (untitled navigation) 1.3. (untitled main) 1.3.1 The real thing 1.3.2. (untitled hot&new) 1.3.2.1. Hot items 1.3.2.2. New items 1.4. The latest news 1.4.1. news item_1 1.4.2. news item_2 1.4.3. news item_3 1.5. (untitled footer nav) The modified HTML reflects the intended outline way better than the original.

— 로버트 시머
소스

훌륭한 세부 답변에 감사드립니다. 나는 그 주제에 대해 더 많이 배우고 싶기 때문에 나는 당신에게 이상한 선택을 설명 할 수 있기를 바랍니다. 개별 의견으로 게시하겠습니다.

— 고른

1. 헤더 옆에> div [id = logo] 가 관련이없는 것 같습니다. 현재로서는 헤더이지만 의미 적으로는 아닙니다. 언어 div는 일종의 탐색 기능이며 로고는 전체 사이트의 헤더이지만 페이지는 아닙니다.

— 고른

2. <자료 = 주요> 정말 유일한 표상 보인다. 내부에는 아무 것도 포함되어 있지 않습니다. (<ARTICLE id = main-right>에 대해서도 마찬가지이지만, "news 및 hot"으로 훨씬 더 방어 가능합니다.) 최악의 경우 div 또는 main을 사용하는 것이 좋습니다.

— 고른

3. <ARTICLE id = news-items> 는 내가 따로 사용할 전형적인 경우 인 것 같습니다. 주요 기사와 관련이 없으며 뉴스 피드 일뿐입니다. 그리고 나는 개별 "작은"기사로 뉴스를 포함한다는 것에 동의합니다.

— 고른

1

귀하의 제안을 편집하는 것을 고려하십시오. 귀하의 "이론적"답변은 매우 잘 작성되었지만 대부분의 초보자는 단지 코드 예제를보고 이론적 인 부분과 일치하지 않기 때문에 실제로 혼란 스러울 수 있다고 생각합니다.

— 고른

17

주요 실수 : 전체 문서에 "이염"이 있습니다.
왜 이런가요?

<header>
    <div id="logo"></div>
    <div id="language"></div>
</header>

대신에:

<header role="banner">
    <!-- Not the best -->
    <h1 id="logo"></h1> <!-- or <figure> and <figcaption>, or <h1> and <p>... -->
    <h2 id="language"></h2>

    <!-- Better, if the IDs have not semantic sense -->
    <h1></h1>
    <h2></h2>
</header>

이 헤더를 스타일 화하려면 CSS 계층 구조를 사용하십시오 : body> section> header> h1, body> section> header> h2

더, ... 행 63 : 왜 헤더가 h2를 감싸는가 ?? 헤더에 더 이상 요소를 포함시키지 않으면 단일 h2를 사용하십시오.
구조는 문서를 스타일 화하는 것이 아니라 자체 설명 된 문서를 구성하는 것입니다.

이것을 나머지 문서에 적용하십시오. 행운을 빕니다 ;)

— 코비
소스

4

@superUntitled <hgroup> 는 더 이상 HTML5의 일부가 아닙니다

— bradley.ayers

role = "banner"가 전체 헤더가 아닌 h1 자체에 있어야합니까? 그렇게하면 HTML이 아닌 스크린 리더가 발표 할 단일 텍스트를 가리 킵니다.

— enigment

11

로고와 언어에 h1과 h2를 사용하는 것은 의미가 없습니다. 오른쪽의 작은 언어 버튼은이 페이지에서 두 번째로 중요한 콘텐츠 / 정보 여야합니까? 그리고 검색 로봇보다 h1 안에 로고를 넣으면 모든 페이지의 주요 내용이 동일하다는 것을 알 수 있습니다 (제 생각에는 지루합니다). h1 및 h2 사용에 대해서는 @MeanEYE 답변을 참조하십시오. 의미가 필요한 경우 해당 ID 외에도 시맨틱이 아닌 RDFa를 사용합니다. 당신의 방법은 CSS 선택기를 느리게 만듭니다 : developers.google.com/speed/docs/best-practices/…

— F Lekschas

10

기사 태그 자체에 item_1, item_2 등의 ID가없는 이유는 무엇입니까? 이처럼 :

<article id="item_1">
...
</article>
<article id="item_2">
...
</article>
...

래퍼 div를 추가 할 필요가없는 것 같습니다. ID 값은 HTML에서 의미 론적 의미가 없으므로이 작업을 수행하는 것이 완벽하게 유효하다고 생각합니다. 첫 번째 기사가 항상 item_1이고 현재 페이지의 컨텍스트 내에서 item_1 . ID는 문맥과 무관 한 의미를 가질 필요는 없습니다.

또한 26 행의 질문에 대해서는 <header> 태그가 필요하다고 생각하지 않으며 "main-left"div에 자체적으로 있기 때문에 생략 할 수 있다고 생각합니다. 주요 기사 목록에있는 경우 일관성을 위해 <header> 태그를 포함시킬 수 있습니다.

— 매트 브라운
소스

2

방금 원래 예제를 따르고 불필요한 래퍼 div없이 동일한 작업을 수행하는 방법을 보여주었습니다. ID는 여러 가지 이유로있을 수 있습니다 ... 한 가지 이유로 앵커 링크가있을 수 있습니다.

— Matt Browne

5

섹션은 문서 내에서 섹션을 감싸는 데만 사용해야합니다 (예 : 장 및 유사)
와 헤더 NO : 태그입니다. 헤더 태그는 페이지 헤더의 래퍼를 나타내며 H1, H2 등과 혼동해서는 안됩니다.
어느 사업부? :디
예
W3C 학교에서 :

태그는 외부 컨텐츠를 정의합니다. 외부 컨텐츠는 외부 제공자의 뉴스 기사, 웹 로그 (블로그)의 텍스트 또는 포럼의 텍스트 또는 외부 소스의 기타 컨텐츠 일 수 있습니다.
아니요, 헤더 태그는 다른 용도로 사용됩니다. H1, H2 등은 문서 제목을 나타냅니다. H1이 가장 중요합니다.

나는 당신이 말하는 것을 추측하기가 어렵 기 때문에 다른 것에 대답하지 않았습니다. 더 궁금한 점이 있으면 알려주세요.

— MeanEYE
소스

1

답변 주셔서 감사합니다! 포인트 3에서; 죄송합니다. 줄 번호가 잘못되었습니다. 포인트 3 대신 line_23이어야합니다. 내 게시물의 행 변경 사항도 참조하십시오.

— Bas van Dorst

예, 제 사이트에서도 같은 일을합니다. 일반적으로 DIV는 사이트 구조를 만드는 데 사용됩니다. HTML5에 머리글, 바닥 글 및 유사한 태그를 도입하면 내용을 조금 더 쉽게 읽을 수 있습니다. 그들은 DIV와 같은 방식으로 동작합니다.

— MeanEYE

3

출처를 확인하십시오. w3c 학교 사이트는 article반드시 외부 소스 에서 온 것으로 지정하지 않습니다 . w3schools.com/html5/tag_article.asp

— chharvey

흠, 나는 그 기사가 외부 소스에서 사용될 것이라고 생각조차하지 않았다. 이것은 오래된 대답을 끝내고, 나는 그것이 무엇에 관한 것인지 거의 기억할 수 없습니다. :)

— MeanEYE

# 1에 동의합니다. 나는 이러한 SECTION 요소가 ASIDE로서 더 의미가 있다고 생각합니다.

— Andy

3

내가 일하는 나의 예는 다음과 같습니다.

여기에 이미지 설명을 입력하십시오

— 이반
소스

2

<body itemscope itemtype="http://schema.org/Blog">
 <header>
  <h1>Wake up sheeple!</h1>
  <p><a href="news.html">News</a> -
     <a href="blog.html">Blog</a> -
     <a href="forums.html">Forums</a></p>
  <p>Last Modified: <span itemprop="dateModified">2009-04-01</span></p>
  <nav>
   <h1>Navigation</h1>
   <ul>
    <li><a href="articles.html">Index of all articles</a></li>
    <li><a href="today.html">Things sheeple need to wake up for today</a></li>
    <li><a href="successes.html">Sheeple we have managed to wake</a></li>
   </ul>
  </nav>
 </header>
 <main>
  <article itemprop="blogPosts" itemscope itemtype="http://schema.org/BlogPosting">
   <header>
    <h1 itemprop="headline">My Day at the Beach</h1>
   </header>
   <div itemprop="articleBody">
    <p>Today I went to the beach and had a lot of fun.</p>
    ...more content...
   </div>
   <footer>
    <p>Posted <time itemprop="datePublished" datetime="2009-10-10">Thursday</time>.</p>
   </footer>
  </article>
  ...more blog posts...
 </main>
 <footer>
  <p>Copyright ©
   <span itemprop="copyrightYear">2010</span>
   <span itemprop="copyrightHolder">The Example Company</span>
  </p>
  <p><a href="about.html">About</a> -
     <a href="policy.html">Privacy Policy</a> -
     <a href="contact.html">Contact Us</a></p>
 </footer>
</body>

https://www.w3.org/TR/2014/REC-html5-20141028/sections.html#the-nav-element

— Юрий Светлов
소스

1

뉴스 항목 요약 (67, 80, 93 행)에 태그를 사용해야한다고 생각하지 않습니다. 섹션을 사용하거나 둘러싸는 div를 가질 수 있습니다.

기사는 독자적으로 설 수 있어야하며 여전히 이해가되거나 완성되어야합니다. 불완전하거나 추출한 것으로서 기사가 될 수 없으며 더 많은 섹션이 될 수 있습니다.

'더 읽기'를 클릭하면 다음 페이지에서

— Conordarcy
소스

1

편집 : 불행히도 나는 나 자신을 수정해야합니다.

예제를 포함하는 w3 사양에 대한 링크 는 https://stackoverflow.com/a/17935666/2488942 를 참조하십시오 (이전에 살펴 본 것과 달리).

그러나 .... 여기 @Fez에 그것을 감사에 대한 좋은 기사입니다.

내 원래 응답은 다음과 같습니다

w3 사양의 구성 방식 :

4.3.4 섹션

4.3.4.1 본문 요소

4.3.4.2 섹션 요소

4.3.4.3 탐색 요소

4.3.4.4 기사 요소

....

나 section보다 높은 수준 을 제안합니다 article. 이 답변 에서 언급했듯이 section주제별로 관련된 콘텐츠를 그룹화합니다. 기사의 내용은 어쨌든 주제 적으로 주제와 관련이 있기 때문에 적어도 나에게 이것은 section그룹에 비해 높은 수준의 그룹을 제안합니다 article.

나는 이것이 다음과 같이 사용되어야한다고 생각합니다.

section: Chapter 1
    nav: Ch. 1.1
         Ch. 1.2

    article: Ch. 1.1
             some insightful text

    article: Ch. 1.2
             related to 1.1 but different topic

또는 뉴스 웹 사이트 :

section: News
    article: This happened today
    article: this happened in England

section: Sports
    article: England - Ukraine 0:0
    article: Italy books tickets to Brazil 2014

— 판 디타
소스

1

„23 행.이 div가 맞습니까? 아니면이 부분이어야합니까?”

어느 쪽도 – main해당 목적을위한 태그는 페이지 당 한 번만 허용되며 사이드 바 또는 사이트 전체 헤더와 달리 기본 콘텐츠의 래퍼로 사용해야합니다.

<main>
    <!-- The main content -->
</main>

http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-main-element

— Feeela
소스

0

이 질문을 더 정확하게 설명하고 싶습니다. 틀린 경우 수정하십시오 Facebook Wall의 예를 들어 보겠습니다.

1. 벽은 "섹션"태그 아래에 있으며 이는 페이지와 분리되어 있음을 나타냅니다.

2. 모든 게시물은 "기사"태그로 제공됩니다.

3. 그런 다음 "섹션"태그 아래에 단일 포스트가 있습니다.

3. "X user post this"라는 제목이 있는데 "heading"태그를 사용할 수 있습니다.

4. 그런 다음 포스트 우리는 세 섹션 하나는 이미지 / 텍스트, 같은 코멘트 버튼 및 댓글 상자.

5. 주석 박스에는 기사 태그를 사용할 수 있습니다.

— 톡스 고거
소스

0

에 따르면 나단의 대답은 ,이 (어쩌면 당신이 사용할 수, 붉은 색과 오렌지색 부품에 대한 완벽한 의미가 div의 및 / 또는 header 과 footer각각) :

— 알레한드로 나바
소스