HTML Style Guide
HTML Style Guide and Coding Rules
It's good practice make consistent, clean, and tidy HTML code makes it easier for others to read and understand your code.
Some guidelines and tips for HTML coding.
Document Type
Always declare the document type as the first line in your document.
<!DOCTYPE html>
Elements
The HTML allows mixing uppercase and lowercase letters in element names.
W3C recommend using lowercase element names.
Good Practice
<body>
<h1>Heading of the Page</h1>
<p>Paragraph of the page.</p>
</body>
Bad Practice
<BODY>
<H1>Heading of the Page</H1>
<P>Paragraph of the page.</P>
</BODY>
Close All HTML Elements
Don't forget to close the elements.
W3C strongly recommend closing all HTML elements
Good Practice
<div>
<p>Paragraph one.</p>
<p>Paragraph two.</p>
</div>
Bad Practice
<div>
<p>Paragraph one.
<p>Paragraph two.
</div>
Attribute
The HTML allows mixing uppercase and lowercase letters in attribute names.
W3C recommend using lowercase attribute names.
Good Practice
<a href="https://www.google.com">Google.com</a>
Bad Practice
<a HREF="https://www.google.com">Google.com</a>
Quote Attribute Values
The HTML allows attribute values without quotes.
W3C recommend quoting attribute values.
Good Practice
<a href="https://www.google.com">Google.com</a>
Bad Practice
<a href=https://www.google.com>Google.com</a>
Spaces and Equal Signs
The HTML allows spaces around equal signs. But space-less is easier to read and groups entities better together.
Good Practice
<a href="https://www.google.com">Google.com</a>
Bad Practice
<a href = "https://www.google.com">Google.com</a>
Image Tags
Always specify the alt attribute for images. This attribute is important if the image for some reason cannot be display image.
Good Practice
<img src="image.png" alt="Alternative text">
Bad Practice
<img src="image.png" >
Close Empty HTML Elements?
In HTML, it is optional to close empty elements.
In XHTML, it is mandatory to close empty elements.
Good Practice
<img src="image.png" alt="Alternative text">
Also Good Practice
<img src="image.png" alt="Alternative text" />
A complete list of all HTML tags, see HTML Tag Reference.