Saya melihat bagaimana Anda bisa menggunakan CSS dengan tag span atau p untuk berpura-pura menjadi tag hx, tapi bagaimana Anda menggunakan CSS untuk mendesain teks tanpa tag p atau span?
joshuahedlund
Respons setengah-snarky, setengah-serius adalah: coba lakukan tanpa mereka. Gunakan <span>untuk semuanya dan lihat apakah Anda dapat mencapai apa yang Anda inginkan dengan CSS saja. Anda mungkin akan belajar banyak dari mencoba menargetkan rentang yang tepat dan membuatnya berperilaku seperti elemen lain. (Meskipun pelajaran yang paling mungkin adalah "jangan lakukan itu.")
Nathan Long
Jawaban:
67
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.
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.
"Mengapa kita harus memiliki dinding ketika kita memiliki cat?" ~ Itu pertanyaan yang bagus? Terima kasih!
Evik James
Saya pikir nama tag adalah bagian membingungkan dari markup - H1, H2 dll dapat digunakan oleh pembaca layar serta orang-orang yang melihatnya. Karena itu, 99% dari dunia akan melihat halaman, dan karena itu sebanyak para pecinta SEO kesal, tag H adalah penanda visual, seperti yang <b>berani sekali.
Chris S
@ Chris - Saya pikir itu tidak membingungkan. Tag selalu dimaksudkan untuk dibaca oleh mesin; itu termasuk browser seperti halnya pembaca layar. Dan tidak, <h1>sebenarnya bukan penanda visual. Sebagian besar browser akan menampilkannya besar dan tebal jika tidak diberitahukan sebaliknya, tetapi gaya halaman, atau preferensi pengguna, dapat mengesampingkan hal itu. <h1>adalah indikator makna: 'ini adalah judul utama saya.' Jika situs atau pengguna ingin tajuk utama kecil dan oranye, itulah yang akan mereka lihat.
Nathan Long
1
"sama seperti <b> artinya berani sekali" - apakah seseorang mengubah arti <b>tanpa memberi tahu saya? Itu masih berarti berani bukan? Tentu saja, saya lebih suka tag semantik, <em>dan <strong>...
ghoppe
13
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.
@ user606723 bagian mana? Paragraf pertama adalah pengetahuan dasar SEO, dan disebutkan dalam panduan SEO Google sendiri (PDF). Saya tidak tahu apakah tabelnya didokumentasikan di mana saja, tetapi saya telah melihatnya beberapa kali dalam hasil pencarian - mereka mencantumkan 2-4 baris dari tabel di halaman target.
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.
Tidak. <b> dan <i> sudah usang. Jika Anda ingin teks Anda terlihat baut / miring, gunakan CSS. Jika Anda ingin menyampaikan arti teks tebal / miring, gunakan <strong> dan <em>.
Mircea Chirea
4
@iconiK Sudah usang oleh siapa? Pemahaman saya juga bahwa itu "tidak digunakan lagi" dalam standar HTML5. Dan untuk alasan yang baik - ada banyak penggunaan miring tradisional selain penekanan [misalnya, judul buku atau kata-kata asing] - memiliki tag untuk "italic" secara eksplisit [daripada tag semantik] tidak ada bedanya dengan langsung memasukkan huruf kapital dan tanda baca. Jika Anda ingin menggunakan <span class="proper-name"><span class="question-sentence">, ...
Random832
1
itu tidak digunakan lagi karena HTML seharusnya tidak mendefinisikan format presentasi sama sekali. Itulah alasan kami menulis css ke dalam file css (dan bukan inline) sehingga kami memiliki gaya yang berbeda untuk manusia, printer, pembaca layar, ponsel, pembaca ebook dll., Pembaca safari dll.
sod
3
Aku tidak bertanya mengapa itu sudah usang, aku menantang pernyataan bahwa itu sudah ditinggalkan sama sekali. Dan tidak jelas mengapa huruf miring lebih dari "format presentasi" daripada huruf kapital dan tanda baca. Itu bagian dari konten.
Random832
2
@iconiK, "praktis sudah usang" tidak ada hubungannya dengan pernyataan apakah sesuatu sudah usang atau tidak. Mengingat bahwa mereka disediakan dalam spesifikasi HTML5 dan sama sekali tidak terdaftar sebagai usang , saya akan <strong> menyatakan bahwa mereka tidak ditinggalkan.
zzzzBov
1
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.)
<span>untuk semuanya dan lihat apakah Anda dapat mencapai apa yang Anda inginkan dengan CSS saja. Anda mungkin akan belajar banyak dari mencoba menargetkan rentang yang tepat dan membuatnya berperilaku seperti elemen lain. (Meskipun pelajaran yang paling mungkin adalah "jangan lakukan itu.")Jawaban:
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.sumber
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.sumber
<b>berani sekali.<h1>sebenarnya bukan penanda visual. Sebagian besar browser akan menampilkannya besar dan tebal jika tidak diberitahukan sebaliknya, tetapi gaya halaman, atau preferensi pengguna, dapat mengesampingkan hal itu.<h1>adalah indikator makna: 'ini adalah judul utama saya.' Jika situs atau pengguna ingin tajuk utama kecil dan oranye, itulah yang akan mereka lihat.<b>tanpa memberi tahu saya? Itu masih berarti berani bukan? Tentu saja, saya lebih suka tag semantik,<em>dan<strong>...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.
sumber
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.
sumber
Untuk HTML5, periksa huruf tebal dan miring dalam HTML5 .
Ringkasan:
sumber
<span class="proper-name"><span class="question-sentence">, ...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.
sumber
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.)sumber