Es fácil encontrar buenas prácticas para cualquier tecnología, pero lamentablemente no es tan fácil hacerlo en HTML. Sin pensarlo dos veces, escribí mi lista de 7 consejos y la compartí con Habr.
No use escala máxima = 1 y escalable por el usuario = no
Cuando interactúo con la interfaz, a menudo tengo que hacer zoom en la página para leer el texto o hacer clic en un botón que es demasiado pequeño. Pero a veces los desarrolladores me prohíben hacer esto. Simplemente agregan escala máxima = 1 y escalable por el usuario = no. Y sufro, averiguando cómo apretar el maldito botón.
Si desea hacer felices a sus usuarios, no desactive el zoom nativo del navegador.
No hagas esto
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1">
Puedes hacerlo
<meta name="viewport" content="width=device-width, initial-scale=1">
Utilice enlaces sin el atributo href en lugar de span
A veces es necesario desactivar los enlaces. Una solución popular es reemplazar el enlace con el elemento de texto span. Como resultado, obtenemos texto que no es interactivo.
Pero hay una solución más concisa. El atributo href es opcional, por lo que si no lo agrega al elemento a, se convierte en un enlace booleano inactivo. Y cuando desee volver a activarlo, simplemente devuelva el atributo href.
Por ejemplo, este enfoque se puede utilizar para indicar la página actual en el marcado de navegación.
No hagas esto
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><span>About me</span></li>
<li><a href="#">Projects</a></li>
</ul>
</nav>
Puedes hacerlo
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a>About me</a></li>
<li><a href="#">Projects</a></li>
</ul>
</nav>
Use el botón en lugar de href = "#"
Cuando los desarrolladores necesitan marcar un elemento interactivo que parece un enlace, usan el elemento 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>
Agrega más significado a alt
El atributo alt es muy útil porque permite a los usuarios de lectores de pantalla comprender lo que se muestra en la imagen. Desafortunadamente, muchos desarrolladores lo usan incorrectamente. O duplican el texto alrededor de la imagen o no lo agregan en absoluto.
La mejor solución es agregar una breve descripción que complemente el texto que la rodea. Por ejemplo, si tiene una tarjeta de producto que tiene una imagen y un título, en el alt, describa cómo se ve el producto.
No hagas esto
<header>
<img src="picture.jpg" alt="adidas Originals Superstar">
<h3>adidas Originals Superstar</h3>
</header>
Puedes hacerlo
<header>
<img src="picture.jpg" alt=" adidas Originals Superstar ">
<h3>adidas Originals Superstar</h3>
</header>
PD: Si tiene alguna pregunta sobre CSS / HTML, no dude en escribirme a mi correo. Aparece en mi perfil en Habré.