HTML Style Guide

Consistent, clean, tidy HTML makes your code easier for others to read and understand. Here are some guidelines and tips for writing good HTML.

Always declare the document type as the first line of your document. For HTML, the correct one is <!DOCTYPE html>.

The doctype to put on the first line.

HTML allows mixing uppercase and lowercase element names, but lowercase is recommended: mixed case looks bad, developers normally use lowercase, and lowercase is cleaner and easier to type. So write <p>This is a paragraph.</p>, not <P>.

In HTML you do not have to close every element (like <p>), but it is strongly recommended that you do. Closing every tag keeps the structure clear and avoids surprises.

HTML allows mixed-case attribute names, but lowercase is recommended for the same reasons as element names: it looks cleaner, is what developers normally use, and is easier to type. So write href, not HREF.

HTML allows attribute values without quotes, but you should quote them: developers normally do, quoted values are easier to read, and you must use quotes if the value contains spaces. A value with spaces written without quotes will not work.

Always set the alt attribute on images, since it matters when the image cannot be shown. Also set the width and height, which reduces flickering because the browser can reserve space for the image before it loads.

HTML allows spaces around equal signs, but leaving them out is easier to read and groups things together better. So write rel="stylesheet", not rel = "stylesheet".

When using an HTML editor, scrolling left and right to read code is inconvenient, so try to avoid very long lines.

Do not add blank lines, spaces, or indentation without a reason. For readability, add blank lines to separate large or logical blocks, and use two spaces of indentation rather than the tab key.

The <title> element is required in HTML. It matters a lot for search engine optimization (SEO), since search engines use it to order pages in results. It sets the title in the browser toolbar, the name used when the page is bookmarked, and the title in search results, so make it accurate and meaningful.

An HTML page will validate even without the <html> and <body> tags, but you should always add them. Leaving out <body> can cause errors in older browsers, and leaving out both can crash DOM and XML software.

A page that omits the <html> and <body> tags (not recommended).

The <head> tag can also be left out; the browser adds all elements before <body> to a default head. Even so, using the <head> tag is recommended.

A page that omits the <head> tag (not recommended).

In HTML it is optional to close empty elements, so both <meta charset="utf-8"> and <meta charset="utf-8" /> are allowed. If you expect XML or XHTML software to read your page, keep the closing slash, because it is required there.

Always include the lang attribute on the <html> tag to declare the page's language. This helps search engines and browsers.

A document that declares its language with lang="en-us".

For correct interpretation and search-engine indexing, define both the language and the character encoding (<meta charset="...">) as early as possible in the document.

Declaring the language and character set early in the head.

The viewport is the user's visible area of a page, smaller on a phone than on a computer. Include the viewport <meta> tag in every page. The width=device-width part makes the page width follow the device's screen, and initial-scale=1.0 sets the starting zoom level.

The viewport meta tag to include in every page.

Write short comments on one line, like <!-- This is a comment -->. For comments that span several lines, put the <!-- and --> on their own lines; long comments are easier to read if indented two spaces.

Use simple syntax to link a style sheet (the type attribute is not needed). Short CSS rules can be written on one line, while long rules should span several lines: put the opening brace on the same line as the selector with one space before it, indent two spaces, end every property with a semicolon, quote values only when they contain spaces, and put the closing brace on its own line.

Use simple syntax to load external scripts; the type attribute is not needed, for example <script src="myscript.js">.

Untidy HTML can cause JavaScript errors. Because ids are case sensitive, getElementById("Demo") and getElementById("demo") refer to different elements and give different results.

Two statements that target different elements because the id case differs.

Some web servers (Apache, Unix) treat file names as case sensitive, so london.jpg is not the same as London.jpg; others (Microsoft IIS) are not. To avoid problems when moving between servers, always use lowercase file names.

HTML files should use the .html extension (.htm is allowed), CSS files the .css extension, and JavaScript files the .js extension.

There is no difference between the .htm and .html extensions. Both are treated as HTML by any browser and server.

When a URL does not name a file at the end (like https://prompt-cookbook.com), the server adds a default filename, such as index.html, index.htm, default.html, or default.htm. If the server's only default is index.html, your file must be named exactly that. Servers can also be set up with several default filenames.