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: . Developers have to adapt and constantly be learning because the field changes often. Change is difficult 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! ! Support and Buy me a Coffee Originally published here.

Intro Guide to CSS: Explore Your Box

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

9 Tips and Best Practices for HTML 5

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

A Quick Introduction to Jamstack

100 Stories To Learn About Html5

10 Frontend Projects to Take Your Coding Skills to the Next Level

10 CSS Tips To Make Your Site Faster

10 Cool Data Table Libraries with Advanced Features

A Quick Introduction to Jamstack

100 Stories To Learn About Html5

10 Frontend Projects to Take Your Coding Skills to the Next Level

10 CSS Tips To Make Your Site Faster

10 Cool Data Table Libraries with Advanced Features

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps