Table of Contents

HTML Style Guide

Every developer loves to write neat and clean code, so that everyone can read and understand it easily.

Here are some tips for writing good HTML code.

Declare Document Type

Whenever you create new HTML document always declare the Document type in your first line. It tells the browser version of HTML the page is written in.

Here is the correct way to declare Document type:

<!DOCTYPE html>

Always Use Lowercase Element Names

We can also use uppercase element names. However most of the developers prefer to use lowercase element names, as it is easy to read and write.

Bad Code:

<BODY>
<p> your text here </p> 
</BODY>

Good Code:

<body>
<p> your text here </p> 
</body>

Close All HTML Elements

If we don’t close some html elements like <p> element, our code will still run as usual. However, we should always close all html elements, which makes our code easily to read and understand.

Use Lowercase Attribute Names

Just like element names, we can also write html attributes in uppercase. However, by using uppercase attribute names our code looks unprofessional. That makes it difficult for other developers to read our code.

Always define alt, width and height for images

Whenever we use images in HTML, it’s mandatory for us to specify the alt attribute for an image. If the image did not displayed for some reason the text written in the alt attribute will be displayed.

By defining width and height of images reduces flickering, because the browser can reserve space for the image before loading.

Here is the correct and wrong way to add an image in html:

Bad:

<img src= "demo.jpg">

Good:

<img src="demo.jpg" alt="text" style="width:240px; height:220px;">

Spaces After Attributes

It’s totally upto us to put spaces after attributes or not. But less spaces is equal good and rediable code.

Here is the correct and wrong way to put space after attributes:

Good:

<img src="demo.jpg">

Bad:

<img src = "demo.jpg">

Always Add <title> Element

The <title> element is mandatory to add in HTML. The <title> is very important for SEO. The <title> is used by search engine algorithms to decide whether the content is related to user’s search or not. Try to add the title short and meaningful.

Always Add the lang Attribute

We should always add the lang attribute to declare the web page language. The lang attribute is placed inside the <html> tag.

Here is how you can add lang attribute in the web page:

<!DOCTYPE html>
<html lang="en-us">
<head>
  <title>Title</title>
</head>

Other Tips

Avoid long lines of Code.
Always add attribute values inside the quotation marks (” “).
Always add the <title> element.
Always add <head> element: Our code will run with or without the <head>element. But still we should always add the <head> element to make our web page attractive.
Setting the Viewport: Viewport is the user’s visible area of a page. It is small on mobile phone and large on desktop. You can check out HTML Responsive Tutorial for more info.
Add CSS to your code to make it more stylish. (How to Add CSS to HTML)