Jaka jest najbardziej poprawna semantycznie struktura strony blogu przy użyciu tagów HTML5?

9

Chciałbym grok ostateczny charakter <aside>, <section>, <article>.

Jaka jest najlepsza, najbardziej poprawna semantycznie struktura strony blogu przy użyciu tagów HTML5?

Czy powinienem umieścić pasek boczny w środku <aside>? Czy raczej należy to do <section>(jak <aside>należy to stosować w przypadku reklam, krótkich cytatów i tym podobnych)?

Jak mam przedstawić główną funkcję, wpis na blogu? Jak <article>prawidłowo korzystać ?

Jak oznaczyć znaczniki artykułów?

Wabbitseason
źródło

Odpowiedzi:

7

Chcesz użyć <article>do wpisów na blogu. Mark Pilgrim ma naprawdę dobre wyjaśnienie, jak używać każdego tagu. Wyjaśnia także, jak zaznaczyć articletuż pod listą definicji na swojej stronie. To fantastyczna książka do nauki HTML 5 i CSS.

„Element artykułu reprezentuje składnik strony, który składa się z samodzielnego składu w dokumencie, stronie, aplikacji lub witrynie i który ma być niezależnie dystrybuowalny lub wielokrotnego użytku, np. W syndykacji”.

Asidedotyczy elementów „stycznie powiązanych”, a sectionsymbol „reprezentuje ogólny dokument lub sekcję aplikacji”.

citadelgrad
źródło
2

Dla <aside>, pomyśl o tym jak teatralny bok: historia jest zawieszone coś wyjaśnić do publiczności, skręcając się na stycznej do krótkiego kawałka przed powrotem do głównego centrum uwagi. Na przykład:

<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>

Okropny przykład, ale poprawny. Są szanse, że przydadzą się takie rzeczy jak cytaty ciągnące i inne styczne istotne dla artykułu, ale jako czysto semantyczny znacznik reklamy zazwyczaj nie należą.

System reklam oparty na słowach kluczowych nie będzie dbał o semantyczne dopasowanie treści, jest bardziej zainteresowany dopasowaniem danych demograficznych. Jeśli <article>chodzi tylko o PHP i przyciąga reklamy związane z Python / Perl / Java (w pewnym momencie), <aside>po prostu straciło znaczenie. Lepiej jest umieścić je gdzie indziej na stronie.

Tadamson
źródło
+1 za wywołanie uśmiechu na mojej twarzy i udzielenie odpowiedzi na moje własne pytanie.
Jason