Mengapa kita harus menggunakan tag seperti p, span, tag hx ketika kita dapat menggunakan CSS?

Mengapa kita harus menggunakan tag seperti p, span, tag hx ketika kita dapat menggunakan CSS? Apakah ini penting dari sudut pandang SEO?

Versi singkatnya adalah bahwa berbagai tag dan CSS memiliki tujuan yang berbeda.

<h1>Whatever</h1>, misalnya, membawa sejumlah makna bersama dengan penggunaannya: "Ini adalah header, yang penting-tingkat pertama" dan seterusnya. Beberapa parser juga menggunakan tag hx (dan lain-lain) untuk membuat garis besar struktur dokumen yang dapat digunakan untuk apa pun mulai dari pemrosesan data hingga aksesibilitas (mis., Pembaca layar melompat ke pertanyaan berikutnya di beranda webmaster dengan melompat ke h3 berikutnya) .

Anda tidak dapat mengabaikan tag semantik berdasarkan apa yang dapat Anda lakukan dengan CSS, dan sebaliknya.
Anda dapat menerapkan CSS ke tag lain untuk membuatnya terlihat sama dengan h1, misalnya: <span style="font-weight:bold;font-size:2em">Whatever</span>tetapi itu masih tidak membuat tag rentang itu header yang sebenarnya dalam hal fungsi dan semantik. Dalam hal ini, garis besar yang saya tautkan di atas akan sangat tidak mungkin karena rentang itu bukan header, tetapi hanya beberapa teks yang Anda buat secara besar-besaran menjadi tebal dan tebal.

Markup dan presentasi berbeda

Ini agak seperti bertanya "mengapa kita harus memiliki dinding ketika kita memiliki cat?" :)

Tag HTML menunjukkan konten Anda - ini adalah informasi utama, ini daftar, dll.

CSS menunjukkan seperti apa konten Anda - berita utama harus berwarna biru, daftar harus diindentasi sebanyak ini, menu harus di sebelah kiri, dll.

Javsascript memberi tahu bagaimana perilaku halaman Anda - animasi, dll.

Jadi, tanpa konten HTML, CSS dan Javascript benar-benar tidak punya apa-apa untuk dikerjakan.

Kategori-kategori ini bukan 100% hitam dan putih - misalnya, CSS dapat menentukan "transisi" sekarang, yang merupakan animasi - tetapi mereka adalah ide dasar.

Silakan lihat diskusi sebelumnya tentang topik ini di StackOverflow di sini dan di sini .

Markup yang baik menghemat banyak upaya dan bekerja lebih baik

Jika Anda ingin sesuatu berperilaku seperti tautan, Anda dapat menggunakan <span class="mylink">dan menggunakan banyak CSS dan JS untuk membuatnya terlihat dan terasa benar. Atau Anda bisa menggunakan <a>elemen dan mendapatkan semuanya secara gratis, tanpa kode tambahan untuk diunduh, karena browser sudah tahu apa yang harus dilakukan dan logika diimplementasikan dalam kode asli yang cepat. Plus itu jauh lebih mungkin untuk bekerja dengan benar untuk pembaca layar, peramban seluler, mesin pencari, agregator, dan kasus penggunaan lain yang tidak Anda pikirkan.

Ini juga mengapa Anda harus menggunakan <button>tindakan untuk diklik, a <label>untuk memberi label <input>, dan <main>untuk bagian utama halaman Anda.

Seberapa baik dampak markup SEO

Pada dasarnya, SEO adalah tentang meyakinkan mesin pencari bahwa konten Anda paling cocok untuk istilah pencarian. Jelas, tidak ada seorang pun di Google yang secara pribadi membaca setiap halaman web dan memeringkatnya.

Oleh karena itu, agar mesin pencari mengetahui konten Anda, sebuah program harus menguraikannya.

Dan hei, lihat! Kami memiliki seluruh bahasa yang disebut HTML ini yang dimaksudkan untuk memberi label konten Anda dengan cara yang dapat dimengerti mesin! :)

Jadi ya, hapus markup akan membantu mesin pencari mengindeks halaman Anda dengan lebih baik.

Untuk menggunakan contoh ekstrem, jika tajuk halaman Anda sebenarnya adalah sebuah foto yang Anda ambil dari tajuk berita, itu mungkin terlihat menarik, dan orang-orang dapat membacanya dengan baik, tetapi bagi mesin pencari, itu hanya akan menjadi gambar tanpa makna . Padahal <h1>Turtle Groomer 5000</h1>dengan jelas memberi tahu mesin pencari bahwa Anda memiliki produk yang memfasilitasi kebersihan testitudinal.

