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

Question

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

480

Существует достаточно информации о HTML5 в Интернете (а также в stackoverflow), но теперь мне интересно о "лучших практиках". Такие теги, как 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?

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

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

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

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

строка 44. H2 без header

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

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

строка 64. header с h2

строка 65. Hmm, div или section? Или удалите этот div и используйте только article -tag

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

Bas van Dorst 24 янв. 2011, в 11:27

Источник

0

456bereastreet.com/archive/201103/...
Christophe Roussy 22 нояб. 2013, в 13:07

Теги:

html

html5

header

article

15 ответов

142

К сожалению, ответы, данные до сих пор (в том числе наиболее проголосовавшие), являются либо "справедливым" здравым смыслом, просто неправильным или запутанным в лучшем случае. Ни один из ключевых слов ¹ не появляется!

Я написал 3 ответа:

To understand the role of the html elements discussed here you have to know that some of them section the document. Each and every html document can be sectioned according to the HTML5 outline algorithm for the purpose of creating an outline—⁠or⁠—table of contents (TOC). The outline is not generally visible (these days), but authors should use html in such a way that the resulting outline reflects their intentions.

Вы можете создавать разделы именно с этими элементами и ничего больше:

создание (явных) подразделов
- <section> разделы
- <article> разделы
- <nav> разделы
- <aside> разделы
создание разделов или подразделов
- разделы неуказанного типа с <h*> ^² (не все это делает, см. ниже)
чтобы выровнять текущий явный (дополнительный) раздел

Разделы можно назвать:

<h*> сами созданные названия разделов
<section|article|nav|aside> разделы будут называться первым <h*>, если есть один
- эти <h*> являются единственными, которые сами не создают разделы

В разделах есть еще одна вещь: следующие контексты (т.е. элементы) создают "контурные границы". Все разделы, которые они содержат, являются частными для них:

сам документ с <body>
ячейки таблицы с <td>
<blockquote>
<details>, <dialog>, <fieldset> и <figure>
ничего другого

example HTML <body> <h1>page title</h1> <nav> <h1>navigation</h1> </nav> <aside> <h1>tangentially related to the topic at hand</h1> </aside> <article></article> <article> <h1>this one has a name again</h1> </article> <h2>untyped section, sibling of the last article</h2> </body> has this outline 1. page title 1.1. navigation 1.2. tangentially related to the topic at hand 1.3. (unnamed article) 1.4. this one has a name again 1.5. untyped section, sibling of the last article : в

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> похожи на главы книги
- у них обычно есть братья и сестры (может быть, в другом документе?)
- вместе они имеют что-то общее, как главы в книге
один автор, один <article>, по крайней мере, на самом низком уровне
- стандартный пример: один комментарий в блоге
- сама запись блога также является хорошим примером
- запись в блоге <article>, а комментарий <article> можно также обернуть с помощью <article>
- его некоторая "полная" вещь, а не часть в серии подобных
<section> в <article> похожи на главы в книге
<article> в <section> похожи на стихи в томе (внутри серии)

Как <header>, <footer> и <main> вписываются?

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

^{¹ в ум приходит: схема, алгоритм, неявное разделение}
^{² Я использую <h*> как стенографию для <h1>, <h2>, <h3>, <h4>, <h5> и <h6>}
^{³ не допускается <main> в <aside> или <nav>, но это неудивительно. - Фактически: <main> может скрывать только (вложенные) нисходящие разделы <section> или отображаться на верхнем уровне, а именно <body>}

Robert Siemer 27 окт. 2014, в 01:28

22

Ответ походит на само стихотворение. Моя любимая часть: sections in an article are like chapters in a book, articles in a section are like poems in a volume - лучшая и наиболее интуитивно понятная article против объяснения section я видел!
Sergey Lukin 23 дек. 2015, в 13:53
1

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

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

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

Этот очень подробный ответ и многое прояснил, спасибо!
Alaeddine 28 дек. 2018, в 16:08
0

Theres все еще так много двусмысленности в моем уме. Не могли бы вы взглянуть на мой вопрос ?
Anthony 16 март 2019, в 06:32

Показать ещё 4 комментария

103

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

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

Вы можете найти дополнительную информацию в этой статье в List Apart.

cilerler 29 июль 2013, в 23:49

20

Эта шаблонная структура не стоит места на этой странице. 1) Ни один из упомянутых элементов HTML не привязан к какой-либо позиции в документе. 2) Ложно подразумевается, что <header> и <footer> являются элементами уровня документа. 3) Ложно подразумевается, что <section> предназначен только для <article>. @DanDascalescu
Robert Siemer 07 май 2016, в 10:41
2

