Metode 1: Apakah ini masuk akal?
<span class="heading">Judul artikel</span>
Meskipun <span> dapat menjadi tag yang berguna dalam beberapa situasi, tag tersebut tidak menyampaikan arti judul secara utuh. Salah satu keuntungan menggunakan metode ini adalah kita dapat melampirkan aturan CSS ke dalamnya dan menetapkan kelas judul untuk membuat teksnya tampak seperti judul.
.menuju {
ukuran font: 24px;
berat font: tebal;
warna: biru;
}
Oke, sekarang semua judul ditandai dengan kelas judul dengan font tebal besar dan berwarna biru. menakjubkan! Namun apakah ini tindakan yang benar? Apa yang terjadi jika seseorang melihatnya dengan browser yang tidak mendukung CSS?
Misalnya, apa yang terjadi jika aturan style sheet eksternal yang kita tetapkan tidak didukung oleh browser versi lama? Atau bagaimana jika seseorang dengan gangguan penglihatan menggunakan pembaca layar untuk membaca halaman ini? Apa yang dilihat (atau didengar) pengunjung melalui cara ini seharusnya tidak berbeda dengan teks biasa di halaman.
Meskipun class="heading" menambahkan sedikit arti pada tag, <span> masih merupakan tag biasa yang dapat dimodifikasi dengan gaya default sebagian besar browser.
Mesin pencari akan mengabaikan tag <span> ketika merayapi halaman ini, seolah-olah halaman ini tidak ada, dan tidak akan memberikan perhatian ekstra pada kata kunci yang mungkin ada di dalamnya. Kami akan berbicara lebih banyak tentang hubungan antara mesin pencari dan judul nanti.
Terakhir, karena tag <span> adalah elemen sebaris, kita mungkin perlu menumpuknya di dalam elemen tingkat blok tambahan, seperti tag <p> atau tag <div>, untuk membuatnya membentuk baris terpisah , yang selanjutnya akan mengacaukan tag Anda dengan kode yang tidak diperlukan. Tag tambahan ini diperlukan agar browser yang tidak mendukung CSS dapat menampilkan teks yang sama.
Metode 2: Kombinasi <p> dan <b>
<p><b>Judul artikel</b></p>
Menggunakan tag paragraf akan memberi kita tampilan tingkat blok, dan <b> akan membuat teks menjadi tebal. Namun ketika menggunakan metode ini untuk menandai sebuah gelar penting, kita dihadapkan pada hasil yang sama tidak berartinya.
Berbeda dengan metode A, tag <b> dapat membuat teks menjadi tebal di browser visual—bahkan di browser yang tidak mendukung CSS. Namun seperti tag <span>, mesin pencari tidak akan memberikan prioritas lebih tinggi hanya karena ada sesuatu yang dicetak tebal dalam sebuah paragraf.
Sulit untuk ditata
Penggunaan kombinasi <p> dan <b> yang biasa juga memiliki kelemahan lain - tidak mungkin mendesain judul ini berbeda dari paragraf lainnya. Kita mungkin ingin menggunakan gaya khusus untuk menyorot judul agar konten halaman lebih jelas dan terstruktur, namun cara ini hanya dapat membuatnya tampak tebal.
Metode 3: Gaya plus substansi
<h1>Judul artikel</h1>
Ya, definisi judul yang bagus. Sebagian besar desainer web sudah familiar dengannya. Faktanya, bila digunakan dengan tepat, <Hn> dapat menyediakan struktur konten halaman yang fleksibel, dapat diindeks, dan dapat ditata.
Ini juga merupakan cara cerdas untuk mendefinisikannya, dan Anda akan menemukannya cukup sederhana. Tidak diperlukan tag tambahan lagi, dan Anda dapat berargumentasi bahwa ini hanya menghemat sedikit lebih banyak byte dibandingkan dua metode lainnya, yang dapat diabaikan, namun penghematannya berarti.
<h1> hingga <h6> mewakili enam tingkat judul, dari yang paling penting (<h1>) hingga yang paling tidak penting (<h6>). Mereka sendiri merupakan tingkat blok dan tidak memerlukan penambahan elemen lain untuk menyusunnya satu per satu. Sederhana, efektif – hanya alat yang hebat.
Sesuaikan gaya dengan mudah
Karena kita menggunakan tag <h1> secara unik, dan tag <b> atau <p> lebih cocok digunakan di seluruh halaman, kita dapat menggunakan berbagai metode CSS untuk menatanya.
Terlebih lagi, tag judul dapat dengan jelas menunjukkan judul, bahkan tanpa memerlukan penataan gaya sama sekali! Browser visual menampilkan <h1> dalam font tebal yang lebih besar. Halaman tanpa gaya akan menampilkan struktur dokumen seperti yang diharapkan, dengan tag judul yang sesuai untuk menyampaikan makna.
Pembaca layar, PDA, ponsel, dan browser visual dan non-visual semuanya akan mengetahui apa yang harus dilakukan ketika mereka menemukan tag judul, menanganinya dengan benar, dan memperlakukannya dengan lebih serius daripada teks biasa di halaman. Dengan tag <span>, browser yang tidak mendukung CSS tidak akan memperlakukannya secara khusus.
Gaya default yang mengganggu
Di masa lalu, desainer mungkin menghindari penggunaan tag judul sepenuhnya karena default browser sangat jelek. Atau, hindari penggunaan <h1> atau <h2> karena ukuran defaultnya yang besar, dan sebagai gantinya gunakan tag judul dengan nomor lebih tinggi untuk mencapai ukuran yang lebih kecil.
Namun, penting untuk ditekankan bahwa kita dapat dengan mudah mengubah tag judul ini menggunakan CSS - misalnya, < ;h1> tidak harus berupa tag raksasa yang menempati separuh layar. Nanti, saya akan menunjukkan betapa sederhananya menata tag judul dengan CSS, semoga dapat mengurangi beberapa ketakutan Anda yang luar biasa.
ramah mesin pencari
Ini adalah manfaat yang sangat besar. Mesin pencari menyukai tag judul. Di sisi lain, tag <span> atau tag paragraf tebal biasa memiliki arti yang kurang. Menandai judul Anda dengan tepat dengan <h1> hingga <h6> hanya memerlukan sedikit usaha dari Anda, namun membuat laman Anda lebih mudah dirayapi oleh mesin telusur, sehingga orang pada akhirnya dapat menemukannya.
Bot mesin pencari akan memberikan perhatian khusus pada tag judul – di sinilah Anda dapat memasukkan beberapa kata kunci. Sama seperti <title> dan <meta> yang diambil, mereka akan mencari di halaman sepanjang tag judul. Jika Anda tidak menggunakan tag ini, kata kunci yang terkandung di dalamnya tidak akan dianggap berharga dan akan diabaikan.
Jadi hanya dengan sedikit usaha, Anda dapat meningkatkan kemungkinan orang menemukan situs Anda berdasarkan konten di halaman Anda. Kedengarannya bagus, bukan?
Tentang urutan judul
Dalam contoh ini, judul khusus ini adalah yang paling penting pada halaman karena merupakan judul dokumen. Oleh karena itu, kami menggunakan tag judul yang paling penting, <h1>. Mengikuti spesifikasi W3C, beberapa orang berpikir bahwa melewatkan beberapa level heading adalah praktik yang buruk. Misalnya saja kita berada di halaman berikut:
<h1>Judul artikel</h1>
Judul berikutnya (jika tidak diulang dengan <h1> lainnya) adalah <h2>, lalu <h3>, dan seterusnya. Anda mungkin sebaiknya tidak melewati satu level setelah <h1> dan langsung menuju ke <h3>. Saya cenderung setuju dengan sudut pandang di atas, dan menjaga kesinambungan level di sepanjang teks untuk membangun struktur tata letak. Dengan cara ini, lebih mudah untuk menambahkan judul dan gaya ke halaman yang sudah ada, dan Anda akan mengurangi kesalahan yang disebabkan oleh penggunaan nomor tambahan.
Seperti disebutkan sebelumnya, desainer dapat menggunakan <h4> untuk menandai judul paling penting pada halaman hanya karena ukuran font defaultnya tidak terlalu besar seperti <h1>. Tapi ingat, struktur dulu, baru desain. Kita selalu dapat menggunakan CSS untuk menata judul ke ukuran teks apa pun yang kita suka.