The 8 HTML Mistakes Web Developers Should Avoid

Isha Hasan

June 29, 2022

HTML Mistakes Web Developers Should Avoid Web Front-end

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 &lt; or &#60;

Read an article about the 10 most common mistakes web developers make.

2 thoughts on “The 8 HTML Mistakes Web Developers Should Avoid

Leave a Reply

Your email address will not be published. Required fields are marked *

Would you like to suggest a topic?





    Would you like to Submit guest post?

    Contact me at info@ishahasan.com

    Browse other categories

  • Categories