Good Practices

Add lang to the HTML tag

Add “lang=en” (or the code of the website’s language) to the HTML tag. This improves accessibility, SEO, and assists robots in reading and scanning your site.

Watch target and rel on anchors

Links can use target attributes like _self or _blank depending on whether they need to open in the same tab or a new one. Typically, internal links use _self, and external links use _blank. If a link has target=“_blank”, always include rel=“noopener noreferrer” to protect against vulnerabilities in external hyperlinks.

Keep order and consistency with style and script tags

Maintain order and group style and script tags by their purpose. For instance, if importing one CSS file and two JS files, place the CSS file first, followed by the JS files, without mixing them.

Avoid span and br as much as possible

The span tag can be useful for adding custom functionality to components, but use it sparingly. Before using a br tag, consider other spacing options like padding, width, or max-width. Aim to avoid using br tags whenever possible.

Correctly use the anchor and button tags

Anchor (a) tags should be used for actions like opening a new link, downloading a file, or scrolling to a section of a page, and always include an href attribute. Buttons (button tags) are used for interactions that trigger actions without needing an href, such as opening a navigation menu through an event listener or CSS/JS interaction.

Write clean code

Write your code as cleanly and consistently as possible. Consider these practices:

• Always use double quotes and avoid mixing different types of quotes.
• Avoid blank spaces inside quotes or tags.
• Maintain a consistent order when declaring IDs, classes, and sources across HTML elements.
• Do not mix custom tags like data attributes with native tags; always group similar tags together.