Browsers are very forgiving. They'll display a page with unclosed tags, misspelled attributes and elements in the wrong places, quietly guessing what you meant. That forgiveness is great for beginners, but it hides problems: a page can look fine in one browser and break in another, confuse screen readers, or be misunderstood by search engines.
Professional developers keep their HTML clean, consistent and valid. Clean HTML follows a simple style guide so anyone on a team can read it. Valid HTML passes a validator, which catches mistakes before users meet them. And correctly encoded pages display every character, from accented letters to currency symbols, exactly as intended.
This lesson pulls together the habits that separate hobby pages from production websites: formatting conventions, validation, UTF-8 encoding, URL encoding, and a checklist you can run on any page before publishing.
A simple HTML style guide
- Start every page with
<!doctype html>and<html lang="...">. - Write element and attribute names in lowercase, and quote every attribute value:
<img src="cat.jpg" alt="A ginger cat">. - Close elements consistently and indent nested elements by two spaces so the structure is visible.
- Use meaningful class names that describe purpose, such as
product-cardorerror-message, not appearance likered-box. - One
<h1>per page, headings in order, landmarks for structure, andalton every image. - Keep CSS and JavaScript in separate files rather than in style and onclick attributes, except for small, intentional cases.
Validating your HTML
The W3C Markup Validation Service (validator.w3.org) checks a URL, an uploaded file or pasted code against the HTML standard and lists errors with line numbers. Common findings include:
| Error | Fix |
|---|---|
| Stray end tag or unclosed element | Match every opening tag with its closing tag |
| Duplicate ID | Make every id unique on the page |
Element not allowed here, such as <div> inside <p> | Restructure; paragraphs can only hold inline content |
Missing alt on <img> | Add descriptive alt text, or alt="" for decorative images |
| Attribute not allowed | Check spelling, or use a data- attribute |
Editors like VS Code show many of these as you type, and HTML linters can run automatically before code is published.
Character and URL encoding
- Character encoding tells the browser how to turn bytes into characters. Always use UTF-8, declared as the first thing in the head:
<meta charset="utf-8">. UTF-8 supports every language and symbol, so you can type é, ü, £, € and 東京 directly. - Without it, browsers may guess wrongly and show garbled text such as "é" instead of "é".
- URL encoding (percent-encoding) replaces characters that aren't allowed in URLs: a space becomes
%20,&inside a value becomes%26. Browsers handle most of this, and JavaScript'sencodeURIComponent()does it for you when building links in code. - In HTML text, the characters
<and&still need entities (<,&), as covered in the entities lesson.
HTML Best Practices Syntax
A clean page template
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Title | Site Name</title>
<meta name="description" content="A clear summary of this page.">
<link rel="stylesheet" href="/css/site.css">
<script src="/js/site.js" defer></script>
</head>
<body>
<header>...</header>
<main><h1>Page Title</h1></main>
<footer>...</footer>
</body>
</html>HTML Best Practices Summary
- Use lowercase tags and attributes, quote values, close and indent elements consistently.
- Name classes by purpose, keep structure semantic and styling in CSS.
- Validate pages with the W3C validator to catch hidden mistakes.
- Declare
<meta charset="utf-8">first in the head. - Percent-encode special characters in URLs and use entities for < and & in text.
HTML Best Practices Examples
Each example runs in the page. Edit the code and press Run to see what changes.
Messy and clean HTML side by side
<!-- messy: works, but hard to read and partly invalid -->
<DIV CLASS=red><P>Our <B>Products</B><div>New in!</div></DIV>
<!-- clean -->
<section class="product-intro">
<h2>Our products</h2>
<p class="badge">New in!</p>
</section>Line-by-line explanation
- Line 2Uppercase tags, unquoted attributes, a div inside a paragraph and an unclosed paragraph.
- Lines 5 to 8Lowercase, quoted, properly nested, with a heading and a purposeful class name.
UTF-8 and special characters
<p lang="fr">Café crème, s'il vous plaît.</p>
<p lang="de">Grüße aus München.</p>
<p>Prices: £12.50, €14.90, ¥2,000</p>
<p lang="ja">東京へようこそ</p>
<p>Write tags as text: <h1> and the ampersand as &.</p>Line-by-line explanation
- Lines 1 to 4With UTF-8, accented letters, currency symbols and other alphabets can be typed directly.
- Line 1
langon each paragraph helps screen readers pronounce other languages correctly. - Line 5Only
<and&need entities in normal text.
Building a safe search link
<p><a id="search" href="#">Search for "rock & roll" mugs</a></p>
<p id="out"></p>
<script>
const query = 'rock & roll mugs';
const url = 'https://shop.example/search?q=' + encodeURIComponent(query);
document.getElementById('search').href = url;
document.getElementById('out').textContent = url;
</script>Line-by-line explanation
- Line 4A search term with a space and an ampersand.
- Line 5
encodeURIComponentturns spaces into %20 and & into %26, so the URL isn't broken. - Line 7Shows the encoded address: q=rock%20%26%20roll%20mugs.
Common HTML Best Practices Mistakes
Missing charset
<head><title>Café menu</title></head><head><meta charset="utf-8"><title>Café menu</title></head>Without a declared encoding, "Café" can appear as "Café".
Duplicate ids
<input id="email"> ... <input id="email"><input id="email"> ... <input id="email-confirm">Labels, links and scripts can only find the first element with an id.
Block elements inside paragraphs
<p>Intro text <div class="box">Box</div></p><p>Intro text</p>
<div class="box">Box</div>The browser closes the paragraph early, leaving an empty <p> and unexpected styling.
HTML Best Practices in Real Projects
Quality checks in teams
Teams use linters such as HTMLHint and accessibility checkers in their editors and build pipelines, so invalid markup is caught in code review. Agencies validate client sites before launch, and content management systems set UTF-8 automatically. Clean, consistent HTML also makes pages easier for search engines to process and for future developers to change.
HTML Best Practices Exercises
Answer each one and check it instantly. If you get stuck, open the hint before the answer.
Complete the encoding declaration.
<meta charset="">Which tool checks HTML against the standard?
What does a space become in URL encoding?
Which class name follows good practice?
Clean up this markup: lowercase the tags, quote the attribute, and move the div out of the paragraph.
<P CLASS=intro>Welcome <DIV>to our shop</DIV></P>- The paragraph has class intro
- The div is not inside the paragraph
- The source uses lowercase tags
HTML Best Practices Quiz
5 questions to check what you learned.
Where should the charset meta tag go?
- First in the head
- At the end of the body
- In the footer
- Anywhere
What happens if two elements share an id?
- Both are styled correctly
- Labels, links and scripts only find the first, and the page is invalid
- The page won't load
- Nothing at all
Can a div go inside a p?
- Yes
- No, paragraphs can only contain inline content
- Only with a class
- Only in HTML5
Which JavaScript function encodes a value for a URL?
- escapeHTML
- toURL
- urlEncode
- encodeURIComponent
Why validate HTML if browsers display it anyway?
- Browsers require valid HTML
- Hidden errors can behave differently across browsers and break accessibility, styling and scripts
- Validation makes pages faster
- Search engines reject invalid pages
HTML Best Practices Challenge
A clean, valid snippet
Write markup that:
- Starts with
<meta charset="utf-8"> - Has a
<section class="team-intro">with an<h2>and a<p> - Has an image with an
altattribute and quoted attribute values - Uses only lowercase tag names
- Charset meta present
- Section with h2 and p
- Image with alt
- Lowercase tags only