Most developers from beginners to advance made some mistakes while writing HTML code. In this article, I am going to share some HTML mistakes web developers should avoid.
1- Missing Doctype
The W3C has set up some standards for the web, all browser vendors and web developers need to stick with these standards to ensure that the website is rendering perfectly and identically through all the browsers. The DOCTYPE declaration is one of these standards.
DOCTYPE is the very first line of an HTML document. It shows a version of the page’s HTML and ensures that the web page is rendering identically across different web browsers. It means this doctype declaration is necessary and it must be at the top of the page.
Bad Practice: <html> <head> <title>Page Title</title> </head> <body> Page Content </body> </html>
Good Practice: <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> Page Content </body> </html>
Tip: Declaration of doctype is not case sensitive. You can write like:
<!DOCTYPE html> <!DocType html> <!Doctype html> <!doctype html>
2- Inline Style In HTML tags
Inline CSS may have a purpose but it’s not a good way to maintain it. There are many issues with inline CSS like you cannot see quotations within inline CSS, cannot be reused, tough to be edited, etc. It also doesn’t provide browser cache advantages.
Inline CSS may be faster than external CSS but still writing an external stylesheet is the best practice.
3- Using multiple line breaks
There is a need to add some gap between content, but writing <br> multiple times is outdated. Instead of writing it multiple times, you can split your content into multiple tags and can add margin or padding for gaps.
Bad Practice: <p> This is a sentence. <br> <br> This is a sentence. </p>
Good Practice: <p>This is a sentence.</p> <p>This is a sentence.</p>
4- Use <b> and <i>
<b> and <i> are used for bold and italic, these are still available in HTML and you will not find any error with them but they are not recommended now. With the updates on HTML version, <b> is replaced with <strong> and <i> is replaced with <em>. Instead of using old tags, upgrade yourself to use recommended one.
5- Block elements within Inline elements
All HTML elements has default display setting, block or inline. Block elements are <p>, <div> etc use for structure of HTML web page. Inline elements like <a>, <span> etc live in these block elements. You should never put block elements inside inline elements.
Bad Practice: <a href=”#”><h2>This is a sentence.</h2></a>
Good Practice: <h2><a href=”#”>This is a sentence. </a></h2>
6- Ignore alt attribute for image tag
Alt attribute is required for <img>. It shows the context of the image. Showing users a blank area is not a good user experience, instead of showing the blank area you should write the alt attribute in the img tag so users can expect what is going to be loaded here.
7- Don’t write comments
Documented code is better for future changes in code. Every developer should keep this in practice to write comments.
8- Forget to encode HTML Entities
Most developers forget to encode HTML entities like @, ©, etc. The developer should encode it to the numbers because browsers may not support entity names but they support entity numbers. For example, to display a less than sign (<) you must write < or <
Read an article about the 10 most common mistakes web developers make.