Передовий досвід HTML5; елементи розділу / заголовка / вбік / статті

546

В Інтернеті є достатньо інформації про HTML5 (а також про stackoverflow), але зараз мені цікаво про "кращі практики". Теги, такі як розділ / заголовки / стаття, є новими, і кожен має різні думки щодо того, коли / де ви повинні використовувати ці теги. То що ви думаєте про наступний макет та код?

Макет веб-сайту

  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навколо всього веб-сайту? Або лише a div?

рядок 8. Кожен sectionпочаток з header?

рядок 23. Це divправильно? чи це повинно бути section?

рядок 24. Розділіть лівий / правий стовпчик із a div.

рядок 25. Правильне місце для articleтегу?

рядок 26. Чи потрібно вводити свій h1-таг до header-таг?

рядок 43. Зміст не пов'язаний з основною статтею, тому я вирішив, що це - sectionа не а aside.

рядок 44. Н2 без header

рядок 53. sectionбезheader

рядок 63. Div із усіма новинами (не пов’язаними)

лінія 64. headerз h2

рядок 65. Хм, divабо section? Або видаліть це divта використовуйте лише article-tag

рядок 105. Нижній колонтитул :-)

html header article

— Бас ван Дорст
джерело

456bereastreet.com/archive/201103/…

— Крістоф Руссі

486

Насправді ви абсолютно праві, коли мова йде про колонтитул / колонтитул. Ось основна інформація про те, як можна / слід використовувати кожен з основних тегів HTML5 (я пропоную прочитати повне джерело, пов’язане внизу):

розділ - використовується для групування вмісту, пов’язаного з тематикою. Звучить як елемент діва, але це не так. Дива не має семантичного значення. Перш ніж замінювати всі розділи на елементи розділу, завжди запитайте себе: "Чи пов’язаний весь вміст?"

вбік - використовується для тангенціально пов'язаного вмісту. Тільки тому, що деякий вміст відображається зліва або справа від основного вмісту, недостатньо причин для використання елемента вбік. Запитайте себе, чи можна видалити вміст у бік, не знижуючи значення основного змісту. Pullquotes - це приклад тангенціально пов’язаного змісту.

заголовок - Існує вирішальна різниця між елементом заголовка та загальноприйнятим використанням заголовка (або головного заголовка). Зазвичай на сторінці є лише один заголовок або "головна частина". У HTML5 ви можете мати скільки завгодно. Специфікація визначає це як "групу вступних або навігаційних посібників". Ви можете використовувати заголовок у будь-якому розділі вашого сайту. Насправді ви, ймовірно, повинні використовувати заголовок у більшості своїх розділів. Специфікація описує елемент розділу як "тематичне групування вмісту, як правило, із заголовком".

nav - призначений для основної навігаційної інформації. Група посилань, згрупованих разом, не є достатньою підставою для використання елемента nav. Навігація по сайту, з іншого боку, належить до елемента нав.

нижній колонтитул - звучить як опис позиції, але його немає. Елементи нижнього колонтитулу містять інформацію про його елемент: хто його написав, авторські права, посилання на пов'язаний вміст тощо. Тоді як у нас зазвичай є один колонтитул для всього документа, HTML5 дозволяє нам також розміщувати колонтитул у розділах.

Джерело : https://clzd.me/html5-section-aside-header-nav-footer-elements-not-as-obvious-as-they-sound/

Окрім того, ось опис article, не знайдений у джерелі вище:

стаття - використовується для елемента, який визначає незалежний, незалежний вміст. Стаття повинна мати сенс самостійно. Перш ніж замінювати всі елементи вашої статті елементами статті, завжди запитайте себе: "Чи можна її читати незалежно від решти веб-сайту?"

— Натан Дж. Б.
джерело

68

Для мене це загадка, як ця відповідь отримала стільки голосів: вона не говорить про <article>елементи, не протиставляє згадані елементи, а також не групує їх. Відповідь не дає “найкращих практик”, а також не відповідає на одне із чітких питань ОП!

