12 Front-End Conventions and Coding Practices | pt.1 HTML
Disclaimer… I’ll explain and show good coding practices and style guides for HTML, CSS, and JavaScript; it’s essential to know that all the coding conventions are UNOFFICIAL, so you can code and design as you want… But, during this series of articles, I’ll show you the most used in the industry and the ones that will make your code cleaner and readable.
<HTML Style Guide />
By having a clean and consistent structure, either it’s easier for other developers to understand and maintain the code and increases the SEO of a website.
To make the lookup of specific information more accessible and not to make it also annoying, I will splice information into the following articles:
1.<HTML Style Guide /> (This article)
Said so, Here is a guideline that will help you for your next HTML projects (your teammates will appreciate it 👀)
1. Declare document type
It is crucial to always “tell” the browser the type of document it should render, so it uses all the necessary resources to do it correctly.
2. Lowercase element tags
HTML supports the usage of lowercase and uppercase element tag names, but by using lowercase, it’ll be easier to identify each tag, and it is easier to write.
3. The <title> element
It plays a vital role in SEO (Search Engine Optimization), as it is used by the search engine to decide if your website is related to the user’s searches.
4. Close HTML elements
Increases the readability of each element, as it helps you determine when an element closes.
5. Close Self-closing tags
Closing self-closing tags increase the readability of your code. Also, it is a good practice if you plan to use it in the future XML or XHTML, as empty tags must be closed.
6. Define the language
The browser and search engines need to know which language is the information you are displaying on your web.
7. Avoid spaces between equal signs in attributes.
Removing white spaces between “=” increases the readability of each attribute.
8. Quote all your attribute values
Developers tend to don’t quote the values of their attributes; this can cause some readability or even syntax errors.
9. Specify the attributes of your images <img>
Most developers forgot to include either the alt attribute — which provides an alternative text when the browser cannot display the image. Or with the height and width attributes, which are helpful to reserve space, preventing flickering on image loading.
10. Break long lines of code
Breaking long lines prevents horizontal scrolling in your IDE or Text Editor. Also, it helps to identify all attributes quickly.
11. Blocks of code
Adding blank lines to separate your project into different blocks of codes helps you identify specific zones of your website.
12. Use semantic elements
This is the most common error developers do, do not limit your code only to “<div>.” Using Semantic HTML, the web page becomes more informative and adaptable, allowing the browsers and search engines to interpret all the content better. (In the future, I’ll do an HTML semantic article, so do not forget to subscribe to my newsletter)
THE END…
If you learn something new about HTML in this story, don’t forget to like it and save it for later (you’ll need it 👀).
Sources:
- Block-Level and Inline Elements and How to Use Them. (2019, 20 June). ThoughtCo. https://www.thoughtco.com/block-level-vs-inline-elements-3468615
- HTML style guide | Adobe Commerce Developer Guide. (2022, 19 May). Adobe. https://devdocs.magento.com/guides/v2.4/coding-standards/code-standard-html.html
- Team, D. (2021, 25 August). HTML Style Guide — HTML Coding Conventions. DataFlair. https://data-flair.training/blogs/html-style-guide/
