Halo, teman-teman terkasih! Senang melihat Anda di blog saya! Hari ini kita akan membicarakannya validitas HTML di situs secara keseluruhan dan itu halaman terpisah. Validitas adalah kepatuhan kode standar tertentu. Konsorsium sedang mengerjakan pengembangan standar web Seluruh Dunia Web (W3C) adalah komunitas internasional yang terdiri dari organisasi, staf, dan publik.

Misi konsorsium adalah untuk mengeluarkan potensi penuhnya web di seluruh dunia, mengembangkan dan menerapkan protokol dan pedoman untuk memastikan pertumbuhan Internet dalam jangka panjang.

Website resmi W3C menyediakan tools online yang sangat berguna bagi para webmaster, salah satunya adalah validator - ini layanan gratis, yang memungkinkan Anda memeriksa kepatuhan situs terhadap standar web modern.

Sayangnya layanan ini seluruhnya dalam bahasa Inggris, namun jika Anda tahu sedikit tentang pengembangan dan tata letaknya, Anda pasti akan memahami esensi dan pesannya 😉

Jadi, di halaman utama ada tiga tab:

1. Validasi berdasarkan URI - memeriksa URL yang ditentukan;
2. Validasi dengan Unggah File - memeriksa file yang diunggah;
3. Validasi dengan Input Langsung - verifikasi dengan input langsung kode sumber.

Untuk meluncurkan penganalisis, Anda perlu beralih ke tab yang diperlukan; sebagai contoh, saya akan mempertimbangkan pemeriksaan berdasarkan URL. Tersembunyi di bawah tautan Opsi Lainnya opsi tambahan, klik untuk mengakses pengaturan:

• Pengkodean Karakter - pengkodean karakter. WordPress menggunakan UTF-8, tetapi Anda dapat membiarkannya nilai standar"Deteksi secara otomatis" untuk deteksi otomatis pengkodean.
• Tipe Dokumen - tipe dokumen (HTML, XHTML, SVG, dll.). Centang kotak Hanya jika hilang jika jenis dokumen tidak ditentukan pada halaman dan perlu ditentukan secara manual untuk verifikasi.
• Daftar Pesan Secara Berurutan - menampilkan kesalahan dan peringatan dalam daftar berurutan;
• Kelompokkan Pesan Kesalahan berdasarkan Jenis - mengelompokkan kesalahan dan peringatan berdasarkan jenis;
• Tampilkan Sumber - tampilkan kode sumber;
• Tampilkan Garis Besar - tunjukkan struktur dokumen;
• Bersihkan Markup dengan HTML Tidy - membersihkan markup menggunakan HTML-Tidy;
• Validasi halaman kesalahan - periksa halaman dengan kesalahan, misalnya kesalahan 404;
• Keluaran Verbose - keluaran verbose. Sejujurnya, saya tidak melihat perbedaan saat mengaktifkan opsi ini, jika Anda tahu fungsinya, bagikan di komentar, saya akan sangat berterima kasih.

Ketika semua pengaturan sudah diatur, tekan tombol Periksa untuk memulai validator HTML A. Jika dokumen tidak memiliki kesalahan, pesan berikut akan muncul:

Pemeriksaan dokumen selesai. Tidak ada kesalahan atau peringatan untuk ditampilkan.

Diterjemahkan ke dalam bahasa Rusia, artinya: “Verifikasi dokumen selesai. Tidak ada kesalahan atau peringatan yang ditemukan." Besar!

Kalau dokumennya tidak lolos verifikasi, kita lihat saja prasasti sederhana tentang penyelesaiannya:

Dan tentu saja, daftar pesan yang berisi informasi tentang kesalahan dan peringatan beserta penjelasannya, serta tautannya garis tertentu dokumen, tetapi hanya jika opsi Tampilkan Sumber diaktifkan.

Tangkapan layar di bawah ini menunjukkan bagian pemeriksaan halaman utama Yandex. Aneh melihat ini, saya bahkan tidak menyangka, karena Yandex sendiri mengambil bagian dalam pengembangan standar W3C... Ya, oh baiklah, sangat sulit untuk memenuhi semua standar secara mutlak, terutama untuk portal sebesar itu .

Pada awal perjalanannya, Blog Webmaster Gratis banyak sekali terdapat error dan peringatan. Saat saya belajar, saya berhasil mengurangi jumlahnya, dan seiring waktu, menghilangkan semuanya. Mulai sekarang saya akan mematuhi standar W3C, meskipun beberapa plugin menambahkan sedikit masalah... Waktu akan menjawabnya!

