5 Common HTML Mistakes and How to Avoid Them
Introduction
The foundation of the internet is HTML, which is the standard markup language for web pages. However, despite its popularity, many developers still make mistakes when coding HTML. These errors may result in serious problems which affect the user experience as well as the website’s search engine optimisation (SEO).
We’ll take a look at five typical HTML errors in this article, along with help on how to prevent them.
1. Missing or Misplaced Tags
Missing or incorrect tags are one of the most frequent HTML errors. HTML tags are used for structuring content on a web page and have a significant impact on how a browser understands and presents that content. Browsers may struggle to show sites properly when tags are missing or misplaced, resulting in issues such as broken layouts or non-functional links.
Here is an example of a missing tag:
<!DOCTYPE html>
<html>
<head>
<title>
First Website
</title>
</head>
<body>
<h1>Sign Up Form</h1>
<p>Please fill in this form to create an account.</p>
<button>Sign Up
</body>
</html>
<!-- Output: </button> -->
In the above example the missing tag is the closing tag of the button.
The best way to avoid missing or misplaced tags is to thoroughly review your code before committing any new content. Use a code editor that supports syntax highlighting to quickly identify missing tags in your code.
2. Improper Nesting of Tags
When using HTML, improper tag nesting is another frequent mistake. When tags are nested appropriately, they open and close at the right times, ensuring that your content displays correctly across all platforms and devices.
Here is an example of an incorrectly nested code:
<p>This is supposed to be <b>bold.</p></b>
The closing bold tag </b> should be placed before the closing </p> tag.
It’s essential to understand the hierarchy of every element on your website in order to prevent improper tag nesting.
3. Overuse of Inline Styles
Inline styles can be useful for quickly modifying specific sections of a web page, but overusing them will result in difficult-to-manage codebases over time.
To avoid overusing inline styles, use external CSS style sheets where possible to ensure consistency across all sections of your site while keeping your codebase easy to read.
Here is an example of how to link an external CSS style sheet to your HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
...
</body>
</html>
This HTML file references the styles.css file using the <link> tag in the <head> section of the HTML file. The CSS styles defined in the styles.css file will be applied to the HTML elements in the body of the HTML file.
Here is an example of a more structured and understandable CSS inside of an external CSS style sheet:
/* Define font styles */
body {
font-family: Arial, sans-serif;
font-size: 16px;
}
/* Define color styles */
h1 {
color: #333333;
}
p {
color: #666666;
}
/* Define layout styles */
.container {
width: 80%;
margin: 0 auto;
}
4. Not Using Semantic Elements
When humans and machines browse your website’s content, semantic elements provide meaning by giving information about each section within its opening and closing tag(s). When developers forget to use semantic elements correctly, it results in poorly optimised pages with lower search engine rankings than websites that do.
Using semantic elements means choosing appropriate markup that communicates exactly what you’re trying to communicate through clear naming conventions.
Here is an example of a block of code using semantic elements:
<header></header>
<section>
<article>
<figure>
<img>
<figcaption></figcaption>
</figure>
</article>
</section>
<footer></footer>
5. Not Including Alt Attributes for Image Tags
Since screen readers cannot understand images without accompanying text descriptions, adding alternative text (alt) attributes to images will increase web accessibility and make it easier for people with disabilities to access online information.
Here is an example of a descriptive alt text for an img tag:
<img src="/images/dog-sleeping.jpg" alt="A Dog sleeping on a blanket">
Want to find out more about the alt attribute? Then go have a read of this detailed article – Alt Attribute | MDN
Conclusion
By avoiding these five mistakes, you can make sure that your website looks great and performs well on any device. This will make sure that visitors have a satisfying experience each time they visit!
Further reading
Want to find out more about handling common HTML problems? Then check out – Handling common HTML problems – Learn web development | MDN
See also
How to Begin with Semantic HTML
What is HTML? Basics Explained
Text Formatting Tags in HTML with Examples
If you liked this article, then please share. You can also find me on Twitter for more updates.
Top comments (0)