Konten utama halaman dan elemen utama
Di halaman mana pun, kami dapat menemukan konten utama. Ini akan berbeda dari halaman ke halaman, tetapi pasti tidak akan terulang kembali. Misalnya, seperti di situs web Smashing Magazine.
Halaman "Artikel Memukau Kami" menampilkan daftar artikel, dan di halaman "Menumbuhkan Kedewasaan UX: Menemukan Juara UX dan Menunjukkan ROI (Bagian 1)" kami sudah melihat teks artikel.
Namun hanya ada satu pilihan dalam gambar, yang disebut konten utama atau konten utama. Area ini harus ditandai menggunakan elemen utama.
Konten tambahan untuk elemen utama dan samping
Selain konten utama, mungkin ada area pada halaman yang secara tematik terkait dengannya. Mereka melengkapi konten utama, tetapi jika dihapus dari halaman, kejelasan konten tidak akan terpengaruh.
Misalnya, di situs web Lenta.ru di halaman dengan berita "Joshua yang Tak Terkalahkan
Akan Belajar Menjaga Masa Muda dari Ronaldo", terdapat blok "Materi Terkait".
Blok tersebut berisi artikel tentang Cristiano Ronaldo yang disebutkan dalam teks konten utama, yaitu dibuat tautan tematik, sehingga elemen tersebut dapat ditandai dengan elemen samping.
Juga di halaman ini dengan elemen samping, Anda dapat menandai blok "Link terkait", karena semua link secara tematis terkait dengan konten.
Konten yang dikelompokkan secara tematis dan elemen bagian
Elemen bagian membantu kami menyorot bagian halaman. Bagian dalam konteks ini adalah konten yang dikelompokkan secara tematis, yang artinya ditentukan oleh judul. Berdasarkan definisi tersebut, maka penting untuk menjelaskan istilah heading. Judul adalah teks yang memberikan "nama" pada informasi tersebut.
Untuk menjelaskannya dengan lebih baik, saya akan memberikan beberapa contoh. Pertimbangkan blok "Berita" di situs BBC.
Pertama-tama, penting untuk menemukan judulnya. Blok tersebut berisi teks “News”, yang “memberi nama” - “News” untuk 3 item berita yang bersebelahan. Oleh karena itu, struktur ini adalah contoh bagus dari sebuah bagian.
Selanjutnya, mari kita lihat blok yang menampilkan informasi harga di situs web Patreon.
Sekarang kita perlu mencari judulnya. Dalam contoh ini, item "Ringan", "Pro", dan "Premium" adalah judul. Mengapa? Bayangkan saya sedang membicarakan tarif dengan seseorang dan berkata: “Tarif pro”, maka lawan bicara saya akan langsung mengerti blok mana yang saya bicarakan dan informasi apa yang dikandungnya. Ternyata “Tarif Pro” adalah “Nama”.
Sekarang kita memiliki judul dan informasi, seperti pada contoh sebelumnya, mereka dapat dikelompokkan dengan elemen bagian.
Kami akan melihat contoh terakhir di situs PiterCSS, di mana ada blok dengan informasi tentang laporan tersebut.
Temukan judulnya lagi. Berikut adalah judul laporan, yang menggabungkan informasi lainnya tentang laporan dan pembicara. Selanjutnya, saya akan mengelompokkannya dan judul dengan elemen bagian.
Saya harap saya bisa melewati aturan saya untuk menggunakan elemen bagian. Kami mencari judul dan konten yang terkait dengannya dan mengelompokkan dengan elemen bagian. Dan penting untuk dicatat bahwa bagian tidak bisa ada tanpa judul, jadi elemen bagian harus berisi salah satu elemen h1-h6.
Wilayah halaman independen dan elemen artikel
Elemen artikel harus digunakan untuk memilih area independen pada halaman yang dapat dikeluarkan dari lingkungan logisnya. Elemen ini sering dikacaukan dengan elemen bagian, jadi saya ingin menunjukkan perbedaannya dengan contoh.
Di situs BBC Sport ada blok dengan klasemen liga kedua dari kejuaraan Inggris.
Sekarang saya akan menghapus semua informasi di sekitarnya.
Saya menghapus semua yang ada di halaman, tetapi saya masih mengerti apa yang dilakukan blok tersebut, yaitu menunjukkan klasemen. Ternyata menghapus elemen dari lingkungan logisnya tidak mempengaruhinya dengan cara apa pun.
Sekarang saya akan mengambil blok dengan informasi tentang rencana "Pro" di situs web Patreon dan menghapus semua elemen yang tersisa.
Saya mengerti bahwa ini adalah blok dengan informasi tentang tarif "Pro". Baik. Tapi ini tarif produk yang mana? Apa yang harus saya lakukan dengannya? Tidak jelas.
Ternyata menghapus blok dari lingkungan logisnya memengaruhinya. Sebagai pengguna, saya berhenti memahami apa yang harus dilakukan dengan blok ini. Jika saya menyematkannya di situs lain, tampilannya "asing".
Di sinilah letak perbedaan mendasar antara elemen bagian dan artikel. Ini adalah garis yang sangat halus, tetapi intinya adalah jika elemen tidak "hilang" saat konteks di sekitarnya dihapus, maka harus diberi markup dengan elemen artikel. Dan jika hilang, maka kita memiliki elemen bagian.
Navigasi dan elemen nav bersama dengan elemen ol dan ul
Untuk menyorot navigasi di halaman, kita harus menggunakan elemen nav. Tapi ini tidak cukup. Seringkali kita perlu mengelompokkan item menggunakan daftar. Elemen ol dan ul cocok untuk tugas ini. Tapi bagaimana Anda memilih di antara mereka?
Berdasarkan pertanyaan ini, saya akan mempertimbangkan dua jenis navigasi, yaitu pemesanan item ketat dan pemesanan item tidak ketat.
Urutan klausa yang ketat dan navigasi bersama dengan ol
Contoh navigasi populer yang urutan elemennya ketat adalah remah roti di situs web Mvideo.
Mengapa saya memanggil navigasi ini dengan urutan titik yang ketat? Jika Anda menukar item, navigasi tidak lagi sesuai dengan struktur situs. Misalnya, saya akan menukar item
"Rumah" dan "Ponsel cerdas dan komunikasi".
- Ponsel cerdas dan komunikasi
- utama
- Ponsel pintar
- iPhone
Kami mendapat kesalahan. Kami harus pergi ke halaman rumah dari halaman Smartphone dan Komunikasi, dan itu tidak mungkin. Berdasarkan ini, saya menyimpulkan bahwa urutan item itu penting, dan untuk daftar yang berisi urutan item yang ketat, kita harus menggunakan elemen ol.
Selain remah roti, penomoran halaman dapat dikaitkan dengan jenis navigasi ini.
Pemesanan barang longgar dan elemen nav bersama dengan ul
Contoh navigasi semacam itu adalah menu di situs web Mvideo.
Saya akan menukar item lagi. Misalnya, saya akan menambahkan item "Semua promosi" dan "Diskon hingga 80%" ke akhir daftar:
- Ponsel pintar
- set televisi
- Laptop
- Kulkas
- Mesin cuci
- Solusi cerdas
- apel
- Semua promosi
- Diskon hingga 80%
Oke, item ditampilkan dalam urutan berbeda, lalu apa? Navigasi berfungsi seperti sebelumnya. Ternyata mengubah urutan item tidak mempengaruhi navigasi, jadi elemen ul cocok disini.
Pengenalan konten dan elemen header
Ada pendapat di Internet bahwa elemen header harus digunakan untuk menandai "header" situs. Saya sama sekali tidak menyukai definisi ini, karena tidak sepenuhnya mencerminkan gambar.
Ya, kita dapat menggunakan elemen header untuk menandai "atas" situs, tetapi kita juga dapat menggunakannya di dalam bagian, artikel, utama, elemen samping.
Elemen header di dalam elemen utama, samping, bagian, dan artikel
Saat kita menyarangkan elemen header dalam elemen main, disamping, section, dan artikel, itu mulai menjelaskan informasi pengantar untuk elemen itu.
Misalnya, di situs Smashing Magazine, elemen header menjelaskan pengantar konten halaman utama, yang ditandai dengan elemen utama.
Elemen tersebut mengelompokkan judul dan teks pengantar "Artikel Menghancurkan yang Mempesona". Ini memberi kita pengantar ke artikel berikutnya.
Di bagian Kiriman Terkini di beranda Majalah Smashing, elemen tajuk dapat digunakan untuk menggabungkan tanggal, judul, dan penulis kiriman. Dalam hal ini, elemen header berada di dalam elemen artikel.
Di situs konferensi PiterCSS, elemen header dapat digunakan untuk menggabungkan judul dan teks sponsor di dalam elemen bagian.
Elemen header di dalam elemen body
Selain memperkenalkan elemen individu, kami dapat menandainya untuk seluruh situs secara keseluruhan. Untuk melakukan ini, kita perlu menumpuk elemen header di dalam elemen body.
Misalnya seperti di Smashing Magazine, di mana elemen header menggabungkan logo, navigasi, dan pencarian.
Secara umum, kita dapat menggunakan elemen header dengan aman saat kita perlu menandai "pengantar" ke konten dari elemen body atau elemen utama, samping, bagian, dan artikel.
Informasi latar belakang dan elemen footer
Tampaknya bagi saya elemen footer, sayangnya, adalah saudara dari elemen header. Jika yang kedua disarankan untuk digunakan untuk "header", maka yang pertama adalah untuk "basement".
Elemen footer cocok untuk menandai informasi latar belakang yang mengikuti konten elemen. Seperti elemen header, elemen footer dapat digunakan dengan beberapa cara.
Elemen footer di dalam artikel, samping, dan elemen bagian
Di situs tutsPlus, elemen footer mengelompokkan informasi tentang penulis, tanggal, dan kategori publikasi. Dalam hal ini, elemen footer berada di dalam elemen artikel.
Elemen footer di dalam elemen tubuh
Seperti yang saya katakan di atas, informasi latar belakang juga ada untuk situs secara keseluruhan. Dalam kasus ini, area ini harus diulangi di semua halaman.
Misalnya, di Smashing Magazine, elemen footer menampilkan hashtag, navigasi sekunder.
Informasi kontak dan elemen alamat
Menurut pengamatan saya, elemen ini adalah salah satu yang paling tidak digunakan, meskipun informasi kontak ada di setiap situs. Menggunakan elemen alamat, Anda dapat menandai alamat, nomor telepon, tautan ke sosial. jaringan, dll.
Misalnya, di situs web Mvideo, elemen alamat harus menandai blokir dengan telepon dan jejaring sosial.
Kesimpulan
Saya harap saya telah berhasil menunjukkan setidaknya sedikit variasi kasus di mana kita dapat menggunakan elemen HTML yang berbeda. Semoga Anda dapat mencoba menggunakan stensil ini dalam proyek Anda.
Jika Anda suka, silakan gunakan elemen alamat. Tampak bagi saya bahwa dia tidak pantas dilupakan. Juga bagi mereka yang ingin bertanya "Mengapa ini perlu?" Saya punya satu jawaban - keren.
PS: Saya juga menulis tutorial CSS / HTML di Patreon saya. Anda dapat menemukannya melalui tautan di profil saya di Habré.