Семантика HTML 5 - PullRequest
Новая
       3

Семантика HTML 5

1 голос
/ 11 августа 2011

Я уже некоторое время читаю о правильной семантике HTML 5 и до сих пор не уверен в некоторых вещах.

Мой сайт выводит данные из базы данных примерно так:

  • Заголовок (в настоящее время используется <h2>)
  • Описание (в настоящее время используется <p>)
  • Изображение (в настоящее время используется <img> и элемент обертки отсутствует)
  • Открыть /Закрыть (в настоящее время <p>)
  • Услуги
    • сидр (да / нет)
    • вино (да / нет)
    • осадка (да / нет))

Я очень смущен этим:

должен ли каждый результат <div> быть теперь в элементе <section>, поэтому страница выдаст 10все результаты в пределах <section>, или это будет HTML5 семантически правильно, используя 1 <section>, чтобы содержать результаты, так как это результаты <section>, и каждый результат удерживается в пределах <div id="unique_number"> ???

спасибо

Ответы [ 2 ]

3 голосов
/ 11 августа 2011

Раздел - это тематическая группировка контента, обычно с заголовком. Я бы использовал раздел foreach результат в вашем случае.

Пример: 

<section>
 <header><h1>Trollinger</h1></header>
  <p>Red, Delicious</p>
  <img/>
 <p>open</p>
 <ul>
  <li>cider</li>
  <li>wine</li>
  <li>draft</li>
 </ul>
</section>

Ссылка: http://dev.w3.org/html5/spec/Overview.html#the-section-element

1 голос
/ 11 августа 2011

Заголовок веб-страницы должен быть установлен в <title>Title</title> (расположен в <head>), а также на странице (в body) с <h1>. Это и семантика, и SEO.

«Описание», если оно стоит отдельно, может быть <span>. Если это часть какого-то другого текста, абзац - это хорошо, но обычно абзацы не являются самостоятельными, поэтому в этом случае используйте интервал. Изображение: это зависит Если это изображение предназначено исключительно для стилизации - возможно, вихря на заднем плане или градиента - оно должно быть задано как фоновое изображение элемента в CSS. Если это фактический контент (например, логотип, фотография), используйте тег <img>. Я предполагаю, что «Открыть» и «Закрыть» - это интерактивные элементы, ссылки или кнопки. Если это так, используйте <button> или якорь: <a>, а не абзац. Если это заголовки, используйте один из тегов заголовков. Поскольку вы использовали <h1>, тогда используйте <h2> (если это не очень важный заголовок)

Что касается ваших "Результатов", в соответствии со спецификацией ,

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

Дополнительно

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

Так что в вашем случае <div> для результатов поиска, вероятно, подойдет.

...