With HTML 5, it can be difficult to know what is best practice and still relevant.
Some features were used before the HTML 5 standard, but they continue to emerge through developers' habits. In this case, these features no longer serve a purpose.
Other features are examples of implementations that made it into the HTML 5 standard but are no longer considered best practice.
So why would these lingering features still exist?
My take on it is: change is difficult. Developers have to adapt and constantly be learning because the field changes often.
Sometimes there are still instances where some of these features are used even if they are not common.
Additionally, it can be to support backward compatibility to previous HTML versions.
## What are HTML 5 best practices?
Declare the doctype first and as <!DOCTYPE HTML>
This is the current document type and it should be the first line of your document.
External CSS link in the <head> tag
Although there are use cases for both inline and internal styling, the best practice is to use an external CSS link.
One reason is that browsers can cache an externally linked style sheet and therefore load faster after the initial visit. Another reason for this is inline and internal styles are harder to maintain and organize.
Links located in the <head> section will improve load time. If necessary, <script> should be last.
Close your tags
Every tag should be followed with a corresponding closing tag. This will prevent validation errors.
Mark up should be in the lower case only
It is a developer standard to use the lower case; web development is no exception. This will make for easier reading and writing.
Use appropriate and descriptive tags
Using <div> is fine when there is not a better tag such as <article>, <section, <header>, <footer> etc...
Include alt tags and size on all images
The alt tag improves accessibility for screen readers. Defining image size helps the page load smoothly because it determines the page's structure while loading. This can be changed in CSS for responsiveness.
Use the <h1> tag only once
The <h1> is used for the document's title or major heading. It should always be used and only one time for each document.
Use <h2> through <h6> in ascending order
The order should reflect the size and importance of each heading. The tag <h1> being the largest and most important, and the <h6> tag for the smallest.
Do not skip any and only include as many as needed.
Use correct indentation
Acceptable indentation is two or four spaces. It is best to avoid tabs because of the inconsistency between editors. Most editors have custom spacing to make this easier.
Each nested element should be indented. Elements on the same level should be at the same indentation.
Nest Inline elements inside of block elements
Block elements such as <div> should contain the inline elements <span>, <a>, <img> etc... Inline elements cannot contain block elements.
Final Thoughts
This is not a comprehensive list of all HTML best practices. The best way to learn more about them is to look at other developers' documentation and practice.
Happy coding and good luck!
Top comments (1)
I never use inline CSS because it shows up as an error in
The validator code detection online and advises not to use inline
CSS.