Mengapa orang repot-repot menandai dengan benar dan semantik?

_{Perhatikan bahwa saya (mencoba) untuk menandai semantik mungkin karena saya suka cara mereka terlihat dan terasa, tetapi bukan karena saya menyadari ada keuntungan lain yang menakjubkan. Inti dari pertanyaan saya adalah untuk dapat mendidik orang lain}

Yah, saya telah melihat banyak artikel dan tutorial yang sering menyatakan "Mari tandai ini dengan cara semantik mungkin".

Tetapi suatu pemikiran aneh datang kepada saya, mengapa?

Mengapa seseorang perlu (atau ingin) repot dengan unsur-unsur spesifik yang menyampaikan makna semantik yang benar? Secara khusus, saya mengacu pada unsur-unsur HTML5 baru, seperti <time>, <output>, atau <address>. Terutama, jika halaman "berfungsi" (itu ditampilkan dengan baik di semua browser).

Mengapa saya ingin menggunakan elemen seperti <time>atau <address>, di mana tidak ada sama sekali (atau pada kasus terburuk, obat generik <span>) bekerja dengan baik?

Saya menanyakan hal ini karena saya melihat banyak situs web (sangat populer) (termasuk ini) yang tidak mengikuti praktik terbaik yang disebut ini.

Fungsionalitas Gratis

Menggunakan dengan benar <label>berarti Anda dapat mengklik label untuk masuk ke bidang teks. Banyak browser akan menambahkan fungsionalitas default logis ke banyak tag per spesifikasi resmi, yang berarti Anda dapat menggunakan lebih sedikit plugin JavaScript dan menulis lebih sedikit kode daripada situs yang seluruhnya terbuat dari <div>dan <span>.

Aksesibilitas

Terkait dengan fungsionalitas gratis, semantik sangat berarti bagi perangkat lunak pembaca layar. Teks di depan bidang input tidak akan dibaca dengan cara yang sama seperti surat <label>wasiat. Pembaca layar akan mengabaikan sebagian besar CSS Anda, jadi sebagian besar tergantung pada struktur HTML Anda.

CSS logis

Mengapa menggunakan div #headerketika Anda bisa menggunakan <header>dan gaya itu secara langsung? Tag semantik memudahkan untuk menandai berbagai hal dan membuat gaya Anda jauh lebih portabel; jika Anda memiliki gaya tertentu untuk mogok dan selalu menggunakan <del>elemen gaya jauh lebih portabel. <del>berarti hal yang sama untuk semua orang, tetapi semua orang akan memberi nama .deletedTextkelas mereka secara berbeda.

Ini juga membantu menjaga semua orang pada halaman yang sama dalam proyek-proyek besar; tidak ada yang senang belajar konvensi penamaan kelas esoteris orang lain.

SEO

Mesin pencari seperti Google telah meningkatkan penggunaan HTML dan metadata semantik . Cuplikan Kaya Google juga menggunakan metadata khusus yang dimaksudkan untuk menyampaikan konten semantik.

Kenapa tidak begitu umum

Dibutuhkan kerja, dan orang-orang terbiasa menilai situs web berdasarkan tampilannya dan cara kerjanya . Seringkali tidak ada akuntansi untuk semantik karena orang yang menulis kasus bisnis untuk aplikasi tidak memahaminya atau mengapa itu penting.

Sangat sulit bagi orang-orang non-teknis untuk memahami atau mengevaluasi semantik HTML.

Jika sebuah situs web terlihat bagus dan tampaknya berfungsi, mengapa khawatir? Banyak orang bahkan mungkin tidak tahu ada yang lebih dari itu. Mirip dengan aksesibilitas, ini cenderung diabaikan sampai seseorang di tim Anda benar-benar memahami ini.

Jika Anda ingin HTML semantik menjadi prioritas proyek Anda , Anda perlu mempresentasikannya. Menampilkan tim / bos Anda cara kerja situs web Anda di pembaca layar juga merupakan alat yang bermanfaat.

Jawabannya adalah hanya untuk menyampaikan informasi dan menyusun dokumen Anda .

Ketika Anda menggunakan bentang dan div, dokumen Anda tidak memiliki struktur. Tidak ada daftar, tidak ada paragraf, tidak ada tabel, tidak ada hyperlink. Tidak ada. Sebenarnya tidak ada gunanya memilih HTML sebagai bahasa markup dan kemudian mengabaikan kosa kata yang ditawarkannya untuk mengekspresikan dan menyusun konten Anda. Struktur adalah kata penting di sini btw. HTML untuk penataan tidak menampilkan. Untuk itulah CSS digunakan.

Jika Anda menandai kode Anda secara semantik, Anda memberi kesempatan kepada pembaca manusia dan mesin untuk memahami data di dalam elemen Anda. Jika Anda menggunakan elemen span dan div sepenuhnya, Anda tidak akan memiliki informasi tambahan ini dan menyimpulkannya dari nilai-nilai saja mungkin tidak dimungkinkan.

Demikian juga, jika saya ingin mengikis situs web dan hanya mengekstrak tajuk untuk membuat Daftar Isi untuk mereka, laba-laba saya perlu tahu apa judulnya. Itu tidak dapat melakukannya tanpa elemen yang sesuai.

Last but not least, jika Anda menggunakan divs dan span saja, Anda akan kesulitan menata ini dengan CSS. Penyeleksi CSS bekerja pada struktur dokumen Anda dan jika itu sebagian besar struktur ambigu, aturan CSS menjadi rapuh untuk diterapkan. Bagaimana Anda memutuskan apakah div div divbenar-benar mengacu pada table tr tdatau body ul li? Anda harus menambahkan kelas dan id, tetapi kemudian Anda menciptakan kembali roda.

Lihat juga rekomendasi W3C

Menggunakan elemen semantik yang sesuai akan memastikan struktur tersedia untuk agen pengguna. Ini melibatkan secara eksplisit menunjukkan peran yang dimiliki unit yang berbeda dalam memahami makna konten. Sifat sepotong konten sebagai paragraf, tajuk, teks yang ditekankan, tabel, dll. Semua dapat ditunjukkan dengan cara ini. Dalam beberapa kasus, hubungan antar unit konten juga harus diindikasikan, seperti antara judul dan subjudul, atau di antara sel-sel tabel. Agen pengguna kemudian dapat membuat struktur dapat dilihat oleh pengguna, misalnya menggunakan presentasi visual yang berbeda untuk berbagai jenis struktur atau dengan menggunakan suara atau nada yang berbeda dalam presentasi pendengaran.

Untuk menambah jawaban yang sudah bagus di sini, satu hal yang belum saya lihat sebutkan adalah kompatibilitas ke depan . Ketika spec berkembang, dimungkinkan bahwa fungsionalitas tambahan ditentukan untuk elemen semantik tertentu. Jika kode Anda benar secara semantik, ia akan dapat memanfaatkan fungsi ini tanpa, atau perawatan minimal.

Salah satu alasan mengapa Anda tidak melihat banyak situs mengikuti semantik dengan sempurna adalah karena tidak ada alasan bisnis untuk itu. Jika itu mendorong penjualan (atau kategori terkait seperti eksposur), maka sangat berharga untuk menulis HTML semantik.

Kasus terbaik yang bisa saya buat untuk penggunaan tag semantik adalah ketika Anda menggunakan atau menggunakan HTML dengan alat. Misalnya, menggunakan tag semantik memungkinkan Anda untuk langsung mendesain elemen tanpa takut menambah atau menghapus gaya dari hal lain. Selain itu, jika Anda harus mem-parsing HTML menggunakan scraper atau sejenisnya maka Anda pasti akan menghargai HTML semantik dan semantik karena menjadi lebih mudah untuk menulis permintaan XPath dan DOM untuk menemukan apa yang Anda butuhkan.

Saya harus mencatat bahwa kelas bukan pengganti langsung untuk tag semantik. Saya memiliki kelas [error, information, warning]yang dapat digunakan kembali yang menyampaikan makna yang berbeda dan oleh karena itu gaya berdasarkan tag yang dilampirkan.

Karena dapat bermanfaat atau dibutuhkan untuk perayap dan layanan web (komputer AKA berkomunikasi dengan komputer). Jika Anda menulis:

<span class="time">Sep 16 at 2:17</span>

... perayap web tidak perlu memahaminya sebagai tanggal, waktu. Atau akan jauh lebih sulit untuk menemukannya sebagai informasi tanggal.

Jika Anda menggunakan:

 <time datetime="2012-02-11 16:24:02">feb 11 2012 at 16:24:02</time>

... akan jauh lebih mudah bagi perayap apa pun untuk menemukan dan menganalisis barang.

Ketika saya mengatakan crawler, maksud saya bukan berarti mesin pencari :)

Saya menjalankan perusahaan konsultan web kecil, dan pendekatan kami saat ini adalah tidak menggunakan tag HTML5 baru karena kami mencoba menyeimbangkan banyak faktor. Dalam hal ini, keseimbangannya adalah antara kegunaan, kegunaan, dan SEO:

• SEO: Apa jawaban lain yang dikatakan di sini - mungkin membantu sedikit untuk SEO, meskipun berdasarkan pengalaman saya semakin jelas strategi SEO, semakin kecil kemungkinannya untuk membantu.

• Kegunaan # 1: Masuk akal untuk menganggap bahwa tag HTML5 memberi semacam keunggulan kegunaan. Untuk pengguna tunanetra pasti bahwa apa pun mundur yang disediakan browser mereka mereka akan menjadi lebih baik daripada apa pun yang saya bisa berikan. Untuk pengguna tipikal Anda, ini jauh lebih bisa diperdebatkan. Mungkin menggunakan pemutar media yang tidak dikerjakan peramban yang disediakan oleh browser Anda lebih mudah digunakan daripada widget yang kurang familiar yang sebelumnya saya taruh di sana. Atau mungkin default browser Anda adalah omong kosong (seperti cara pemutar MP3 default Chrome Windows berhenti bekerja secara berkala).

