HTML Style Guide (with Example)

Introduction

Maintaining a consistent and well-structured HTML code is essential for readability and collaboration among developers. Explore guidelines and best practices in our HTML Style Guide to ensure a clean and effective codebase.

Always Declare Document Type

Begin your HTML document with the HTML5 doctype declaration for compatibility and validation.

<!DOCTYPE html>

HTML

Use Lowercase Element Names

Maintain uniformity and readability by consistently using lowercase for HTML element names.

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

HTML

Close All HTML Elements

While it’s not mandatory, it’s recommended to close all HTML elements for clarity and consistency.

<section>
  <p>This is a paragraph.</p>
  <p>This is another paragraph.</p>
</section>

HTML

Use Lowercase Attribute Names

Opt for lowercase attribute names to enhance the cleanliness of your code.

<a href="<https://www.w3schools.com/html/>">Visit our HTML tutorial</a>

HTML

Always Quote Attribute Values

Quote attribute values to enhance readability and avoid potential issues.

<table class="striped">

HTML

Always Specify alt, width, and height for Images

Ensure images include alt attributes, width, and height for accessibility and layout consistency.

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

HTML

Spaces and Equal Signs

Maintain a clean appearance by avoiding unnecessary spaces around equal signs.

<link rel="stylesheet" href="styles.css">

HTML

Avoid Long Code Lines

Improve code readability by keeping lines reasonably short, avoiding horizontal scrolling.

<body>
  <h1>Famous Countries</h1>
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan...</p>
  <!-- ...other countries -->
</body>

HTML

Blank Lines and Indentation

Enhance code organization with consistent indentation and strategic use of blank lines.

<body>
  <h1>Famous Cities</h1>
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan...</p>
  <!-- ...other cities -->
</body>

HTML

Good Table Example:

<table>
  <tr>
    <th>Name</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>A</td>
    <td>Description of A</td>
  </tr>
  <tr>
    <td>B</td>
    <td>Description of B</td>
  </tr>
</table>

HTML

Good List Example:

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

HTML

Never Skip the <title> Element

Include a meaningful <title> element for SEO and user understanding.

<title>HTML Style Guide and Coding Conventions</title>

HTML

Omitting <html> and <body>?

While technically allowed, it’s advisable to include <html> and <body> tags to prevent potential issues.

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

HTML

Add the lang Attribute

Enhance accessibility and SEO by including the lang attribute in the <html> tag.

<html lang="en-us">
<head>
  <title>Page Title</title>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

HTML

Meta Data

Declare language and character encoding early in the document for proper interpretation and SEO.

<html lang="en-us">
<head>
  <meta charset="UTF-8">
  <title>Page Title</title>
</head>

HTML

Setting The Viewport

Include the viewport meta tag for better control of page dimensions and scaling.

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

HTML

HTML Comments

Write concise comments and use indentation for clarity.

<!-- This is a comment -->

<!--
  This is a long comment example.
  This is a long comment example.
-->

HTML

Using Style Sheets

Adopt simple syntax for linking to style sheets and maintain a consistent style.

<link rel="stylesheet" href="styles.css">

HTML

Loading JavaScript in HTML Style Guide

Use straightforward syntax for loading external scripts.

<script src="myscript.js"></script>

HTML

Accessing HTML Elements with JavaScript

Ensure clean HTML code to prevent JavaScript errors.

document.getElementById("demo").innerHTML = "Hello";

HTML

Use Lower Case File Names

Consistently use lowercase file names to avoid issues with case-sensitive servers.

File Extensions

Use appropriate file extensions for HTML, CSS, and JavaScript files.

Conclusion

Consistent adherence to HTML style guide is crucial for creating maintainable, readable code. These practices contribute to better collaboration among developers and an improved user experience.

Frequently Asked Questions

1. Why is it important to use lowercase elements and attribute names in HTML?

Using lowercase ensures consistency, and readability, and aligns with common developer practices.

2. Should all HTML elements be closed?

While not mandatory, closing all HTML elements is recommended for clarity and code consistency.

3. Why include the alt attribute for images?

The alt attribute improves accessibility and provides alternative text when images cannot be displayed.