Introduction
HTML is the queen of web development. It's the markup language that every web developer must know. It allows you to easily create elements for web pages by using tags and attributes in your code. It has many cool features that you can benefit from as a web developer. However, writing semantic and quality HTML code is not that easy. There are some mistakes that a lot of developers do without noticing. In this article, we will cover some common HTML mistakes that every developer should avoid.
Missing out on the Doctype Declaration
The Doctype! The declaration is one of the most important tags of HTML code, which specifies to 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 used to include the doctype declaration in HTML5 is <!DOCTYPE html>.
Improperly formatted HTML
Missing quotation marks for attribute values, eg. <font color=#FF00FF>.
Missing closing tags for tags that require closing tags like <strong>, <div>, etc.
Missing proper tag placement like <title> and <meta> tags should always be inside <head> tag only, so nesting should be proper in HTML.
Syntax
<!--In this example, the <ul> tag is not closed properly with a </ul> tag, which can cause issues with the rendering and functionality of the web page.-->
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is some text.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3<li>
</body>
</html>
Output
Not using semantic tags
Semantic tags are the tags that you know, such as <header>, <nav>, <main>, <article>, <footer>, <section>, and so on. Tags such as <div>, <span>, etc., are not semantic tags; we only use them sometimes to structure the layout. So do not use divs or spans to create headers, sections, and footers.
Syntax
<!---Don't do this---->
<div class="header">This is a header</div>
<div class="section">This is a section</div>
<div class="footer">This is a footer</div>
<!-----Do this instead----->
<header>This is a header</header>
<section>This is a section</section>
<footer>This is a footer</footer>
Not using semantic tags
It's a good practice to always replace inline elements within block elements, not the opposite. Block elements are elements like divs, headings, etc. On the other hand, elements like links and images are inline. So always avoid replacing block elements with inline elements.
Syntax
<!----Don't do this--->
<a>
<h2>This is a link</h2>
</a>
<!---Do this instead---->
<h2>
<a>This is a link</a>
</h2>
Improper Tables
Tables are a common culprit of improper HTML. Common table mistakes are not closing the <table>, <tr>, or <td> tags or closing them improperly (see above).
Inserting <td>'s outside of a <tr>. Creating tables with differing numbers of cells (or rowspan/colspan)in each row. Placing tables within inline elements like <b> or <h1>. Surrounding table cells or rows with text formatting tags (i.e., <table><b><tr><td>I am bold</td></tr></b></table>). Data tables should have a caption immediately after the opening table tag — <table><caption>Data from Jello Eating Contest</caption><tr>.
Syntax
<!--In this example, the table has an extra column in the second row that is not present in the first row. This can cause confusion for users and make it difficult to read and understand the table.-->
<table>
<tr>
<td>Product Name</td>
<td>Price</td>
<td>Quantity in Stock</td>
</tr>
<tr>
<td>Product A</td>
<td>$10</td>
<td>10</td>
<td>In stock</td>
</tr>
<tr>
<td>Product B</td>
<td>$20</td>
<td>5</td>
<td>In stock</td>
</tr>
<tr>
<td>Product C</td>
<td>$30</td>
<td>0</td>
<td>Out of stock</td>
</tr>
</table>
Output
Missing ALT Text
It's important to always include descriptive ALT text for images to ensure all users can access and understand the content on a webpage. So all images must have the alt attribute: <img src=" image.gif" alt=" image description">.
Improper Classes and IDs usage
Another error that is commonly found when writing HTML code is the improper use of classes and IDs. Classes in HTML are used to perform the task on the specific HTML elements 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.
Syntax
<!--The class name "blue-box" is used to style the entire div container,
while the ID "blue-box" is used to identify the paragraph element inside the div.
This can cause confusion -->
<div class="blue-box">
<p id="blue-box">This is some text in a blue box.</p>
</div>
Wrong Syntax for Links
You may have also faced this issue at 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.
Syntax
<!--- For link--->
<a href="link">this is my link</a>
<!--- link to any location in the page--->
<a href="#link">correct syntax</a>
<!---link which is in another HTML document--->
<a href="a.html#link">another link</a>
It is also possible to debug HTML errors. When working with HTML code, errors can occur due to syntax mistakes, missing tags, incorrect attribute values, or improper nesting. These errors can cause rendering issues or unexpected behavior in web browsers. Here are a few approaches described below.
Using Browser developer tools
To pull up the Browser developer tools
For Windows, use Ctrl + Shift + I or F12
You can also press-and-hold/right-click an item on a webpage (Ctrl-click on the Mac) and choose Inspect Element from the context menu that appears. This method straightaway highlights the code of the element you right-clicked. The developer tools are usually open by default to the inspector. This tool shows what the HTML on your page looks like at runtime and what CSS is applied to each element on the page. It also allows you to instantly modify the HTML and CSS and see the results of your changes reflected live in the browser viewport.
Exploring the DOM inspector
For a start, right-click (Ctrl-click) an HTML element in the DOM inspector and look at the context menu. The available menu options vary among browsers, but the important ones are mostly the same. Delete Node (sometimes Delete Element). Deletes the current element. Edit as HTML (sometimes Add attribute/Edit text). Lets you change the HTML and see the results on the fly. Very useful for debugging and testing. :hover/:active/:focus. Forces element states to be toggled on, so you can see what their styling would look like. Copy/Copy as HTML. Copy the currently selected HTML. Some browsers also have Copy CSS Path and Copy XPath available to allow you to copy the CSS selector or XPath expression that would select the current HTML element.
Exploring the CSS editor
By default, the CSS editor displays the CSS rules applied to the currently selected element. The browser's inbuilt developer tool makes it easier to toggle CSS properties individually. After you bring up the developer console on the right, the elements panel can be noticed. It shows the CSS properties applied to the element that you selected. Once you hover over the properties, they can be individually unchecked. If you find an element that is crossed out, it means that another CSS is used to override it.
Syntax Error
If you are developing a large application in order to check for syntax errors or typographic mistakes, validation tools will really be helpful. CSS Validator and Markup Validation Service by W3C will do the job perfectly. Once you run the code in validators, they will raise an error or warning whenever something has gone amiss.
Cross-Browser Compatibility Issues
check and make sure that all the CSS and HTML properties you are using are supported by all browsers. Both CSS and HTML are evolving, and many new tags are coming up every day that are not supported by all browsers. In that case, you have to use either a vendor prefix or use a tag that is supported by all browsers. Make sure that you are normalizing the CSS code. This will prevent inconsistencies between browsers and make them behave in a coordinated manner.
Conclusion
Be it a beginner who learns HTML online or an advanced coder, everyone makes mistakes while writing the code. This may be due to a lack of experience or the carelessness of developers. However, it is important to understand that writing clean code is a significant practice as it not validates your code but also saves your time while editing. The above-mentioned were some of the errors which we encounter while writing HTML code once in their coding lifetime, along with how we can debug such errors. Also, debugging is a tricky art that improves with practice.
Apart from the techniques mentioned here, many more are there that can help you debug your HTML and successfully resolve the error. Also, after fixing errors, do remember to test your website properly on different devices and browsers and find out if all the critical functionalities are working properly before deploying it in production. I hope this blog will help you gain more insight into the practice of clean coding and help you in the future to enhance your skills and expertise in error-free coding. Thank you for reading this article. I hope you found it useful.
Join the conversation! Your thoughts help the community grow.