📄 HTML Best Practices I’m Following as a Beginner - Simple Rules for Better Web Pages
📅 October 12, 2025
✍️ By Evans
Hey guys! 👋
After writing several HTML pages, I started noticing that my early code looked... messy 😅. Sometimes tags weren’t closed, indentation was off, or I forgot what a section even did.
So, I decided to build some good HTML habits — small things that make my code cleaner, easier to read, and more professional.
Here are the best practices I’ve been following as I grow as a beginner web developer. 👇
🧱Always Use the Proper HTML Structure
Every page should start with the basic HTML skeleton:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Web Page</title>
</head>
<body>
<!-- Page content goes here -->
</body>
</html>
Having this structure helps browsers read your page correctly and keeps your files organized.
✍️ Keep Your Code Indented and Neat
Indenting your code makes it so much easier to see which tags belong together.
Example:
<div>
<h2>My Favorite Quotes</h2>
<p>“Code is like humor. When you have to explain it, it’s bad.”</p>
</div>
Good indentation = easy debugging + happy developer 😄
🔤 Use Lowercase Tags and Proper Attribute Quotes
I used to write things like <P< or <IMG SRC=image.jpg> — but HTML5 prefers lowercase tags and quoted attributes:
✅ Correct:
<img src="image.jpg" alt="A sample image">
❌ Wrong:
<IMG SRC=image.jpg>
Consistency makes your code cleaner and easier to maintain.
💬 Comment Your Code
Adding comments helps you remember what each section does.
<!-- Navigation Bar -->
<nav> ... </nav>
When you revisit your project weeks later, you’ll thank yourself! 😄
🧠 Use Semantic Tags
Instead of using <div> for everything, use tags that describe their purpose:
- <header> for top sections
- <nav> for navigation links
- <main> for main content
- <article> for blog posts
- <footer> for bottom info
Semantic HTML improves SEO and makes your code more meaningful.
🧠 Add the alt Attribute to Images
The alt attribute describes what an image shows. It’s important for accessibility and helps search engines understand your content.
<img src="coding.jpg" alt="A person typing HTML code on a laptop">
⚙️ Validate Your HTML
I learned that even a missing </div> can break your layout.
You can use the W3C Validator to check your HTML for mistakes:
It’s like a grammar checker — but for your code.
🎯 What I Learned
Following these best practices made my projects look more structured and easier to manage. I now understand that writing clean HTML isn’t just about code — it’s about communication.
Other developers (and future me 😅) can now easily understand what my pages do.
👉 What’s Next?
Next up, I’ll share Building My First Full HTML Page – What I Learned — where I’ll put all these lessons together into one complete project! 💪
See you there!
— Evans 💻