When writing HTML, a primary goal should be to write consistent, clean code that anyone, including your future self, can go back to and easily understand.

HTML or HTM Extention

Creating your document with either the .html or .htm extension is acceptable and will be treated the same by the browser.

  • index.html
  • index.htm

Declare Your Document Type

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

				
					<!DOCTYPE html>
				
			

Each Page Should Always Have a Title Tag

The title tag defines the title of the page being displayed in the browser. It must be text only, and will be shown in the browser’s title bar or tab.

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

Be Consistent with Upper or Lowercase

Although HTML5 is not case sensitive (P is the same as p, H1 is the same as h1), it is good practice to be consistent. We would advice sticking to lowercase for most things other than !DOCTYPE which is traditionally written in all caps followed by html written in lowercase as you can see below.

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

Close All HTML Tags

Although not always necessary, it is advised to close all tags. Some elements like the img tag are self closing ( /).

				
					<p>This is a paragraph and has a closing tag.</p>
<img decoding="async" src="/images/logo.png" alt="1SMARTchicken logo" />
				
			

Attribute Values Should be in Quotes

Again, although not necessary, it is good practice to place all attribute values in quotes.

				
					<p>This is a paragraph with the class attribute my_paragraph.</p>
				
			

Images Should Always Have Alt, Width, and Height Attributes

The alt attribute is absolutely necessary as it will be used if the image cannot be loaded or if the viewer is using a screen reader.

The width and height being set keeps the page from jumping around as the image is loaded, which makes for a more pleasant experience.

				
					<img decoding="async" src="/images/logo.png" alt="1SMARTchicken logo" width="400" height="400" />
				
			

Use Indentation to Give the Code an Outline Structure

This makes the code easier to read, and helps to understand which elements are nested within other elements and which are siblings to other elements.

				
					
    <h1>My Heading</h1>
    <p>My paragraph.</p>
    <h2>Chapter 1</h2>
    <p>My paragraph.</p>
    <h2>Chapter 2</h2>
    <p>My paragraph.</p>