A short checklist that separates professional HTML from beginner HTML.
Always Declare the Doctype
Example
<!DOCTYPE html>Without it, browsers fall into "quirks mode" and render inconsistently.
Always Set the Language
Example
<html lang="en">Helps screen readers pronounce your text and search engines target the right audience.
Always Use Lowercase Tags
Example
<!-- Avoid -->
<P>Text</P>
<!-- Prefer -->
<p>Text</p>Always Close Your Elements
Example
<!-- Avoid -->
<p>One
<p>Two
<!-- Prefer -->
<p>One</p>
<p>Two</p>Always Quote Attribute Values
Example
<!-- Avoid -->
<a href=/books>Books</a>
<!-- Prefer -->
<a href="/books">Books</a>Always Add alt to Images
Example
<img src="book.jpg" alt="Palpasa Cafe book cover">Required for accessibility, and shown if the image fails to load.
Use Semantic Elements
Example
<!-- Avoid -->
<div class="header">...</div>
<div class="nav">...</div>
<!-- Prefer -->
<header>...</header>
<nav>...</nav>Keep Styling in CSS
Example
<!-- Avoid -->
<p style="color:red;font-size:20px;">Warning</p>
<!-- Prefer -->
<p class="warning">Warning</p>Then style .warning in your stylesheet. One change updates every
warning on the site.
Indent Consistently
Example
<ul>
<li>
<a href="/books">Books</a>
</li>
</ul>Two spaces per level is the most common convention.
Never Skip Heading Levels
Example
<!-- Avoid -->
<h1>Title</h1>
<h4>Subtitle</h4>
<!-- Prefer -->
<h1>Title</h1>
<h2>Subtitle</h2>Validate Your HTML
Run your page through the W3C Validator. It catches unclosed tags, duplicate ids, and invalid nesting that browsers silently paper over.
Accessibility Checklist
- Every image has
alt - Every form input has a
<label> - Link text describes the destination — not "click here"
- Headings follow a logical order
- Colour is never the only way information is conveyed
- The page works with the keyboard alone
Where to Go Next
You now know how to structure a page. The next steps:
CSS — make it look good. Colours, layout, responsive design.
JavaScript — make it interactive. Respond to clicks, load data, update the page.
Build something small and real — a personal page, a shop page for a family business, a college project. Nothing teaches HTML faster than having to make one specific page work properly.