HTML Style Guide
The style guide in HTML is a collection of guidelines and standards that specify how code should be written and formatted. It contributes to making the written code legible, clear, and simple to edit. Additionally, a style guide aids in avoiding frequent mistakes and glitches that may impair a website's performance and design. The most crucial style rules for writing better HTML code will be covered in this course.
Use HTML5 Doctype
HTML pages, such as the declaration, should always come first. Please take note that this statement is case-insensitive. To enable more consistent web page rendering, the full standard mode, sometimes called the no-quirks mode, must be enforced. The layout engines of contemporary web browsers employ it, and it is the most recent web standard as defined by W3C.
Example:
<!DOCTYPE html>
Specify the language of the document:
Always use the "lang" attribute to identify the language of the document. The root of an HTML document is the beginning tag, which defines this attribute within the opening <html> tag.
Example:
<html lang="en">
Explain Charset:
Developers are always advised by the W3C to clearly indicate the charset or character encoding. The tag's charset attribute can be used to do this. Since UTF-8 is the most widely used character encoding and offers more than a million characters, pass it as a value to the charset attribute.
Example:
<meta charset = "UTF-8">
Quote the Values of the Attributes:
W3C guidelines state that it is preferable to enclose attribute values in double quotes. This is crucial for values that contain spaces since, without the quotes, HTML might not process them correctly. Double quotes are used more frequently than single quotes. But we also have the option of using single quotations.
Example:
<p style = "font-size: 25px; ">
<!-- contains paragraph -->
</p>
<!-- contains paragraph -->
</p>
Make use of Closing Tags:
Even though some elements in HTML have optional closing tags, all elements need to be closed correctly. Note that certain elements, such as and many more, have self-closing properties.
Example:
<!DOCTYPE html>
<html>
<head>
<!-- Content inside head tag -->
</head>
<body>
<h1>
<!-- Type Heading here -->
</h1>
<p>
<!-- Contains paragraph -->
Welcome to my HTML page
</p>
</body>
</html>
<html>
<head>
<!-- Content inside head tag -->
</head>
<body>
<h1>
<!-- Type Heading here -->
</h1>
<p>
<!-- Contains paragraph -->
Welcome to my HTML page
</p>
</body>
</html>
Add Comments:
We utilise comments to clarify the function or goal of a certain HTML code. to end them. Do not use comments for scripting or styling.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Content inside head tag -->
</head>
<body>
<h1>
<!-- Type Heading here -->
</h1>
<p>
<!-- contains paragraph -->
Welcome to my HTML page
</p>
</body>
</html>
<html lang="en">
<head>
<!-- Content inside head tag -->
</head>
<body>
<h1>
<!-- Type Heading here -->
</h1>
<p>
<!-- contains paragraph -->
Welcome to my HTML page
</p>
</body>
</html>
File Extensions:
The .html extension is required for HTML files (.htm is acceptable).
The .css extension is required for CSS files.
The .js extension should be present in JavaScript files.
The .css extension is required for CSS files.
The .js extension should be present in JavaScript files.
