HTML Style Guide

The HTML Style Guide provides best practices for writing clean, consistent, and readable HTML code, making it easier to maintain and understand.

On this page

HTML Style Guide

Writing clean and consistent HTML makes your code easier to read, understand, and maintain.

This style guide lists best practices and common conventions for writing well-structured HTML.

Always Declare the Document Type

The document type declaration should always be the first line in an HTML document.

<!DOCTYPE html>

Use Lowercase Element Names

HTML allows both uppercase and lowercase tag names, but lowercase is recommended for readability and consistency.

Good:

<body> <p>This is a paragraph.</p> </body>

Bad:

<BODY> <P>This is a paragraph.</P> </BODY>

Close All HTML Elements

Although some HTML elements do not strictly require closing tags, it is best practice to close all elements.

Good:

<section> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </section>

Bad:

<section> <p>This is a paragraph. <p>This is another paragraph. </section>

Use Lowercase Attribute Names

Attribute names should always be written in lowercase.

Good:

<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>

Bad:

<a HREF="https://www.w3schools.com/html/">Visit our HTML tutorial</a>

Always Quote Attribute Values

Attribute values should always be enclosed in quotes for clarity and reliability.

Good:

<table class="striped">

Bad:

<table class=striped>

Specify alt, width, and height for Images

Images should always include an alt attribute and explicit width and height to improve accessibility and layout stability.

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

Avoid Extra Spaces Around Equal Signs

Do not add unnecessary spaces around equal signs in attributes.

Good:

<link rel="stylesheet" href="styles.css">

Bad:

<link rel = "stylesheet" href = "styles.css">

Indentation and Readability

Use consistent indentation and blank lines to separate logical sections of code.

Good example:

<body>

Famous Cities

Tokyo

Tokyo is the capital of Japan.

London

London is the capital city of England.

Never Skip the title Element

The <title> element is required and plays a critical role in SEO and browser usability.

<title>HTML Style Guide and Coding Conventions</title>

Use html and body Elements

Although optional in modern browsers, the <html> and <body> elements should always be included to avoid compatibility issues.

Add the lang Attribute

The lang attribute helps browsers and search engines understand the language of the page.

<html lang="en">

Meta Charset and Viewport

Define the character encoding and viewport early in the document to ensure proper rendering.

<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

HTML Comments

Use short comments for single lines and indented blocks for longer explanations.

<!-- This is a comment -->

<!-- This is a longer comment. It spans multiple lines. -->

File Naming Conventions

Always use lowercase file names to avoid issues on case-sensitive servers.

Recommended extensions:

.html for HTML files
.css for CSS files
.js for JavaScript files

Default File Names

When no file name is specified in a URL, servers usually load a default file such as index.html.

Make sure your server configuration matches your file naming strategy.

HTML Style Guide Examples (4)

← HTML Semantics

HTML Entities →