Не могу согласиться больше @RobertSiemer. Это по-прежнему одно из самых распространенных заблуждений об элементах HTML5 и становится семантической помехой для нашего любимого языка разметки.
Kano 02 авг. 2016, в 17:06
0

@RobertSiemer Re: 2), Разве <header> и <footer> могут быть элементами уровня документа, а также в <section|article|nav|aside> ?
Flimm 03 фев. 2017, в 10:24
1

@ Flimm, да, они могут. Моя точка зрения была такова: ответ не является неправильным - он просто мало отвечает.
Robert Siemer 08 фев. 2017, в 19:03

Показать ещё 2 комментария

55

Я бы предложил прочитать wiki-страницу W3 о структурировании HTML5:

<header> Используется для содержания заголовка сайта. <footer>Содержит содержание нижнего колонтитула сайта. <nav> Содержит меню навигации или другие функции навигации для страницы.

<article> Содержит автономный фрагмент контента, который сделает смысл, если он синдицирован как элемент RSS, например новостной материал.

<section> Используется для группировки разных статей в разные целей или предметов или определить различные разделы одного статья.

<aside> Определяет блок контента, который связан с основным содержание вокруг него, но не центральное для его потока.

Они включают изображение, которое я очистил здесь:

В коде это выглядит так:
<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> пронумерованы, верно? NO. Фактически, <div>все еще имеет вполне допустимое применение. Вы должны использовать его, когда нет другой более подходящий элемент для группировки области содержимого, который часто будет, когда вы используете только элемент для группировки контента для стилизации/визуальных целей. Общим примером является используя <div>, чтобы обернуть весь контент на странице, а затем использовать CSS, чтобы центрировать все содержимое в окне браузера или применить конкретное фоновое изображение для всего содержимого.

Justin 15 июль 2014, в 18:47

1

Однако для вложенных разделов не имеет ли смысла использовать <section class="summary"> а не <section id="summary"> ? Если у вас есть несколько статей на одной странице, то последний метод приведет к дублированию идентификаторов на одной и той же странице - фальшивка HTML. Правильно?
JP Lew 18 янв. 2015, в 01:35
0

Да, я бы, вероятно, использовал классы вместо этого в этом случае.
Justin 20 янв. 2015, в 06:53
1

Разве все теги, которые вы упомянули, не должны быть обернуты в "main", который затем обернут в "body"?
Francisco Aguilera 02 май 2016, в 01:28
1

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

единственный ответ, который касается боковой панели
Supersharp 28 июль 2016, в 14:42
0

это все еще так неоднозначно, как документация MDN
Anthony 16 март 2019, в 06:07

Показать ещё 4 комментария

17

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

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

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

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

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

строка 23. Правильно ли это div? или это будет раздел?

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

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

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

Нет. Почему?

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

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

строка 26. Требуется ли разместить тэг h1 в теге заголовка?

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

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

Непонятно, что <aside> должен быть "касательно связан" с содержимым вокруг. Дело в том, что используйте <aside>, если контент только "касательно связан" или вообще не работает!

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

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

Замечательно.

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

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

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

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

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

Обсуждаем уже.

строка 65. Хмм, div или секция? Или удалите этот div и используйте только тег статьи

Точно! Удалите <div>.

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

Очень разумно.

Robert Siemer 02 нояб. 2014, в 04:31

0

Разделение одного ответа на 3 неполных не полезно.
Christian Strempfer 18 авг. 2017, в 08:14
4

@ChristianStrempfer Это на самом деле полезно, так как многие люди приходят сюда не для того, чтобы прочитать конкретные ответы на конкретные вопросы ОП (этот ответ), а для того, чтобы узнать больше о данной теме (мой основной ответ). - Я полагаю, что с одним огромным ответом TLDR я бы даже не получил голоса, которые у меня есть на один мой основной ответ. - Что ты предлагаешь?
Robert Siemer 18 авг. 2017, в 10:42
0

Я предлагаю объединить их в один ответ. Сбор голосов не является хорошим аргументом для их разделения. Тем более что третий ответ не может оставаться в одиночестве, поскольку вы ссылаетесь на свой основной ответ.
Christian Strempfer 18 авг. 2017, в 10:44
0

@ChristianStrempfer Это было бы слишком долго, на мой вкус. - Я работаю над улучшением таблиц, хотя ...
Robert Siemer 18 авг. 2017, в 12:50

Показать ещё 2 комментария

17

В соответствии с объяснением в моем "основном" ответе соответствующий документ должен быть отмечен в соответствии с контуром.

В следующих двух таблицах показано:

