HTML Style Guide and Coding Conventions

By | October 1, 2021
HTML Style Guide and Coding Conventions

Clean and neat code makes it easier for other developers to understand and read your code. There are some conventional techniques followed by every HTML developer when they write the HTML code.

Major Convention for writing HTML code

  • Use Document Type
  • Use lowercase for Elements.
  • Always close the pair elements.
  • Use lowercase for attributes.
  • Use quotation for attribute values
  • Always specify the additional information.
  • Use a single space between two attributes.
  • Try to avoid Long code.
  • Use blank lines and indentation
  • Always provide the title
  • Set the viewport.
  • Use comments
  • Use External style and script document.
  • use lowercase for file names

Use Document Type

Always mention the document type at the top of the HTML document.

Vamware

The document type for HTML5 is.

<!DOCTYPE html>

Use Lowercase for Element

Always write the element name in lowercase. However, HTML is case insensitive, which mean it does not matter for HTML whether the element name is in lowercase or upper case, but it always a good practice to use lowercase.

Example:

Good Code Bad Code
<body>
<p> Welcome to TechGeekbuzz </p>
</body>
<BODY>
<P> Welcome to TechGeekbuzz </P>
</BoDY>

Always Close the pair Elements

If the element is a paired element, then close it using the close tag.

Good Code Bad Code
<body>
<p> Welcome to TechGeekbuzz </p>
</body>
<body>
<p> Welcome to TechGeekbuzz
</body>

Use lowercase for attribute

HTML is case insensitive, so it allows us to use any case for its attributes and elements. But it always suggested to use lowercase for element and attribute names. Even mixing the case would work fine, but it reflects lousy coding.

Example

Good Code Bad Code
<body>
<a href="https://www.techgeekbuzz.com/"> TechGeekbuzz </a>
</body>
<body>
<A HREF="https://www.techgeekbuzz.com/"> TechGeekbuzz </a>
</body>

Use the double quotation for attribute values.

We can specify the attribute values without using any quotation, and it would work fine. But mostly all the developers use the double quote for the attribute values. It separates the attribute and its value and gives a neat look to the code.

Example

Good Code Bad Code
<body>
<p id ="first"> Welcome to TechGeekbuzz </p>
</body>
<body>
<p id = first> Welcome to TechGeekbuzz </p>
</body>

Always provide additional information

However, additional data or attributes are optional but providing them give a strong meaning to the element. For example, by specifying the alt attribute to <img> element, we get a piece of textual information about the image when the browser fails to load the image.

Example

Good Code Bad Code
<body>
<img src="image.jpg" alt="cat image">
</body>
<body>
<img src="image.jpg">
</body>

Use a single space between two attributes

There should always be a single space between two attributes. Spacing between the attribute increases the readability of the HTML element.

Example

Good Code Bad Code
<body>
<p id ="first" style="color:red"> Welcome to TechGeekbuzz </p>
</body>
<body>
<p id ="first"style="color:red"> Welcome to TechGeekbuzz </p>
</body>

Try to avoid long code

Never write an extended code on a single line divide it into multiple lines.

Example

<img src="https://secureservercdn.net/160.153.137.163/84g.4be.
myftpupload.com/wp-content/uploads/2019/03/Techgeekbuzz.png" 
alt ="techgeekbuzz Logo">

Use blank lines and indentation

Always add a blank line when it is required. And use indentation for the nested elements. Indentation increases the code readability and signifies the nested elements.

Example

Good Code Bad Code
<body>
<ul>
<li>  CSS </li>
<li>  Java </li>
<li>  Python </li>
</ul>
</body>
<body>
<ul>
<li>  CSS </li>
<li>  Java </li>
<li>  Python </li>
</ul>
</body>

Always Provide the Title

Never skip the title name; it helps the search engine to find the right page for the user query. The appropriate title name helps your web page to rank.

Example

<head>
    <title>  HTML Tutorial </title>
</head>

Set the Viewport

By setting the correct viewport makes your webpage more responsive and adaptable to every device.

Example

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>

The value width=device-width, initial-scale=1.0 will adjust the page and set the zoom level according to the user browser viewport.

Use HTML comments

In the development phase comments often use to provide additional information about the code itself. Comments give a brief idea about the piece of code, so the other developers could understand what this code is supposed to do.

Example

 <body>
   <!-- This image size should resized -->
   <img src="image.jpg" class="pic">
</body>

Never write long comments; it makes document code lengthy.

Use External style and Script document

It’s a good practice to make a separate document for style and javascript. It increases the code reusability and gives an elegant look to the document.

Example

<head>
   <link rel="stylesheet" href="styles.css">
   <script src="script.js">
</head>

Use Lowercase for Filename

At last, the HTML documents and other files need to be saved at some server so everyone could access them. And there the naming of the file becomes essential. There are some servers that are case sensitive, so it’s a good practice to use lowercase for every file name.

File Extension

  • We can either use .html or htm for HTML document.
  • For CSS file use .css extension.
  • For JavaScript file, we can use .js extension.

HTML coding Convention Quick Summary

  • Conventions are optional, but for good code, we need to use them.
  • Browser treats .html and .htm extension as HTML documents.
  • HTML is case insensitive, so it’s a good practice to write element and attribute name in lowercase.
  • Always use indentation for nested elements.
  • Create separate files for JavaScript and CSS

People are also reading:

Leave a Reply

Your email address will not be published. Required fields are marked *