HTML Style Guide

---

Consistent, clean, and tidy HTML code makes it easier for others to read and understand your code.

Here are some guidelines and tips for creating good HTML code.

---

Always Declare Document Type

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

The correct document type for HTML is:

<!DOCTYPE html>

---

Use Lowercase Element Names

HTML allows mixing uppercase and lowercase letters in element names.

However, we recommend using lowercase element names, because:

• Mixing uppercase and lowercase names looks bad
• Developers normally use lowercase names
• Lowercase looks cleaner
• Lowercase is easier to type

Good:

<body>

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

</body>

Bad:

<BODY>

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

</BODY>

---

Close All HTML Elements

In HTML, you do not have to close all elements (for example the <p> element).

However, we strongly recommend closing all HTML elements, like this:

Good:

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

   </section>

Bad:

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

   </section>

---

Use Lowercase Attribute Names

HTML allows mixing uppercase and lowercase letters in attribute names.

However, we recommend using lowercase attribute names, because:

• Mixing uppercase and lowercase names looks bad
• Developers normally use lowercase names
• Lowercase looks cleaner
• Lowercase is easier to type

Good:

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

Bad:

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

---

Always Quote Attribute Values

HTML allows attribute values without quotes.

However, we recommend quoting attribute values, because:

• Developers normally quote attribute values
• Quoted values are easier to read
• You MUST use quotes if the value contains spaces

Good:

<table
   class="striped">

Bad:

<table class=striped>

Very bad:

<table class=table striped>

---

Always Specify alt, width, and height for Images

Always specify the alt attribute for images. This attribute is important if the image for some reason cannot be displayed.

Also, always define the width and height of images. This reduces flickering, because the browser can reserve space for the image before loading.

Good:

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

Bad:

<img
   src="html5.gif">

---

Spaces and Equal Signs

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

Good:

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

Bad:

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

---

Avoid Long Code Lines

When using an HTML editor, it is NOT convenient to scroll right and left to read the HTML code.

Try to avoid too long code lines.

---

Blank Lines and Indentation

Do not add blank lines, spaces, or indentations without a reason.

For readability, add blank lines to separate large or logical code blocks.

For readability, add two spaces of indentation. Do not use the tab key.

Good:

 <body>

<h1>Famous Cities</h1>

<h2>Tokyo</h2>

    <p>Tokyo is the capital of Japan, the
    center of the Greater Tokyo Area, and the most
    populous metropolitan area in the world.</p>

<h2>London</h2>

    <p>London is the capital city of England. It is the most populous city
  in the United Kingdom.</p>

<h2>Paris</h2>

    <p>Paris is the capital of France. The Paris area is one of the
  largest population centers in Europe.</p>

</body>

Bad:

 <body>
<h1>Famous Cities</h1>
<h2>Tokyo</h2><p>Tokyo is the capital of Japan, the
    center of the Greater Tokyo Area, and the most
    populous metropolitan area in the world.</p>
<h2>London</h2><p>London
  is the capital city of England. It is the most populous city in the United
  Kingdom.</p>
<h2>Paris</h2><p>Paris is the capital
  of France. The Paris area is one of the largest population centers in Europe.</p>
</body>

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>

Good List Example:

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

    <li>Tokyo</li>
</ul>

---

Never Skip the