HTML Style Guide
In this page:
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
<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
<!-- 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
<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
<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
<link rel="stylesheet" href="css/main-styles.css">- Mixing uppercase and lowercase letters within your HTML tag names.
- Omitting double quotes on attribute values that contain spaces.
- Using spaces instead of hyphens when naming your HTML files and asset folders.
- 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.
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: