Coding Conventions in HTML

Raksha Jain
Last Updated: May 13, 2022

Introduction

Let's discuss Coding Conventions in HTML, a set of guidelines and conventions one must follow, and their importance in our HTML document.

Coding Conventions help us make our code clean, consistent, easily readable, and understandable for the other developers and us. 

Some Important Coding Conventions

 

  • Declaration of Document Type

We must declare the type of the document in the first line itself.

<!DOCTYPE html>

 

  • Use Lowercase letters in Element names and Attribute Names

HTML is not a case-sensitive language; hence we could use both lower and uppercase letters in element names and attribute names.

But, it is always recommended to use lowercase letters as:

Using uppercase letters breaks the consistency of our entire code in HTML documents. Our code no longer looks clean. At the same time, it is not appealing to our eyes, making it difficult for the developers to read the written code.

Example:

<!DOCTYPE html>

<html>

  <body>

 

    <h4>Image Tag</h4>

    <img src = “images/codingninjas.jpg”>

 

  </body>

</html>

This looks Good. 

But this doesn’t look appealing.

<!DOCTYPE HTML>

<HTML>

  <BODY>

 

    <H4>Image Tag</H4>

    <IMG SRC = “images/codingninjas.jpg”>

 

  </BODY>

</HTML>

 

  • Close All HTML Element Tags

It is not always necessary to close all the tags (like <p> or paragraph tag); however, it is a great practice to close all the tags that have closing tags. 

Example:

<!DOCTYPE html>

<html>

  <body>

 

    <p> 

    Let’s learn about Coding Conventions in HTML at Coding Ninjas! </p>

 

  </body>

</html>

This looks Good. 

But this doesn’t look appealing.

<!DOCTYPE html>

<html>

  <body>

 

   <p> Let’s learn about Coding Conventions in HTML 

   <p> at Coding Ninjas!

 

  </body>

</html>

 

Note: The closing tag of <p> tag i.e. (</p> tag) is missing here.

  • Quote Attribute Values

We can add attribute values without quotes in our HTML document. However, it is always recommended to quote the user attribute values. 

This is because quoted values are easier to read and are a must if our value contains spaces.

Example:

<h4>Image Tag</h4>

<img src = “images/codingninjas.jpg”>

 

This looks Good. 

But this doesn’t look appealing.

 

<h4>Image Tag</h4>

<img src = images/codingninjas.jpg>

 

NOTE: The quotes around the value of src attribute in the image tag are missing.

  • Specify alt, width and height Attributes for Image Tag

It is highly recommended to specify the alt attribute of the image tag. If the image could not be displayed for any reason, the alt attribute's value indicates what was supposed to be displayed.

Also, defining width and height attributes of images reduces flickering, helping browsers reserve a space for it before it gets loaded. 


Example:

<!DOCTYPE html>

<html>

  <body>

 

    <h4>Image Tag</h4>

    <img src = “images/codingninjas.jpg” alt=”Coding Conventions”           

    style=”width:128px;height:40px”>

 

  </body>

</html>

This looks Good. 

But this doesn’t look appealing.

<!DOCTYPE html>

<html>

  <body>

 

    <h4>Image Tag</h4>

    <img src = “images/codingninjas.jpg”>

 

  </body>

</html>

 

  • Spaces around Equal Signs

Although spaces around equal signs are allowed, they reduce the readability of entities.

Example:

<img src=“images/codingninjas.jpg” alt=”Coding Conventions” style=”width:128px;height:40px”>

This looks Good. 

But this doesn’t look appealing.

<img src = “images/codingninjas.jpg” alt = ”Coding Conventions”       style = ”width:128px;height:40px”>

 

  • Avoid Long Lines of Code and too much Blank Lines and Indentation

Avoid writing long lines of code as it is not convenient to scroll right and left while using an HTML editor.

At the same time, add blank lines and indentation (of two spaces and not a tab) for enhancing readability, but do not add too many blank lines.

Example:

<p>

Let’s learn about Coding Conventions in HTML at Coding Ninjas!

</p>

This looks Good. 

But this doesn’t look appealing.

<p>

Let’s learn about 

</p>

<p>

Coding Conventions in HTML 

</p>

<p>

at Coding Ninjas!

</p>

 

  • Avoid skipping Title, Html, Body and Head Elements

Title Element is a must in our HTML document. It must be text-only and is shown in the browser's title bar or the page's tab.

It is also crucial for search engine optimization (SEO) as the search engine algorithms use the page title to decide the order when listing pages in search results. 

Moreover, it also provides a title for the page when it is added to favourites.    

<title> Coding Conventions in HTML </title>

 

HTML page will validate without <html> and <body> tags but omitting it can produce errors in old browsers or crash DOM and XML software.

<!DOCTYPE html>

<html>

  <body>

 

    <p> 

    Let’s learn about Coding Conventions in HTML at Coding Ninjas! </p>

 

  </body>

</html>

 

  • Adding lang Attribute in Html Element Tag

It is always recommended to use the lang attribute inside HTML tag as it helps to declare the language of the Webpage. 

So, it also assists search engines and browsers.

<!DOCTYPE html>

<html lang = “en-us”>

  <body>

 

    <p> 

    Let’s learn about Coding Conventions in HTML at Coding Ninjas! 

    </p>

 

  </body>

</html>

 

  • Comments

Comments are extremely important as they enhance the readability of our website. We should include both short and long comments in our HTML document.

 

<!-- Article at Coding Ninjas -->

<p> Let’s learn about Coding Conventions in HTML at Coding Ninjas! </p>

 

 

  • Using CSS

While using style sheets and mentioning various properties of an element/tag, one must follow:

  1. Place the opening bracket on the same line as the selector
  2. Use one space before the opening bracket
  3. Use two spaces of indentation
  4. Use semicolon after each property-value pair, including the last
  5. Only use quotes around values if the value contains spaces
  6. Place the closing bracket on a new line, without leading spaces

body{

  color:blue;

  font-family: “Arial”;

  font-size: 16px;

}

 

  • File Names and File Extensions

We should always use lowercase file names as some web servers(like Apache, Unix) are case sensitive about file names and using uppercase letters here could give tons of errors.

Also, HTML files must have .html (or .htm)extension, CSS files must have .css extension, Javascript files must have .js extension.

Frequently Asked Questions


Q1. What is the UI of a website?

Ans. The user interface (UI) is the “surface” of any application or website, representing the software's entire visual makeup.
 

Q2. What is HTML?

Ans: HTML(HyperText Markup Language) is the standard markup language for creating Web pages. It describes the structure of a Web page.  

 

Q3. What are some common Coding Conventions in HTML?

Ans. Some of the common coding conventions in HTML are: 

  1. Do not add spaces around the equal sign
  2. Write values of attributes in quotes.
  3. Do not write long code lines.
  4. Mention alt, width and height attributes in the image tag.

Key Takeaways

In this blog, we learned about Coding Conventions in HTML.

  • Coding Conventions in HTML are a set of rules that one must follow while writing code in HTML. 
  • It helps in writing clean code, making it easy for other developers to understand our code.
     

So, Coding Conventions in HTML are extremely easy to follow and vital in writing clean code.

Was this article helpful ?
0 upvotes

Comments

No comments yet

Be the first to share what you think