HTML: Style Guide and (Examples With Good and Bad Practices)

Guidelines for styling HTML code - makes it easier for others to read and understand your code

A consistent, neat, & clean HTML code makes it more comfortable for others to read and understand your code.

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

{tocify} $title={Table of Contents}

HTML: Style Guide

Never Forget to Declare Document Type

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

The valid document type for HTML is:

<!DOCTYPE html>{codeBox}


Always Use Lowercase Element Names

HTML authorizes mixing uppercase and lowercase letters in element names.

However, we suggest utilizing lowercase element names because:

  • Mixing uppercase and lowercase characters look bad
  • Developers usually use lowercase names
  • Lowercase looks cleaner
  • Lowercase is more comfortable for writing

Example:

Good:

<body>
<p>This is a paragraph.</p>
</body>{codeBox}

Bad:

<BODY>
<P>This is a paragraph.</P>
</BODY>{codeBox}


Never Forget to Close HTML Elements

Many elements in HTML do not need to get close, for “Example: <hr>, <br>,” but on the other hand, several HTML elements need to be get closed, so we strongly recommend you close HTML elements like this:

Good:

<section>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
</section>{codeBox}

Bad:

<section>
  <p>This is a paragraph.
  <p>This is a paragraph.
</section>{codeBox}


Try to use Lowercase Attribute Names

HTML authorizes mixing uppercase and lowercase letters in element names.

However, we suggest utilizing lowercase element names because:

  • Mixing uppercase and lowercase characters look bad
  • Developers usually use lowercase names
  • Lowercase looks cleaner
  • Lowercase is more comfortable for writing

Good:

<a href="https://www.akashtimes.com/html/">Visit our HTML tutorial</a>{codeBox}

Bad:

<a HREF="https://www.akashtimes.com/html/">Visit our HTML tutorial</a>{codeBox}


Never Forget to Quote Attribute Values

HTML permits attribute values without quotes.

However, we suggest quoting the attribute values because:

  • Developers usually quote attribute values
  • Quoted values become more comfortable to read
  • You MUST use quotes if the value holds spaces

Good:

<table class="ms-excel">{codeBox}

Bad:

<table class=ms-excel>{codeBox}

Very bad:

This will not work, because the value contains spaces:

<table class=table ms-excel>{codeBox}


Always Set alt, width, and height for Images

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

Also, always specify the width and height of images. This decreases flickering because the browser can reserve an area for the image before loading.

Good:

<img src="html5.gif" alt="HTML5" style="width:138px;height:138px">{codeBox}

Bad:

<img src="html5.gif">{codeBox}


Spaces and Equal Signs

HTML authorizes spaces around equal signs. But space-less is more comfortable to read and groups entities better together.

Good:

<link rel="stylesheet" href="styles.css">{codeBox}

Bad:

<link rel = "stylesheet" href = "styles.css">{codeBox}


Always Try to Avoid Long Code Lines

When using an HTML editor, it is unsuitable for scrolling right and left to read the HTML code.

Try to avoid too long code lines.


Blank Lines and Indentation

Don't add blank lines, spaces, or indentations without reason.

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

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

Good:

<body>

<h1>Famous Cities</h1>

<h2>Tokyo</h2>
<p>Tokyo is the largest metropolitan region in the world, the capital of Japan, and the hub of the Greater Tokyo Area.</p>

<h2>London</h2>
<p>The capital of England is London. The largest city in the United Kingdom is there.</p>

<h2>Paris</h2>
<p>France's capital city is Paris. One of the major population centres in Europe is the Paris region.</p>

</body>{codeBox}

Bad:

<body>
<h1>Famous Cities</h1>
<h2>Tokyo</h2><p>Tokyo is the largest metropolitan region in the world, the capital of Japan, and the hub of the Greater Tokyo Area.</p>
<h2>London</h2><p>The capital of England is London. The largest city in the United Kingdom is there.</p>
<h2>Paris</h2><p>France's capital city is Paris. One of the major population centres in Europe is the Paris region.</p>
</body>{codeBox}

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>{codeBox}

Good List Example:

<ul>
  <li>London</li>
  <li>Paris</li>
  <li>Tokyo</li>
</ul>{codeBox}


Important! Never Skip the <title> Element

The <title> element is required in HTML.

A page title's contents are essential for search engine optimization (SEO)! Search engine algorithms use the page title to decide the order when listing pages in search results.

The <title> element:

  • represents a title in the browser toolbar
  • delivers a title for the page when it is added to the favorites
  • shows a title for the page in search-engine results

So, try to create a title as accurate and meaningful as possible: 

<title>HTML Style Guide and Coding Patterns</title>{codeBox}


Omitting <html> and <body>?

An HTML page will validate without the <html> and <body> tags:

Example:

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

<h1>This is a heading</h1>
<p>This is a paragraph.</p>{codeBox}

However, we suggest always adding the <html> and <body> tags!

Omitting <body> can create errors in older browsers.

Omitting <html> and <body> can also collide DOM and XML software.


Omitting <head>?

