HTML Style Guide
HTML Style Guide
An HTML Style Guide is a set of rules and best practices for writing clean, consistent, and maintainable HTML code.
Following a style guide ensures readability, accessibility, and easier collaboration.
Key Guidelines
1. Document Structure
-
Start with a proper
<!DOCTYPE html>declaration. -
Use
<html>,<head>, and<body>tags correctly. -
Include
<meta charset="UTF-8">for proper character encoding.
2. Use Semantic HTML
-
Prefer semantic tags over generic
<div>and<span>. -
Examples:
<header>,<nav>,<main>,<section>,<article>,<footer>.
3. Indentation and Formatting
-
Use consistent indentation (2 or 4 spaces per level).
-
Each opening tag on a new line; closing tag aligned with opening tag.
4. Lowercase Tags and Attributes
-
Use lowercase for tags and attribute names.
-
Example:
<img src="image.jpg" alt="Photo">.
5. Attribute Quotation
-
Always use double quotes for attribute values.
-
Example:
<a href="https://example.com">Link</a>.
6. Consistent Naming
-
Use kebab-case or camelCase for class and ID names.
-
Example:
class="main-content"orid="headerNav".
7. Comments
-
Use HTML comments for clarity and documentation.
8. Accessibility
-
Add alt text for images.
-
Use ARIA attributes when necessary.
-
Proper heading hierarchy (
<h1>→<h2>→<h3>).
9. External Resources
-
Link CSS and JavaScript files properly using
<link>and<script>tags.
10. Validation
-
Use W3C HTML Validator to check for errors.
-
Ensures standards compliance and better browser support.
Benefits of Following a Style Guide
-
Improves code readability and maintainability
-
Reduces bugs and errors
-
Enhances team collaboration
-
Makes websites SEO and accessibility friendly