— Роберт Сімер

2

@RobertSiemer Для мене це теж загадка , як ваш коментар отримав 24 upvotes і питання тільки 6 downvotes ...

— Veger

@RobertSiemer тому, що це чудово виглядає, як ти думаєш? Я не уявляв, що це погано, поки не перевірив ваш коментар і не підтвердив його наступною відповіддю.

— Дет

238

На жаль, відповіді, надані до цих пір (включаючи найбільш проголосованих), є або "просто" здоровим глуздом, явно неправильними або в кращому випадку заплутаними. Жодне з найважливіших ключових слів ^{1 не} спливає!

Я написав 3 відповіді:

Щоб зрозуміти роль обговорених тут елементів html, ви повинні знати, що деякі з них розділяють документ. Кожен документ у форматі HTML може бути розділений відповідно до алгоритму структури HTML5 з метою створення контуру - «або» - змісту (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>s in an - <article>це як глави книги
<article>s in a - <section>це як вірші в томі (в межах серії)

Як <header>, <footer>і <main>підходять?

вони мають нульовий вплив на секціонування
<header> і <footer>
- вони дозволяють позначати зони кожного та кожного розділу
- навіть у розділі ви можете мати їх кілька разів
- відмежувати від основної частини цього розділу
- обмежена лише авторським смаком
- <header>
  - може позначати назву / назву цього розділу
  - може містити логотип для цього розділу
  - не має бути у верхній або верхній частині секції
- <footer>
  - може відзначити кредити / автора цього розділу
  - може з’явитися у верхній частині розділу
  - може навіть бути вище а <header>
<main>
- дозволено лише один раз
- позначає основну частину розділу верхнього рівня (тобто документа, <body>тобто)
- самі підрозділи не мають розмітки для своєї основної частини
- <main>можна навіть "сховати" в деяких підрозділах документа, тоді як документ <header>і <footer>не може (ця розмітка тоді позначатиме заголовок / колонтитул цього підрозділу)
  - але це не дозволено в <article>розділах ³
- допомагає відрізнити "справжню річ" від неголовного документа, не колонтитула, не основного вмісту, якщо це має сенс у вашому випадку ...

^{¹ на думку спадає: Схема, алгоритм, неявне секціонування}
^{² я використовую в <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пояснення проти я, що я бачив!

— Сергій Лукін

1

Це великі знання без котлоагрегату, узагальнені в декількох пунктах. Дякую, що поділились! Іноді на ТА найкраща відповідь не є ні прийнятою, ні найвищою оцінкою.

3

Я знаю, що це кліше, але "Це має бути прийнята відповідь!". Виноски і все! Дякую!

— Євген

Євген і фут або мають рацію. Пам'ятайте, що ви можете голосувати за неповні та невірні відповіді під час голосування за цю. Це не є образою для їхніх авторів, це ціна на забезпечення найкращих відповідей. Окрім коментаря Роберта до обраної відповіді, мені це також не подобається, оскільки він плагіатував (неповний) вміст у інших місцях Інтернету.

— IAmNaN

Ця дуже детальна відповідь та зрозуміла багато речей, дякую!

— Аладдін

111

Елементи div можна замінити новими елементами: заголовок, nav, розділ, стаття, бік та нижній колонтитул.

Розмітка для цього документа може виглядати наступним чином:

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

Ви можете знайти більше інформації в цій статті на A List Apart .

— cilerler
джерело

25

Ця конструкція котла не коштує місця на цій сторінці. 1) Жоден із згаданих елементів HTML не прив’язаний до жодної позиції в документі. 2) Помилково випливає, що <header> і <footer> - елементи рівня документа. 3) Помилково випливає, що <секція> призначена лише як <частинка> - лише для дітей. @DanDascalescu

— Роберт Сімер

2

Не можу погодитися більше @RobertSiemer. Це все ще одне з найпоширеніших помилок щодо елементів HTML5 і стає семантичним недоліком для нашої улюбленої мови розмітки.

— кано