The HTML <head> tag can also be omitted.

Browsers will add all elements before <body>, to a default <head> element.

Example:

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

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

</body>
</html>{codeBox}

However, we suggest using the <head> tag.


Close Empty HTML Elements?

In HTML, it is optional to close empty elements.

Allowed:

<meta charset="utf-8">{codeBox}

Also Allowed:

<meta charset="utf-8" />{codeBox}

If you wish XML/XHTML software to access your page, keep the closing slash (/), because it is needed in XML and XHTML.


Important! Never Skip to Add the lang Attribute

To declare the Web page's language, you should always have the lang attribute inside the <html> tag. This is represented to assist search engines and browsers.

Example:

<!DOCTYPE html>

<html lang="en-us">

<head>
  <title>Page Title</title>
</head>
<body>

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

</body>
</html>{codeBox}


Meta Data

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

Example:

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

<meta charset="UTF-8">

 <title>Page Title</title>
</head>{codeBox}


Setting The Viewport “Responsive Web Design”

The viewport is the user's visible area of a web page. It varies with the device - it will be smaller on a mobile phone than on a computer screen.

You should include the following <meta> element in all your web pages:

<meta name="viewport" content="width=device-width, initial-scale=1.0">{codeBox}

This gives the browser instructions on how to control the page's dimensions and scaling.

The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.


HTML Comments

Short comments should be written on one line, like this:

<!-- This is a comment -->{codeBox}

Comments that spans more than one line, should be written like this:

<!--
  This is a long comment example. This is a long comment example.
  This is a long comment example. This is a long comment example.
-->{codeBox}

Long comments are easier to observe if they are indented with two spaces.


Using Style Sheets

Utilize simple syntax for linking to style sheets (the type attribute is not necessary):

<link rel="stylesheet" href="styles.css">{codeBox}

Short CSS rules can be written compressed, like this:

p.intro {font-family:Verdana;font-size:16em;}{codeBox}

Long CSS rules should be written over multiple lines:

body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}{codeBox}

  • Set the opening bracket on the same line as the selector
  • Utilize one space before the opening bracket
  • Utilize two spaces of indentation
  • Utilize the semicolon after each property-value pair, including the last
  • Just utilize quotes around values if the value contains spaces
  • Position the closing bracket on a new line, without leading spaces


Loading JavaScript in HTML

Utilize simple syntax for loading external scripts (the type attribute is not necessary):

<script src="myscript.js">{codeBox}


Accessing HTML Elements with JavaScript

Using "untidy" HTML code can result in JavaScript errors.

These two JavaScript statements will produce different results:

Example:

getElementById("Demo").innerHTML = "Hello";

getElementById("demo").innerHTML = "Hello";{codeBox}

Try This:

<!DOCTYPE html>
<html>
<body>

<p id="Demo">This is paragraph 1.</p>
<p id="demo">This is paragraph 2.</p>

<script>
// Only paragraph 2 will be overwritten
document.getElementById("demo").innerHTML = "HELLO.";
</script>

</body>
</html>{codeBox}


Use Lower Case File Names

Some web servers (Apache, Unix) are case-sensitive regarding file names: "london.jpg" cannot be accessed as "London.jpg".{alertError}

Different web servers (Microsoft, IIS) are not case-sensitive: "london.jpg" can be accessed as "London.jpg".{alertSuccess}

If you utilize a mix of uppercase and lowercase, you must be aware of this.

If you drive from a case-insensitive to a case-sensitive server, even little errors will break your web!

To bypass these problems, always utilize lowercase file names!


File Extensions

HTML files should have a .html extension (.htm is allowed).

CSS files should have a .css extension.

JavaScript files should have a .js extension.


Differences Between .htm and .html?

There is no difference between the .htm and .html file extensions!

Both will be treated as HTML by any web browser and web server.


Default Filenames

When a URL does not define a filename at the end (like "https://www.akashtimes.com/"), the server just adds a default filename, such as "index.html", "index.htm", "default.html", or "default.htm".

If your server is configured only with "index.html" as the default filename, your file must be named "index.html", and not "default.html".

Nevertheless, servers can be configured with more than one default filename; usually, you can place up as many default filenames as you want.


Conclusion:

Friends, according to my expertise, I have written complete information to help you with “HTML Style Guide.” If this post is favourable for you or not, please tell me by commenting.

If you liked this post, do not forget to share it with your friends so they can get information about it.

You can ask us through comments if you still have questions or doubts, I will answer all your questions, and you can contact us for more information.

Please tell us through the comment section if you think we miss anything.

Tags:

AKASH TIMES

Hi! I am Akash kr. Singh: a Senior Digital Marketer and Project Manager with strong experience in Digital Marketing, Lead Generation, Online Brand Management, Marketing Campaigns, Project Management, Search Engine Optimization (SEO), Search Engine Marketing (SEM), PPC, eMail Marketing, Web Analytics, Web Technologies, Web Design and Development.

You might like

View all

To be published, comments must be reviewed by the administrator.*

Previous Post Next Post
Share to other apps
Copy Post Link