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
Dont 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 --></p></body>Hello, Welcome to Tutorialspoint
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 --></p></body></html>Hello, Welcome to Tutorialspoint
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 --></p></body></html>Hello, Welcome to Tutorialspoint
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 --></p></body></html>Hello, Welcome to Tutorialspoint