@RobertSiemer Re: 2), Не можуть бути <header>і <footer>елементи рівня документа, а також у <section|article|nav|aside>розділах?

— Flimm

1

@Flimm, так вони можуть. Моя думка полягала в тому, що відповідь не є помилковою - вона просто не відповідає багато.

— Роберт Сімер

63

Я б запропонував прочитати сторінку вікі W3 про структурування HTML5 :

<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-штука. Правильно?

— JP Lew

Так, я б, напевно, використовував класи натомість у цьому випадку.

— Джастін

1

Чи не повинні всі згадані вами теги загортатись у "головне", яке потім загортається у "тіло"?

— Франциско Агілера

1

mainТег добре б додати. Де його розмістити, було б вирішено виходячи з того, що є унікальним контентом на сторінці. У цьому прикладі я думаю, що я просто поставив би це навколо центру section. Детальніше: w3.org/TR/2012/WD-html-main-element-20121217 "Основний розділ вмісту документа включає вміст, унікальний для цього документа, і виключає вміст, який повторюється через набір документів, таких як сайт навігаційні посилання, інформація про авторські права, логотипи сайту та банери та форми пошуку. "

— Джастін

все ще настільки неоднозначно, як це документація MDN

— oldboy

23

[ пояснення в моїй "головній відповіді" ]

рядок 7. розділ навколо всього веб-сайту? Або лише діва ?

Ні. Для стилізації: використовуйте <body>, воно вже є. Для секціонування / семантики: як детальніше в моєму прикладі HTML, її ефект суперечить корисності. Додаткові обгортки до вже обгорнутого вмісту - це не поліпшення, а шум.

рядок 8. Кожен розділ починається із заголовка?

Ні, саме автор вибирає, де розмістити вміст, як правило, узагальнений як "заголовок". І якщо цей вміст заголовка чітко розпізнається без додаткового маркування, він може ідеально залишатися без <header>. Це теж вибір автора.

рядок 23. Чи правильно цей дів ? чи це повинен бути розділ ?

Можливо, <div>це неправильно. Це залежить від намірів: чи тільки для стилізації це могло бути правильним. Якщо це для семантичних цілей, це неправильно: він повинен бути <article>замість цього, як показано в іншій моїй відповіді . <article>також правильно, якщо це стосується як стилів, так і секціонування.

<section>Тут виглядає неправильно, оскільки немає подібних розділів до цього або після нього, як розділи в книзі. (Це і є мета <section>).

рядок 24. Розділіть лівий / правий стовпчик з діл .

Ні, чому?

рядок 25. Правильне місце для тегу статті ?

Так, має сенс.

рядок 26. Чи потрібно ввести тег h1 -tag в заголовок -tag?

Ні. Одинокому <h*>елементу, ймовірно, ніколи не потрібно входити <header>(але це може, якщо ви хочете), оскільки вже зрозуміло, що це заголовок того, що має бути найближчим часом. - Було б сенс, якби це <header>також включало, наприклад, тегову лінію (позначену символом <p>).

рядок 43. Зміст не пов'язаний з основною статтею, тому я вирішив, що це розділ, а не відступ .

Це непорозуміння, що довідник <aside>повинен бути "дотично пов'язаний " зі змістом навколо. Суть полягає в тому, щоб використовувати, <aside>якщо вміст лише " дотично " або взагалі немає!

Тим не менш, окрім <aside>гідного вибору, <article>все-таки краще, ніж <section>«гарячі предмети», а «нові пункти» не повинні читатись як два глави книги. Ви можете ідеально шукати одну з них, а не іншу, як альтернативне сортування чогось, а не як дві частини цілого.

рядок 44. Н2 без заголовка

Це здорово.

рядок 53. розділ без заголовка

Ну, немає <header>, але <h2>заголовок залишає досить зрозумілим, яка частина цього розділу - заголовок.

рядок 63. Div із усіма новинами (не пов’язаними)

<article>а <aside>може бути і краще.

рядок 64. заголовок з h2

Обговорено вже.