оригинальный 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) Контур оригинала - окончательно не то, что предназначалось. в в в в <бр > в в в в < ш > : в в: в в в

В следующей таблице показано мое предложение об улучшенной версии. Я использую следующую разметку:

~~<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) Измененный HTML отражает лучше всего наброски оригинал. в в в в <бр > в в в в < ш > : в в: в в в

Robert Siemer 29 окт. 2014, в 23:31

0

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

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

2. <ARTICLE id = main> кажется действительно только презентационным. Он не содержит ничего связанного внутри. (То же самое относится и к <ARTICLE id = main-right>, но это гораздо более защищаемо (как "новости и горячие").) Я предлагаю использовать div или main в худшем случае.
gorn 29 март 2016, в 00:26
0

3. <ARTICLE id = news-items> кажется мне типичным случаем, где я бы использовал в стороне. Это не имеет ничего общего с основной статьей, это просто новостная лента. И я согласен, что в нем содержатся новости в виде отдельных «маленьких» статей.
gorn 29 март 2016, в 00:29
0

@ gorn Я вижу, ты понял. :-) Относительно 1. и 2 .: Я позволю себе руководствоваться оригинальным HTML-кодом ОП, думая, что группировка и именование идентификаторов имеют семантическую ценность, хотя они действительно могут быть только презентационными! Относительно 3 .: Ваша интерпретация новостных материалов определенно потребует отдельного элемента статьи.
Robert Siemer 29 март 2016, в 10:33
1

Вы можете отредактировать ваше предложение, ваш «теоретический» ответ очень хорошо написан, но я думаю, что большинство начинающих просто посмотрят на пример кода, и они могут быть действительно сбиты с толку, потому что это не соответствует теоретической части.
gorn 30 март 2016, в 14:11
0

Почему не следите за секциями в разделе <h2>The latest news</h2> в верхней таблице? Я думаю, что <h*> создает родственные (под) разделы. Кстати: в чем разница между разделами и подразделами?
nalzok 11 май 2017, в 07:19
0

Разделение одного ответа на 3 неполных не полезно.
Christian Strempfer 18 авг. 2017, в 08:14

Показать ещё 6 комментариев

17

Основная ошибка: у вас есть "divitis" во всем документе.
Почему это?

<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 08 фев. 2012, в 23:14

4

@superUntitled <hgroup> больше не является частью HTML5
bradley.ayers 14 апр. 2013, в 07:13
0

Должен ли role = "banner" находиться на самом h1, а не на всем заголовке? Таким образом, он указывает на один фрагмент текста, который объявит программа чтения с экрана, а не глобус HTML.
enigment 18 апр. 2013, в 12:06
11

Использование h1 и h2 для логотипа и языка не имеет смысла для меня. Крошечная языковая кнопка справа должна быть вторым по важности содержанием / информацией на этой странице? И если вы разместите свой логотип внутри h1, то поисковый бот обнаружит, что основное содержание каждой страницы одинаково (на мой взгляд, довольно скучно). Также см. Ответ @MeanEYE для использования h1 и h2. Кроме того, идентификаторы несемантичны, используйте RDFa, если вам нужна семантика. Ваш способ делает CSS-селекторы медленными: developers.google.com/speed/docs/best-practices/…
F Lekschas 28 авг. 2013, в 01:35

Показать ещё 1 комментарий

10

Почему бы не иметь идентификаторы item_1, item_2 и т.д. в самих тегах статьи? Вот так:

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

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

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

Matt Browne 20 март 2011, в 18:17

0

Есть ли причина для понижения?
Matt Browne 26 март 2015, в 14:52
0

Просто угадай, но какая польза от добавления id= ?
James A Mohler 19 окт. 2015, в 19:01
2

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

Показать ещё 1 комментарий

6

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

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

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

MeanEYE 24 янв. 2011, в 12:53

1

Спасибо за ваши ответы! По пункту 3; Извините, номера строк не были правильными. Это должно быть line_23 вместо точки 3; см. также изменения строки в моем сообщении.
Bas van Dorst 24 янв. 2011, в 11:28
0

Да, я делаю то же самое на своих сайтах. Обычно DIV должны использоваться для создания структуры сайта. Введение тегов заголовка, нижнего колонтитула и подобных им в HTML5 просто для облегчения чтения. Они ведут себя так же, как DIV.
MeanEYE 24 янв. 2011, в 11:42
3

Проверьте свои источники. Сайт школ w3c не указывает, что article обязательно должна быть из внешнего источника. w3schools.com/html5/tag_article.asp
chharvey 31 дек. 2011, в 16:09
0

