Best Practices for Writing HTML: 3 Key Things to Remember

I often see HTML code written by many developers as different from the HTML standard, and many issues we faced were due to lousy coding structure.
April 24, 2023

SamCN

Promote this blog post!

Your opinion of this article? Publish it! It creates awareness of our work.

Promote this blog post!

Your opinion of this article? Publish it! It creates awareness of our work.

3 Key Things to Remember

I often see HTML code written by many developers as different from the HTML standard, and many issues we faced were due to lousy coding structure. We will see here, things that we should avoid and keep in mind while writing HTML code.

1.Use Semantic HTML: HTML5 comes up with semantic HTML elements e.g. header, footer, article, nav, figure, etc. So, instead of using the <div> tag everywhere, we can use proper semantic elements. It clearly describes the content and accurate document structure.

Non-semantic HTML example:

html

Semantic HTML example:

html3

In the Semantic HTML example, we replaced div with the header, main, and footer. We can clearly see that it is very informative and much easier to read.

2.Do not use block-level elements inside inline elements:
Block-level elements always start on a new line and inline elements take width as necessary. We might achieve the UI we want by adding block-level elements inside inline elements with the help of CSS but it will not be a good practice.

2.1 : Inline elements can be used inside block-level elements

html4
2.2 : Inline elements can be used inside inline elements
html5
2.3 : Inline and block elements can be used inside block-level elements.
html6

3.Do not use Inline styles:There are three main ways to add styles to the HTML element i.e. inline, internal & external. An inline style is added directly in an HTML element with the style attribute, an Internal style is added in <head> section by using <style> element and In External style, the path of the CSS file is added in <link> element.

Here are some reasons why we shouldn’t use inline styles.

  • Code is not reusable
  • Increase the size of the HTML page
  • Difficult to override CSS
  • Not allowed to write media queries
  • We can’t use selectors like before, after, hover, focus, etc.

Conclusion

In conclusion, writing HTML code using best practices is essential for creating structured and well-organized web pages. By using semantic HTML, avoiding block-level elements inside inline elements, and refraining from using inline styles, we can ensure that our HTML code is clean, maintainable, and easy to read. Following these practices will not only improve the quality of our code but also make it easier for others to work with and modify it in the future. So, always keep in mind these three key things while writing HTML and creating better web pages.

We’re here to help!

Are you dealing with complex Sales Challenges? Learn how we can help.

Going a step further

If you are interested in this topic, these articles may be of interest to you.