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 Attribute
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 utilize 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 Extension
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.
More topic in HTML
