HTML Style Guide

❮ Previous Next ❯
Lesson 39 of 58

Writing clean, consistent, and tidy HTML code makes your website easier to maintain. It also helps other developers understand your work when they look at your code.

Always Declare Document Type

The first line of every HTML document should be the document type declaration. For modern HTML, use this:

<!DOCTYPE html>

This tells the browser you are using HTML5. It should be the very first thing in your file, before anything else.

Tip: Always start your HTML files with <!DOCTYPE html>. It is required and prevents your page from going into “quirks mode” (where browsers pretend to be old and broken).

Use Lowercase Element Names

HTML allows both uppercase and lowercase tag names. But good developers use lowercase. It looks cleaner and is easier to type.

Good (Recommended)

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

Bad (Avoid)

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

Always Close Your HTML Elements

In HTML, some elements like <p> can technically be left unclosed. But do not do this. Always close every element that has a closing tag.

Good (Always close tags)

<section>
  <p>First paragraph.</p>
  <p>Second paragraph.</p>
</section>

Bad (Missing closing tags)

<section>
  <p>First paragraph.
  <p>Second paragraph.
</section>

Closing all your tags prevents weird layout bugs and makes your code more reliable.

Use Lowercase Attribute Names

Just like element names, attribute names should be lowercase. It looks better and is the standard practice.

Good

<a href="https://example.com">Link</a>

Bad

<a HREF="https://example.com">Link</a>

Always Quote Attribute Values

HTML allows you to skip quotes around attribute values. But do not skip them. Quotes make your code cleaner and prevent errors when values have spaces.

Good (Quoted)

<table class="demo-table striped">
<a href="https://example.com">Link</a>

Bad (No quotes or missing)

<table class=demo-table striped>
<a href=https://example.com>Link</a>

The second example with the table will not work because the class value has a space. Always use quotes to avoid these issues.

Always Specify alt, width, and height for Images

The alt attribute is required. It provides a text description if the image cannot load. The width and height attributes prevent page flickering by reserving space before the image loads.

Good (Complete image tag)

<img src="logo.png" alt="Company Logo" width="200" height="100">

Bad (Missing attributes)

<img src="logo.png">

Use Proper Indentation and Blank Lines

Good indentation makes your code readable. Use 2 spaces for each level of indentation. Do not use the Tab key (configure your editor to use spaces).

Good (Properly indented)

<body>

  <h1>Famous Cities</h1>

  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>

  <h2>London</h2>
  <p>London is the capital of England.</p>

</body>

Bad (No indentation, all on one line)

<body>
<h1>Famous Cities</h1>
<h2>Tokyo</h2><p>Tokyo is the capital of Japan.</p>
<h2>London</h2><p>London is the capital of England.</p>
</body>

Good Table Example:

<table>
  <thead>
    
      <th>Name</th>
      <th>Description</th>
    
  </thead>
  <tbody>
    
      A</td>
      Description of A</td>
    
    
      B</td>
      Description of B</td>
    
  </tbody>
</table>

Good List Example:

<ul>
  <li>London</li>
  <li>Paris</li>
  <li>Tokyo</li>
</ul>

Never Skip the title Element

The <title> element is required in every HTML document. It shows in browser tabs and search engine results. A good title improves SEO and helps users find your page.

<title>How to Bake a Chocolate Cake - Easy Recipe</title>

Always Include html, head, and body Tags

Technically, browsers can figure out your page without these tags. But always include them. Older browsers, search engines, and XML tools expect them.

Complete HTML Document Structure 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Page Title</title>
</head>
<body>

  <h1>Welcome to my website</h1>
  <p>This is my content.</p>

</body>
</html>

Add the lang Attribute

Always include the lang attribute in your <html> tag. It tells search engines and screen readers what language your page is written in.

<html lang="en">

For English in the United States:

<html lang="en-US">

Include Meta Data (Charset and Viewport)

Always include these two meta tags in your <head> section:

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

The charset tag ensures all characters (including emojis) display correctly. The viewport tag makes your site work on mobile devices.

Write Clean Comments

Use comments to explain complex parts of your code. Keep short comments on one line. Indent multi-line comments with 2 spaces.

<!-- This is a short comment -->

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

Use Lowercase File Names

Some web servers are case sensitive. “Image.jpg” is different from “image.jpg”. To avoid broken links, always use lowercase file names. Use hyphens to separate words.

Good

my-photo.jpg
logo.png
about-us.html

Bad (Might break)

MyPhoto.jpg
Logo.PNG
AboutUs.html

Use Correct File Extensions

  • HTML files should end with .html (or .htm is also acceptable)
  • CSS files should end with .css
  • JavaScript files should end with .js

There is no difference between .htm and .html. Both work. But .html is more common.

Default Filenames (index.html)

When someone visits your website without specifying a file (like “https://example.com/”), the server looks for a default file. Common default filenames are index.html, index.htm, default.html.

Always name your home page index.html. This is the standard and works on almost all web servers.

Quick Summary

  • Always start with <!DOCTYPE html>
  • Use lowercase for all tags and attributes
  • Always close your elements
  • Always quote attribute values
  • Always include alt, width, and height for images
  • Indent your code with 2 spaces (not tabs)
  • Use blank lines to separate logical sections
  • Always include <title>, <html>, <head>, and <body>
  • Add lang attribute to the <html> tag
  • Always include meta charset="UTF-8" and the viewport meta tag
  • Use lowercase file names with hyphens for spaces
  • Name your home page index.html

What Just Happened? Let Me Explain

  • Writing clean HTML is not just about looking professional. It prevents bugs, improves SEO, and helps other developers work with your code.
  • Most of these rules are not technically required by browsers. They are best practices that have developed over years of web development.
  • Your code editor (like VS Code) can help you follow these rules. Many editors have auto-formatting features.
  • Consistent code is easier to debug. When you know exactly how your code is formatted, you can spot missing tags or errors faster.
  • If you work on a team, everyone should follow the same style guide. These rules are a great starting point.
Tip: In VS Code, you can install the “Prettier” extension. It automatically formats your code to follow these rules. Set it to use 2 spaces for indentation and to add trailing commas when needed.

HTML Style Guide Reference

Here are the key rules we covered in this chapter:

Rule Good Example Bad Example
Document Type <!DOCTYPE html> Missing or old doctype
Lowercase tags <body> <BODY>
Close elements <p>text</p> <p>text
Quote attributes class="striped" class=striped
Image attributes alt="desc" width="100" height="100" No alt or size attributes
Indentation 2 spaces per level Tabs or inconsistent spacing
lang attribute <html lang="en"> No lang attribute
Meta tags UTF-8 and viewport Missing character set
File names my-photo.jpg My Photo.jpg
❮ Previous Next ❯
Lesson 39 of 58