Halo, Habr! Saya mempersembahkan untuk Anda terjemahan artikel
"3 elemen HTML Top yang kami lupa" oleh Stas Melnikov.
Saya baru-baru ini membaca spesifikasi dan menyadari bahwa kami menggunakan serangkaian elemen HTML yang terbatas. Karena itu, saya ingin berbicara tentang tiga elemen yang kami lupakan, tetapi ada di setiap proyek.
Elemen alamat
Seringkali Anda perlu menandai blok jaringan sosial atau informasi kontak lainnya di proyek kami. Biasanya, pengembang menggunakan kode berikut:
<div class="my-social"> <ul> <li><a href="github.com">Fork me on Github</a></li> <li><a href="twitter.com">Follow me on Twitter</a></li> <li><a href="linkedin.com">My LinkedIn</a></li> </ul> </div>
Tetapi spesifikasi WHATWG berisi elemen alamat khusus untuk tugas ini.
Elemen alamat mewakili informasi kontak untuk artikel terdekat atau elemen induk badan. Jika ini adalah elemen tubuh, maka informasi kontak berlaku untuk seluruh dokumen.
Dengan demikian, kode berikut ini lebih benar:
<address class="my-social"> <ul> <li><a href="github.com">Fork me on Github</a></li> <li><a href="twitter.com">Follow me on Twitter</a></li> <li><a href="linkedin.com">My LinkedIn</a></li> </ul> </address>
Elemen ol
Kita harus menggunakan daftar untuk menandai item navigasi seperti remah roti, pagination, dll. Ini diperlukan untuk membantu pembaca layar membaca jumlah item dalam navigasi.
<nav class="breadcrumb"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Design Patterns</a></li> <li><a href="#">Breadcrumb Pattern</a></li> </ul> </nav>
Biasanya kita menggunakan elemen ul. Tetapi spesifikasinya berisi tag yang lebih cocok - ol. Spesifikasi WHATWG mengatakan:
Elemen ol mewakili daftar item di mana item tersebut sengaja dipesan sehingga mengubah urutan akan mengubah arti dokumen.
Jika kami memesan ulang item dalam navigasi breadcrumb, kami mengubah nilai situs web. Dengan demikian, kode berikut ini lebih benar:
<nav class="breadcrumb"> <ol> <li><a href="#">Home</a></li> <li><a href="#">Design Patterns</a></li> <li><a href="#">Breadcrumb Pattern</a></li> </ol> </nav>
Elemen waktu
Kami menggunakan elemen rentang untuk menandai tanggal berbagai publikasi.
<span>October 5</span> <span>two days ago</span> <span>a Saturday</span>
Tetapi kita dapat menggunakan tag waktu untuk ini, yang terkandung dalam spesifikasi WHATWG. Inilah yang spesifikasi WHATWG katakan:
Elemen waktu merepresentasikan isinya bersama dengan bentuk yang dapat dibaca mesin dari konten ini dalam atribut datetime. Konten dibatasi oleh berbagai tanggal, waktu, zona waktu, dan durasi.
Karena itu, kita harus menggunakan elemen waktu untuk menandai tanggal.
<time datetime="2019-10-05">October 5</time> <time datetime="2019-01-29">two days ago</time> <time datetime="2019-09-23">a Saturday</time>