Как семантически назвать div в соответствии с HTML5? - PullRequest
Новая
       21

Как семантически назвать div в соответствии с HTML5?

2 голосов
/ 05 ноября 2011

У меня есть http://demetriad.co.uk/designtest.jpg, который я собираюсь преобразовать в html, используя HTML5 и CSS3.Имея все эти абзацы в области контента, как их лучше назвать, где я могу их использовать, как бы вы поступили?На самом деле фотография будет слайд-шоу с фотографиями из Flickr, снятыми из JSON-ленты с jQuery.

Есть ли у вас какие-либо соответствующие статьи на эту тему?

1 Ответ

2 голосов
/ 21 ноября 2011

Ну, исходя из вашего макета, я бы сказал, что нужно использовать как можно больше семантических элементов HTML5:

  • Ваш текст "логотипа" обязательно должен быть заголовком.Независимо от того, является ли <h1> или заголовок более низкого уровня структурой вашего сайта / вашего сайта.
  • Слайд-шоу, вероятно, должно быть само по себе в <div> - на самом деле нет хорошего элемента HTMLдля него, и для семантики вредно пытаться растянуть что-то, чтобы рассчитывать больше, чем следовало бы.
  • Наконец, глядя на основной раздел, есть несколько вещей, которые можно разбить:
    • Текст «О программе», безусловно, должен быть другим заголовком, номер которого меньше, чем у текста «логотипа».
    • «Мы проектируем для функциональности ...», вероятно, может быть заключен в <blockquote>tag.
    • Разделы "Amazon Web Services" и "TYPO3" справа, вероятно, можно поместить в тег <aside>, поскольку они не имеют прямого отношения к остальной части раздела "about".

Как правило, лучший вызов - это просто следовать своему инстинкту инстинкта, и, если вы все еще в замешательстве, сделайте быструю проверку полного списка HTML-элементов ипосмотреть, если какой-либо из многих тегов HTMLОпишите ваш контент правильно.

...