Jadi mengapa kita harus melakukannya kode yang valid? Validasi dokumen web - langkah penting, yang dapat sangat membantu meningkatkan dan memastikan kualitasnya, serta menghemat banyak waktu dan uang. Beberapa ahli berpendapat demikian kode yang benar mungkin mempunyai efek yang menguntungkan hasil pencarian! Uji situs Anda dan bagikan hasilnya!

Halaman semua situs web di Internet dirancang kode khusus, ditulis menurut aturan HTML standar.

Apa itu validitas?

Validasi adalah pemeriksaan kepatuhan terhadap standar yang ditetapkan, dan dalam konteks yang digunakan oleh webmaster, kebenaran kode halaman: kesalahan sintaksis, penumpukan tag, dll. Jika semuanya dilakukan "dengan benar", kode halaman tidak boleh berisi atribut, struktur, dan kesalahan yang salah. Validasi situs web memungkinkan Anda mengidentifikasi kekurangan yang perlu diperbaiki.

Validitas situs adalah kepatuhan kode standar yang ada HTML.

Anda dapat mengetahui apakah terdapat komentar atau kesalahan pada kode suatu halaman web baik secara online atau tanpa akses internet dan menggunakan program offline.

Apa itu validator kode

Validator kode adalah program yang dapat digunakan untuk memeriksa kode HTML halaman dan kode CSS untuk memenuhi standar modern.

Dia menemukan dan mencatat elemen yang salah, menunjukkan lokasinya dan merumuskan apa yang sebenarnya diformat secara salah.

“Tanda-tanda” dasar tata letak yang valid Tata letak yang valid berisi kode yang sepenuhnya sesuai dengan W3C (World Jaringan Luas

Konsorsium, yang mengembangkan standar teknologi untuk seluruh Internet.

Jika kode pada halaman situs benar, maka situs tersebut ditampilkan dengan benar (dan tidak bengkok) di semua browser.

Tidak ada kecurigaan adanya “penurunan peringkat” yang tidak adil dalam hasil pencarian dan tidak ada halaman yang dihapus dari indeks.

..

, Contoh. Jika, misalkan, tagnya salah

(khususnya, elemen penutup tidak ada), maka mesin pencari tidak akan memperbaiki apa pun - ia akan menafsirkannya seperti yang tertulis dalam kode hitam putih. Akibatnya, konsekuensi mungkin timbul terkait dengan promosi situs.

Apakah tata letak yang valid penting dalam promosi situs web?

Secara teori iya, namun dalam praktiknya ternyata banyak sekali situs yang error validasinya berada di urutan teratas, dan situs yang error umumnya bergerak dengan baik. Masalah promosi hanya dapat terjadi jika situs Anda tidak ditampilkan dengan benar di beberapa jenis perangkat atau di browser tertentu. Jika terlihat bagus, namun terdapat kesalahan validasi, hal ini tidak akan berdampak pada promosi.

Beberapa webmaster telah secara khusus meneliti masalah ini, mencoba mencari tahu apakah hasil pemeringkatan bergantung pada hasil validasi. Webmaster Mark Daost mencatat bahwa validitas kode tidaklah mendasar. Shaun Anderson, sebaliknya, sampai pada kesimpulan bahwa validitas ibarat balsem bagi jiwa sebuah situs dalam hal peringkat pencarian.

Pakar lainnya, Mike Davidson, juga melakukan eksperimen serupa dan sampai pada kesimpulan bahwa Google mengklasifikasikan halaman berdasarkan kualitas tulisannya. Misalnya, tag yang tidak ditutup dapat menyebabkan suatu konten dianggap sebagai nilai dari tag tersebut.

Webmaster ini menyampaikan poin yang sangat penting:

Tidak mungkin untuk mengatakan dengan pasti seberapa kuat peringkat bergantung pada validitas kode, tetapi dapat dipastikan bahwa kekurangan yang ada dapat menyebabkan halaman atau seluruh situs dihapus dari indeks mesin pencari.

Mengapa diperlukan kode yang valid?

Selain itu, sangat mungkin bahwa di satu browser situs Anda ditampilkan seperti yang Anda konfigurasikan, dan di browser lain - dengan cara yang sangat berbeda. Gambar mungkin miring dan kontennya mungkin tidak dapat dibaca sama sekali.

Akibatnya, Anda kehilangan lalu lintas dari browser ini. Di samping itu, faktor perilaku, yang merupakan salah satu dari tiga yang terbanyak faktor penting dalam SEO, secara signifikan mempengaruhi hasil pencarian.

Bayangkan pengunjung datang ke situs Anda dan segera menutupnya karena ketidakmampuan untuk melihat informasi - karena kesalahan dalam kode. Atau mereka umumnya kembali lagi ke mesin pencari karena solusi belum ditemukan. Semua ini akan merugikan, karena pada akhirnya faktor perilaku akan mengubah posisi situs menjadi lebih buruk.

Cara memeriksa validitas situs

Untuk memeriksa integritas kode, mereka paling sering menggunakan situs validator yang sangat berguna “Layanan Validasi Markup”, yang terletak di: http://validator.w3.org, dibuat oleh W3C.

HTML

Di sini Anda memiliki tiga opsi validasi:

• masukkan URL halaman;
• unggah file kode dari komputer Anda;
• menyisipkan kode siap menjadi bentuk.

Layanan ini tidak hanya menunjukkan kesalahan kode html dan lokasinya, namun juga memberikan nasihat mengenai koreksinya. Jika kode sudah tersedia di Web, maka Anda dapat memvalidasinya dengan memasukkan URL-nya ke formulir “Validasi berdasarkan URL” dan mengklik tombol Periksa. Validator HTML akan mengaktifkan pembacaan kode dan melaporkan hasilnya.

Anda harus memasukkan URL persis dari halaman URL yang Anda periksa. Seluruh situs tidak akan diperiksa. Masukkan alamat situs web - hanya alamat itu yang dipertimbangkan oleh program halaman rumah. Jika ada komentar yang ditemukan, pemberitahuan ketidakabsahan akan dikeluarkan. kode program dan kemudian garis dengan kesalahan ditunjukkan.

Video ini menjelaskan dengan jelas proses verifikasi menggunakan validator:

Memeriksa file lokal

Di alamat yang sama http://validator.w3.org Anda dapat memeriksa kode dengan memilih tab “Validate by File Upload” dan mengunggah dokumen dengan kode tertulis.

Memilih jalan menuju berkas yang diperlukan dan klik Periksa. Kemudian semuanya terjadi dengan cara yang sama.

Menggunakan formulir untuk memasukkan kode

Terkadang lebih mudah untuk segera memasukkan kode halaman dan memeriksanya secara online: pilih tab “Validasi dengan Input Langsung” dan kirim semua kode ke server.

CSS

Validitas kode CSS juga dapat diperiksa menggunakan validator online: https://jigsaw.w3.org/css-validator/

Segala sesuatu di sini dalam bahasa Rusia, bagi banyak orang ini adalah kejutan yang sangat menyenangkan.

Sekali lagi, Anda dapat memilih untuk memasukkan URL, mengunggah file, atau menempelkan kode.

Situs diperiksa kesalahannya, seperti dalam kasus HTML, dan kami menerima respons dari server. Tidak ada pengaturan verifikasi, tetapi Anda dapat memeriksa kode valid yang dihasilkan yang disarankan yang terletak setelah daftar kelemahan kode.

Kami mempelajari kode yang dihasilkan dan membawa yang asli ke bentuk yang diinginkan.

Ekstensi peramban

Ada berbagai macam ekstensi validasi untuk browser. Untuk Google Chrome Ada plugin yang memeriksa validitas kode: HTML Tidy Browser Extension, untuk Opera - ekstensi Validator, untuk Safari - Zappatic, untuk Firefor - HTML Validator.

Mari kita lihat yang terakhir lebih terinci. Ia melakukan verifikasi yang sama seperti validator, hanya offline. Anda bisa mendapatkannya di sini http://users.skynet.be/mgueury/mozilla/

Instal ekstensi, mulai ulang browser - dan Anda dapat segera mulai bekerja. Jika Anda memiliki masalah dengan instalasi, Anda dapat menulis ke dukungan Mozilla Firefox atau jelajahi forum http://forum.mozilla-russia.org/doku.php?id=general:extensions_installing

Video detail tentang menginstal HTML Validator dan kegunaannya:

Saat memuat URL apa pun, ekstensi secara otomatis diaktifkan dan membaca kodenya. Hasilnya terlihat di pojok kanan atas.

Hasilnya seperti gambar kecil dengan hasil validasi:

Dengan mengklik hasilnya, Anda dapat membuka:
— kode sumber;
— kesalahan - di blok kiri bawah (atau pesan tentang validitas);
— tips untuk memperbaiki kesalahan ada di kanan bawah.

Cara memperbaiki kesalahan paling umum

Tidak peduli bagaimana kode diperiksa, kesalahan muncul dalam daftar. Garis yang cacat juga harus ditunjukkan.

Sebelum mengedit kode, untuk berjaga-jaga, Anda harus melakukannya salinan cadangan templat situs web.

Di ekstensi Firefox, ketika Anda mengklik nama kesalahan di jendela ekstensi yang terbuka, Anda secara otomatis diarahkan ke baris dengan kode yang tidak valid.

Kesalahan yang sama ini berisi tip tentang cara memperbaikinya.
Izinkan saya memberi Anda beberapa contoh.

1. Tidak ada spasi antar atribut.
…rel=”ikon pintasan” href=”http://arbero.ru/favicon.ico” type=”image/x-icon”

Di sini koreksinya adalah menghilangkan “titik koma”.

2. Tag akhir untuk elemen “div” yang tidak terbuka

Tag div penutup berlebihan. Mari kita hapus.

Anda tidak mengetahuinya dengan baik bahasa Inggris(dan semuanya selalu dijelaskan di sana)? Salin kode kesalahan dan tempel ke mesin pencari. Topik serupa mungkin telah dijelaskan oleh beberapa webmaster atau perancang tata letak, oleh karena itu, Anda akan selalu menemukan cara untuk menyelesaikan masalah pada sumber daya khusus.

Meskipun, sejujurnya, saya tidak akan berusaha keras untuk memperbaiki bug dalam kode. Lebih baik pastikan saja situs tersebut terlihat benar di semua perangkat dan browser.

Halo. Saya akan segera menjawab pertanyaan Anda: apakah pelajaran ini layak dibacakan untuk Anda? Buka layanan yang sangat berguna dan gratis, masukkan alamat situs Anda di sana dan jika Anda melihat ada kesalahan di situs Anda, maka pelajaran ini layak untuk dibaca. Contoh menampilkan error menggunakan validator online ini:

Tidak ada di blog saya saat ini kesalahan serupa, saya menyingkirkannya (total ada lebih dari 70 kesalahan dan lebih dari 80 peringatan). Untuk memperjelas, saya akan memberi tahu Anda apa itu kode yang valid dan mengapa kami membutuhkannya.

Kode yang valid adalah kode yang memenuhi standar.

Anda dapat memeriksa HTML, CSS, semua jenis markup mikro, dan lainnya untuk validitas. Hari ini saya akan membicarakannya validitas dalam HTML.

• Kode yang valid tidak diperlukan, namun jumlah kesalahan harus minimal, jika tidak, situs Anda tidak akan kompatibel lintas-browser. Validitas kode diperlukan terutama untuk memastikan situs Anda ditampilkan dengan benar di semua browser.
• Robot pencari "berbicara" dengan situs Anda bahasa HTML, jadi penting untuk menyajikan konten di situs dengan jelas dan jelas dengan semua “tag tertutup” dan seterusnya.
• Validitas HTML memang mempengaruhi SEO, tetapi hanya sedikit (kecuali, tentu saja, Anda memiliki ratusan atau bahkan ribuan kesalahan). Saya sarankan membacanya pengamatan yang menarik Devaki "Dampak Kualitas HTML pada Peringkatnya".
• Ketika saya membuat kode valid di situs saya, saya menemukan dan memperbaiki kesalahan bodoh saya (tag berulang, huruf hilang, dll.).
• Anda tidak boleh “menghancurkan” jika ada kesalahan yang sulit diperbaiki, atau koreksinya akan merusak fungsionalitas situs. Yang utama adalah membuatnya nyaman bagi pengguna.

Di bawah ini saya akan melihat kesalahan utama yang ditunjukkan oleh validator. Jika tiba-tiba kesalahan Anda tidak ada dalam daftar di bawah, tulis di komentar, kami akan mencoba mencari tahu bersama dan saya akan menambahkan solusi untuk masalah ini di pelajaran ini. Omong-omong, ya, kesalahan yang ditunjukkan oleh validator w3c dapat ditemukan di sini:

Setiap kesalahan memiliki petunjuk - ini adalah nomor baris dalam kode sumber halaman, dan dari situ Anda sudah dapat menentukan kira-kira di file mana tema tersebut berada. garis yang diberikan. Kami melihat kode sumber halaman menggunakan CTRL+U (di browser utama).

Sebelum memulai, buat salinan cadangan templat situs web Anda.

Selain itu, untuk memudahkan menemukan kesalahan pada kode sumber, Anda dapat menggunakan validator HTML untuk Mozilla Firefox. Setelah menginstalnya dan membuka kode sumber halaman, Anda akan melihat kesalahan yang sama seperti yang ditunjukkan oleh layanan validator.w3.org. Dengan mengklik nama kesalahan (di pojok kiri bawah), Anda secara otomatis akan diarahkan ke baris tempat kode tidak valid ini berada.

Menemukan kesalahan dalam HTML menggunakan validator w3c dan memperbaikinya

Cari kesalahan Anda dalam daftar di bawah dan klik kesalahan tersebut, maka secara otomatis akan “menggulir” Anda ke tempat yang tepat.

1. Tidak ada spasi antar atribut.

…rel="ikon pintasan" href="http://arbero.ru/favicon.ico" ;

type="image/x-icon" Hapus saja titik koma.

2. Atribut lebar pada elemen td sudah usang. Gunakan CSS sebagai gantinya.

td valign="pusat" lebar="80" tinggi="80" >

Mari kita ubah sesuatu seperti ini ke dalam bentuk

td style="align:center; lebar:80; tinggi: 80;">

3. Elemen img harus memiliki atribut alt, kecuali dalam kondisi tertentu. Untuk detailnya, lihat panduan tentang penyediaan alternatif teks untuk gambar. Salah satu yang paling banyak kesalahan umum

. Teks alternatif untuk gambar tidak cukup. Kami menulis tag alt.

4. Bagian tidak memiliki judul. Pertimbangkan untuk menggunakan elemen h2-h6 untuk menambahkan judul pengenal ke semua bagian.

bagian id="komentar" >

Blok bagian harus berisi beberapa tag h2-h6, jika tidak, ganti saja nama bagian kata menjadi div

5. Elemen hgroup sudah usang. Untuk menandai subjudul, pertimbangkan untuk memasukkan subjudul ke dalam elemen p setelah elemen h1-h6 yang berisi judul utama,

atau menempatkan subjudul langsung di dalam elemen h1-h6 yang berisi judul utama, tetapi dipisahkan dari judul utama dengan tanda baca dan/atau di dalam, misalnya, elemen span class="subheading" dengan gaya yang berbeda. Untuk mengelompokkan judul dan subjudul, judul alternatif, atau tagline, pertimbangkan untuk menggunakan elemen header atau div. Mirip dengan poin sebelumnya. Ubah saja frasa hgroup menjadi div. Anda dapat menggunakan alat Temukan/Ganti Semua di editor teks

untuk mempercepat proses tersebut.

6. Elemen "noindex" tidak terdefinisi Ke tag noindex

sudah valid, kita tuliskan dalam bentuk komentar, yaitu seperti ini:

Tidak dapat diindeks

Tag div penutup berlebihan. Mari kita hapus.

7. Tag akhir untuk elemen "div" yang tidak terbuka

8. Jenis dokumen tidak mengizinkan elemen "li" di sini; hilang salah satu tag awal "ul", "ol", "menu", "dir".

Penggunaan tag "li" yang salah: tag "ul", "ol", dll. hilang. Periksa.

9. Tag akhir untuk "div" dihilangkan, tetapi OMITTAG NO telah ditentukan

10. Tidak ada atribut "border"

alt="" lebar="1" tinggi="1" perbatasan=" 0"/>

Kami cukup menghapus frase border = "0".

11.Karakter"<" is the first character of a delimiter but occurred as data

Jangan gunakan tag "<" перед обычными словами, используйте лучше разные кавычки.

12. Melihat " saat mengharapkan nama atribut. Kemungkinan penyebab: = hilang sesaat sebelumnya.

Kutipan tambahan, hapus.

13. Atribut align pada elemen img sudah usang. Gunakan CSS sebagai gantinya.

Jangan gunakan nilai align di dalam tag img. Tuliskan secara terpisah, dalam bentuk ini:

ini gambarnya (img src)

14. Nilai buruk untuk atribut href pada tautan elemen: Karakter ilegal di segmen jalur: bukan titik kode URL.

Kesimpulan

Jika Anda memiliki kesalahan pada situs web Anda yang tidak ada dalam daftar ini, tulislah di komentar. Mari kita cari tahu, dan saya akan menambahkan artikelnya. Saya ulangi, jika ada kesalahan yang tidak dapat diperbaiki, jangan repot-repot.

Saya masih memiliki kesalahan di blog saya (walaupun kemarin karena alasan tertentu kodenya tidak ada kesalahan):

Konten teks skrip elemen tidak dalam format yang diperlukan: Spasi, tab, baris baru, atau garis miring yang diharapkan tetapi ditemukan< instead.

Jika Anda tahu cara memperbaikinya, saya akan berterima kasih. Saya sedikit perfeksionis. 🙂

Apakah Anda akan membuat kode HTML situs tersebut valid?

Saya berharap Anda menerima kode HTML yang valid di situs Anda, pemberitahuannya terlihat seperti ini:

hal. Apakah Anda sering membebani tubuh Anda secara berlebihan? Maka Anda memerlukan program detoksifikasi. Mengembalikan kekuatan dan keseimbangan energi.