рядок 65. Хм, дів чи розділ ? Або видалити цей DIV і використовувати тільки статті -tag

Саме так! Видаліть <div>.

рядок 105. Нижній колонтитул :-)

Дуже розумний.

— Роберт Сімер
джерело

Розщеплення однієї відповіді на 3 неповні не є корисним.

— Крістіан Стремпфер

6

@ChristianStrempfer Насправді корисно, оскільки багато людей не приходять сюди, щоб прочитати конкретні відповіді на конкретні запитання ОП (ця відповідь), а щоб прочитати більше про цю тему (моя головна відповідь). - Я вважаю, що з однією величезною відповіддю tldr я не отримав би навіть голосів, які маю за свою головну відповідь. - Що ти пропонуєш?

— Роберт Сімер

Я пропоную об'єднати їх в одну відповідь. Збір голосів не є гарним аргументом для їх поділу. Особливо третя відповідь не може бути самотньою, оскільки ви переказуєте свою основну відповідь.

— Крістіан Стремпфер

@ChristianStrempfer Це було б занадто довго на мій смак. - Хоча я працюю над вдосконаленням таблиць ...

— Роберт Сімер

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.

— Роберт Сімер
джерело

Дякую за відмінну детальну відповідь, це дуже освічує. Я хочу дізнатися більше про цю тему, тому сподіваюся, ви зможете пояснити деякі варіанти, які мені здаються дивними. Я буду публікувати їх як окремі коментарі.

— gorn

1. Заголовок навколо вбік> div [id = логотип] для мене, здається, не має значення. По суті це заголовок, але семантично не. Мовний div - це може бути якась навігація, а логотип - це може бути якийсь заголовок на весь сайт, але, безумовно, не на сторінку.

— gorn

2. <СТАТТЯ id = main> здається справді лише презентаційною. Він не містить нічого пов'язаного всередині. (Те саме стосується <ARTICLE id = main-right>, але він набагато захищається там (як "новини та гарячі").) Я пропоную використовувати div або main в гіршому випадку.

— gorn

3. <СТАТТЯ id = news-items> мені здається типовим випадком, коли я б використовував убік. Це не має нічого спільного з основною статтею, це лише якась стрічка новин. І я погоджуюся, що вона містить новини як окремі «маленькі» статті.

— gorn

1

Подумайте, редагуючи свою пропозицію, ваша "теоретична" відповідь дуже добре написана, але я думаю, що більшість початківців просто розглянемо приклад коду, і вони можуть бути дуже заплутані, оскільки це не відповідає теоретичній частині.

— gorn

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

Чи повинна роль = "банер" бути на самій h1, а не на всьому заголовку? Таким чином, це вказує на один фрагмент тексту, який оголосив би читач екрану, а не глобус HTML.

— загадка

11

Використання h1 і h2 для логотипу та мови для мене не має сенсу. Крихітна маленька кнопка мови праворуч повинна бути другим найважливішим змістом / інформацією на цій сторінці? А якщо розмістити ваш логотип всередині h1, ніж пошуковий робот, то з’ясується, що основний вміст кожної сторінки однаковий (на мою думку досить нудно). Також див. Відповідь @MeanEYE щодо використання h1 та h2. Крім того, ідентифікатори несемантично використовують RDFa, якщо вам потрібна семантика. Ваш шлях робить селектори CSS просто повільними: developers.google.com/speed/docs/best-practices/…

— F Lekschas

10

Чому б не вказати ідентифікатори item_1, item_2 тощо у самих тегах статті? Подобається це:

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

Мабуть, не потрібно додавати обгорткові діви. Значення ідентифікатора не мають семантичного значення в HTML, тому я думаю, що це було б цілком справедливо для цього - ви не говорите, що перша стаття завжди є item_1, просто item_1 в контексті поточної сторінки. Ідентифікатори не повинні мати значення, яке не залежить від контексту.

Крім того, що стосується вашого запитання в рядку 26, я не думаю, що тег <header> там не потрібен, і я думаю, ви можете його опустити, оскільки він знаходиться самостійно в розділі "головний лівий". Якби він був у головному списку статей, ви, можливо, захочете включити тег <header> лише заради послідовності.

— Метт Браун
джерело

2

Я просто наслідував оригінальний приклад і показував, як зробити те ж саме без зайвих обгортків. Ідентифікатори можуть бути там з будь-якої кількості причин ... з одного боку, там можуть бути якірні посилання, що вказують на них.

— Метт Браун

5

Розділ слід використовувати лише для загортання розділу в документі (наприклад, глави тощо)
З тегом заголовка : НІ. Тег заголовка являє собою обгортку заголовка сторінки і не слід плутати з H1, H2 тощо.
Який дів? : D
Так
Від шкіл W3C:

Тег визначає зовнішній вміст. Зовнішній вміст може бути новинною статтею від зовнішнього постачальника, або текст з веб-журналу (блогу), або текст з форуму, або будь-який інший вміст із зовнішнього джерела.
Ні, тег заголовка має інше використання. H1, H2 та ін. Представляють найголовніші заголовки документів H1

Я не відповів на інші, бо важко здогадатися, про що ви мали на увазі. Якщо питань буде більше, будь ласка, повідомте мене.

— СереднєEYE
джерело

1

Дякую за відповіді! На пункт 3; Перепрошую, номери рядків були неправильні. Він повинен бути рядок_23 замість пункту 3; див. також зміни рядків у моєму дописі.

— Бас ван Дорст

Так, я роблю те саме на своїх сайтах. Як правило, DIV повинні використовуватись для створення структури сайту. Представляючи заголовки, колонтитули та подібні теги в HTML5 - це просто зробити речі легшими для читання. Вони поводяться так само, як і DIV.

— MeanEYE

3

Перевірте свої джерела. Сайт шкіл w3c не вказує, що articleобов'язково має бути із зовнішнього джерела. w3schools.com/html5/tag_article.asp

— chharvey

Гм, я навіть не думав, що стаття повинна використовуватися із зовнішнього джерела. Це вже стара відповідь, я навряд чи пам’ятаю, про що йшлося. :)

— MeanEYE

Я згоден з №1. Я думаю, що ці елементи РОЗДІЛУ мають більше сенсу як АСИДИ.

— Енді

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). Ви можете скористатись секцією або просто мати прикладний розділ.

Стаття повинна мати можливість самостійно витримуватись і мати сенс або бути повною. Як його неповний або просто витяг, це не може бути стаття, а більше розділ.

Якщо натиснути "читати більше", наступна сторінка може

— узгодженість
джерело

1

EDIT: На жаль, я маю себе виправити.

Нижче див. Https://stackoverflow.com/a/17935666/2488942 за посиланням на специфікації w3, які містять приклад (на відміну від тих, про які я дивився раніше).

Але потім .... Ось приємна стаття про це завдяки @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. Чи правда ця діва? чи це повинен бути розділ? "

Ні - mainдля цієї мети є тег, який дозволений лише один раз на кожній сторінці, і його слід використовувати як обгортку основного вмісту (на відміну від бічної панелі або заголовка на сайті).

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

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

— тамела
джерело

0

Я хочу уточнити це питання точніше, виправте мене, якщо я помиляюся. Давайте взяти приклад стіни Facebook

1.Wall підпадає під тег "section", який позначає його окремо від сторінки.

2.Всі повідомлення розміщені під тегом "article".

3. Потім у нас є одна публікація, яка знаходиться під тегом "секція".

3.У нас є заголовок "X користувач розмісти це", для цього ми можемо використовувати тег "заголовок".

4.Зараз у внутрішньому дописі у нас є три розділи: зображення / текст, кнопка "поділитися коментарями" та поле коментаря.

5.Для коробки коментарів ми можемо використовувати тег статті.

— Кліки Горже
джерело

0

Згідно відповіді Натана , це має сенс (для червоних і помаранчевих частин, може бути , ви могли б використовувати div«S і / або header і , footerвідповідно):

— Алехандро Нава
джерело