Style Guides in HTML with Examples

In this article, I am going to discuss Style Guides in HTML with Examples. Please read our previous article where we discussed Charset in HTML with Examples.

HTML Style Guides

It is important to create and follow a set of rules while building a website. It is our responsibility as developers to make the code visually presentable and understandable to other developers and users. To achieve this consistency in website development, we must stick to certain simple rules.

The HTML style guides include coding standards that are developed to ensure code consistency. A style guide develops standard styles required to improve readability by ensuring consistency across multiple documents.

Always Declare Document Type

It’s important to specify the type of content that should be displayed by the browser. This tells the browser what kind of page to render and how to use its resources.

<!DOCTYPE Html>

Use Lowercase Element Names

However, HTML allows users to use lowercase or uppercase element names; we recommend using lowercase names since they look neat and clean and are easier to write.

Close All HTML Elements

Although HTML does not need all elements to be closed, it is recommended to do so in order to avoid unexpected errors.

Always Quote Attribute Values

Normally, developers do not quote attribute values, however, it is a better practice to do so since it enhances code readability. It is also important to avoid using spaces.

Always Specify alt, width, and height for Images

It is best practice to always include the ‘alt’ property because the alternative text is displayed if the browser is unable to display the picture. Similarly, the height and width attributes of the image element reserve space for an image before loading to prevent flickering.

Spaces and Equal Signs

Although it is allowed to use spaces within equal signs, it is strongly advised not to do so because it hinders code readability.

Blank Lines and Indentation

It is not recommended to include blank lines or indentation in an HTML document unless necessary. It is recommended to divide code blocks with blank lines, and indentation should be limited to two spaces only.

Omitting <html>, <head> and <body>

Even if we omit the <html> and <body> elements, the HTML web page will be rendered correctly. It is preferable to use them since removing the <body> tag causes errors in old browsers, while omitting the <head> tag causes XML and DOM software crashes. In HTML, the <head> tag can be omitted as well. The browser adds all the elements defined before the <body> tag to the default <head>.

Without Html and Body

<!DOCTYPE html>
<head>
  <title>Page Title</title>
</head>
<h1>Read</h1>
<p>This document doesn't have html and body element</p>

Output:

Without Head

<!DOCTYPE html>
<html>
<title>Page Title</title>
<body>
<h1>Read</h1>
<p>This document doesn't have head element</p>
</body>
</html>

Output:

Add the lang Attribute

To specify the website language for our browser and search engine, we should always use the lang property.

<html lang=”en-US”>

Setting The Viewport

The browser’s viewport is the portion of the window in which web content can be seen. It varies according to the device; for example, on a mobile phone, it will be smaller, whereas on a laptop, computer, it will be larger.

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

The width property defines the viewport’s size. It can be set to a particular number of pixels, such as width=600, or to the special value device-width, which is the screen’s width when scaled to 100%. The initial-scale property is used to control the zoom level when the page is loaded by the browser.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>Setting Viewport</h2>
<p>Welcome to Dot Net Tutorials</p>
</body>
</html>

Output:

Never Skip the <title> Element

Because the <title> element plays such an important role in search engine optimization, it should always be used in HTML documents. The search engine algorithms use the name of a web page to determine its ranking. The web page should be named correctly and meaningfully.

<title>Name of the web-page</title>

HTML File Names

Case-insensitive file names are not allowed to be loaded on some web servers, such as Apache and Unix. For example, picture.jpg is not the same as Picture.jpg.

It is necessary to be aware of the case sensitivity of one’s servers and name files appropriately. As a result, it’s best to stick to lowercase naming schemes.

HTML Extensions

The file extension for an HTML document must be.html or.htm. There isn’t any difference between the two. Similarly, the extension for a CSS file should be.css, and the extension for a JavaScript file should be.js.

HTML Default Filenames

The server adds a default filename such as index.html or default.html if the URL of a specific file does not provide its filename (like “https://www.dotnettutorials.net/”). We can provide the server with different default filenames as long as we don’t use the same name for another file.

In the next article, I am going to discuss Images in HTML with examples. Here, in this article, I try to explain Style Guides in HTML with Examples and I hope you enjoy this Style Guide in HTML with Examples article.

Dot Net Tutorials

About the Author: Pranaya Rout

Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.