5 Common HTML Mistakes Beginners Make (and How to Avoid Them) | Learn HTML Best Practices
Introduction
Stuffed up in HTML and unsure where your code is going wrong? You’ve got nothing to feel embarrassed about. This is a common issue that many people experience especially when they are learning their way around the programming world. Hypertext Markup Language is not very complicated but still has enough scope for mistakes. One of the biggest problems with HTML is that the browsers tend to fix the errors on their own, and thus, you might not even know what you did wrong. But this is not the best practice as an uncorrected code can lead to wrong results and an unprofessional look of the website.
In this blog, we will discuss 5 frequent errors that are commonly made while programming in HTML. Most of these mistakes are made due to lack of experience but knowing them will help you in your learning process. Missing a step is a sign of a quick and smart student, so let’s look at the most frequent mistakes and how to prevent them.
1. Not Parching Closing Tags
Common Mistake:
Another very common HTML mistake is not properly closing tags. Some of these elements include <p>, <div> and <h1> which require elements such as </p>, </div and </h1> to close. This is something that many novices do forget resulting in rather strange outcomes.
Example:
<p>This is a paragraph
Why It’s a Problem:
In the above example, the <p> tag is opened but not closed. The browser can tell where the paragraph begins but never where it ends. This can lead to CSS and JavaScript that is applied to the <p> tag to act incorrectly, leading to changes in the layout of the rest of the page.
How to Avoid It:
You must always use proper tag closure. Instead of writing:
<p>This is a paragraph
Write this instead:
<p>This is a paragraph</p>
To prevent this mistake:
- The following are some of the editors that can be used to detect the unclosed tags include VS Code and Sublime Text.
- Writing the opening and closing tag first and then the content in between should be a habit
2. Not Nesting Elements Properly
Common Mistake:
A frequent error which can lead to problems with layout as well as an overly complex document structure is that of elements being nested incorrectly.
Example:
<div>This is a div inside a paragraph</p></div>
Why It’s a Problem:
Too there <div> cannot be placed inside the <p> since <p> is a block level element that cannot contain another block level element. This results in incorrect rendering and structural errors.
How to Avoid It:
Ensure correct nesting of elements:
<div><p>This is a paragraph inside a div</p></div>
It is always a good idea to check the HTML documentation or use validator tools such as the W3C Markup Validation Service to check that the nesting is correct.
3. Applying CSS Internally instead of Linking External Files
Common Mistake:
The common practice that novices tend to follow is to add inline CSS directly inside the elements.
Example:
<p style="color: red; font-size: 20px;">This is a styled paragraph</p>
Why It’s a Problem:
- It is very difficult to maintain and update.
- It makes the code very clumsy and hard to read.
- It leads to redundancy where the same styles have to be applied to different elements.
How to Avoid It:
Create an external CSS file:
/* styles.css */
p {
color: red;
font-size: 20px;
}
Then, attach the file to your HTML document:
<link rel="stylesheet" href="styles.css">
This helps to maintain the cleanliness, scalability and manageability of your code.
4. Not Putting in the DOCTYPE Declaration
Common Mistake:
Some people do this unnecessarily and sometimes, they may not put the declaration at the beginning of the HTML document.
Example (Incorrect):
<html>
<head>
<title>My Website</title>
</head>
<body>
<p>Hello, world! </p>
</body>
</html>
Why It’s a Problem:
This means that without the DOCTYPE html, the browser may not use standards mode to parse the document and this may cause the rendering to be different in one browser as compared to another.
How to Avoid It:
You should always put the DOCTYPE declaration at the beginning of your HTML file like this: <DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<p>Hello, world! </p>
</body>
</html>
This is because, with this, the page will be properly displayed in all browsers.
5. Using Wrong Image Paths
Common Mistake:
Many beginners provide incorrect image paths, causing images not to load.
Example (Incorrect Path):
<img src="image.png" alt="My Image">
If the image.png file is inside an images folder, this path will not work.
Why It’s a Problem:
If the path is incorrect, the image will not appear, affecting the website’s design and user experience.
How to Avoid It:
Ensure correct file paths. If the image is in an images folder, the correct path would be:
<img src="images/image.png" alt="My Image">
To avoid mistakes:
- Always check the file location before linking.
- Use absolute paths when necessary (e.g., /assets/images/image.png).
Conclusion
This world requires developers to encounter mistakes in HTML at some stage of their learning journey but through identifying and rectifying these errors they become better developers.
Here’s a quick recap of the 5 common mistakes and how to fix them:
- Forgetful of closing tags → This means you should close all your tags.
- Nesting elements incorrectly → Do not mess up the HTML structure.
- Using inline CSS while you should use external stylesheets instead → Your CSS needs to stay separate so your document remains easy to maintain.
- Not putting the DOCTYPE declaration at the start of the document. → Never begin any document but this one with <!DOCTYPE html>.
- Using the wrong path to images. → Check on file locations before you attempt to link them as images.
When you implement these tips, you will produce HTML code with fewer errors and greater sophistication. Keep practicing and happy coding!
If you have faced or facing any other issues in HTML. Let me know in the comment section bellow.
Comments
Add New comment
Login to Comment on this post