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

#html #semantic-web #semantic-markup

#HTML #семантический веб #семантическая разметка

Вопрос:

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

Какие-либо соответствующие статьи по этому поводу?

Ответ №1:

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

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

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