Яка найбільш семантично правильна структура сторінки блогу з використанням тегів HTML5?


9

Я хотів би звертав увагу на кінцеву природу <aside>, <section>, <article>.

Яка найкраща, найбільш семантично правильна структура сторінки блогу з використанням тегів HTML5?

Чи слід покласти бічну панель всередину <aside>? Або це скоріше належить до <section>(як це <aside>слід використовувати для реклами, коротких цитат тощо)?

Як мені представити головну особливість, допис у блозі? Як <article>правильно користуватися?

Як слід розмітити теги статті?

Відповіді:


7

Ви хочете використовувати <article>для публікацій у блозі. Марк Пілігрим має дійсно гарне пояснення, як використовувати кожен тег. Він також пояснює, як розмітити articleтрохи нижче списку визначень на своєму сайті. Це фантастична книга для вивчення HTML 5 та CSS.

"Елемент статті являє собою компонент сторінки, який складається з автономної композиції в документі, сторінці, додатку чи веб-сайті, який призначений для незалежного розповсюдження або повторного використання, наприклад, під час синдикації."

Asideє для "тангенціально пов'язаних" елементів і sectionпредставляє "являє собою загальний документ або розділ програми".


2

Бо <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>щойно втрачений сенс. Вам краще розмістити ці місця на сторінці.


+1 за те, що поклав посмішку на обличчя та відповів на моє власне запитання.
Джейсон
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.