Apa struktur halaman blog yang paling semantik benar menggunakan tag HTML5?


9

Saya ingin grok sifat utama <aside>, <section>, <article>.

Apa struktur halaman blog terbaik dan paling semantik yang benar menggunakan tag HTML5?

Haruskah saya meletakkan sidebar di dalam <aside>? Atau apakah ini lebih baik menjadi bagian dari <section>(seperti yang <aside>seharusnya digunakan untuk iklan, kutipan pendek dan semacamnya)?

Bagaimana saya harus menyajikan fitur utama, posting blog? Bagaimana cara saya menggunakan <article>dengan benar?

Bagaimana saya harus menandai tag artikel?

Jawaban:


7

Anda ingin menggunakan <article>untuk posting Blog. Mark Pilgrim memiliki penjelasan yang sangat bagus tentang bagaimana menggunakan setiap tag. Dia juga menjelaskan bagaimana menandai di articlebawah daftar definisi di situsnya. Ini adalah buku yang luar biasa untuk mempelajari HTML 5 dan CSS.

"Elemen artikel mewakili komponen halaman yang terdiri dari komposisi mandiri dalam dokumen, halaman, aplikasi, atau situs dan yang dimaksudkan untuk didistribusikan atau digunakan kembali secara mandiri, misalnya dalam sindikasi."

Asideadalah untuk elemen "yang berhubungan secara tangensial" dan sectionmewakili "mewakili dokumen generik atau bagian aplikasi."


2

Karena <aside>, pikirkan itu seperti samping teater: cerita ditangguhkan untuk menjelaskan sesuatu kepada penonton, membelok pada garis singgung sebentar sebelum kembali ke fokus utama. Misalnya:

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

Contoh yang mengerikan, tetapi yang valid. Kemungkinannya akan berguna untuk hal-hal seperti pull-quotes dan garis singgung terkait artikel lainnya, tetapi sebagai tag semantik murni , iklan pada umumnya tidak termasuk.

Sistem iklan yang digerakkan oleh kata kunci tidak akan peduli tentang pemasangan konten Anda secara semantik, itu lebih tertarik pada pencocokan demografi. Jika Anda <article>hanya tentang PHP, dan itu menarik iklan yang terkait dengan Python / Perl / Java (itu akan, pada titik tertentu), Anda <aside>baru saja kehilangan artinya. Anda lebih baik meletakkannya di halaman lain.


1 untuk meletakkan senyum di wajah saya dan menjawab pertanyaan saya sendiri yang saya miliki.
Jason
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.