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 as a bad practice.
2. Use of lowercase element names in HTML
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-
<body>
<p>Welcome to Techguru</p>
</body>
Incorrect-
<BODY>
<P>Welcome to Techguru!</P>
</BODY>
3. Close all elements in HTML
Although HTML does not require closing all elements, it is advisable to do so for better coding practices.
Correct-
<body>
<p>Welcome to Techguru.</p>
</body>
Incorrect-
<body>
<p>Welcome to Techguru.
</body>
4. Use Lowercase Attribute Names in HTML
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-
<a href=”https://tech-guru.training/”>Welcome to Techguru</a>
Incorrect-
<a HREF=”https://tech-guru.training/”>Welcome to Techguru</a>
5. Quote Attribute Values in HTML
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-
<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
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-
<img src=”tree.jpg” alt=”Tree” height=”500px” width=”500px”>
Incorrect-
<img src=”tree.jpg”>
7. Spaces between equal signs in HTML
While it is permissible to include spaces within equal signs, it is strongly advised against due to its adverse impact on code readability.
Correct-
<a href=”https://tech-guru.training/”>Welcome to Techguru</a>
Incorrect-
<a href = “https://tech-guru.training/”>Welcome to Techguru</a>
8. HTML Long Code Lines
It is recommended to avoid excessively long lines of code; instead, break them to prevent unnecessary horizontal scrolling.
9. HTML Indentation and Blank lines
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-
<body>
<h1>Techguru</h1>
<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>
</body>
Incorrect-
<body>
<h1>Techguru</h1>
<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>
</body>
10. HTML <title> element
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.
<title>Techguru – Mastr’s of IT</title>.
11. HTML Omission of <html> and <body> tags
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.
<head>
<title>Page Title</title>
</head>
<h1>Hi</h1>
<p>Welcome</p>
12. HTML Omission of <head>
In HTML, you can skip using the <head> tag. The browser automatically includes all elements defined before the <body> tag in the default <head>.
<!DOCTYPE html>
<html>
<title>Title</title>
<body>
<h1>Hi</h1>
<p>Welcome</p>
</body>
</html>
13. HTML Close empty tags
In HTML, closing empty tags is optional. However, when using XML or XHTML, the closing slash (/) becomes necessary.
<meta charset= “utf-8” />
14. HTML Lang attribute
Always specify the “lang” attribute to define the language of the web page for browsers and 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 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.
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
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>
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’s recommended to use brief 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
To link stylesheets, use a straightforward linking syntax; the type attribute is not required.
<link rel=”stylesheet” href=”Techguru.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 required when linking JavaScript files. Use a simple syntax.
<script src=”Techguru.js”>
Accessing HTML Elements
Ensure proper use of id attributes to access HTML elements; otherwise, errors may occur.
<!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>
20. HTML File names
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.
21. HTML Extensions
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.
22. HTML Default Filenames
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.
Recap
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.
