HTML Style Guide
An HTML Style Guide is a set of guidelines and best practices for writing HTML code.
It provides recommendations on how to format and structure HTML documents to ensure consistency, readability, and maintainability. A style guide helps developers and teams establish a common set of conventions, making it easier to collaborate on projects.
Here are some common elements that an HTML Style Guide might cover:
Indentation and Formatting: Guidelines for how to structure and format HTML code, including rules for indentation, line breaks, and spacing.
Naming Conventions: Consistent naming conventions for HTML elements, classes, IDs, and attributes to improve code readability and maintainability.
Comments: Recommendations for adding comments to HTML code to explain complex sections, provide context, or document the purpose of certain elements.
HTML Document Structure: Guidelines for organizing the structure of an HTML document, including the use of doctype declaration, head, body, and other essential elements.
Attribute Order: Recommendations for the order of attributes within HTML tags to maintain consistency.
Use of Quotes: Consistent use of single or double quotes for attribute values.
Boolean Attributes: Guidelines for handling boolean attributes like <b>checked</b>, <b>disabled</b>, and <b>readonly</b>.
Self-Closing Tags: Guidance on when to use self-closing tags (e.g., <img />, <br />) and when to use separate opening and closing tags.
HTML5 Semantic Elements: Encouragement to use semantic HTML5 elements like <header>, <nav>, <section>, <article>, <footer>, etc., for better document structure and accessibility.
Deprecated Elements: Avoidance of deprecated HTML elements and attributes.
Accessibility: Recommendations for creating accessible HTML code, including the use of ARIA roles and attributes.
Encoding: Guidelines for specifying character encoding in HTML documents.
Encoding: Guidelines for specifying character encoding in HTML documents.
Always Declare Document Type
The doctype declaration is typically placed at the very beginning of an HTML document, before the tag. Here's an example of a doctype declaration for HTML5:
Example
<!DOCTYPE html>
<html>
<!-- Rest of the HTML document goes here -->
</html>
Always Specify alt, width, and height for Images
Always specify the alt attribute for images. This attribute is important if the image for some reason cannot be displayed.
Also, always define the width and height of images. This reduces flickering, because the browser can reserve space for the image before loading.
Example
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
Close All HTML Elements
In HTML, you do not have to close all elements (for example the <p> element).
However, we strongly recommend closing all HTML elements, like this:
Example
<section> <p>This is a paragraph.</p> <p>This is a paragraph.</p> </section>
Never Skip the <title> Element
The
Meta Data
To ensure proper interpretation and correct search engine indexing, both the language and the character encoding <meta charset="charset"> should be defined as early as possible in an HTML document:
Example
<!DOCTYPE html> <html lang="en-us"> <head> <meta charset="UTF-8"> <title>Page Title</title> </head>
Setting The Viewport
The viewport is the user's visible area of a web page. It varies with the device - it will be smaller on a mobile phone than on a computer screen.
You should include the following <meta> element in all your web pages: