HTML5 лучшие практики; элементы section / header / aside / article

546

В Интернете достаточно информации о HTML5 (а также о стековом потоке), но теперь мне интересно узнать о «лучших практиках». Такие теги, как section / headers / article, являются новыми, и у всех разные мнения о том, когда и где вы должны использовать эти теги. Так что вы, ребята, думаете о следующем макете и коде?

Макет сайта

  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?

строка 8. Каждый sectionначинается с header?

строка 23. Это divправильно? или это должно быть section?

строка 24. Разбить левый / правый столбец с помощью div.

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

строка 26. Требуется ли h1указывать ваш -tag в header-tag?

строка 43. Содержание не связано с основной статьей, поэтому я решил, что это sectionа не а aside.

линия 44. Н2 без header

строка 53. sectionбезheader

строка 63. Разделите со всеми (не связанными) новостями

строка 64. headerс h2

линия 65. Хм divили section? Или удалите это divи используйте только article-tag

строка 105. Нижний колонтитул :-)

html header article Бас ван Дорст
источник

456bereastreet.com/archive/201103/…

Кристоф Русси

486

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

section - Используется для группировки тематического контента. Звучит как элемент div, но это не так. У div нет смыслового значения. Прежде чем заменять все свои элементы div на элементы section, всегда спрашивайте себя: «Все ли содержимое связано?»

в сторону - используется для тангенциально связанного контента. Просто потому, что какой-то контент отображается слева или справа от основного контента, недостаточно для использования элемента aside. Спросите себя, можно ли удалить содержимое в стороне, не уменьшая смысла основного содержимого. Цитаты являются примером тангенциально связанного контента.

заголовок - Существует принципиальная разница между элементом заголовка и общепринятым использованием заголовка (или заголовка). Обычно на странице только один заголовок или заголовок. В HTML5 вы можете иметь столько, сколько хотите. Спецификация определяет его как «группу вводных или навигационных средств». Вы можете использовать заголовок в любом разделе вашего сайта. На самом деле, вы, вероятно, должны использовать заголовок в большинстве ваших разделов. Спецификация описывает элемент section как «тематическую группировку контента, обычно с заголовком».

nav - предназначен для основной навигационной информации. Группа ссылок, сгруппированных вместе, не является достаточным основанием для использования элемента nav. Общесайтовая навигация, с другой стороны, принадлежит элементу nav.

нижний колонтитул - звучит как описание позиции, но это не так. Элементы нижнего колонтитула содержат информацию о содержащем его элементе: кто его написал, авторское право, ссылки на связанный контент и т. Д. В то время как у нас обычно есть один нижний колонтитул для всего документа, HTML5 позволяет нам также иметь нижний колонтитул внутри разделов.

Источник : https://clzd.me/html5-section-aside-header-nav-footer-elements-not-as-obvious-as-they-sound/

Кроме того, вот описание article, не найденное в приведенном выше источнике:

article - Используется для элемента, который определяет независимый, автономный контент. Статья должна иметь смысл сама по себе. Прежде чем заменять все ваши элементы div элементами статьи, всегда спрашивайте себя: «Можно ли прочитать его независимо от остальной части веб-сайта?»

Натан Дж. Б.
источник

68

Для меня загадка, почему этот ответ получил так много голосов: он не говорит об <article>элементах, не контрастирует с упомянутыми элементами и не группирует их. Ответ не дает «лучших практик» и не отвечает ни на один из явных вопросов ОП!

Роберт Симер

2

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

Veger

@RobertSiemer Потому что это выглядит великолепно, что ты думаешь? Я понятия не имел, что это плохо, пока не проверил ваш комментарий и не подтвердил его следующим ответом.

Det

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 <article>как главы в книге
<article>s в 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

Это обширные знания без образца, обобщенные в нескольких пунктах. Спасибо, что поделились! Иногда на SO лучший ответ не является ни принятым, ни самым высоко оцененным.

3

Я знаю, что это клише, но «Это должен быть принятый ответ!». Сноски и все! Спасибо!

Евгений

Евгений и Футов или правы. Помните, что вы можете голосовать за неполные и неправильные ответы, пока голосуете за этот. Это не оскорбление их авторов, это стоимость обеспечения того, чтобы лучшие ответы были видны первыми. В дополнение к комментарию Роберта к выбранному ответу он мне тоже не нравится, потому что он плагиат (неполный) контент из других мест в Интернете.

ИАМНАН

Этот очень подробный ответ и многое прояснил, спасибо!

Alaeddine

112

Элементы div можно заменить новыми элементами: header, nav, section, article, aside и footer.

Разметка для этого документа может выглядеть следующим образом:

<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) Ложно подразумевается, что <section> предназначен только для <article> -детей. @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>and <footer>состоит в переносе содержимого верхнего и нижнего колонтитула соответственно. В нашем конкретном примере <header>элемент содержит изображение логотипа, а <footer>элемент содержит уведомление об авторских правах, но вы можете добавить более сложный контент, если хотите. Также обратите внимание, что у вас может быть несколько заголовков и нижних колонтитулов на каждой странице, а также верхний и нижний колонтитулы верхнего уровня, которые мы только что обсуждали, вы также можете иметь элемент <header>and, <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>элемент для разметки 2-й боковой панели: тот, который содержит последние концерты и контактную информацию. Это идеально подходит <aside>для разметки фрагментов информации, которые связаны с основным потоком, но не вписываются в него напрямую. И основной контент в этом случае все о группе! Другим хорошим выбором для этого <aside>может быть информация об авторе постов в блоге, биография группы или дискография группы со ссылками на покупку их альбомов.

Куда это уходит <div>?

Итак, со всеми этими замечательными новыми элементами, которые можно использовать на наших страницах, дни смирения <div>сочтены? NO. На самом деле, <div> все еще имеет вполне допустимое использование. Вы должны использовать его, когда нет другого более подходящего элемента, доступного для группировки области контента, что часто бывает, когда вы просто используете элемент для группировки контента вместе для стилизации / визуальных целей. Типичным примером является использование <div>для оборачивания всего содержимого на странице, а затем использование CSS для центрирования всего содержимого в окне браузера или применения определенного фонового изображения ко всему содержимому.

Джастин
источник

1

Тем не менее, для вложенных разделов не имеет смысла использовать <section class="summary">больше, чем <section id="summary">? Если у вас есть несколько статей на одной странице, то последний метод приведет к дублированию идентификаторов на одной и той же странице - ложная ошибка HTML. Правильно?

JP Lew

Да, я бы, вероятно, использовал классы вместо этого в этом случае.

Джастин

1

Разве все теги, которые вы упомянули, не должны быть обернуты в "main", который затем обернут в "body"?

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

1

mainТег хорошо бы добавить. Куда его поместить, будет решаться исходя из того, что является уникальным контентом на странице. В этом примере, я думаю, я бы просто поместил его вокруг центра section. Подробнее: w3.org/TR/2012/WD-html-main-element-20121217 «В разделе основного содержимого документа содержится содержимое, уникальное для этого документа, и исключается содержимое, повторяющееся в наборе документов, таких как сайт навигационные ссылки, информация об авторских правах, логотипы и баннеры сайта, а также поисковые формы. "

Джастин

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

oldboy

23

[ объяснения в моем «основном ответе» ]

строка 7. раздел вокруг всего сайта? Или только div ?

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

строка 8. Каждый раздел начинается с заголовка?

Нет, это выбор автора, куда помещать контент, обычно обозначаемый как «заголовок». И если этот заголовочный контент легко узнаваем без дополнительной маркировки, он может остаться без него <header>. Это тоже выбор автора.

линия 23. Является ли это ДИВ правильно? или это должен быть раздел ?

Это <div>, вероятно, неправильно. Это зависит от намерений: только для стиля это может быть правильно. Если это для семантических целей, это неправильно: это должно быть <article>вместо этого, как показано в моем другом ответе . <article>Это также правильно, если это как для стилизации и секционирования вместе.

<section>выглядит неправильно, так как до или после этого нет подобных разделов, как в главах книги. (Это цель <section>).

строка 24. Разбить левый / правый столбец с помощью div .

Нет почему?

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

Да, имеет смысл.

строка 26. Обязательно ли ставить h1 -tag в заголовок -tag?

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

строка 43. Содержание не связано с основной статьей, поэтому я решил, что это раздел, а не отступление .

Это недоразумение, что an <aside>должен быть «тангенциально связан » с контентом вокруг. Суть в том, что используйте, <aside>если контент только « тангенциально связан» или нет вообще!

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

строка 44. Н2 без заголовка

Отлично.

строка 53. раздел без заголовка

Ну, нет <header>, но <h2>заголовок довольно ясно показывает, какая часть этого раздела является заголовком.

строка 63. Разделите со всеми (не связанными) новостями

<article>или <aside>может быть лучше.

строка 64. заголовок с h2

Обсуждали уже.

строка 65. Хм, div или раздел ? Или удалить этот 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.

Роберт Симер
источник

Спасибо за отличный подробный ответ, это очень поучительно. Я хочу узнать больше об этой теме, поэтому я надеюсь, что вы сможете объяснить некоторые варианты, которые кажутся мне странными. Я буду публиковать их как отдельные комментарии.

Гор

1. Заголовок в стороне> div [id = logo] кажется мне неуместным. На первый взгляд это заголовок, но семантически нет. Язык div - это, возможно, своего рода навигация, а логотип - это своего рода заголовок для всего сайта, но, конечно, не для страницы.

Гор

2. <ARTICLE id = main> кажется действительно только презентационным. Он не содержит ничего связанного внутри. (То же самое относится и к <ARTICLE id = main-right>, но это гораздо более защищаемо (как "новости и горячие").) Я предлагаю использовать 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.
Имейте в виду, ваша структура не для того, чтобы стилизовать документ, а для того, чтобы создать самодостаточный документ

Примените это к остальной части документа; Удачи ;)

Covi
источник

4

@superUntitled <hgroup> больше не является частью HTML5

bradley.ayers

Должен ли role = "banner" находиться на самом 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>
...

Кажется ненужным добавлять div-обертки. Значения идентификаторов не имеют смыслового значения в HTML, поэтому я думаю, что это было бы совершенно уместно - вы не говорите, что первая статья всегда item_1, просто item_1 в контексте текущей страницы. Идентификаторы не обязательно должны иметь какое-либо значение, не зависящее от контекста.

Кроме того, что касается вашего вопроса в строке 26, я не думаю, что тег <header> там требуется, и я думаю, что вы могли бы опустить его, поскольку он сам по себе в div "main-left". Если бы он был в основном списке статей, вы можете включить тег <header> только для согласованности.

Мэтт Браун
источник

2

Я просто следовал первоначальному примеру и показывал, как выполнить то же самое без лишних оберток div. Идентификаторы могут быть там по ряду причин ... во-первых, на них могут быть якорные ссылки.

Мэтт Браун

5

Раздел должен использоваться только для переноса раздела внутри документа (например, главы и т. П.)
С тегом заголовка : НЕТ. Тег заголовка представляет собой оболочку для заголовка страницы и его не следует путать с H1, H2 и т. Д.
Какой div? : D
да
Из школ W3C:

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

Я не отвечал на другие, потому что довольно сложно угадать, о чем ты говорил. Если есть еще вопросы, пожалуйста, дайте мне знать.

MeanEYE
источник

1

Спасибо за ваши ответы! По пункту 3; Извините, номера строк не были правильными. Это должно быть line_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). Вы можете использовать раздел или просто иметь вложенный div.

Статья должна быть в состоянии стоять самостоятельно и все еще иметь смысл или быть законченной. Как его неполная или просто выдержка, она не может быть статьей, а скорее разделом.

Когда вы нажимаете «читать дальше», следующая страница может

conordarcy
источник

1

РЕДАКТИРОВАТЬ: К сожалению, я должен исправить себя.

См. Ниже https://stackoverflow.com/a/17935666/2488942 для ссылки на спецификации w3, которые включают пример (в отличие от тех, на которые я смотрел ранее).

Но тогда .... Здесь хорошая статья об этом благодаря @Fez.

Мой оригинальный ответ был:

Как устроены спецификации w3:

4.3.4 Разделы

4.3.4.1 Элемент body

4.3.4.2 Элемент раздела

4.3.4.3 Элемент nav

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

1.Wall идет под тегом «section», который обозначает, что он отделен от страницы.

2. Все посты имеют тег "article".

3. Затем у нас есть один пост, который находится под тегом «section».

3. У нас есть заголовок «X user post this», для этого мы можем использовать тег «заголовок».

4. Внутри поста у нас есть три раздела: «Изображения / текст», кнопка «Мне нравится поделиться» и поле для комментариев.

5.Для комментария мы можем использовать тег статьи.

Flicks Gorger
источник

0

Согласно ответу Натана , это имеет смысл (для красных и оранжевых частей, возможно, вы могли бы использовать divs и / или header и footerсоответственно):

Алехандро Нава
источник

HTML5 лучшие практики; элементы section / header / aside / article

Ответы: