It is easy to find good practices for any technology, but unfortunately, it is not so easy to do with HTML. Without thinking twice, I wrote my list of 7 tips and share it with Habr.
Don't use maximum-scale = 1 and user-scalable = no
When I interact with the interface, I often have to zoom in on the page to read the text or click on a button that is too small. But sometimes the developers forbid me to do this. They just add maximum-scale = 1 and user-scalable = no. And I suffer, figuring out how to hit the damn button.
If you want to make your users happy, then do not disable native browser zoom.
Do not do this
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1">
You can do this
<meta name="viewport" content="width=device-width, initial-scale=1">
Use links without href attribute instead of span
Sometimes it is required to make links inactive. A popular solution is to replace the link with the span text element. As a result, we get text that is non-interactive.
But there is a more concise solution. The href attribute is optional, so if you don't add it to the a element, it becomes a boolean link that is inactive. And when you want to make it active again, just return the href attribute.
For example, this approach can be used to indicate the current page in navigation markup.
Do not do this
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><span>About me</span></li>
<li><a href="#">Projects</a></li>
</ul>
</nav>
You can do this
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a>About me</a></li>
<li><a href="#">Projects</a></li>
</ul>
</nav>
Use button instead of a href = "#"
When developers need to mark up an interactive element that looks like a link, they use the a element.
, 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>
Add more meaning to alt
The alt attribute is very useful because it allows screen reader users to understand what is shown in the picture. Unfortunately, many developers use it incorrectly. They either duplicate the text around the picture, or they don't add it at all.
The best solution is to add a short description that complements the text around it. For example, if you have a product card that has an image and a title, then in the alt, describe how the product looks.
Do not do this
<header>
<img src="picture.jpg" alt="adidas Originals Superstar">
<h3>adidas Originals Superstar</h3>
</header>
You can do this
<header>
<img src="picture.jpg" alt=" adidas Originals Superstar ">
<h3>adidas Originals Superstar</h3>
</header>
PS If you have any questions about CSS / HTML, then do not hesitate to write to me on my mail. It is listed in my profile on Habré.