Skip to content

HTML Coding Standards

Jump to bottom
Adam Szablya edited this page Jun 2, 2024 · 1 revision

Metrolla has adopted Google coding standards. the main addition is with style and implementation with other systems such as Metrolla Purple. Grey and White, and external websocket technology.

Google's HTML coding standards focus on writing clear, maintainable, and efficient HTML code. Here are the key points from Google's HTML style guide:

Google HTML Style Guide

1. General Principles

  • Clarity: Write clear and understandable HTML code.
  • Consistency: Follow a consistent structure and naming convention.
  • Simplicity: Keep the HTML code simple and avoid unnecessary complexity.

2. Document Type

  • Always use the HTML5 doctype: 
    <!DOCTYPE html>

3. HTML Syntax

  • HTML Tags: Use lowercase for all HTML elements and attributes. 
    <div class="container">
  • Attribute Quotes: Use double quotes for attribute values. 
    <input type="text" name="username">
  • Boolean Attributes: Omit the value for boolean attributes. 
    <input type="checkbox" checked>

4. HTML Structure

  • HTML5 Elements: Use HTML5 semantic elements (<header>, <footer>, <nav>, <section>, <article>, etc.) where appropriate. 
    <header>
  <nav>
    <!-- Navigation links -->
  </nav>
</header>
<section>
  <article>
    <!-- Article content -->
  </article>
</section>
<footer>
  <!-- Footer content -->
</footer>
  • Indentation: Use 2 spaces for indentation.
  • Line Length: Limit lines to 80 characters when possible.
  • Whitespace: Use whitespace to improve readability. For example, separate block-level elements with a blank line.

5. HTML Comments

  • Use comments to describe the structure and purpose of significant sections of the document. 
    <!-- Main navigation bar -->
<nav>
  <!-- Navigation links -->
</nav>

6. CSS and JavaScript Inclusion

  • CSS: Link external CSS files in the <head> section. 
    <link rel="stylesheet" href="styles.css">
  • JavaScript: Place <script> tags at the end of the <body> section unless the script needs to be loaded earlier. 
    <script src="scripts.js"></script>

7. Accessibility

  • Alt Text: Always provide meaningful alt text for images. 
    <img src="logo.png" alt="Company Logo">
  • Labels: Use <label> elements to associate labels with form controls. 
    <label for="username">Username</label>
<input type="text" id="username" name="username">
  • ARIA: Use ARIA (Accessible Rich Internet Applications) attributes to enhance accessibility where necessary. 
    <button aria-label="Close">X</button>

8. Forms

  • Fieldsets and Legends: Use <fieldset> and <legend> to group related form elements. 
    <fieldset>
  <legend>Personal Information</legend>
  <label for="name">Name</label>
  <input type="text" id="name" name="name">
  <label for="email">Email</label>
  <input type="email" id="email" name="email">
</fieldset>

9. HTML5 Validation

  • Use HTML5 validation features like required, pattern, type, and minlength. 
    <input type="email" name="email" required>

Example Code

Here is an example that illustrates some of these standards:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sample Page</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- Main header -->
  <header>
    <nav>
      <!-- Navigation links -->
    </nav>
  </header>

  <!-- Main content section -->
  <section>
    <article>
      <h1>Welcome to Our Website</h1>
      <p>This is a sample page following the Google HTML style guide.</p>
      <img src="welcome.jpg" alt="Welcome Image">
    </article>
  </section>

  <!-- Footer -->
  <footer>
    <p>&copy; 2024 Company Name. All rights reserved.</p>
  </footer>

  <script src="scripts.js"></script>
</body>
</html>

For the most detailed and up-to-date information, you can refer to the full Google HTML/CSS Style Guide.

Clone this wiki locally