A consistent, clean, and tidy HTML code makes it easier for others to read and understand your code.
Here are some guidelines and tips for creating good HTML code.
Always Declare Document Type
Always declare the document type as the first line in your document.
The correct document type for HTML is:
<!DOCTYPE html>
Avoid Long Code Lines
When using an HTML editor, it is NOT convenient to scroll right and left to read the HTML code.
Try to avoid too long code lines.
Use Lowercase Element Names
HTML allows the mixing of uppercase and lowercase letters in element names.
However, we recommend using lowercase element names, because:
Mixing uppercase and lowercase names look bad
Developers normally use lowercase names
Lowercase looks cleaner
Lowercase is easier to write
Good:
<body>
<p>This is a paragraph.</p>
</body>
Bad:
<BODY>
<P>This is a paragraph.</P>
</BODY>
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:
Good:
<section>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</section>
Bad:
<section>
<p>This is a paragraph.
<p>This is a paragraph.
</section>
Use Lowercase Attribute Names
HTML allows mixing uppercase and lowercase letters in attribute names.
However, we recommend using lowercase attribute names, because:
Mixing uppercase and lowercase names look bad
Developers normally use lowercase names
Lowercase looks cleaner
Lowercase is easier to write
Good:
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
Bad:
<a HREF="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
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.
Good:
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
Bad:
<img src="html5.gif">
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:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
Thanks & Regards
Sayed's Blog