Лучшие практики HTML5; раздел/заголовок/в сторону/элементы статьи

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

Website layout

  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. Нижний колонтитул: -)

+480
24 янв. '11 в 10:48
источник поделиться
15 ответов

Собственно, вы совершенно правы, когда дело доходит до заголовка/нижнего колонтитула. Ниже приведена основная информация о том, как использовать/использовать каждый из основных тегов 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 - используется для элемента, который задает независимый, автономный контент. Статья должна иметь смысл сама по себе. Перед заменой всех ваших разделов элементами статьи всегда задавайте себе вопрос: "Можно ли читать его независимо от остальной части веб-сайта?"

+448
29 июн. '11 в 21:57
источник

Связанные вопросы


Похожие вопросы

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

Я написал 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*> 2 (не все это делает, см. ниже)
  • чтобы выровнять текущий явный (дополнительный) раздел

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

  • <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> 3
    • помогает отличить "реальную вещь" от документов без заголовка, без нижнего, неосновного содержимого, если это имеет смысл в вашем случае...

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

+149
27 окт. '14 в 0:17
источник

The div elements can be replaced with the new elements: header, nav, section, article, aside, and footer.

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

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

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

+108
29 июл. '13 в 23:03
источник

Я бы предложил прочитать wiki-страницу 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><!-- first blog post --></article>        
    <article><!-- second blog post --></article>        
    <article><!-- third blog post --></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, чтобы центрировать все содержимое в окне браузера или применить конкретное фоновое изображение для всего содержимого.

+57
15 июл. '14 в 18:07
источник

Основная ошибка: у вас есть "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. Помните, что ваша структура не для стилизации документа, а для создания документа самостоятельно объясняется.

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

+17
08 февр. '12 в 23:10
источник

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

строка 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. Нижний колонтитул: -)

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

+17
02 нояб. '14 в 3:58
источник

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

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

  • оригинальный 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 отражает лучше всего наброски оригинал.

в

в

в

в <бр >

в

в

в

в < ш > :



в

в:





в

в

в

+17
29 окт. '14 в 22:57
источник

Почему бы не иметь идентификаторы 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> тег только для согласованности.

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

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

  • Нет, тег заголовка имеет другое назначение. H1, H2 и т.д. Представляют собой наименования документов H1, являющиеся наиболее важными

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

+6
24 янв. '11 в 11:09
источник

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

enter image description here

+3
24 авг. '14 в 12:20
источник

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

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

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

+1
19 июл. '11 в 11:38
источник

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

См. ниже qaru.site/questions/14777/... для ссылки на спецификации 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
10 сент. '13 в 23:18
источник

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

Ни для этого не существует тега main, который разрешен только один раз для каждой страницы и должен использоваться как оболочка для основного содержимого (в отличие от боковой панели или заголовка сайта).

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

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

+1
27 авг. '14 в 13:02
источник

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

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

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

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

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

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

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

0
14 авг. '15 в 17:32
источник

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

введите описание изображения здесь

0
20 дек. '16 в 23:49
источник

Посмотрите другие вопросы по меткам или Задайте вопрос