← Back to HTML Course | Chapter 4: Semantics & Entities | Lesson 2 of 10

HTML Style Guide

Imagine driving on a road where there are absolutely no lane lines, speed limits, or rules about which side of the street to drive on. It would be total chaos. An HTML style guide is that essential rulebook for writing code. HTML is very forgiving—if you make typos or forget tags, the browser still tries to display your page. However, sloppy code is difficult to read and maintain. Following a clean style guide ensures your code stays consistent, accessible, and easy for other developers to read and debug.

In this page:

  1. The Importance of lowercase
  2. Standardizing Attribute Quotes
  3. Consistent Indentation and Nesting
  4. Closing Self-Closing Elements
  5. Naming Files and Folders

The Importance of lowercase

Although HTML is case-insensitive, writing tags and attributes in lowercase is the industry standard. It is recommended by the W3C and required by stricter formats like XHTML.

Note: Always write all your tag names and attribute keys in lowercase for consistency.
Warning: Using uppercase tags like looks messy and can cause parsing errors in XML-based platforms.

Example: The Importance of lowercase

markup 
<p>Correct: lowercase tag names</p>
<P>Incorrect: uppercase tag names</P>

Standardizing Attribute Quotes

HTML allows you to omit quotes around attribute values if they do not contain spaces. However, omitting quotes is a bad habit that can cause layout-breaking errors when values contain spaces or special characters.

Note: Make it a strict habit to always wrap all attribute values inside standard double quotes.
Warning: Omitting quotes on values containing spaces will cause browsers to misread your attributes, leading to bugs.

Example: Standardizing Attribute Quotes

markup 
<!-- Correct: quotes protect values with spaces -->
<img src="my photo.jpg" alt="My photo">
<!-- Bad: omitting quotes breaks multi-word values -->
<img src=my photo.jpg alt=My photo>

Consistent Indentation and Nesting

Indentation does not affect how the browser renders your page, but it is vital for readability. Indenting nested child elements by 2 or 4 spaces makes your page structure easy to read at a glance.

Note: Use your code editor's auto-format shortcut to quickly align and clean up your indentation.
Warning: Overlapping your HTML tags in the wrong nesting order will cause layout bugs in your browsers.

Example: Consistent Indentation and Nesting

markup 
<div>
  <p>Indented by 2 spaces</p>
</div>

Closing Self-Closing Elements

In modern HTML5, adding a trailing slash to self-closing elements (like or ) is optional. However, choosing one style and sticking to it consistently throughout your project is essential for clean code.

Note: Omit the trailing slash in modern HTML5 projects to keep your markup clean and lightweight.
Warning: Mixing both styles on the same page looks messy; keep your self-closing tags consistent.

Example: Closing Self-Closing Elements

markup 
<br>
<br />

Naming Files and Folders

Web servers are case-sensitive. To prevent broken links when you publish your site, you should always name your files and folders in lowercase, using hyphens instead of spaces to separate words.

Note: Save your primary entry page with the name index.html in lowercase.
Warning: Using spaces in your filenames will force browsers to encode them as %20, creating ugly, unreadable URL paths.

Example: Naming Files and Folders

markup 
<link rel="stylesheet" href="css/main-styles.css">
Live Example
Related Topics

HTML Semantics · HTML Entities · HTML Symbols · HTML Emojis

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Mixing uppercase and lowercase letters within your HTML tag names.
  2. Omitting double quotes on attribute values that contain spaces.
  3. Using spaces instead of hyphens when naming your HTML files and asset folders.
Chapter Summary
  • Write all HTML tag and attribute names in lowercase for professional consistency.
  • Always wrap attribute values in double quotes, even if they are single words.
  • Use clear indentation and consistent naming patterns (using hyphens for file names) to keep your project organized.
Browser Support

Browsers are very forgiving with poorly formatted HTML, but following a style guide is essential for keeping your code readable and easy to maintain.

🔒

Chapter Quiz — Complete all 10 topics to unlock

0/10 topics done

Complete these topics first:

← Previous Lesson HTML Semantics Next Lesson → HTML Entities

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.