HTML Style Guide – HTML Coding Conventions
Free Web development courses with real-time projects Start Now!!
While developing a website, it is important to maintain a set of rules and abide by them. As developers, it is our duty to make the code visually appealing and understandable to other developers and users. There are some basic norms that we need to follow to attain this consistency in website development. Let us learn more about HTML Style Guide that you must follow.
HTML Style Guide
Let us learn HTML Coding Standards best practices now:
1. Declaration of document type in HTML
It is essential to mention the type of document that should be displayed by the browser. This allows the browser to know what type of document it should render and thus use its resources.
The correct document type for HTML5 is-
<!DOCTYPE Html>
Not mentioning the document type is considered as a bad practice.
2. Use of lowercase element names in HTML
However, HTML allows the use of lowercase or uppercase element names; we recommend you to opt for lowercase names as it looks clean and is easier to write.
Correct-
<body> <p>Welcome to DataFlair</p> </body>
Incorrect-
<BODY> <P>Welcome to DataFlair!</P> </BODY>
3. Close all elements in HTML
HTML does not impose on closing all the elements, but it is better to do so.
Correct-
<body> <p>Welcome to DataFlair.</p> </body>
Incorrect-
<body> <p>Welcome to DataFlair. </body>
4. Use Lowercase Attribute Names in HTML
Like elements, there is no clear distinction provided by HTML in using upper or lower case names for attributes. However, it is good practice to use lowercase letters for attribute names.
Correct-
<a href="https://data-flair.training/">Welcome to DataFlair</a>
Incorrect-
<a HREF="https://data-flair.training/">Welcome to DataFlair</a>
5. Quote Attribute Values in HTML
Developers usually don’t quote the attribute values, but it is a better approach to do so since it improves the readability of the code. One must also ensure not to use spaces.
Correct-
<table class= “bordered”>
Incorrect-
<table class= bordered>
Does not work-
<table class= table striped>
This does not work because of the spaces.
6. Specification of alt, width and height attributes of the image in HTML
It is an excellent practice to always specify the ‘alt’ attribute since it is the alternative text that appears if the browser is unable to display the image.
Similarly, the height and width attributes reserve the space for an image before loading and thus prevent flickering.
Correct-
<img src="tree.jpg" alt="Tree" height="500px" width="500px">
Incorrect-
<img src="tree.jpg">
7. Spaces between equal signs in HTML
Though it is allowed to use spaces within equal signs, it is highly recommended not to do so since it disrupts the readability of the code.
Correct-
<a href="https://data-flair.training/">Welcome to DataFlair</a>
Incorrect-
<a href = "https://data-flair.training/">Welcome to DataFlair</a>
8. HTML Long Code Lines
It is advisable not to use too long lines of code and break them instead. This prevents unnecessary scrolling from left to right.
9. HTML Indentation and Blank lines
It is not recommended to use blank lines and indentation unnecessarily in an HTML document. It is a better approach to add blank lines to separate blocks of code, and indentation should be limited to two spaces rather than the tab key.
Correct-
<body> <h1>DataFlair</h1> <h2>Mission</h2> <p>To provide quality education at an affordable price to help everyone develop their career in the latest technologies. We aim to reach the mass through our unique pedagogy model for Self-paced learning and Instructor-led learning that includes personalized guidance, lifetime course access, 24×7 support, live project, resume and interview preparation and ready to work level learning. We aim to provide real-time technical experience to learners through our expert instructors. </p> </body>
Incorrect-
<body> <h1>DataFlair</h1> <h2>Mission</h2> <p>To provide quality education at an affordable price to help everyone develop their career in the latest technologies. We aim to reach the mass through our unique pedagogy model for Self-paced learning and Instructor-led learning that includes personalized guidance, lifetime course access, 24×7 support, live project, resume and interview preparation and ready to work level learning. We aim to provide real-time technical experience to learners through our expert instructors. </p> </body>
For example-
<table>
<tr>
<th>Name</th>
<th>Information</th>
</tr>
<tr>
<td>Name1</td>
<td>Information</td>
</tr>
<tr>
<td>Name2</td>
<td>Information</td>
</tr>
</table>
For example-
<ul> <li>Fruits</li> <li>Vegetables</li> <li>Groceries</li> </ul>
10. HTML <title> element
One should always use the <title> element in an HTML document since it plays a significant role in search engine optimization(SEO). Here, the name of a web-page is used by the search engine algorithms to decide its order, when it lists related searched query pages as per the search results.
We should name the web-page accurately, and it should have a meaningful name.
<title>Name of the web-page</title>.
11. HTML Omission of <html> and <body> tags
The HTML web-page will be rendered successfully even if we omit the <html> and the <body> elements. However, it is a better approach to use them as omitting the <body> tag produces errors in the old browsers, and omitting the <head> tag can crash the XML and DOM softwares.
<head> <title>Page Title</title> </head> <h1>Hi</h1> <p>Welcome</p>
12. HTML Omission of <head>
The <head> tag can also be omitted in HTML. All the elements defined before the <body> tag are automatically added to the default <head> by the browser.
<!DOCTYPE html> <html> <title>Title</title> <body> <h1>Hi</h1> <p>Welcome</p> </body> </html>
13. HTML Close empty tags
It is optional to close the empty tags in HTML. However, while using XML or XHTML,the closing slash (/) is necessary.
<meta charset= “utf-8” />
14. HTML Lang attribute
We should always specify the lang attribute to define the language of the web-page to the browsers and the search engines.
<!DOCTYPE html> <html lang="en-US"> <head> <title>Title</title> </head> <body> <h1>Hi</h1> <p>Welcome</p> </body> </html>
15. HTML Meta Data
The <meta> tag contains additional information related to the document such as page description, keywords, author, character set, etc. The web browsers use the metadata to display content, and keywords are used by search engines and other web-services.
Character Set-
<meta charset="UTF-8">
It is a good practice to define the meta charset at the earliest in an HTML document.
16. Setting viewport in HTML
We use the <meta> tag of the head to create a viewport for a website.
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <h2>Viewport</h2> <p>Try to run this code on different websites.</p> </body> </html>
Output-
The browser controls the scaling of the web-page, using the meta viewport. The width=device-width specifies that page’s width will be equal to the device’s width where the web page will be displayed.
The initial-scale=1.0 is used to set the initial zoom level of the web-page when it is first loaded.
17. HTML Comments
It is advisable to use short comments like-
<!–following is a paragraph→
Long comments like-
<!–
This is a long comment example.
This is a long comment example.
–>
Long comments become easily observable when indented with two spaces.
18. HTML Style Sheets
For linking stylesheets,we can use simple linking syntax. The type attribute is not necessary.
<link rel="stylesheet" href="DataFlair.css">
We should compress short CSS rules in a single line.
p{font-family:Verdana; font-size:15px}
We should write long CSS rules over multiple lines.
body {
background-color: black;
font-family: "Arial Black";
font-size: 16em;
color: white;
}
Note-
- Use a space before the opening bracket.
- Use two spaces for indentation.
- Only Use quotes for the values if they contain spaces.
- Use a semicolon for each property-value pair.
- Place the closing bracket on the last line.
19. JavaScript
The type attribute is not necessary for linking the javascript files. Use the simple syntax.
<script src="DataFlair.js">
Accessing HTML Elements
There should be a correct use of id attributes to access HTML elements else it would produce errors.
<!DOCTYPE html>
<html>
<body>
<p id="Demo">Paragraph 1.</p>
<p id="demo">Paragraph 2.</p>
<script>
// Paragraph 2 will be overwritten
document.getElementById("demo").innerHTML = "HELLO!";
</script>
</body>
</html>
Output-
20. HTML File names
Some web servers such as Apache and Unix do not allow case-insensitive file names to be loaded on their web-page. For example, delhi.jpg would not be the same as Delhi.jpg.
One must be aware of the case-sensitivity of their servers and do the naming of files accordingly. Hence, it is advisable always to use lowercase name schemes.
21. HTML Extensions
The HTML document should have .html or .htm as the file extension. There is no difference between the two.
A CSS file should have .css extension, and a javascript file should have .js as the extension.
22. HTML Default Filenames
If the URL of a particular file does not specify its filename, a default filename such as index.html or default.html is added by the server itself.
We can configure the server with multiple default filenames but ensure that the same name is not used for another file.
Summary
In this article, we’ve looked at the intricacies of creating an HTML document, the best practices, and the correct usage of syntax. We’ve discussed some major HTML Style Guide such as the declaration of the document type, use of lang attributes, closing tags, use of lowercase names for attributes and elements, quoting of values, etc. We’ve also discussed the best practices involved with CSS and JavaScript, along with setting viewports.
You give me 15 seconds I promise you best tutorials
Please share your happy experience on Google
