HTML - Style Guide

What is Style Guide in HTML?

In HTML, the style guide is a set of rules and conventions that define how to write and format code. It helps to ensure that the written code is readable, understandable and easy to modify. A style guide also helps to avoid common errors and bugs that can affect the functionality and appearance of a web page. In this tutorial, we are going to cover the most important style guidelines for creating better HTML code.

Start with HTML5 Doctype

Always start all HTML and XHTML documents with <!DOCTYPE html> declaration. Note that this declaration is case-insensitive. It is required to enforce the full standard mode (also known as no-quirks mode) to provide more consistent rendering of web pages. It is the latest web standard described by W3C and used by the layout engines of modern web browsers.

Example

<!DOCTYPE html>
<html>
<head>
   <!-- Content inside head tag -->
</head>
<body>
   <!-- Content inside body tag -->
   Hello, Welcome to Tutorialspoint
</body>
</html>

Specify document language

Always specify the document language with the help of lang attribute. This attribute is defined within the opening <html> tag, which is the root of HTML document. Specifying the document language will help in accessibility, speech analysis, translation and other functionalities.

Example

<!DOCTYPE html>
<html lang="en">
<head>
   <!-- Content inside head tag -->
</head>
<body>
   <!-- Content inside body tag -->
   Hello, Welcome to Tutorialspoint
</body>
</html>

Define Charset

The W3C always recommend developers to declare the charset or character encoding explicitly. It can be done by using the charset attribute of <meta> tag. Pass UTF-8 as a value to charset attribute as it is the most commonly used character encoding and provides over a million characters.

Example

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset = "UTF-8">
</head>
<body>
   <!-- Content inside body tag -->
   Hello, Welcome to Tutorialspoint
</body>
</html>

Use Lowercase for elements and attributes

Don’t capitalize the element names, attribute names and values of attributes. In other programming languages like Java, C and C++, developers often use the camel case or snake case for declaring the variable names. However, for writing HTML code, W3C recommends the use of lowercase letters. Doing so will enhance the clarity and readability of our HTML code.

Example

<body>
   <h1>
      <!-- Heading comes here -->
   </h1>
   <p style = "font-size: 25px; ">
      <!-- contains paragraph -->
      Hello, Welcome to Tutorialspoint
   </p>
</body>

Quote the attribute values

According to W3C recommendations, it is better to enclose attribute values in double quotes. This is important for values containing spaces, as HTML may not parse them correctly without the quotes. The use of double quotes is more common than single quotes. However, we can use single quotes as well.

<p style = "font-size: 25px; ">
   <!-- contains paragraph -->
</p>

Use closing tags

In HTML, all elements must be closed properly, even if some elements have optional closing tags. Please note that there are certain elements that are self-closing including <img>, <hr>, <br> and many more.

Example

<!DOCTYPE html>
<html>
<head>
   <!-- Content inside head tag -->
</head>
<body>
   <h1>
      <!-- Heading comes here -->
   </h1>
   <p>
      <!-- contains paragraph -->
   </p>
   <br>
   <p>
      <!-- contains paragraph -->
      Hello, Welcome to Tutorialspoint
   </p>
</body>
</html>

Use proper Indentation

The use of proper indentation shows the structure and hierarchy of our HTML code. Use spaces instead of tabs for indentation, and use a consistent number of spaces (usually two or three) per level. Also, we can use the blank lines to separate large code blocks.

Example

<!DOCTYPE html>
<html>
<head>
   <!-- Content inside head tag -->
</head>
<body>
   <h1>
      <!-- Heading comes here -->
   </h1>
   <p>
      <!-- contains paragraph -->
   </p>
   <p>
      <!-- contains paragraph -->
      Hello, Welcome to Tutorialspoint
   </p>
</body>
</html>

Set the viewport

Setting the viewport helps web pages render well on different devices. It is achieved by controlling the width and scale of the page. It is used for ensuring the responsiveness of a particular web page.

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

Add Comments

We use comments to explain the purpose or functionalities of the particular HTML code. Comments should start with <!-- and end with -->. Avoid using comments for styling or scripting purposes.

Example

<!DOCTYPE html>
<html lang="en">
<head>
   <!-- Content inside head tag -->
</head>
<body>
   <h1>
      <!-- Heading comes here -->
   </h1>
   <p>
      <!-- contains paragraph -->
      Hello, Welcome to Tutorialspoint
   </p>
</body>
</html>
Advertisements