• Kegunaan # 2: IE lama. IE lama membutuhkan banyak shims HTML5 yang menggembungkan halaman agar semua tag ini berfungsi. Anda harus menambahkan beberapa skrip ke tag kepala yang memanggil CreateElement () dalam satu lingkaran di semua tag HTML5 yang Anda gunakan. Jika Anda tidak akan pergi menyisir setiap halaman untuk tag yang Anda gunakan, itu berarti setiap tag HTML5. Ini perlu dijalankan pada setiap halaman, inline, yang berarti tidak ada caching. Dan berita buruk: IE lama adalah yang paling lambat untuk mengeksekusi Javascript, sehingga menciptakan sedikit kesulitan saat memuat. Kemudian Anda harus melakukan banyak Javascript dan CSS lama IE-saja, dan sering Flash, untuk membuat semua elemen yang tidak didukung yang baru di-render dengan benar. Anda dapat mendeteksi fitur sebelum memutuskan untuk memuat kode IE lama, tetapi kemudian Anda membuat pengguna IE yang lama menunggu sampai cukup banyak skrip yang dimuat untuk melakukan deteksi fitur sebelum bahkan mulai meminta semua hal yang membuat tag tersebut berfungsi. Anda bisa mendeteksi browser dan hanya mengirim barang-barang IE lama kepada pengguna dengan browser itu, tetapi itu bisa membuat caching sulit atau tidak mungkin tergantung pada platform Anda. Memberikan kode berbeda kepada pengguna yang berbeda juga berarti pengujian lebih rumit - pernahkah Anda memiliki bug asinkron? Bagaimana dengan yang hanya terjadi pada browser tertentu? Dan hanya dalam produksi? Daftarkan aku. Jadi, Anda mungkin hanya akan mengirim kembung itu ke semua orang. Memberikan kode berbeda kepada pengguna yang berbeda juga berarti pengujian lebih rumit - pernahkah Anda memiliki bug asinkron? Bagaimana dengan yang hanya terjadi pada browser tertentu? Dan hanya dalam produksi? Daftarkan aku. Jadi, Anda mungkin hanya akan mengirim kembung itu ke semua orang. Memberikan kode berbeda kepada pengguna yang berbeda juga berarti pengujian lebih rumit - pernahkah Anda memiliki bug asinkron? Bagaimana dengan yang hanya terjadi pada browser tertentu? Dan hanya dalam produksi? Daftarkan aku. Jadi, Anda mungkin hanya akan mengirim kembung itu ke semua orang.

Sampai IE8 mati, nilai pada tag HTML5 yang lebih baru ini tidak cukup tinggi untuk masalah kinerja yang mereka bawa. Kami belum bekerja dengan audiens yang bahkan nyaris mati *, tapi suatu hari nanti.

* Metrik terbaru kami menunjukkan IE8 sebesar 6% untuk situs dengan pengunjung IE8 paling sedikit, dan 24% dengan pengunjung IE8 terbanyak. Jauh, jauh dari mati.

Jawaban singkatnya adalah "Tidak ada alasan yang baik dalam praktik." Hampir semua argumen yang mendukung markup "semantik" hanyalah pemikiran tentang apa yang bisa atau harus terjadi, daripada sesuatu yang nyata. Sebagai contoh, mesin pencari sering disebut, tetapi tidak ada bukti publik tentang kepedulian mereka tentang timeatau outputatau address.

Secara tidak langsung, kita dapat menyimpulkan bahwa mereka tidak akan peduli di masa mendatang. Situs schema.org , oleh beberapa mesin pencari terkemuka, jelas mendukung pendekatan spesifik untuk "semantic markup" berdasarkan sesuatu yang sama sekali berbeda, yaitu microdata ( itemscopedan atribut terkait). Dan mereka sebenarnya melakukan ini terutama untuk situs komersial atau komunitas besar.

Menggunakan spanatau divbekerja lebih baik daripada hal-hal baru HTML5, karena yang terakhir tidak dikenali oleh versi lama IE bahkan untuk keperluan penataan. Jadi Anda perlu beberapa tipu daya untuk membuatnya "bekerja" bahkan sebagai elemen wadah.

Namun, ada beberapa elemen "semantik" yang memiliki makna nyata yang diberikan kepada mereka oleh browser, perangkat lunak bantu, atau mesin pencari. Menggunakan h1untuk tajuk utama selalu merupakan praktik yang baik untuk alasan tersebut. Penggunaan labeluntuk label bidang formulir memiliki dampak nyata pada kegunaan dan aksesibilitas. Dan seterusnya; lihat Panduan pragmatis untuk HTML: Prinsip .

HTML bukan hanya bahasa UI, tetapi juga bahasa penataan data. Itu dirancang untuk membantu mesin heterogen memiliki satu cara umum untuk mengidentifikasi jenis informasi yang datang untuk server. Karenanya begitu banyak tag yang berbeda. Halaman HTML harus dianggap sebagai struktur data.