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:
Semantic HTML example:
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
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.
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.