Good Practices in HTML

1. Use Tags Semânticas.

Use Semantic Tags.
Using semantic tags helps in organizing and understanding the page layout. For example, when we see a div '' or span '' tag, we are unable to infer anything from them. However, if we find tags likenav '' orheader '', we can see that it is about navigation or the header of a page.

Link: W3, MDN, Table

2. Use Textos Alternativos

Not only for images, but for buttons and other elements that are deemed necessary. After all, how many times have we asked ourselves what would happen if I pressed a button?

Links: Alt Text

3. Use async e defer

In modern websites, scripts are often “heavier” than HTML: their download size is larger, and processing time is also longer.
In short, the defer attribute blocks the loading of the external script, until the DOM is completely built. The async attribute, on the other hand, runs in parallel with the construction of the DOM.

3.1 The defer attribute

The defer attribute tells the browser not to wait for the script (only for external scripts). Instead, the browser will continue to process the HTML, build DOM. The script loads “in the background”, and then runs when the DOM is fully built.
In other words:

• Scripts with defer never block the page.
• Scripts with defer always execute when the DOM is ready (but before DOMContentLoaded event).

3.2 The defer attribute

The async attribute is somewhat like defer. It also makes the script non-blocking. But it has important differences in the behavior.

• The browser doesn’t block on async scripts (like defer).
• Other scripts don’t wait for async scripts, and async scripts don’t wait for them.
• DOMContentLoaded and async scripts don’t wait for each other.

Link: Js.

1. Use metatags

Metatags provide additional information about your site. This can help SEO algorithms find your page.

Link: Metatags.

5. Links and Buttons.

5.1 - Buttons

• Put the autofocus attribute on the buttons.

Since buttons are focusable elements, we can automatically focus on them when the page loads using the autofocus attribute.
Perhaps you’d do that inside of a modal dialog where one of the actions is a default action and it helps the UX (e.g. you can press Enter to dismiss the modal). Autofocusing after a user action is perhaps the only good practice here, moving a user’s focus without their permission, as the autofocus attribute is capable of, can be a problem for screen reader and screen magnifier users.

• Disable buttons that should not be used (disabled attribute).

For example, a forward button can only be clicked after confirming your information, or only send data from a form if they are validated and filled out correctly.

5.2 - Links

• Add the attribute rel = "noopener norefferer" to links that will open on another page. The attribute rel is for the relationship of the link to the target. Using rel =" noopener norefferer " makes your site more secure and fast.

Link: A Complete Guide to Links and Buttons.

References:

• 165+ Developer Resources I Discovered in 2020-2021.