Common HTML Mistakes you should avoid

In the world of the web, there is a saying:

“HTML is the body, and JavaScript is the brain of the web application.”

You may be so focused on building and teaching your app’s working brain that you ignore the importance of the body. To be honest, I took the same method as well.

As experienced professionals, we recommend that everyone interested in becoming a web developer learn JavaScript, TypeScript, and other similar languages. Almost every time, we neglect or forget to remind them that HTML is a good place to start. Because we start by writing HTML and then go on to JavaScript, TypeScript, and so on while constructing a web application.

HTML is not a particularly difficult language to learn or understand. However, as a result of this view, we take HTML for granted and make mistakes throughout development.

In this article, we are going to discuss a few mistakes that we should avoid while writing the structure of our application.

1. Don’t use bold or italic tags

The “b” and “i” tags are presentational tags, and have no semantic meaning, instead either change the font-weight/font-style in the CSS or use the “strong” or “em” element.

Bad Practice

<b>Bold</b>
<i>Italics</i>

Good Practice

<strong>Bold</strong>
<em>Italics</em>

2. Not Closing Tags

We know that HTML is all about tags. We have two types of tags in HTML: one of them is those that we have to close, and the other one, we don’t have to. But don’t want to make it a habit to not close the tags.

Bad Practice:<ol>    <li>Steve Jobs    <li>Bill Gates    <li>Elon Musk

This small error can lead to broken or not properly running code, so I recommend having closing tags for all HTML elements, wherever required.

Good Practice:<ol>    <li>Steve Jobs</li>    <li>Bill Gates</li>    <li>Elon Musk</li></ol>

3. Not Writing Alt Attribute

The inability to see images on a web application is a typical issue for web users. It could be due to a variety of factors, including slow internet, static assets such as photos not being available at the provided site, and so on.

Showing a blank area instead of an actual image is definitely not a good user experience. Users should know what exactly they can expect at that space on the screen.

We can define an alternate text for images using the alt attribute if the image is not available.

Bad Practice:<img src="dogecoin.png"> 

Good Practice:<img src="dogecoin.png" alt="A cryptocurrency coin, popularized by Elon Musk">

Alt text helps to improve accessibility, the topical relevance, and also help you rank in Google images.

4. Inline Styles

Let’s be honest, it doesn’t matter how serious we are about the clean code principle; somehow we end up using inline CSS. But we should always avoid that practice.

While inline styles have a function, they are not the most efficient approach to manage and style your online application. Content and design are not separated by inline styles. Inline styles are identical to embedded fonts and other clumsy design elements that modern developers despise. They are in direct opposition to all of the best practices.

Bad Practice:

<h2 style="color: #000">Dark Text</h2>

Good Practice:

<h2 class="text-dark">Dark Text</h2><style>
    .text-dark {
        color: "#000";
    }
</style>

5. Using descriptive links

Users and search engines will be able to better grasp your content and how it relates to other pages if the text of a link is explicit and communicates where it is forwarding the user to.

Bad Practice:

<a href="url">
Check our pricing...
</a>

Good Practice:

Check our <a href="url"> pricing </a>

6. Using Multiple Line Breaks

It’s possible that you’ll wind up employing the line break tag br> if you want to create some gaps between items. But this is so old.

Line break tag<br> shouldn’t be used to make gaps between elements, instead split the text into separate paragraphs.

Bad Practice:

This is a line
<br>
<br>
This is another line
Good Practice:
<p>This is a line</p> <p>This is another line</p>

7. Use Figure Element

If you need to add a caption to your image, use the “figure” element combined with the “figcaption” element.

Bad Practice:

<img src="image url" alt="image description" />
<p> Lorem Ipsum Description </p>

Good Practice:

<figure>
<img src="image url" alt="image description" />
<figcaption>
         <p> Lorem Ipsum Description </p>
</figcaption>
</figure>

8. Don’t Use <b> and <i>

The characters b> and I are used to bold and italicize text, however they are not semantically acceptable. These tags should be replaced by strong> and em>, accordingly.

Though <b> and <i> are still available in HTML and you will not get any error if you use them, they are not recommended. So use <strong> and <em> instead, as they are more semantically correct.

Bad Practice:
<p>
    <b>Note: </b>Our website consist of informational article will  <i>We will update it soon</i>
</p>
Good Practice:
<p>
    <strong>Note: </strong>Our website consist of informational article. <em>We will update it soon.</em>
</p>

If you use b> or I tags, any code quality check tool, such as SonarQube, will detect an error. As a result, try to stay away from them as much as possible.

9. Semantic Header and Footer

There is no semantic structure in divs. Use “header” and “footer” elements instead of divs to create header and footer structures.

Bad Practice:

<div id="header">
...
</div>
<div id="footer">
...
</div>

Good Practice:

<header>
...
</header>
<footer>
...
</footer>

This is it for this article. I hope it’ll be beneficial for you. Let me know if you have anything that you think we should avoid when writing HTML.

Thanks for reading!

Also Check:

Happy Learning….☺️

About us: Codelivly is a platform designed to help newbie developer to find the proper guide and connect to training from basics to advance .

Leave a Comment