Sangat mudah untuk menemukan praktik yang baik untuk teknologi apa pun, tetapi sayangnya tidak mudah untuk melakukannya dalam HTML. Tanpa berpikir dua kali, saya menulis daftar 7 tips saya dan membagikannya dengan Habr.
Jangan gunakan skala maksimum = 1 dan skala pengguna = tidak
Ketika saya berinteraksi dengan antarmuka, saya sering harus memperbesar halaman untuk membaca teks atau mengklik tombol yang terlalu kecil. Tapi terkadang developer melarang saya melakukan ini. Mereka hanya menambahkan skala maksimum = 1 dan skala pengguna = tidak. Dan saya menderita, mencari cara untuk menekan tombol sialan itu.
Jika Anda ingin membuat pengguna Anda senang, maka jangan nonaktifkan zoom browser asli.
Jangan lakukan ini
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1">
Kamu bisa melakukan ini
<meta name="viewport" content="width=device-width, initial-scale=1">
Gunakan tautan tanpa atribut href alih-alih span
Terkadang diperlukan untuk membuat tautan tidak aktif. Solusi populer adalah mengganti tautan dengan elemen teks rentang. Akibatnya, kami mendapatkan teks yang tidak interaktif.
Tetapi ada solusi yang lebih ringkas. Atribut href bersifat opsional, jadi jika Anda tidak menambahkannya ke elemen a, itu menjadi tautan boolean yang tidak aktif. Dan ketika Anda ingin mengaktifkannya kembali, cukup kembalikan atribut href.
Misalnya, pendekatan ini dapat digunakan untuk menunjukkan halaman saat ini dalam markup navigasi.
Jangan lakukan ini
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><span>About me</span></li>
<li><a href="#">Projects</a></li>
</ul>
</nav>
Kamu bisa melakukan ini
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a>About me</a></li>
<li><a href="#">Projects</a></li>
</ul>
</nav>
Gunakan tombol alih-alih a href = "#"
Ketika pengembang perlu menandai elemen interaktif yang terlihat seperti tautan, mereka menggunakan elemen a.
, href="#". JS, . , role="button", , .
button type="button" , .
<a href="#">Show my order</a>
<!-- -->
<a href="#" role="button">Show my order</a>
<button type="button">Show my order</button>
inputmode
. , , .
, inputmode. , email, . tel, .
<input type="text" placeholder="Your email">
<input type="text" placeholder="Your tel">
<input inputmode="email" placeholder="Your email">
<input inputmode="tel" placeholder="Your tel">
width height SVG
SVG HTML, , width height. , , .
, CSS, , CSS , . , . , width height .
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512">
<path fill="currentColor" d="..."></path>
</svg>
svg {
width: 0.875rem;
height: 1rem;
}
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
width="0.875rem"
height="1rem">
<path fill="currentColor" d="..."></path>
</svg>
h1-h6 , , , , , .
, , , , .
, "iPhone 11 Just the right amount of everything." h2 h3, . : "iPhone 11, . Just the right amount of everything., ".
: "iPhone 11 Just the right amount of everything, ".
<h2>iPhone 11</h2>
<h3>Just the right amount of everything.</h3>
<h2>
<span>iPhone 11</span>
<span>Just the right amount of everything.</span>
</h2>
Tambah arti lain pada alt
Atribut alt sangat berguna karena memungkinkan pengguna pembaca layar untuk memahami apa yang ditampilkan dalam gambar. Sayangnya, banyak pengembang yang salah menggunakannya. Mereka juga menduplikasi teks di sekitar gambar, atau mereka tidak menambahkannya sama sekali.
Solusi terbaik adalah menambahkan deskripsi singkat yang melengkapi teks di sekitarnya. Misalnya, jika Anda memiliki kartu produk yang memiliki gambar dan judul, maka di alt, jelaskan seperti apa produk itu.
Jangan lakukan ini
<header>
<img src="picture.jpg" alt="adidas Originals Superstar">
<h3>adidas Originals Superstar</h3>
</header>
Kamu bisa melakukan ini
<header>
<img src="picture.jpg" alt=" adidas Originals Superstar ">
<h3>adidas Originals Superstar</h3>
</header>
PS Jika Anda memiliki pertanyaan tentang CSS / HTML, jangan ragu untuk menulis kepada saya di email saya. Itu tercantum dalam profil saya di Habré.