Лучшие практики HTML5; раздел/заголовок/в сторону/элементы статьи
https://stackoverflow.com/questions/4781077
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
В Интернете достаточно информации о HTML5 (а также на Stackoverflow), но теперь мне интересно с «лучшими практиками». Теги, такие как раздел/заголовки/статья, являются новыми, и у каждого есть разные мнения о том, когда/где вы должны использовать эти теги. Так что вы, ребята, думаете о следующем макете и коде?
1 <!doctype html>
2 <head>
3 <title>Website</title>
4 </head>
5
6 <body>
7 <section>
8 <header>
9 <div id="logo"></div>
10 <div id="language"></div>
11 </header>
12
13 <nav>
14 <ul>
15 <li>menu 1</li>
16 <li>menu 2</li>
17 <li>menu 3</li>
18 <li>menu 4</li>
19 <li>menu 5</li>
20 </ul>
21 </nav>
22
23 <div id="main">
24 <div id="main-left">
25 <article>
26 <header><h1>This is a title</h1></header>
27
28 <p>Lorem ipsum dolor sit amet, consectetur
29 adipiscing elit. Quisque semper, leo eget</p>
30
31 <p>Lorem ipsum dolor sit amet, consectetur
32 adipiscing elit. Quisque semper, leo eget</p>
33
34 <p>Lorem ipsum dolor sit amet, consectetur
35 adipiscing elit. Quisque semper, leo eget</p>
36
37 <p>Lorem ipsum dolor sit amet, consectetur
38 adipiscing elit. Quisque semper, leo eget</p>
39 </article>
40 </div>
41
42 <div id="main-right">
43 <section id="main-right-hot">
44 <h2>Hot items</h2>
45 <ul>
46 <li>Lorem ipsum</li>
47 <li>dolor sit</li>
48 <li>...</li>
49 </ul>
50 </section>
51
52 <section id="main-right-new">
53 <h2>New items</h2>
54 <ul>
55 <li>Lorem ipsum</li>
56 <li>dolor sit</li>
57 <li>...</li>
58 </ul>
59 </section>
60 </div>
61 </div>
62
63 <div id="news-items">
64 <header><h2>The latest news</h2></header>
65
66 <div id="item_1">
67 <article>
68 <header>
69 <img src="#" title="titel artikel" />
70 <h3>Lorem ipsum .....</h3>
71 </header>
72 <p>Lorem ipsum dolor sit amet,
73 adipiscing elit. Quisque semper, </p>
74 <a href="#">Read more</a>
75 </article>
76 </div>
77
78
79 <div id="item_2">
80 <article>
81 <header>
82 <img src="#" title="titel artikel" />
83 <h3>Lorem ipsum .....</h3>
84 </header>
85 <p>Lorem ipsum dolor sit amet,
86 adipiscing elit. Quisque semper, </p>
87 <a href="#">Read more</a>
88 </article>
89 </div>
90
91
92 <div id="item_3">
93 <article>
94 <header>
95 <img src="#" title="titel artikel" />
96 <h3>Lorem ipsum .....</h3>
97 </header>
98 <p>Lorem ipsum dolor sit amet,
99 adipiscing elit. Quisque semper, </p>
100 <a href="#">Read more</a>
101 </article>
102 </div>
103 </div>
104
105 <footer>
106 <ul>
107 <li>menu 1</li>
108 <li>menu 2</li>
109 <li>menu 3</li>
110 <li>menu 4</li>
111 <li>menu 5</li>
112 </ul>
113 </footer>
114 </section>
115 </body>
116 </html>
строка 7. section Во всем сайте? Или только а div?
строка 8. каждый section Начните с header?
строка 23. Это div Правильно? или это должно быть section?
строка 24. разделен слева/правый столбец с div.
строка 25. Правильное место для article ярлык?
строка 26. Требуется ли поместить ваш h1-Таг в header-ярлык?
Строка 43. Содержание не связано с основной статьей, поэтому я решил, что это section а не aside.
строка 44. H2 без header
строка 53. section без header
Строка 63. Div со всеми (не связанными) новостями.
строка 64. header с H2
строка 65. Хм, div или же section? Или удалить это div и только используйте article-ярлык
Строка 105. нижний колонтитул :-)
Решение
На самом деле, вы вполне правы, когда дело доходит до заголовка/нижнего колонтитула. Вот некоторая основная информация о том, как могут/должны использоваться каждый из основных тегов HTML5 (я предлагаю прочитать полный источник, связанный внизу):
раздел -Используется для группировки тематически связанного содержимого. Звучит как элемент Div, но это не так. Div не имеет семантического значения. Прежде чем заменить все ваши дивирования элементами раздела, всегда спрашивайте себя: «Связано ли все связано с контентом?»
в сторону - используется для тангенциально связанного контента. Тот факт, что какой -то контент появляется слева или справа от основного контента, не является достаточной причиной для использования элемента. Спросите себя, можно ли удалить содержание в стороне в стороне без уменьшения значения основного содержания. Pullquotes являются примером тангенциально связанного контента.
заголовок - Существует важная разница между элементом заголовка и общим принятым использованием заголовка (или Masthead). Обычно на странице есть только один заголовок или «мэгхед». В HTML5 вы можете иметь столько, сколько захотите. Спецификация определяет его как «группу вступительных или навигационных средств». Вы можете использовать заголовок в любом разделе на вашем сайте. На самом деле, вы, вероятно, должны использовать заголовок в большинстве ваших разделов. Спецификация описывает элемент раздела как «тематическую группировку контента, обычно с заголовком».
навигация - Предназначен для крупной навигационной информации. Группа ссылок, сгруппированных вместе, недостаточно для использования элемента NAV. Навигация по всему сайту, с другой стороны, принадлежит элементу NAV.
нижний колонтитул - Похоже, это описание позиции, но это не так. Элементы нижнего колонтитула содержат информацию о его содержащем элементе: кто его написал, авторские права, ссылки на связанный контент и т. Д., В то время как у нас обычно есть один нижний колонтитул для всего документа, HTML5 позволяет нам также иметь нижний колонтитул в разделах.
Кроме того, вот описание на article, не найдено в источнике выше:
статья -используется для элемента, который определяет независимый, автономный контент. Статья должна иметь смысл самостоятельно. Прежде чем заменить все свои Div элементами статьи, всегда спрашивайте себя: «Можно ли прочитать его самостоятельно с остальной части веб -сайта?»
Другие советы
К сожалению, ответы, данные до сих пор (в том числе наиболее голосовавшие), либо «просто» здравый смысл, просто неправильный или в лучшем случае запутанные. Никто важнейших ключевых слов1 выскакивать!
Я написал 3 ответа:
- Это объяснение (начните здесь).
- Конкретные ответы на вопросы ОП.
- Улучшенный подробный HTML.
Чтобы понять роль обсуждаемых здесь элементов HTML, вы должны знать, что некоторые из них разделяют документ. Каждый документ HTML может быть раздел в соответствии с HTML5 Алгоритм наброска с целью создания схемы - или таблицы содержимого (TOC). Схема обычно не видна (в наши дни), но авторы должны использовать HTML таким образом, чтобы результирующий контур отражает их намерения.
Вы можете создавать разделы с в яблочко Эти элементы и ничего больше:
- Создание (явных) подразделах
<section>разделы<article>разделы<nav>разделы<aside>разделы
- Создание секций или подразделов сестра
- разделы неопределенного типа с
<h*>2 (Не все это делают, см. Ниже)
- разделы неопределенного типа с
- Чтобы выровнять, закрыть текущий явный (SUB) раздел
Разделы могут быть названы:
<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>S также может быть завернут<article> - Это какая -то «полная» вещь, а не часть в серии похожих
<section>S в<article>как главы в книге<article>S в<section>как стихи в томе (в серии)
Как <header>, <footer> а также <main> вписаться?
- у них есть нулевое влияние на разделе
<header>а также<footer>- Они позволяют вам отметить зоны каждый раздел
- Даже в разделе вы можете иметь их несколько раз
- отличаться от основной части в этой секции
- ограничено только вкусом автора
<header>- может отметить заголовок/имя этого раздела
- может содержать логотип для этого раздела
- не нужно быть на верхней или верхней части секции
<footer>- может отметить кредиты/автор этого раздела
- может прийти в верхнюю часть секции
- может быть даже выше
<header>
<main>- разрешено только один раз
- отмечает основную часть раздела верхнего уровня (т.е. документ,
<body>то есть) - Сами подразделы не имеют наценки для своей основной части
<main>может даже «скрыть» в некоторых подразделах документа, в то время как документы<header>а также<footer>Не могу (эта разметка будет отмечать заголовок/нижний колонтитул этого подраздела)- но это не разрешено в
<article>разделы3
- но это не разрешено в
- Помогает отличить «реальную вещью» от неедженного не-футеров, не оздоровительного, не одобренного, если это имеет смысл в вашем случае ...
1 На ум приходит: наброски, алгоритм, неявное разделение
2 я использую <h*> как сокращение для <h1>, <h2>, <h3>, <h4>, <h5> а также <h6>
3 ни один не <main> разрешен в <aside> или же <nav>, но это неудивительно. - В результате: <main> может спрятаться только в (вложенном) нисходящем <section> разделы или появляются на верхнем уровне, а именно <body>
Наценка этого документа может выглядеть следующим образом:
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
Вы можете найти больше информации в Эта статья в списке отдельно.
Я бы посоветовал прочитать W3 Wiki Page о структурировании 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><!-- 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>Element содержит уведомление об авторском праве, но вы можете добавить более сложный контент, если хотите. Также обратите внимание, что на каждой странице вы можете иметь более одного заголовка и нижнего колонтитула, а также заголовок верхнего уровня и нижний колонтитул, который мы только что обсудили, у вас также может быть<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>Элемент для разметки 2 -й боковой панели: такая, содержащая последние концерты и контактные данные. Это совершенно уместно, как<aside>предназначен для маркировки фрагментов информации, которые связаны с основным потоком, но не вписываются в нее напрямую. И основной контент в этом случае - все о группе! Другой хороший выбор для<aside>Была бы информация об авторе сообщения в блоге, биографии группы или дискографии группы со ссылками на покупку их альбомов.Где это уходит
<div>?Итак, со всеми этими замечательными новыми элементами, которые можно использовать на наших страницах, дни скромного
<div>Конечно? НЕТ. На самом деле,<div>Все еще имеет совершенно достоверное использование. Вы должны использовать его, когда нет другого более подходящего элемента, доступного для группировки области контента, которая часто будет, когда вы используете элемент для группового содержания вместе для стиля/визуальных целей. Общим примером является использование<div>Чтобы обернуть весь контент на странице, а затем использовать CSS, чтобы сосредоточить все контент в окне браузера, или применить определенное фоновое изображение ко всему контенту.
[Объяснения в моем «главном ответе»]
строка 7. раздел Во всем сайте? Или только а дивизион?
Ни один. Для стиля: используйте <body>, это уже есть. Для раздела/семантики: Как подробно описано в моем примере HTML Его эффект противоречит полезности. Дополнительные обертки для уже завернутого контента - это не улучшение, а шум.
Строка 8. Каждый раздел начинается с заголовка?
Нет, это выбор автора, где разместить контент, обычно обобщенный как «заголовок». И если этот контент заголовка явно узнаваемы без дополнительной маркировки, он может прекрасно оставаться без <header>. Анкет Это также выбор автора.
строка 23. Это дивизион Правильно? или это должно быть раздел?
А <div> Вероятно, неправильно. Это зависит от намерений: это для стиля, только это может быть правильным. Если это для семантических целей, это неправильно: это должно быть <article> вместо Как показано в моем другом ответе. <article> Также правильно, если это как для стиля, так и для секции в сочетании.
<section> Здесь выглядит неправильно, так как нет подобных разделов до или после этого, как главы в книге. (Это цель <section>).
строка 24. разделен слева/правый столбец с дивизион.
Нет почему?
строка 25. Правильное место для статья ярлык?
Да, имеет смысл.
строка 26. Требуется ли поместить ваш H1-Таг в заголовок-ярлык?
Не один <h*> Элемент, вероятно, никогда не должен идти в <header> (Но это может, если вы хотите), так как уже ясно, что это заголовок того, что должно произойти. - было бы смысл, если бы это <header> также охватывал слоган (отмеченный <p>), Например.
Строка 43. Содержание не связано с основной статьей, поэтому я решил, что это раздел а не в сторону.
Это недоразумение, что <aside> должно быть «касательно связанные с”В контент вокруг. Дело в следующем: используйте <aside> Если контент только "тангенциально Связанный »или нет вообще!
Тем не менее, кроме <aside> быть приличным выбором, <article> все еще может быть лучше, чем <section> Поскольку «горячие предметы» и «новые предметы» не должны быть прочитаны как две главы в книге. Вы можете отлично пойти на один из них, а не другой, как альтернативная сортировка чего -либо, а не как две части целого.
строка 44. H2 без заголовок
Отлично.
строка 53. раздел без заголовок
Ну, нет <header>, но <h2>-Пержа листья довольно ясно, какая часть в этом разделе является заголовком.
строка 63. Дивизион со всеми (не связанными) новостями.
<article> или же <aside> может быть лучше.
строка 64. заголовок с H2
Уже обсуждался.
строка 65. Хм, дивизион или же раздел? Или удалить это дивизион и только используйте статья-ярлык
В яблочко! Удалить <div>.
строка 105. Нижний колонтитул :-)
Очень разумно.
Согласно с Объяснение в моем «основном» ответе Рассматриваемый документ должен быть отмечен в соответствии с контуром.
В следующих двух таблицах я показываю:
- Оригинальный HTML и его схема
- возможный набросок и HTML, делающий это
Оригинальный HTML (сокращен)
<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>
Оригинальный HTML актуальна для схемы
<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>
в результате схема
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>
возможный набросок
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
Модифицированный 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>
в результате схема
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 отражает
предназначенное наброски намного лучше, чем
оригинал.
Основная ошибка: у вас есть «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> Раздел> заголовок> H1, тело> Раздел> заголовок> H2
Больше, ... Строка 63: Почему заголовок обертывает H2 ?? Если вы не включите больше элемента внутри заголовка, просто используйте один H2.
Имейте в виду, что ваша структура состоит не в том, чтобы стилизовать документ, а построить документ, выясненный.
Применить это к остальной части документа; Удачи ;)
Почему бы не иметь item_1, item_2 и т. Д. Идентификации на сами теги статьи? Как это:
<article id="item_1">
...
</article>
<article id="item_2">
...
</article>
...
Кажется, ненужным добавлять обертки DOV. Идентификационные значения не имеют семантического значения в HTML, поэтому я думаю, что было бы совершенно верно это - вы не говорите, что первая статья всегда item_1, Just item_1 в контексте текущей страницы. Идентификаторы не обязаны иметь какое -либо значение, которое не зависит от контекста.
Кроме того, что касается вашего вопроса в строке 26, я не думаюu003Cheader> Там требуется тег, и я думаю, что вы могли бы опустить его, так как он сам по себе в «основном левом» div. Если бы это было в основном списке статей, вы могли бы включитьu003Cheader> Теги только ради последовательности.
- Раздел должен использоваться только для того, чтобы обернуть раздел внутри документа (например, главы и аналогичные)
- С заголовок тег: нет. Тег заголовка представляет обертку для заголовка страницы и не следует путать с H1, H2 и т. Д.
- Какой див? : D.
- Да
- Из школ W3C:
Тег определяет внешний контент. Внешний контент может быть новостной статьей от внешнего поставщика или текстом из веб-журнала (блога), или текстом с форума, или любого другого контента из внешнего источника.
- Нет, заголовок имеет другое использование. H1, H2 и т. Д. Представляют названия документов H1 являются наиболее важными
Я не отвечал на другие, потому что трудно угадать, на что вы имели в виду. Если есть больше вопросов, пожалуйста, дайте мне знать.
Вот мой пример, в котором я работаю
<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
Я не думаю, что вы должны использовать тег в резюме предмета новостей (строки 67, 80, 93). Вы можете использовать раздел или просто иметь входной Div.
Статья должна быть в состоянии стоять самостоятельно и по -прежнему иметь смысл или быть полной. Как его неполное или просто выдержка, он не может быть статьей, это больше раздел.
Когда вы нажимаете «Подробнее», последующая страница может
РЕДАКТИРОВАТЬ: К сожалению, я должен исправить себя.
См. Ниже https://stackoverflow.com/a/17935666/2488942 Для ссылки на спецификации W3, которые включают пример (в отличие от тех, на которые я смотрел ранее).
Но потом....Здесь Хорошая статья об этом благодаря @Fez.
Мой первоначальный ответ был:
Как структурированы спецификации W3:
4.3.4 Разделы
4.3.4.1. Элемент тела
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
«Строка 23. Это правда? или это должен быть раздел? »
Ни тоже - есть main Теги для этой цели, которая разрешена только один раз на страницу и должен использоваться в качестве обертки для основного содержания (в отличие от боковой панели или заголовка по всему сайту).
<main>
<!-- The main content -->
</main>
http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-main-element
Я хочу более точно прояснить этот вопрос, поправьте меня, если я ошибаюсь, давайте возьмем пример стены Facebook
1. Wall подходит под раздел «раздел», который обозначает, что он отделен от страницы.
2. Все сообщения находятся под тегом «Статья».
3. Затем у нас есть единственный пост, который находится под разделом «Раздел».
3. У нас есть заголовок «x пользовательского сообщения» для этого мы можем использовать тег «заголовок».
4. Затем внутри пост у нас есть три раздела,-это изображения/текст, как кнопка, например, кнопку, и поле для комментариев.
5. Для коробки комментариев мы можем использовать тег статьи.
Согласно с Ответ Натана, это имеет смысл (для красных и оранжевых деталей, возможно, вы могли бы использовать divS. и/или header а также footer соответственно):
