{"id":413,"date":"2024-01-02T15:21:00","date_gmt":"2024-01-02T15:21:00","guid":{"rendered":"https:\/\/techgurudehradun.in\/blog\/?p=413"},"modified":"2024-02-04T15:26:31","modified_gmt":"2024-02-04T15:26:31","slug":"html-style-guide","status":"publish","type":"post","link":"https:\/\/techgurudehradun.in\/blog\/?p=413","title":{"rendered":"HTML Style Guide"},"content":{"rendered":"\n

<\/p>\n\n\n\n

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

It is crucial to specify the document type that the browser should display. This informs the browser about the type of document it needs to render and, consequently, utilize its resources. The appropriate document type for HTML5 is –<\/p>\n\n\n\n

<!DOCTYPE Html><\/mark><\/p>\n\n\n\n

Not mentioning the document type is considered as a bad practice.<\/p>\n\n\n\n

2. Use of lowercase element names in HTML<\/h3>\n\n\n\n

While HTML permits the use of either lowercase or uppercase element names, we suggest opting for lowercase names. This choice enhances readability and makes the code easier to write.
Correct-<\/strong><\/p>\n\n\n\n

<body><\/mark>
<p>Welcome to Techguru<\/p><\/mark>
<\/body><\/mark><\/p>\n\n\n\n

Incorrect-<\/strong><\/p>\n\n\n\n

<BODY><\/mark>
<P>Welcome to Techguru!<\/P><\/mark>
<\/BODY><\/mark><\/p>\n\n\n\n

3. Close all elements in HTML<\/h3>\n\n\n\n

Although HTML does not require closing all elements, it is advisable to do so for better coding practices.
Correct-<\/strong><\/p>\n\n\n\n

<body>
<p>Welcome to Techguru.<\/p>
<\/body><\/mark><\/p>\n\n\n\n

Incorrect-<\/strong><\/p>\n\n\n\n

<body>
<p>Welcome to Techguru.
<\/body><\/mark><\/p>\n\n\n\n

4. Use Lowercase Attribute Names in HTML<\/h3>\n\n\n\n

Similar to elements, HTML does not offer a specific rule regarding the use of uppercase or lowercase names for attributes. Nevertheless, it is considered a good practice to employ lowercase letters for attribute names.
Correct-<\/strong><\/p>\n\n\n\n

<a href=”https:\/\/tech-guru.training\/”>Welcome to Techguru<\/a><\/mark><\/p>\n\n\n\n

Incorrect-<\/strong><\/p>\n\n\n\n

<a HREF=”https:\/\/tech-guru.training\/”>Welcome to Techguru<\/a><\/mark><\/p>\n\n\n\n

5. Quote Attribute Values in HTML<\/h3>\n\n\n\n

While developers often omit quoting attribute values, it is advisable to include quotes as it enhances code readability. Additionally, it is crucial to avoid using spaces in this context.
Correct-<\/strong><\/p>\n\n\n\n

<table class<\/strong>= \u201cbordered\u201d><\/mark><\/p>\n\n\n\n

Incorrect-<\/strong><\/p>\n\n\n\n

<table class<\/strong>= bordered><\/mark><\/p>\n\n\n\n

Does not work-<\/strong><\/p>\n\n\n\n

<table class<\/strong>= table striped><\/mark><\/p>\n\n\n\n

This does not work because of the spaces.<\/p>\n\n\n\n

6. Specification of alt, width, and height attributes of the image in HTML<\/h3>\n\n\n\n

Specifying the ‘alt’ attribute is a commendable practice as it serves as an alternative text in case the browser cannot display the image. Likewise, utilizing the height and width attributes allocates space for the image before loading, preventing flickering.
Correct-<\/strong><\/p>\n\n\n\n

<img src=”tree.jpg” alt=”Tree” height=”500px” width=”500px”><\/mark><\/p>\n\n\n\n

Incorrect-<\/strong><\/p>\n\n\n\n

<img src=”tree.jpg”><\/mark><\/p>\n\n\n\n

7. Spaces between equal signs in HTML<\/h3>\n\n\n\n

While it is permissible to include spaces within equal signs, it is strongly advised against due to its adverse impact on code readability.
Correct-<\/strong><\/p>\n\n\n\n

<a href=”https:\/\/tech-guru.training\/”>Welcome to Techguru<\/a><\/mark><\/p>\n\n\n\n

Incorrect-<\/strong><\/p>\n\n\n\n

<a href = “https:\/\/tech-guru.training\/”>Welcome to Techguru<\/a><\/mark><\/p>\n\n\n\n

8. HTML Long Code Lines<\/h3>\n\n\n\n

It is recommended to avoid excessively long lines of code; instead, break them to prevent unnecessary horizontal scrolling.<\/p>\n\n\n\n

9. HTML Indentation and Blank lines<\/h3>\n\n\n\n

Avoid unnecessary blank lines and indentation in an HTML document. It’s better to use blank lines to separate code blocks, and limit indentation to two spaces rather than the tab key.
Correct-<\/strong><\/p>\n\n\n\n

<body>
<h1>Techguru<\/h1><\/mark>

<h2>Mission<\/h2>
<p>We strive to offer high-quality education at an affordable cost, assisting individuals in advancing their careers in the latest technologies. Our approach includes a unique teaching method that combines self-paced and instructor-led learning. We provide personalized guidance, lifelong access to courses, 24\/7 support, live projects, resume and interview preparation, and practical, job-ready learning. Our goal is to give learners real-time technical experience through our expert instructors. <\/p><\/mark>

<\/body><\/mark><\/p>\n\n\n\n

Incorrect-<\/strong><\/p>\n\n\n\n

<body><\/mark>

<h1>Techguru<\/h1><\/mark>

<h2>Mission<\/h2><\/mark>

<p>We strive to offer high-quality education at an affordable cost, assisting individuals in advancing their careers in the latest technologies. Our approach includes a unique teaching method that combines self-paced and instructor-led learning. We provide personalized guidance, lifelong access to courses, 24\/7 support, live projects, resume and interview preparation, and practical, job-ready learning. Our goal is to give learners real-time technical experience through our expert instructors. <\/p><\/mark>

<\/body><\/mark><\/p>\n\n\n\n

<\/p>\n\n\n\n

10. HTML <title> element<\/h3>\n\n\n\n

It’s crucial to include the <title> element in an HTML document for effective search engine optimization (SEO). Search engines use the web page’s name to determine its ranking in search results for relevant queries. Therefore, it’s important to name the web page accurately and choose a meaningful title.<\/p>\n\n\n\n

<title>Techguru – Mastr’s of IT<\/title>.<\/mark><\/p>\n\n\n\n

11. HTML Omission of <html> and <body> tags<\/h3>\n\n\n\n

The HTML webpage can render successfully even without including the <html> and <body> elements. However, it’s advisable to include them. Omitting the <body> tag may lead to errors in older browsers, and excluding the <head> tag can cause issues with XML and DOM software.<\/p>\n\n\n\n

<head>
<title>Page Title<\/title>
<\/head>
<h1>Hi<\/h1>
<p>Welcome<\/p><\/mark><\/p>\n\n\n\n

12. HTML Omission of <head><\/h3>\n\n\n\n

In HTML, you can skip using the <head> tag. The browser automatically includes all elements defined before the <body> tag in the default <head>.<\/p>\n\n\n\n

<!DOCTYPE html>
<html>
<title>Title<\/title>
<body>
<h1>Hi<\/h1>
<p>Welcome<\/p>
<\/body>
<\/html><\/mark><\/p>\n\n\n\n

13. HTML Close empty tags<\/h3>\n\n\n\n

In HTML, closing empty tags is optional. However, when using XML or XHTML, the closing slash (\/) becomes necessary.<\/p>\n\n\n\n

<meta charset= \u201cutf-8\u201d \/><\/mark><\/p>\n\n\n\n

14. HTML Lang attribute<\/h3>\n\n\n\n

Always specify the “lang” attribute to define the language of the web page for browsers and search engines.<\/mark><\/p>\n\n\n\n

<!DOCTYPE html>
<html lang=”en-US”>
<head>
<title>Title<\/title>
<\/head>
<body>
<h1>Hi<\/h1>
<p>Welcome<\/p>
<\/body>
<\/html><\/mark><\/p>\n\n\n\n

15. HTML Meta Data<\/h3>\n\n\n\n

The <meta><\/code> tag holds extra information about the document, including page description, keywords, author, character set, etc. Web browsers use this metadata to display content, and search engines rely on keywords for indexing.<\/p>\n\n\n\n

Character Set-<\/strong><\/p>\n\n\n\n

<meta charset=”UTF-8″><\/mark><\/p>\n\n\n\n

It is a good practice to define the meta charset at the earliest in an HTML document.<\/p>\n\n\n\n

16. Setting viewport in HTML<\/h3>\n\n\n\n

Use the <meta> tag of the head to create a viewport for a website.<\/p>\n\n\n\n

<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<\/head>
<body>
<h2>Viewport<\/h2>
<p>Try<\/strong> to run this<\/strong> code on different websites.<\/p>
<\/body>
<\/html><\/mark><\/p>\n\n\n\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\n\n\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\n\n\n

17. HTML Comments<\/h3>\n\n\n\n


It’s recommended to use brief comments like:

<!\u2013following is a paragraph\u2192
Long comments like-
<!\u2013
This is a long comment example.
This is a long comment example.
\u2013><\/mark><\/p>\n\n\n\n

Long comments become easily observable when indented with two spaces.<\/p>\n\n\n\n

18. HTML Style Sheets<\/h3>\n\n\n\n

To link stylesheets, use a straightforward linking syntax; the type attribute is not required.<\/p>\n\n\n\n

<link rel=”stylesheet” href=”Techguru.css”><\/mark><\/p>\n\n\n\n

We should compress short CSS rules in a single line.<\/p>\n\n\n\n

p{font-family:Verdana; font-size:15px}<\/mark><\/p>\n\n\n\n

We should write long CSS rules over multiple lines.<\/p>\n\n\n\n

body {
background-color: black;
font-family: “Arial Black”;
font-size: 16em;
color: white;
}<\/mark><\/p>\n\n\n\n

Note-<\/strong><\/p>\n\n\n\n

    \n
  • Use a space before the opening bracket.<\/li>\n\n\n\n
  • Use two spaces for indentation.<\/li>\n\n\n\n
  • Only Use quotes for the values if they contain spaces.<\/li>\n\n\n\n
  • Use a semicolon for each property-value pair.<\/li>\n\n\n\n
  • Place the closing bracket on the last line.<\/li>\n<\/ul>\n\n\n\n

    19. JavaScript<\/h3>\n\n\n\n

    The type attribute is not required when linking JavaScript files. Use a simple syntax.<\/p>\n\n\n\n

    <script src=”Techguru.js”><\/mark><\/p>\n\n\n\n

    Accessing HTML Elements<\/strong>
    Ensure proper use of id attributes to access HTML elements; otherwise, errors may occur.<\/p>\n\n\n\n

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

    <\/p>\n\n\n\n

    20. HTML File names<\/h3>\n\n\n\n

    Be mindful of the case sensitivity of web servers like Apache and Unix, as they may not recognize case-insensitive file names, such as delhi.jpg and Delhi.jpg. To avoid issues, it’s recommended to consistently use lowercase file names.<\/p>\n\n\n\n

    21. HTML Extensions<\/h3>\n\n\n\n

    Ensure that your HTML document carries the file extension .html or .htm, as they are interchangeable. Similarly, a CSS file should have the extension .css, and a JavaScript file should bear the extension .js.<\/p>\n\n\n\n

    22. HTML Default Filenames<\/h3>\n\n\n\n

    When a URL lacks a specified filename, the server automatically appends a default filename like index.html or default.html. Server configuration allows multiple default filenames, but it’s crucial to avoid using the same name for another file.<\/p>\n\n\n\n

    Recap<\/h2>\n\n\n\n

    In this article, we have explored the details of crafting an HTML document, highlighting best practices and proper syntax usage. Key aspects of the HTML Style Guide, including declaring document types, utilizing lang attributes, closing tags, employing lowercase names for attributes and elements, quoting values, and more, have been discussed. Additionally, we’ve delved into best practices for CSS and JavaScript, along with insights into setting viewports.<\/p>\n","protected":false},"excerpt":{"rendered":"

    1. Declaration of document type in HTML It is crucial to specify the document type that the browser should display. This informs the browser about the type of document it needs to render and, consequently, utilize its resources. The appropriate document type for HTML5 is – <!DOCTYPE Html> Not mentioning the document type is considered […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,24],"tags":[30,29],"_links":{"self":[{"href":"https:\/\/techgurudehradun.in\/blog\/index.php?rest_route=\/wp\/v2\/posts\/413"}],"collection":[{"href":"https:\/\/techgurudehradun.in\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/techgurudehradun.in\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/techgurudehradun.in\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/techgurudehradun.in\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=413"}],"version-history":[{"count":28,"href":"https:\/\/techgurudehradun.in\/blog\/index.php?rest_route=\/wp\/v2\/posts\/413\/revisions"}],"predecessor-version":[{"id":441,"href":"https:\/\/techgurudehradun.in\/blog\/index.php?rest_route=\/wp\/v2\/posts\/413\/revisions\/441"}],"wp:attachment":[{"href":"https:\/\/techgurudehradun.in\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=413"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/techgurudehradun.in\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=413"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/techgurudehradun.in\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=413"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}