Семантически корректный HTML

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

Статья: Элемент HTML представляет собой автономную композицию в документе, странице, приложении или сайте, которая предназначена для самостоятельного распределения или повторного использования, например, в синдикации

Раздел: Элемент HTML Section() представляет собой общий раздел документа, то есть тематическую группировку содержимого, как правило, с заголовком.

В моем случае я думаю, что в разделах статьи содержатся отдельные фрагменты информации, а раздел - это общая информация об этом заголовке. Имеет ли это смысл?

<title>Anthonys Personal Profile</title>
  
 
 
 <article>
 <header>Personal Profil</header>
 <section>
 <p>Role</p>
 <p>Education</p>
 <p>Major</p>
 <p>Residence</p>
 </section>
</article>
<article>
 <header>Key Skills</header>
 <section>
 <p>Development</p>
 <p>PM</p>
 <p>Performance</p>
 <p>Agile</p>
 </section>
</article>
2 ответа

ИСПРАВЛЕНИЕ:

Я стою исправлено. Спецификации я связаны с ниже, не включает в себя пример, однако есть пример включен здесь:

<article>
 <header>
 <h2>Apples</h2>
 <p>Tasty, delicious fruit!</p>
 </header>
 <p>The apple is the pomaceous fruit of the apple tree.</p>
 <section>
 <h2>Red Delicious</h2>
 <p>These bright red apples are the most common found in many
 supermarkets.</p>
 </section>
...
</article>

что моя первоначальная интерпретация была неправильной. HT @cilerler.

Резюмируя, section можно использовать для подразделения, например, частей, следующих за h1 включая h1.

Существует гибкость, хотя в соответствии с этой статьей. Хорошая статья, в которой делаются и не делают.

Вот что имело для меня смысл сегодня утром:

ОРИГИНАЛ:

Вам также нужно закрыть теги

, то есть:
<section>
.....
</section>

Есть несколько вопросов об этом на SO:

Этот вопрос очень близок к вам. Как правильно использовать тег "section" в HTML5?

В этом объясняются сценарии, в которых должен использоваться тег. В каких сценариях вы используете тег

html 5 вместо
?

Цитата оттуда:

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

Элемент сечения представляет собой общий документ или раздел приложения... Элемент сечения не является общим элементом контейнера. Когда элемент нужен для стилизации или для удобства написания сценариев, авторам рекомендуется использовать элемент div.

Поэтому я понимаю, что section обозначает части высокого уровня, тогда как, например, отдельные новости, упомянутые в цитате, могут быть помечены как articles.

EDIT: Хорошо из официальных спецификаций:

http://dev.w3.org/html5/html-author/#the-section-element

Элемент раздела представляет собой общий документ или раздел приложения. Раздел в этом контексте представляет собой тематическую группировку контента, как правило, с заголовком и, возможно, нижним колонтитулом.

http://dev.w3.org/html5/html-author/#the-article-element

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

Хотя это далеко не полностью ясно для меня, по крайней мере, я бы сказал, что цель состоит в том, что section выше уровня, чем article. Это мое выражение также частично основано на том, как официальные спецификации структурируются с section сидящим непосредственно под телом, за которым следует только позже article:

4.3.4 Sections

 4.3.4.1 The body element
 4.3.4.2 The section element
 4.3.4.3 The nav element
 4.3.4.4 The article element
 4.3.4.5 The aside element
 4.3.4.6 The h1, h2, h3, h4, h5, and h6 elements
 4.3.4.7 The header element
 4.3.4.8 The footer element
 4.3.4.9 The address element
 4.3.4.10 Headings and Sections


Следующие 3 статьи предоставляют отличный обзор использования семантических блоков HTML5:

licensed under cc by-sa 3.0 with attribution.