HTML Syntax Guidelines

As a developer, one has to write a consistent, clean, and tidy HTML code, which makes it easy for others to read and understand.

A clean code always helps in reducing the cost and time for future code changes, thereby reducing the code maintenance cost.

Here is a list of tips or guidelines to write a clean HTML code.

Guideline for Description
Doctype Always declare a proper doctype to each HTML document.
Head and Body Elements Always define head and body elements (<head> and <body>) in every HTML document, though the page can be validated even without them.
  • Recommended to always use head and body elements.
Page Title Always include a title element <title> to define the page title.
Lang Attribute Always use lang attribute to define the language of a web page, as it is required to assist search engines and browsers.
Meta Data Always use the necessary meta data using meta tags, as they ensure proper interpretation and correct search engine indexing.
  • Character Set
  • Viewport
Elements

Define elements following the below guidelines

  • Use lowercase element names.
  • Close non-empty HTML elements with a closing tag.
  • Close empty element only if the page is expected to be accessed or processed by a XML/XHTML software. 
Attributes

Define attributes following the below guidelines

  • Use lowercase attribute names.
  • Always use quotes around the attribute values.
  • Never use spaces around the equal sign, between the attribute key and its value.
Images Always define alt, height, and width for images, to avoid flickering while loading images.
Comments Include comments wherever needed.
  • Single line comments or short comments that can fit on a single line.
  • Multi-line comments that span across multiple lines.
Using Styles Include external style sheets using the link element <link>, which is the preferred way of adding styles to an HTML document.
  • Short CSS rules can be compressed to a single line, by placing the properties one after the other on a single line.
  • Long CSS rules can be extended to multiple lines, by placing one property on each line.
Using Scripts Include external javascript files using the script element <script>, which is the preferred way of adding scripts to an HTML document.
  • The type attribute is optional.
  • Access DOM elements using the class or id attributes.
File Names Always make sure the below guidelines are followed for file names in an HTML document.
  • Recommended to use lowecase file names.
  • Some web servers are case sensitive about file names, like Apache, Unix, etc.,
    • Treats the file name 'example.jpg' and 'Example.jpg' as different.
  • Some web servers are case insensitive about file names, like Microsoft, IIS, etc.,
    • Treats the file name 'example.jpg' and 'Example.jpg' as same.
  • So using a mix of upper and lower cases may break the application, when it is moved from one type of server to other.
File Extensions Always make sure the correct file extensions are used.
  • HTML files must have an extension of either .html or .htm
  • CSS files must have an extension of .css
  • JavaScript files must have an extension of .js
  • and so on.
Default Root File Names Web servers add default file name to the root URL automatically, when the file name is not specified.
  • Default file name can differ with web server, which can be one of these: index.html, index.htm, default.html, default.htm.
  • Default file name can be configured on web server configuration, which can even accept more than one default file name.
  • So, make sure to name the default file name as configured on the web server.

Doctype Declaration

Doctype declaration must be on the first line in an HTML document.

Use the below Doctype declaration for HTML5 documents.

<!DOCTYPE html>

Omitting <html>, <head> and <body> elements

Though, an HTML document is validated without any errors even without these elements, it is always recommended to include them.

  • Omitting <html>, <head>, and <body> can get the HTML document validated without any errors in all modern browsers.
  • Omitting <body> can cause errors in older browsers.
  • Omitting <html> and <body> can crash DOM and XML softwares, that deal with DOM elements.
  • Omitting <head> will add all the elements before <body> to a default <head> element.

Example - Omitting both <html> and <body> elements

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

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

Example - Omitting <head> element

<!DOCTYPE html>
<html>
<title>Page Title</title>
<body>
    <h1>Heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>

Close Empty elements

According to HTML5 standards, empty elements doesn't need a closing tag or a slash to close the tag. However, they doesn't cause any errors.

See empty elements for more details.

<meta charset="utf-8">
<meta charset="utf-8" />

Lang Attribute

The lang attribute defines the language of a web page, which assist search engines and browsers.

<!DOCTYPE html>
<html lang="en-US">
<head>
    <title>Page Title</title>
</head>
<body>
    <h1>Heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>

HTML Comments

Single line or short comment, that span across a single line.

<!-- Single line comment -->

Multi-line or long comment, that span across multiple lines.

<!--
    Multiple line comment.
    It spans multiple lines like this.
-->

Loading External Style files

Use the link element <link> to include an external CSS style sheet into an HTML document.

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

Loading External JavaScript files

Use the script element <script> to include external JavaScript file into an HTML document.

<script src="scripts.js">

Check the below links to know how to access the DOM elements using the class or id attributes.

Overall

We now know the guidelines to write a clean and consistent code, let's start writing a clean HTML code.

Related Links