Хм, я даже не думал, что статья будет использоваться из внешнего источника. Это старый ответ, я не могу вспомнить, что это было. :)
MeanEYE 27 янв. 2012, в 13:23
0

Я согласен с # 1. Я думаю, что эти элементы РАЗДЕЛА имеют больше смысла, как ВИДЫ.
Andy 20 авг. 2013, в 18:10

Показать ещё 3 комментария

3

Вот мой пример, в котором я работаю

Ivan 24 авг. 2014, в 13:33

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 27 авг. 2014, в 13:53

1

EDIT: К сожалению, я должен исправить себя.

См. ниже https://stackoverflow.com/questions/4781077/html5-best-practices-section-header-aside-article-elements для ссылки на спецификации 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

pandita 11 сен. 2013, в 00:14

1

Я не думаю, что вы должны использовать тег в сводке новостей (строки 67, 80, 93). Вы можете использовать раздел или просто иметь вложенный div.

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

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

conordarcy 19 июль 2011, в 12:57

0

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

alej27 21 дек. 2016, в 01:39

0

Я хочу уточнить этот вопрос более точно, исправьте меня, если я ошибаюсь Давайте возьмем пример Facebook Wall

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

2. Все сообщения попадают под тегом "article".

3. Затем у нас есть отдельная запись, которая подпадает под тег раздела.

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

4. Внутри столбца у нас есть три раздела: "Изображение/текст, кнопка" Поделиться-комментарий "и поле комментариев.

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

Flicks Gorger 14 авг. 2015, в 18:53

Ещё вопросы

