10 HTML mistakes beginners make
If your code isn't working exactly the way you want it to right now, take a deep breath. You are doing great! Every single professional web developer started exactly where you are, making the exact same typos.
Making mistakes is not a failure; it is simply how our brains learn to code. Browsers can sometimes be very forgiving, but other times, a tiny typo will break your whole page.
To help you troubleshoot, here are the top 10 most common HTML mistakes beginners make, and how to quickly fix them.
1. Unclosed Tags
Most HTML tags come in pairs: an opening tag and a closing tag. The closing tag must have a forward slash (/). If you forget it, the browser thinks your element just keeps going forever, which can mess up the rest of your page.
Bad Code:
<p>Welcome to my website!<p>Good Code:
<p>Welcome to my website!</p>2. Improper Nesting
When you put one tag inside another, you are "nesting" them. The golden rule of nesting is "first in, last out." Think of it like a set of stacking boxes. You have to close the inner box before you can close the outer box. If tags cross over each other, the browser gets confused.
Bad Code:
<p>This text is <strong>very bold.</p></strong>Good Code:
<p>This text is <strong>very bold.</strong></p>3. Missing alt Attributes
When you add an image using the <img> tag, you must include an alt (alternative text) attribute. If the image fails to load, this text shows up instead. More importantly, screen readers use this text to describe the image to visually impaired users. Without it, your site is not accessible.
Bad Code:
<img src="cute-dog.jpg">Good Code:
<img src="cute-dog.jpg" alt="A fluffy golden retriever puppy sitting in the grass">4. Missing Quotes on Attributes
Attributes give extra information to your tags (like a link's destination). The value of an attribute should always be wrapped in quotation marks. If you leave them out, a space in your URL might break the link completely.
Bad Code:
<a href=https://www.example.com>Click here</a>Good Code:
<a href="https://www.example.com">Click here</a>5. Using Headings for Styling
Headings (<h1> through <h6>) are meant to create a logical outline for your document, like chapters in a book. Beginners often use an <h1> just because they want big, bold text. This hurts your website's structure. If you just want text to look big, use CSS instead!
Bad Code:
<h2>Please click the button below to continue.</h2>Good Code:
<p class="big-text">Please click the button below to continue.</p>6. Skipping Heading Levels
Headings must follow a strict, sequential order. You should never jump from an <h1> directly to an <h4>. This confuses search engines and screen readers that are trying to understand the flow of your page.
Bad Code:
<h1>Main Title</h1>
<h4>Subtitle</h4>Good Code:
<h1>Main Title</h1>
<h2>Subtitle</h2>7. Putting Visible Content in the <head>
Your HTML document has two main parts: the <head> (the brain) and the <body> (the physical body). The <head> is strictly for behind-the-scenes settings, like the page title. Any text, images, or links that you want humans to see must go inside the <body>.
Bad Code:
<head>
<h1>My Awesome Website</h1>
</head>Good Code:
<body>
<h1>My Awesome Website</h1>
</body>8. Using Uppercase Tags
Older versions of HTML didn't care if you typed <P> or <p>. While modern browsers will still understand uppercase tags, the standard practice in the web development industry is to write all tags in lowercase. It keeps your code clean, modern, and easy to read.
Bad Code:
<DIV>
<P>Hello world!</P>
</DIV>Good Code:
<div>
<p>Hello world!</p>
</div>9. Forgetting the Boilerplate
You cannot just open a file, type <p>Hello</p>, and call it a day. Every web page needs a foundational skeleton called the "boilerplate." Without the doctype, html, head, and body tags, the browser has to guess how to read your page.
Bad Code:
<h1>My Page</h1>
<p>This is missing the skeleton.</p>Good Code:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>My Page</h1>
<p>This has the proper skeleton.</p>
</body>
</html>10. Spaces in File Names
When you save your HTML files or images on your computer, never use spaces in the file name! The internet hates spaces. A browser will often replace a space with weird characters like %20, which breaks your links and images. Use hyphens (-) or underscores (_) instead.
Bad Code:
<a href="about me.html">About Me</a>Good Code:
<a href="about-me.html">About Me</a>Summary
Coding is a journey of trial and error. The next time a picture won't load or your page looks broken, check this list. Did you close your tags? Did you remember your quotes? Are your tags nested correctly?
Spotting these small errors is how you build your "developer eyes." Keep practicing, and soon avoiding these mistakes will become second nature!