HTML5 лучшие практики; элементы section/header/aside/article
В Интернете достаточно информации о HTML5 (а также о стековом потоке), но теперь мне интересно узнать о "лучших практиках". Такие теги, как section/ headers / article, являются новыми, и у всех разные мнения о том, когда и где вы должны использовать эти теги. Так что вы, ребята, думаете о следующем макете и коде?
1 <!doctype html>
2 <head>
3 <title>Website</title>
4 </head>
5
6 <body>
7 <section>
8 <header>
9 <div id="logo"></div>
10 <div id="language"></div>
11 </header>
12
13 <nav>
14 <ul>
15 <li>menu 1</li>
16 <li>menu 2</li>
17 <li>menu 3</li>
18 <li>menu 4</li>
19 <li>menu 5</li>
20 </ul>
21 </nav>
22
23 <div id="main">
24 <div id="main-left">
25 <article>
26 <header><h1>This is a title</h1></header>
27
28 <p>Lorem ipsum dolor sit amet, consectetur
29 adipiscing elit. Quisque semper, leo eget</p>
30
31 <p>Lorem ipsum dolor sit amet, consectetur
32 adipiscing elit. Quisque semper, leo eget</p>
33
34 <p>Lorem ipsum dolor sit amet, consectetur
35 adipiscing elit. Quisque semper, leo eget</p>
36
37 <p>Lorem ipsum dolor sit amet, consectetur
38 adipiscing elit. Quisque semper, leo eget</p>
39 </article>
40 </div>
41
42 <div id="main-right">
43 <section id="main-right-hot">
44 <h2>Hot items</h2>
45 <ul>
46 <li>Lorem ipsum</li>
47 <li>dolor sit</li>
48 <li>...</li>
49 </ul>
50 </section>
51
52 <section id="main-right-new">
53 <h2>New items</h2>
54 <ul>
55 <li>Lorem ipsum</li>
56 <li>dolor sit</li>
57 <li>...</li>
58 </ul>
59 </section>
60 </div>
61 </div>
62
63 <div id="news-items">
64 <header><h2>The latest news</h2></header>
65
66 <div id="item_1">
67 <article>
68 <header>
69 <img src="#" title="titel artikel" />
70 <h3>Lorem ipsum .....</h3>
71 </header>
72 <p>Lorem ipsum dolor sit amet,
73 adipiscing elit. Quisque semper, </p>
74 <a href="#">Read more</a>
75 </article>
76 </div>
77
78
79 <div id="item_2">
80 <article>
81 <header>
82 <img src="#" title="titel artikel" />
83 <h3>Lorem ipsum .....</h3>
84 </header>
85 <p>Lorem ipsum dolor sit amet,
86 adipiscing elit. Quisque semper, </p>
87 <a href="#">Read more</a>
88 </article>
89 </div>
90
91
92 <div id="item_3">
93 <article>
94 <header>
95 <img src="#" title="titel artikel" />
96 <h3>Lorem ipsum .....</h3>
97 </header>
98 <p>Lorem ipsum dolor sit amet,
99 adipiscing elit. Quisque semper, </p>
100 <a href="#">Read more</a>
101 </article>
102 </div>
103 </div>
104
105 <footer>
106 <ul>
107 <li>menu 1</li>
108 <li>menu 2</li>
109 <li>menu 3</li>
110 <li>menu 4</li>
111 <li>menu 5</li>
112 </ul>
113 </footer>
114 </section>
115 </body>
116 </html>
строка 7 section вокруг всего сайта? Или только div?
строка 8. Каждый section начать с header?
строка 23. Это div право? или это должно быть section?
строка 24. Разбить левый / правый столбец с помощью div,
строка 25. Правильное место для article тег?
строка 26. Требуется ли поставить h1-тег в header-тег?
строка 43. Содержание не связано с основной статьей, поэтому я решил, что это section и не aside,
линия 44. Н2 без header
строка 53 section без header
строка 63. Разделите со всеми (не связанными) новостями
строка 64 header с h2
строка 65. Хм, div или же section? Или удали это div и использовать только article-тег
строка 105. Нижний колонтитул:-)
16 ответов
На самом деле, вы совершенно правы, когда дело доходит до верхнего / нижнего колонтитула. Вот некоторая базовая информация о том, как можно / нужно использовать каждый из основных тегов HTML5 (я предлагаю прочитать полный источник, связанный внизу):
section - Используется для группировки тематического контента. Звучит как элемент div, но это не так. У div нет смыслового значения. Прежде чем заменять все свои элементы div на элементы section, всегда спрашивайте себя: "Все ли содержимое связано?"
в сторону - используется для тангенциально связанного контента. Тот факт, что какой-то контент отображается слева или справа от основного контента, не является достаточным основанием для использования элемента aside. Спросите себя, можно ли удалить содержимое в стороне, не уменьшая смысла основного содержимого. Цитаты являются примером тангенциально связанного контента.
заголовок - Существует принципиальная разница между элементом заголовка и общепринятым использованием заголовка (или заголовка). Обычно на странице только один заголовок или заголовок. В HTML5 вы можете иметь столько, сколько хотите. Спецификация определяет его как "группу вводных или навигационных средств". Вы можете использовать заголовок в любом разделе вашего сайта. На самом деле, вы, вероятно, должны использовать заголовок в большинстве ваших разделов. Спецификация описывает элемент section как "тематическое группирование контента, обычно с заголовком".
nav - предназначен для основной навигационной информации. Группа ссылок, сгруппированных вместе, не является достаточным основанием для использования элемента nav. Общесайтовая навигация, с другой стороны, принадлежит элементу nav.
нижний колонтитул - звучит как описание позиции, но это не так. Элементы нижнего колонтитула содержат информацию о содержащем его элементе: кто его написал, авторское право, ссылки на связанный контент и т. Д. В то время как у нас обычно есть один нижний колонтитул для всего документа, HTML5 позволяет нам также иметь нижний колонтитул внутри разделов.
Кроме того, вот описание на article, не найденный в источнике выше:
article - Используется для элемента, который определяет независимый, автономный контент. Статья должна иметь смысл сама по себе. Прежде чем заменять все свои элементы div элементами статьи, всегда спрашивайте себя: "Можно ли прочитать его независимо от остальной части веб-сайта?"
К сожалению, ответы, данные до сих пор (включая наиболее проголосовавших), являются либо "просто" здравым смыслом, либо ошибочными, либо в лучшем случае запутанными. Ни одно из важных ключевых слов 1 не появляется!
Я написал 3 ответа:
- Это объяснение (начать здесь).
- Конкретные ответы на вопросы ОП.
- Улучшен подробный HTML.
Чтобы понять роль html-элементов, обсуждаемых здесь, вы должны знать, что некоторые из них разбивают документ на части. Каждый HTML-документ может быть разбит на части в соответствии с алгоритмом контура HTML5 с целью создания схемы - "или" - оглавления (TOC). Схема обычно не видна (в наши дни), но авторам следует использовать html таким образом, чтобы результирующий план отражал их намерения.
Вы можете создавать разделы именно с этими элементами и ничего больше:
- создание (явных) подразделов
<section>разделы<article>разделы<nav>разделы<aside>разделы
- создание родственных разделов или подразделов
- сечения неопределенного типа с
<h*>2 (не все это делают, см. Ниже)
- сечения неопределенного типа с
- чтобы выровнять текущий текущий (под) раздел
Разделы могут быть названы:
<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>в<article>как главы в книге<article>в<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>
Вы можете найти больше информации в этой статье на A List Apart.
Я бы предложил прочитать вики-страницу 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><!-- 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>элемент для разметки 2-й боковой панели: тот, который содержит последние концерты и контактные данные. Это совершенно уместно, так как<aside>предназначен для разметки фрагментов информации, которые связаны с основным потоком, но не вписываются в него напрямую. И основной контент в этом случае все о группе! Другие хорошие варианты для<aside>будет информация об авторе постов в блоге, биографии группы или дискографии группы со ссылками на покупку их альбомов.Куда это уходит
<div>?Итак, со всеми этими замечательными новыми элементами для использования на наших страницах, дни скромного
<div>нумеруются, конечно? NO. На самом деле,<div>все еще имеет вполне допустимое использование. Вы должны использовать его, когда нет другого более подходящего элемента, доступного для группировки области контента, что часто бывает, когда вы просто используете элемент для группировки контента вместе для стилизации / визуальных целей. Типичным примером является использование<div>обернуть весь контент на странице, а затем с помощью CSS центрировать весь контент в окне браузера или применить конкретное фоновое изображение ко всему контенту.
[ объяснения в моем "основном ответе" ]
строка 7. раздел вокруг всего сайта? Или только div?
Ни. Для укладки: используйте <body> это уже там. Для секционирования / семантики: как подробно описано в моем примере HTML, его эффект противоречит полезности. Дополнительные обертки к уже упакованному контенту - это не улучшение, а шум.
строка 8. Каждый раздел начинается с заголовка?
Нет, это выбор автора, куда помещать контент, обычно обозначаемый как "заголовок". И если этот заголовочный контент четко узнаваем без дополнительной маркировки, он может прекрасно остаться без <header>, Это тоже выбор автора.
строка 23. Верно ли это? или это должен быть раздел?
<div> вероятно неправильно Это зависит от намерений: только для стиля это может быть правильно. Если это для семантических целей, это неправильно: это должно быть <article> вместо этого, как показано в моем другом ответе. <article> Это также правильно, если это как для стилизации и секционирования вместе.
<section> выглядит неправильно, так как до или после этого нет подобных разделов, как в главах книги. (Это цель <section>).
строка 24. Разбить левый / правый столбец с помощью div.
Нет почему?
строка 25. Правильное место для тега статьи?
Да, имеет смысл.
строка 26. Требуется ли указывать ваш h1 -tag в заголовке -tag?
Не один <h*> элемент, вероятно, никогда не должен идти в <header> (но может, если хотите), поскольку уже ясно, что это заголовок того, что должно произойти. - Это будет иметь смысл, если это <header> также включает в себя слоган (отмечен <p>), например.
Строка 43. Содержание не связано с основной статьей, поэтому я решил, что это раздел, а не отступление.
Это недоразумение, что <aside> должен быть "тангенциально связан " с контентом вокруг. Дело в том: использовать <aside> если контент только " косвенно связан" или не связан вообще!
Тем не менее, кроме <aside> быть достойным выбором, <article> может быть еще лучше, чем <section> поскольку "горячие предметы" и "новые предметы" не должны читаться как две главы в книге. Вы можете идеально выбрать одну из них, а не другую, как альтернативную сортировку чего-либо, а не как две части целого.
строка 44. Н2 без заголовка
Отлично.
строка 53. раздел без заголовка
Ну нет <header>, но <h2> -heading довольно ясно, какая часть этого раздела является заголовком.
строка 63. Разделите со всеми (не связанными) новостями
<article> или же <aside> может быть лучше.
строка 64. заголовок с h2
Обсуждали уже.
строка 65. Хм, div или раздел? Или удалите этот div и используйте только тег
Именно так! Удалить <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 отражает
Намеченный контур лучше, чем
оригинал.
Основная ошибка: у вас есть "дивитит" во всем документе.
Почему это?
<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.
Имейте в виду, что ваша структура не для того, чтобы стилизовать документ, а для того, чтобы создать самодостаточный документ.
Примените это к остальной части документа; Удачи;)
Почему бы не иметь идентификаторы item_1, item_2 и т. Д. На самих тегах статьи? Как это:
<article id="item_1">
...
</article>
<article id="item_2">
...
</article>
...
Кажется ненужным добавлять div-обертки. Значения идентификаторов не имеют семантического значения в HTML, поэтому я думаю, что это было бы совершенно правильно - вы не говорите, что первая статья всегда item_1, просто item_1 в контексте текущей страницы. Идентификаторы не обязательно должны иметь какое-либо значение, не зависящее от контекста.
Кроме того, что касается вашего вопроса в строке 26, я не думаю, что тег
- Раздел должен использоваться только для переноса раздела внутри документа (например, главы и т. П.)
- С тегом заголовка: НЕТ. Тег заголовка представляет собой оболочку для заголовка страницы и его не следует путать с H1, H2 и т. Д.
- Какой div?: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>
РЕДАКТИРОВАТЬ: К сожалению, я должен исправить себя.
См. Ниже /questions/2928051/html5-luchshie-praktiki-elementyi-sectionheaderasidearticle/2928066#2928066 для ссылки на спецификации 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
Я не думаю, что вы должны использовать тег в сводке новостей (строки 67, 80, 93). Вы можете использовать раздел или просто иметь вложенный div.
Статья должна быть в состоянии стоять самостоятельно и все еще иметь смысл или быть законченной. Поскольку это неполная или просто выдержка, она не может быть статьей, а скорее разделом.
Когда вы нажимаете "читать дальше", следующая страница может
Строка 23. Правильно ли этот div? или это должен быть раздел? "
Ни то, ни другое main тег для этой цели, который разрешен только один раз на страницу и должен использоваться в качестве оболочки для основного содержимого (в отличие от боковой панели или заголовка всего сайта).
<main>
<!-- The main content -->
</main>
http://www.w3.org/html/wg/drafts/html/master/grouping-content.html
Я хочу уточнить этот вопрос более точно, поправьте меня, если я ошибаюсь. Давайте возьмем пример стены Facebook
1.Wall идет под тегом "section", который обозначает, что он отделен от страницы.
2. Все посты идут под тегом "статья".
3. Затем у нас есть один пост, который находится под тегом "section".
3. У нас есть заголовок "X user post this", для этого мы можем использовать тег "heading".
4. Внутри поста у нас есть три раздела: "Изображения / текст", кнопка "Мне нравится поделиться" и поле для комментариев.
5.Для комментария мы можем использовать тег статьи.
Согласно ответу Натана, это имеет смысл (для красных и оранжевых частей, возможно, вы могли бы использовать divи / или header а также footer соответственно):
