# HTML Style Guide

A 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:

&lt;!DOCTYPE html&gt;

## 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.

## Use Lowercase Element Names

HTML allows the mixing of uppercase and lowercase letters in element names.

However, we recommend using lowercase element names, because:

* Mixing uppercase and lowercase names look bad
    
* Developers normally use lowercase names
    
* Lowercase looks cleaner
    
* Lowercase is easier to write
    

### Good:

&lt;body&gt;  
&lt;p&gt;This is a paragraph.&lt;/p&gt;  
&lt;/body&gt;

### Bad:

&lt;BODY&gt;  
&lt;P&gt;This is a paragraph.&lt;/P&gt;  
&lt;/BODY&gt;

## 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:

&lt;section&gt;  
  &lt;p&gt;This is a paragraph.&lt;/p&gt;  
  &lt;p&gt;This is a paragraph.&lt;/p&gt;  
&lt;/section&gt;

### Bad:

&lt;section&gt;  
  &lt;p&gt;This is a paragraph.  
  &lt;p&gt;This is a paragraph.  
&lt;/section&gt;

## 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 look bad
    
* Developers normally use lowercase names
    
* Lowercase looks cleaner
    
* Lowercase is easier to write
    

### Good:

&lt;a href="[https://www.w3schools.com/html/"&gt;Visit](https://www.w3schools.com/html/">Visit) our HTML tutorial&lt;/a&gt;

### Bad:

&lt;a HREF="[https://www.w3schools.com/html/"&gt;Visit](https://www.w3schools.com/html/">Visit) our HTML tutorial&lt;/a&gt;

## 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:

&lt;img src="html5.gif" alt="HTML5" style="width:128px;height:128px"&gt;

### Bad:

&lt;img src="html5.gif"&gt;

## Meta Data

To ensure proper interpretation and correct search engine indexing, both the language and the character encoding `<meta charset="charset">` should be defined as early as possible in an HTML document:

&lt;!DOCTYPE html&gt;  
&lt;html lang="en-us"&gt;  
&lt;head&gt;  
  &lt;meta charset="UTF-8"&gt;  
  &lt;title&gt;Page Title&lt;/title&gt;  
&lt;/head&gt;

Thanks & Regards

Sayed's Blog