Ответ походит на само стихотворение. Моя любимая часть: sections in an article are like chapters in a book, articles in a section are like poems in a volume - лучшая и наиболее интуитивно понятная article против объяснения section я видел!
Это обширные знания без шаблонов, обобщенные в нескольких пунктах. Спасибо, что поделились! Иногда на SO лучший ответ не является ни принятым, ни самым высоко оцененным.
Я знаю, что это клише, но «Это должен быть принятый ответ!». Сноски и все! Спасибо!
Евгений и Футов или правы. Помните, что вы можете голосовать за неполные и неправильные ответы, пока голосуете за этот. Это не оскорбление их авторов, это плата за то, чтобы лучшие ответы были видны первыми. В дополнение к комментарию Роберта к выбранному ответу он мне тоже не нравится, потому что он плагиат (неполный) контент из других источников в Интернете.
Этот очень подробный ответ и многое прояснил, спасибо!
Theres все еще так много двусмысленности в моем уме. Не могли бы вы взглянуть на мой вопрос ?
Эта шаблонная структура не стоит места на этой странице. 1) Ни один из упомянутых элементов HTML не привязан к какой-либо позиции в документе. 2) Ложно подразумевается, что <header> и <footer> являются элементами уровня документа. 3) Ложно подразумевается, что <section> предназначен только для <article>. @DanDascalescu
Не могу согласиться больше @RobertSiemer. Это по-прежнему одно из самых распространенных заблуждений об элементах HTML5 и становится семантической помехой для нашего любимого языка разметки.
@RobertSiemer Re: 2), Разве <header> и <footer> могут быть элементами уровня документа, а также в <section|article|nav|aside> ?
@ Flimm, да, они могут. Моя точка зрения была такова: ответ не является неправильным - он просто мало отвечает.
Однако для вложенных разделов не имеет ли смысла использовать <section class="summary"> а не <section id="summary"> ? Если у вас есть несколько статей на одной странице, то последний метод приведет к дублированию идентификаторов на одной и той же странице - фальшивка HTML. Правильно?
Да, я бы, вероятно, использовал классы вместо этого в этом случае.
Разве все теги, которые вы упомянули, не должны быть обернуты в "main", который затем обернут в "body"?
main тег было бы хорошо добавить. Куда его поместить, будет решаться исходя из того, что является уникальным контентом на странице. В этом примере, я думаю, я бы просто поместил его вокруг центральной section . Подробнее: w3.org/TR/2012/WD-html-main-element-20121217 «В разделе основного содержимого документа содержится содержимое, уникальное для этого документа, и исключается содержимое, повторяющееся в наборе документов, таких как сайт навигационные ссылки, информация об авторских правах, логотипы и баннеры сайта, а также поисковые формы. "
единственный ответ, который касается боковой панели
это все еще так неоднозначно, как документация MDN
Разделение одного ответа на 3 неполных не полезно.
@ChristianStrempfer Это на самом деле полезно, так как многие люди приходят сюда не для того, чтобы прочитать конкретные ответы на конкретные вопросы ОП (этот ответ), а для того, чтобы узнать больше о данной теме (мой основной ответ). - Я полагаю, что с одним огромным ответом TLDR я бы даже не получил голоса, которые у меня есть на один мой основной ответ. - Что ты предлагаешь?
Я предлагаю объединить их в один ответ. Сбор голосов не является хорошим аргументом для их разделения. Тем более что третий ответ не может оставаться в одиночестве, поскольку вы ссылаетесь на свой основной ответ.
@ChristianStrempfer Это было бы слишком долго, на мой вкус. - Я работаю над улучшением таблиц, хотя ...
Спасибо за отличный подробный ответ, это очень поучительно. Я хочу узнать больше об этой теме, поэтому я надеюсь, что вы сможете объяснить некоторые варианты, которые кажутся мне странными. Я буду публиковать их как отдельные комментарии.
1. Заголовок в стороне> div [id = logo] кажется мне неуместным. На первый взгляд это заголовок, но семантически нет. Язык div - это, возможно, своего рода навигация, а логотип - это своего рода заголовок для всего сайта, но, конечно, не для страницы.
2. <ARTICLE id = main> кажется действительно только презентационным. Он не содержит ничего связанного внутри. (То же самое относится и к <ARTICLE id = main-right>, но это гораздо более защищаемо (как "новости и горячие").) Я предлагаю использовать div или main в худшем случае.
3. <ARTICLE id = news-items> кажется мне типичным случаем, где я бы использовал в стороне. Это не имеет ничего общего с основной статьей, это просто новостная лента. И я согласен, что в нем содержатся новости в виде отдельных «маленьких» статей.
@ gorn Я вижу, ты понял. :-) Относительно 1. и 2 .: Я позволю себе руководствоваться оригинальным HTML-кодом ОП, думая, что группировка и именование идентификаторов имеют семантическую ценность, хотя они действительно могут быть только презентационными! Относительно 3 .: Ваша интерпретация новостных материалов определенно потребует отдельного элемента статьи.
Вы можете отредактировать ваше предложение, ваш «теоретический» ответ очень хорошо написан, но я думаю, что большинство начинающих просто посмотрят на пример кода, и они могут быть действительно сбиты с толку, потому что это не соответствует теоретической части.
Почему не следите за секциями в разделе <h2>The latest news</h2> в верхней таблице? Я думаю, что <h*> создает родственные (под) разделы. Кстати: в чем разница между разделами и подразделами?
Разделение одного ответа на 3 неполных не полезно.
@superUntitled <hgroup> больше не является частью HTML5
Должен ли role = "banner" находиться на самом h1, а не на всем заголовке? Таким образом, он указывает на один фрагмент текста, который объявит программа чтения с экрана, а не глобус HTML.
Использование h1 и h2 для логотипа и языка не имеет смысла для меня. Крошечная языковая кнопка справа должна быть вторым по важности содержанием / информацией на этой странице? И если вы разместите свой логотип внутри h1, то поисковый бот обнаружит, что основное содержание каждой страницы одинаково (на мой взгляд, довольно скучно). Также см. Ответ @MeanEYE для использования h1 и h2. Кроме того, идентификаторы несемантичны, используйте RDFa, если вам нужна семантика. Ваш способ делает CSS-селекторы медленными: developers.google.com/speed/docs/best-practices/…
Просто угадай, но какая польза от добавления id= ?
Я просто следовал первоначальному примеру и показывал, как выполнить то же самое без лишних оберток div. Идентификаторы могут быть там по ряду причин ... во-первых, на них могут быть якорные ссылки.
Спасибо за ваши ответы! По пункту 3; Извините, номера строк не были правильными. Это должно быть line_23 вместо точки 3; см. также изменения строки в моем сообщении.
Да, я делаю то же самое на своих сайтах. Обычно DIV должны использоваться для создания структуры сайта. Введение тегов заголовка, нижнего колонтитула и подобных им в HTML5 просто для облегчения чтения. Они ведут себя так же, как DIV.
Проверьте свои источники. Сайт школ w3c не указывает, что article обязательно должна быть из внешнего источника. w3schools.com/html5/tag_article.asp
Хм, я даже не думал, что статья будет использоваться из внешнего источника. Это старый ответ, я не могу вспомнить, что это было. :)
Я согласен с # 1. Я думаю, что эти элементы РАЗДЕЛА имеют больше смысла, как ВИДЫ.

Nathan J. Brauer · Accepted Answer · 2011-06-29T23-35-00.000Z

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

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

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

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

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

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

Источник: http://www.anthonycalzadilla.com/2010/08/html5-section-aside-header-nav-footer-elements-not-as-obvious-as-they-sound/

Кроме того, здесь описание article, не найденное в исходном файле:

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

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