HTML Style Guide and Coding Conventions

Adopt professional coding standards ensuring readable, uniform, and sustainable markup development

Uniform, well-structured code delivers substantial advantages. Style guidelines facilitate collaborative development, improve comprehension and maintenance, and guarantee adherence to professional conventions and industry benchmarks.

Always Declare Document Type

Always declare the document type as the first line in your HTML document.

✅ Correct

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page Title</title>
</head>
<body>
    <h1>This is a heading</h1>
</body>
</html>

Use Lowercase Element Names

HTML allows mixing uppercase and lowercase letters in element names. However, lowercase is recommended for:

  • Cleaner code appearance
  • Easier to write
  • More readable
  • Following industry standards

❌ Bad Practice

<SECTION>
    <P>This is a paragraph.</P>
</SECTION>

⚠️ Avoid Mixing

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

✅ Good Practice

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

Close All HTML Elements

Always close HTML elements, even if HTML5 doesn't strictly require it for some elements.

❌ Bad Practice

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

✅ Good Practice

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

Close Empty HTML Elements

In HTML, it's optional to close empty elements. However, if you expect XML/XHTML software to access your page, it's a good practice to close them.

✅ Allowed

<meta charset="UTF-8">
<img src="logo.png" alt="Logo">
<br>
<hr>

✅ Also Allowed (More Explicit)

<meta charset="UTF-8" />
<img src="logo.png" alt="Logo" />
<br />
<hr />

Note: The closing slash is required in XHTML and XML. If you expect XML software to access your page, it's a good idea to keep the closing slash.

Use Lowercase Attribute Names

HTML allows mixing uppercase and lowercase letters in attribute names. However, lowercase is recommended.

❌ Bad Practice

<a HREF="https://example.com">Link</a>
<div CLASS="container">Content</div>

✅ Good Practice

<a href="https://example.com">Link</a>
<div class="container">Content</div>

Always Quote Attribute Values

HTML allows attribute values without quotes in some cases. However, using quotes is recommended and required when the value contains spaces.

❌ Bad Practice (Will Fail)

<p class=main text>This will not work</p>

⚠️ Works But Not Recommended

<img src=logo.png alt=Logo>

✅ Good Practice

<p class="main text">This works correctly</p>
<img src="logo.png" alt="Logo">

Always Specify alt, width, and height for Images

Always specify the alt attribute for images. This is important for accessibility. Also specify width and height to reduce flickering during page load.

❌ Bad Practice

<img src="landscape.jpg">

✅ Good Practice

<img src="landscape.jpg" alt="Mountain landscape at sunset" width="800" height="600">

Spaces Around Equal Signs

HTML allows spaces around equal signs. However, space-less is easier to read and groups entities better together.

⚠️ Less Readable

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

✅ More Readable

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

Avoid Long Code Lines

When using an HTML editor, it's inconvenient to scroll right and left to read HTML code. Try to avoid code lines longer than 80 characters.

❌ Too Long

<button class="btn btn-primary btn-large" onclick="handleClick()" data-toggle="modal" data-target="#myModal">Click Me</button>

✅ Better Formatting

<button
    class="btn btn-primary btn-large"
    onclick="handleClick()"
    data-toggle="modal"
    data-target="#myModal">
    Click Me
</button>

Blank Lines and Indentation

Do not add blank lines without a reason. Add 2 spaces of indentation for readability. Do not use tabs.

❌ Bad Practice

<body>

<h1>My Website</h1>

<p>Welcome to my website.</p>

<p>This is some content.</p>

</body>

✅ Good Practice

<body>
  <h1>My Website</h1>
  <p>Welcome to my website.</p>
  <p>This is some content.</p>
</body>

✅ Good Practice - Separating Sections

<body>
  <header>
    <h1>My Website</h1>
    <nav>
      <a href="/">Home</a>
      <a href="/about">About</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>Article Title</h2>
      <p>Article content...</p>
    </article>
  </main>

  <footer>
    <p>Copyright 2025</p>
  </footer>
</body>

Never Skip the <title> Element

The <title> element is required in HTML and is important for SEO. Make the title as meaningful as possible.

❌ Bad Practice

<title>Page</title>

✅ Good Practice

<title>HTML Style Guide and Coding Conventions | HTML Free Codes</title>

Omitting <html> and <body>?

In HTML, you can omit the <html> and <body> tags. However, we do not recommend omitting them.

Why Always Include Them?

  • Omitting tags can crash DOM and XML software
  • Can produce errors in older browsers
  • Makes code structure clearer
  • Following best practices ensures compatibility

✅ Always Use Complete Structure

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title</title>
</head>
<body>
  <h1>Page Content</h1>
</body>
</html>

Never Omit <head>

The <head> element should never be omitted. It contains important metadata and is required for proper document structure.

✅ Minimum Required Head

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title</title>
</head>
<body>
  <!-- Page content -->
</body>
</html>

Set Viewport and Charset

Both the language, charset, and viewport should be defined as early as possible in an HTML document.

✅ Good Practice

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Style Guide</title>
</head>

HTML Comments

Short comments should be written on one line. Comments that span more than one line should be written with proper formatting.

✅ Short Comments

<!-- This is a short comment -->
<p>Some content</p>

✅ Long Comments

<!--
  This is a longer comment that explains
  something more complex and requires
  multiple lines to describe properly.
-->
<section>
  <p>Content here</p>
</section>

Loading Stylesheets and Scripts

Use simple syntax for loading stylesheets and scripts. The type attribute is not necessary for CSS and JavaScript.

✅ Link to Stylesheet

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

✅ Load JavaScript

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

Note: The type="text/css" and type="text/javascript" attributes are no longer required in HTML5.

Use Lowercase File Names

Some web servers (Apache, Unix) are case-sensitive about file names. Other servers (Microsoft, IIS) are not. To avoid problems, always use lowercase file names.

❌ Bad Practice

MyWebsite.html
ContactForm.html
AboutUs.HTML

✅ Good Practice

mywebsite.html
contact-form.html
about-us.html

File Extensions

HTML files should have a .html extension (not .htm). CSS files should have a .css extension. JavaScript files should have a .js extension.

Common Extensions

  • .html for HTML files
  • .css for stylesheets
  • .js for JavaScript files
  • .json for JSON data files
  • .xml for XML files

HTML Style Guide Summary

✓ Essential Rules

  • Always declare <!DOCTYPE html>
  • Use lowercase element names
  • Close all HTML elements
  • Use lowercase attribute names
  • Always quote attribute values
  • Always specify alt, width, and height for images
  • Avoid spaces around equal signs
  • Avoid long code lines (max 80 characters)
  • Use 2 spaces for indentation (not tabs)
  • Never skip the <title> element
  • Always include <html>, <head>, and <body>
  • Always set viewport and charset
  • Use lowercase file names
  • Use standard file extensions (.html, .css, .js)

Test Your Knowledge