Tolong juga pikirkan tentang orang-orang dengan gangguan yang (sebagai contoh) harus menggunakan pembaca braille. Dalam kasus seperti itu, tag html jauh lebih penting daripada gaya visual css.

Su menjawab bagian semantik. Sehubungan dengan SEO, Anda akan menemukan bahwa elemen h1 diberi bobot lebih oleh mesin pencari daripada tag lainnya. Tag h2 / b / strong diberikan sedikit lebih berat daripada teks biasa.

Kebanyakan tag lain hampir sama, tetapi Anda harus selalu menggunakan tag yang paling tepat untuk pekerjaan itu. Google baru-baru ini mulai mengurai tabel ketika digunakan untuk data tabular, dan HTML lain yang digunakan dengan tepat dapat memberikan sinyal ke konten mana yang lebih penting daripada yang lain.

Untuk HTML5, periksa huruf tebal dan miring dalam HTML5 .

Ringkasan:

Gunakan <b>ketika Anda ingin teks memiliki gaya yang berbeda tanpa kepentingan kontekstual, tetapi gunakan <strong>ketika Anda ingin teks memiliki kepentingan ekstra dari konten atau perspektif SEO.

Gunakan <i>untuk mengimbangi mood teks, tetapi gunakan <em>untuk membuat teks empatik.

Juga: jangan lupa pentingnya semantik bagi pengguna dengan disabilitas. Perangkat lunak screenreader tergantung pada semantik ini untuk menghadirkan kepada orang buta konteks yang mereka lewatkan karena ketidakmampuan mereka.

Pertama, <hx>ini adalah tag yang agak penting, karena mendefinisikan judul, seperti yang telah disebutkan orang lain. Judul sangat berguna bukan hanya untuk penampilan, tetapi karena mereka memisahkan bagian dengan cara yang tidak mirip. Lihatlah Wikipedia misalnya. Beberapa program bergantung pada jenis tag ini untuk "memisahkan" dokumen atau bahkan membuat daftar isi otomatis. Mesin pencari akan menganggap bahwa teks di dalam <h1>tag akan lebih penting karena itu adalah judul - judul.

Selanjutnya, walaupun stylesheet sangat bagus, beberapa perangkat akan mengabaikan stylesheet dan hanya fokus pada HTML, yang mana tag seperti <em>berguna. Jika stylesheet dinonaktifkan atau ada masalah saat memuatnya (mis., Masalah koneksi internet), teks tersebut masih tampak diformat. <em>bisa juga mengatakan bahwa seharusnya ada penekanan pada kata tersebut, sedangkan huruf miring saja dapat berupa apa saja dari judul film hingga hanya membuat keterangan gambar berbeda dari teks biasa. Ini dapat digunakan oleh mereka yang menggunakan alat-alat disabilitas, yang sebaliknya gagal menangkap penekanan secara umum.

<span>, di sisi lain, sebagian besar merupakan versi inline dari <div>tag, dan jika ada, itu hanya dapat menyelamatkan Anda dari keharusan mengetikkan kelas tambahan di (dengan itu dikatakan, apakah Anda benar-benar ingin menggunakan <span class="italic">alih-alih <i>untuk setiap contoh miring Anda memilikinya? Itu membuat kode lebih sulit dibaca, kurang terstandarisasi (di bawah asumsi luas bahwa mayoritas orang akan menggunakan yang terakhir daripada yang sebelumnya), dan tidak dengan cara apa pun meningkatkan dokumen.

<p>juga sangat berguna bagi mereka penyandang cacat, karena memastikan teks dapat dipecah menjadi paragraf yang dapat dikelola dengan cara yang <br />tidak bisa.

Tentu, kita dapat mengatakan bahwa HTML tidak dimaksudkan untuk penataan, tetapi ada garis tipis antara desain dan gaya; dan terus terang, saya akan menganggap itu sebagai preferensi pengguna. Apakah Anda menggunakan <i>atau <span class="italic">, itu terserah Anda, dan tidak akan membuat perbedaan untuk SEO. Lagi pula, mengapa membatasi kita hanya pada satu cara melakukan sesuatu? (seperti bagaimana kita dapat memilih untuk menggunakan titik koma atau tidak di akhir baris dalam JavaScript - saya selalu menggunakannya, sementara yang lain tidak pernah menggunakannya, dan tidak ada bedanya untuk fungsi sama sekali.)