{"id":79109,"date":"2020-07-09T09:00:36","date_gmt":"2020-07-09T03:30:36","guid":{"rendered":"https:\/\/data-flair.training\/blogs\/?p=79109"},"modified":"2024-07-24T16:43:55","modified_gmt":"2024-07-24T11:13:55","slug":"html-style-guide","status":"publish","type":"post","link":"https:\/\/data-flair.training\/blogs\/html-style-guide\/","title":{"rendered":"HTML Style Guide – HTML Coding Conventions"},"content":{"rendered":"

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.<\/p>\n

\"HTML<\/a><\/p>\n

HTML Style Guide<\/h2>\n

Understanding appropriate HTML coding practices are essential when developing web accessible, and easily modifiable websites. Thus, following these standards developers make sure that others will be able to easily comprehend their code. This becomes particularly crucial when working in teams or passing a project on to another developer. Comprehensible and unambiguous code is useful in troubleshooting and positively impacts the software development process.<\/p>\n

Moreover, following HTML conventions improves the performance and compatibility of web pages across different browsers and devices. These are important because it makes it easier for browsers to read the content and therefore enhances the user experience. Following these best practices also helps when it comes to search engine optimization since the source code is much cleaner. This can significantly impact the visibility and ranking of web pages in search engine results.<\/p>\n

Let us learn HTML Coding Standards best practices now:<\/p>\n

1. Declaration of document type in HTML<\/h3>\n

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.
\nThe correct document type for HTML5 is-<\/p>\n

<!DOCTYPE Html>\r\n<\/pre>\n
Not mentioning the document type is considered as a bad practice.<\/p>\n
2. Use of lowercase element names in HTML<\/h3>\n
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.
\nCorrect-<\/strong><\/p>\n
<body>\r\n  <p>Welcome to DataFlair<\/p>\r\n<\/body>\r\n<\/pre>\n
Incorrect-<\/strong><\/p>\n
<BODY>\r\n  <P>Welcome to DataFlair!<\/P>\r\n<\/BODY>\r\n<\/pre>\n
3. Close all elements in HTML<\/h3>\n
HTML does not impose on closing all the elements, but it is better to do so.
\nCorrect-<\/strong><\/p>\n
<body>\r\n  <p>Welcome to DataFlair.<\/p>\r\n<\/body>\r\n<\/pre>\n
Incorrect-<\/strong><\/p>\n
<body>\r\n  <p>Welcome to DataFlair.\r\n<\/body>\r\n<\/pre>\n
4. Use Lowercase Attribute Names in HTML<\/h3>\n
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.
\nCorrect-<\/strong><\/p>\n
<a href=\"https:\/\/data-flair.training\/\">Welcome to DataFlair<\/a>\r\n<\/pre>\n
Incorrect-<\/strong><\/p>\n
<a HREF=\"https:\/\/data-flair.training\/\">Welcome to DataFlair<\/a><\/pre>\n
5. Quote Attribute Values in HTML<\/h3>\n
Developers usually don\u2019t 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.
\nCorrect-<\/strong><\/p>\n
<table class= \u201cbordered\u201d>\r\n<\/pre>\n
Incorrect-<\/strong><\/p>\n
<table class= bordered>\r\n<\/pre>\n
Does not work-<\/strong><\/p>\n
<table class= table striped>\r\n<\/pre>\n
This does not work because of the spaces.<\/p>\n
6. Specification of alt, width and height attributes of the image in HTML<\/h3>\n
It is an excellent practice to always specify the \u2018alt\u2019 attribute since it is the alternative text that appears if the browser is unable to display the image.
\nSimilarly, the height and width attributes reserve the space for an image before loading and thus prevent flickering.
\nCorrect-<\/strong><\/p>\n
<img src=\"tree.jpg\" alt=\"Tree\" height=\"500px\" width=\"500px\">\r\n<\/pre>\n
Incorrect-<\/strong><\/p>\n
<img src=\"tree.jpg\">\r\n<\/pre>\n
7. Spaces between equal signs in HTML<\/h3>\n
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.
\nCorrect-<\/strong><\/p>\n
<a href=\"https:\/\/data-flair.training\/\">Welcome to DataFlair<\/a>\r\n<\/pre>\n
Incorrect-<\/strong><\/p>\n
<a href = \"https:\/\/data-flair.training\/\">Welcome to DataFlair<\/a>\r\n<\/pre>\n
8. HTML Long Code Lines<\/h3>\n
It is advisable not to use too long lines of code and break them instead. This prevents unnecessary scrolling from left to right.<\/p>\n
9. HTML Indentation and Blank lines<\/h3>\n
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.
\nCorrect-<\/strong><\/p>\n
<body>\r\n\r\n<h1>DataFlair<\/h1>\r\n\r\n<h2>Mission<\/h2>\r\n<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\u00d77 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>\r\n\r\n<\/body>\r\n<\/pre>\n
Incorrect-<\/strong><\/p>\n
<body>\r\n\r\n<h1>DataFlair<\/h1>\r\n\r\n<h2>Mission<\/h2>\r\n\r\n<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\u00d77 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>\r\n\r\n<\/body>\r\n<\/pre>\n
For example-<\/strong><\/p>\n
<table>\r\n  <tr>\r\n    <th>Name<\/th>\r\n    <th>Information<\/th>\r\n  <\/tr>\r\n  <tr>\r\n    <td>Name1<\/td>\r\n    <td>Information<\/td>\r\n  <\/tr>\r\n  <tr>\r\n    <td>Name2<\/td>\r\n    <td>Information<\/td>\r\n  <\/tr>\r\n<\/table>\r\n<\/pre>\n
For example-<\/strong><\/p>\n
<ul>\r\n  <li>Fruits<\/li>\r\n  <li>Vegetables<\/li>\r\n  <li>Groceries<\/li>\r\n<\/ul>\r\n<\/pre>\n
10. HTML <title> element<\/h3>\n
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.
\nWe should name the web-page accurately, and it should have a meaningful name.<\/p>\n
<title>Name of the web-page<\/title>.<\/pre>\n
11. HTML Omission of <html> and <body> tags<\/h3>\n
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.<\/p>\n
<head>\r\n  <title>Page Title<\/title>\r\n<\/head>\r\n\r\n<h1>Hi<\/h1>\r\n<p>Welcome<\/p>\r\n<\/pre>\n
12. HTML Omission of <head><\/h3>\n
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.<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<title>Title<\/title>\r\n<body>\r\n\r\n<h1>Hi<\/h1>\r\n<p>Welcome<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
13. HTML Close empty tags<\/h3>\n
It is optional to close the empty tags in HTML. However, while using XML or XHTML,the closing slash (\/) is necessary.<\/p>\n
<meta charset= \u201cutf-8\u201d \/><\/pre>\n
14. HTML Lang attribute<\/h3>\n
We should always specify the lang attribute to define the language of the web-page to the browsers and the search engines.<\/p>\n
<!DOCTYPE html>\r\n<html lang=\"en-US\">\r\n<head>\r\n<title>Title<\/title>\r\n<\/head>\r\n<body>\r\n\r\n<h1>Hi<\/h1>\r\n<p>Welcome<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
15. HTML Meta Data<\/h3>\n
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.<\/p>\n
Character Set-<\/strong><\/p>\n
<meta charset=\"UTF-8\"><\/pre>\n
It is a good practice to define the meta charset at the earliest in an HTML document.<\/p>\n
16. Setting viewport in HTML<\/h3>\n
We use the <meta> tag of the head to create a viewport for a website.<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<\/head>\r\n<body>\r\n<h2>Viewport<\/h2>\r\n<p>Try to run this code on different websites.<\/p>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Output-<\/strong><\/p>\n
\"html<\/a><\/p>\n
The browser controls the scaling of the web-page, using the meta viewport. The width=device-width specifies that page\u2019s width will be equal to the device\u2019s width where the web page will be displayed.<\/p>\n
The initial-scale=1.0 is used to set the initial zoom level of the web-page when it is first loaded.<\/p>\n
17. HTML Comments<\/h3>\n
It is advisable to use short comments like-
\n<!–following is a paragraph\u2192
\nLong comments like-
\n<!–
\nThis is a long comment example.
\nThis is a long comment example.
\n–><\/p>\n
Long comments become easily observable when indented with two spaces.<\/p>\n
18. HTML Style Sheets<\/h3>\n
For linking stylesheets,we can use simple linking syntax. The type attribute is not necessary.<\/p>\n
<link rel=\"stylesheet\" href=\"DataFlair.css\"><\/pre>\n
We should compress short CSS rules in a single line.<\/p>\n
p{font-family:Verdana; font-size:15px}<\/p>\n
We should write long CSS rules over multiple lines.<\/p>\n
body {\r\n  background-color: black;\r\n  font-family: \"Arial Black\";\r\n  font-size: 16em;\r\n  color: white;\r\n}\r\n<\/pre>\n
Note-<\/strong><\/p>\n