197 reads

9 Tips and Best Practices for HTML 5

by Zachary CroninAugust 22nd, 2021

Too Long; Didn't Read

With HTML 5, it can be difficult to know what is still relevant, let alone a 'best practice' Some features were used before the new HTML 5 standard, but they continue to emerge through developers' updated habits. Other features are examples of implementations that made it into the new standard but are no longer considered best practices. These features no longer serve a purpose, so why would these lingering features still exist? The best way to learn more about them is to look at other developers' documentation and practice.

Company Mentioned

featured image - 9 Tips and Best Practices for HTML 5

With HTML 5, it can be difficult to know what is still relevant, let alone a 'best practice.'

Some features were used before the new HTML 5 standard, but they continue to emerge through developers' updated 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 practices.

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?

1. Declare the doctype first and as <!DOCTYPE HTML>

This is the current document type and it should be the first line of your document.

2. Include an 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.

3. Close Your Tags

Every tag should be followed with a corresponding closing tag. This will prevent validation errors.

4. 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.

5. Use Appropriate and Descriptive Tags

Using <div> is fine when there is not a better tag such as <article>, <section, <header>, <footer> etc...

6.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.

7. 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.

8. 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.

9. 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.

9. 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!