Some Common HTML Errors you must avoid

0 12156

A true programmer is not the one who knows how to code, but he is also the one who also knows how to debug the errors encountered while writing the code. It's indeed an overwhelming feeling when you learn to code HTML and execute it to find the results on your webpage. Feels nice, right?

But what if you are stuck in an erroneous code and have no idea how to get out of it? Moreover, you cannot even rely on browsers for the debugging of your errors as a browser will eat anything which is beyond its understanding, leaving you halfway through the process. Well now that's frustrating, isn't it?

Well, if you also often fidget due to the common HTML errors while developing your website, we are here to help! I am sure after reading this blog on HTML errors; you will be able to debug the errors and validate your code without any external help. So, open your editor and let's go through this quickly.

1. Missing out the Doctype Declaration

The Doctype! declaration is one of the most important tags of HTML code which specifies the browser that the document which is written is in HTML. The initial line of an HTML code must include the doctype declaration to ensure which HTML version you are using. The syntax which is used to include the doctype declaration in HTML5 is <!DOCTYPE html>.

<!DOCTYPE html>
<html>
<body>

<h1>HTML Errors</h1>
<p>This is a tutorial of error</p>

</body>
</html>

2. Not closing a tag

This error is commonly seen in beginner HTML programmers and often leads to broken or not properly running codes. In HTML5, there are some of the tags which does not require to be closed as they are known as self-closing tags such as <br/>, <meta>, etc. Some of the optional closing tags which may be left without closing in HTML 5 are:

<html>

<head>

<body>

<p>

<dt>

<dd>

<li>

<thead>

<tbody>

<th>

<tr>

<td>

<tfoot>

While there are also some of the tags in HTML which are allowed to left unclosed such as:

<img>

<input>

<br>

<hr>

<meta>

While other tags such as <div>, links and strong tags required to be closed even in HTML5. However, it may show you an error while missing out closing tags for HTML elements while working on HTML or XHTML. Hence, it is a recommended practice to always close the tags in HTML to ensure that you don't get stuck on these syntax errors.

3. Placing the block elements within the inline elements

By default, all of the HTML documents consist of Block or the inline element. The block elements in HTML generally consist of <div> tag or the paragraphs which collectively comprise the structure of the HTML elements. However, the inline elements consist of the elements which are placed inside these blocks such as span or the anchor tags. Therefore, you must never put the blocks inside the inline elements of an HTML code. Why? Let me explain to you that! While the inline elements tend to take up minimum space on the page, the block elements are bound to take large spaces. Thus, when you put the block elements inside the Inline elements, it will hinder the property of both elements and the browser will get confused as to which property should it render, leaving you with a defective code.

For example, instead of placing the block inside inline:

<a href="#"><h2>not correct</h2></a>

You should always place inline inside block as:

<h2><a href="#">correct</a></h2>

4. Not using absolute paths for images and hyperlinks

One of the most common errors and confusing concepts in HTML since early ages are how to link pages in context to relative and absolute paths. The main difference between the relative and the absolute path is that relative path indicates the specific file path whereas the absolute path includes the domain name for the website. This means that if you use a relative path for a link or image which is within your root folder, then you are good to go! However, if you tend to approach the relative path for any external link or image, you will get an error as the browser will not be able to find the exact path for the link. So, if you are linking to another website or image, I will suggest you take up the absolute path and not the relative path.

For instance, you can use the following syntax as relative path for local images or links:

<a href="codingtag.html">Click Me</a>

However, for an external image or hyperlink, use the following syntax:

<a href="https://www.codingtag.com">Click here to visit coding tag.</a>

5. Missing out alt tags for images

One of the obvious mistakes which the beginner HTML developers often make is an omission of Alt tag while embedding an image into the document. An Alt tag in HTML is used to show the alternate images along with the images. This is done to ensure that in a slow connection, the reader reads the screen for the alternate image and decides whether the image is important or not. Moreover, the alt tag is also beneficial for sight compromised people to ensure that the website seems responsive to such users. While omitting alt tags for images may cause your website to look unresponsive and less user-friendly.

The correct syntax which you must use while embedding an image into your HTML code is:

<!DOCTYPE html>
<html>
<body>

<h1>HTML Images</h1>
<p>This is a tutorial of errors</p>
<img src="https://i.pinimg.com/736x/4b/ea/66/4bea66596f1d55b7ac51bf50217e431f.jpg" 
alt="CodingTag" style="width:128px; height:128px;">

</body>
</html>

6. Not Encoding HTML entities

It is very important to encode HTML entities while writing the code. This means that while using special characters in HTML code such as @, &, and so on, they must be encoded to their entity equivalent. Most of the HTML developers are unaware of this syntax rule and end up making errors in terms of missing out the entity encoding for special characters, especially in URL Links. This is because the browser may get confused about the actual use of the special characters in the document, resulting in uncertain output. For example, if you use and or & without any encoding, it may signify the browser to be the ending or starting of another HTML document, which can hinder the validation of your code.

Good News || Click Here to crack Interview for Web Designer (HTML Interview Questions)

7. Improper Classes and IDs usage

Another error which is commonly found when writing the HTML code is improper use of classes and IDs. Classes in HTML are used to perform the task on the specific HTML elements which are associated with the particular class name. Whereas, IDs in HTML are used to uniquely identify any specific element and perform the task on them. However, using improver and too many irrelevant IDs and classes in HTML code can also make your code erroneous.

8. Wrong Syntax for Links

The last element on our list of common HTML errors is the wrong syntax for placing a link inside the HTML documents. You may have also faced this issue one time or another where you are sure that you have placed the link within your HTML code but are not able to get it on your webpage. The only reason behind this error is the use of the wrong syntax for links. Don't remember, the correct syntax for placing links in HTML documents is:

<a href="link">this is my link</a>

Also, if you want to link to any location in the page, one thing which you must keep into mind is that you need to place # in the anchor name and not the name of the link. For instance,

<a href="#link">correct syntax</a>

Last but not the least, remember the correct syntax for the link which is in another HTML document, which is:

<a href="a.html#link">another link</a>

Be it a beginner who learn HTML online or an advanced coder, everyone makes mistakes while writing the code. This may be due to a lack of experience or carelessness of developers. However, it is important to understand that writing clean code is significant practice as it not validates your code but also saves your time while editing.

The above mentioned were some of the errors which I encountered while writing my HTML code and which most of the developers encounter once in their coding lifetime. I hope this blog will help you gain more insight into a practice of clean coding and help you in the future to enhance your skills and expertise of error-free coding.