HTML
📌 HTML5 Style Guide — Basic Rules and Recommendations
This guide provides recommended rules and practices to make your HTML code more readable, consistent, and easier to maintain.
1. Always Declare the Doctype
The doctype tells the browser that the page uses HTML5.
<!DOCTYPE html>This declaration should always be at the very top of the document.
2. Use Lowercase for Tag Names
HTML is case-insensitive, but using lowercase improves readability and consistency.
<p>This is a paragraph.</p>
<P>This is a paragraph.</P>
This declaration should always be at the very top of the document.
3. Always Close HTML Elements
Some HTML elements work without a closing tag, but closing tags are recommended to avoid issues, especially in larger projects.
<section>
<p>Paragraph text.</p>
</section>
<section>
<p>Paragraph text.
</section>
4. Use Lowercase for Attribute Names
Attributes like href or class should always be lowercase.
<a href="page.html">Link</a>
<a hHREF="page.html">Link</a>
5. Always Quote Attribute Values
Although HTML allows unquoted values, using quotes is best practice.
<img src="image.jpg" alt="Image description"> <!-- Good -->
<img src=image.jpg alt=Image> <!-- Not recommended -->
Quotes are required when the value contains spaces.
6. Specify alt, width, and height for Images
- alt: Text shown if the image cannot load; important for accessibility.
- width & height: Helps browsers allocate space and prevents layout shifts.
<img src="logo.png" alt="Logo" width="100" height="100">7. Avoid Spaces Around the Equal Sign
<link rel="stylesheet" href="style.css"> <!-- Good -->
<link rel = "stylesheet" href = "style.css"> <!-- Not recommended -->
8. Avoid Long Lines
Long lines can create horizontal scrolling and reduce readability. Break logical blocks into separate lines.
9. Use Indentation and Blank Lines
Use consistent indentation (e.g., 2 spaces) and blank lines to improve readability, but avoid excessive empty lines.
10. Always Include <title>
The <title> element sets the page title:
- Visible in the browser tab
- Used when bookmarking
- Important for SEO
<title>Page Title</title>11. Include <html> and <body>
Pages may technically work without them, but always include <html> and <body> to prevent potential issues in older browsers or DOM scripts.
12. Include <head> for Clarity
Browsers can add <head> automatically, but explicitly writing it keeps the structure clear.
13. Closing Empty Elements
Some elements like <meta>, <img> and <br> are self-closing:
<meta charset="UTF-8">If working in XHTML or XML contexts, you may need:
<meta charset="UTF-8" />14. Specify Page Language with lang
Add the lang attribute to the <html> tag:
<html lang="en-us">15. Metadata
- Specify character encoding:
<meta charset="UTF-8">- Set viewport for responsive design:
<meta name="viewport" content="width=device-width, initial-scale=1.0">16. HTML Comments
Use comments to explain code:
<!-- Short comment -->
<!--
Long comment block.
Can span multiple lines.
-->
17. Including CSS
Include external CSS files without specifying type (defaults to text/css):
<link rel="stylesheet" href="styles.css">18. Including JavaScript
IExternal scripts don’t require type="text/javascript" anymore:
<script src="script.js""></script>19. Accessing Elements with JavaScript
Consistent ID and class naming is crucial to prevent errors:
document.getElementById("Demo") // Different from "demo"20. Use Lowercase for File Names
Some servers are case-sensitive, so using lowercase consistently avoids errors:
- Examples: logo.png, style.css, script.js
21. Use Correct File Extensions
- HTML: .html or .htm
- CSS: .css
- JavaScript: .js
Correct extensions ensure proper browser and server handling.
22. Default File Names
If no file name is specified in a URL (e.g., www.site.com/), the server usually loads a default file like index.html. Make sure your main page matches this naming convention.
Why These Guidelines Matter
- HTML is forgiving, but following a style guide improves code quality.
- Readability, consistency, and maintainability are enhanced.
- Reduces errors in larger projects or team environments.
- Easier to maintain, update, and scale code in the long term.