Какова наиболее семантически правильная структура страницы блога с использованием тегов HTML5?
Я хотел бы понять конечную природу <aside>, <section>, <article>.
Какова лучшая, наиболее семантически правильная структура страницы блога с использованием тегов HTML5?
Должен ли я поместить боковую панель внутри <aside>? Или это скорее относится к <section> (поскольку <aside> следует использовать для рекламы, коротких цитат и тому подобного)?
Как я должен представить основную функцию, сообщение в блоге? Как правильно использовать <article>?
Как я должен разметить теги статей?
2 answers
Вы хотите использовать <article> для записей в блоге. У Марка Пилигрима есть действительно хорошее объяснение того, как использовать каждый тег. Он также объясняет, как разметить article чуть ниже списка определений на своем сайте. Это фантастическая книга для изучения HTML 5 и CSS.
"Элемент статьи представляет собой компонент страницы, который состоит из автономной композиции в документе, странице, приложении или сайте и предназначен для независимого распространения или повторного использования, например в синдикации".
Aside предназначен для "тангенциально связанных" элементов, а section представляет "представляет общий раздел документа или приложения".
Для <aside> подумайте об этом, как о театральной стороне: история приостанавливается, чтобы что-то объяснить аудитории, ненадолго отклоняясь от темы, прежде чем вернуться к основному фокусу. Например:
<article>
<p>A horse walks into a bar.</p>
<p>The bartender says, "Why the long face?"</p>
<aside>Not because it was sad, horses just have long faces.</aside>
</article>
Ужасный пример, но верный. Скорее всего, это будет полезно для таких вещей, как кавычки и другие касательные, относящиеся к статье, но в качестве чисто семантического тега реклама, как правило, не относится.
Рекламная система, ориентированная на ключевые слова, не будет заботиться о семантически соответствующий вашему контенту, он больше заинтересован в сопоставлении демографических данных. Если ваш <article> касается только PHP, и он тянет рекламу, связанную с Python/Perl/Java (в какой-то момент это произойдет), ваш <aside> просто потерял смысл. Вам лучше разместить их в другом месте на странице.