#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 описывает ваш контент.