Maintaining a consistent, clean, and tidy HTML codebase facilitates readability and comprehension for others working with your code.
Here are several guidelines, best practices and tips for crafting good HTML code.
Always Declare Document Type
It is essential to declare the document type as the first line in your HTML document.
The correct document type for HTML is:
<!DOCTYPE html>Use Lowercase Element Names
While HTML permits mixing uppercase and lowercase letters in element names, we recommend using lowercase names for simplicity and a cleaner appearance.
Good:
<p>This is a paragraph.</p>Bad:
<P>This is a paragraph.</P>Always Specify the Closing Tag
In HTML, it is not mandatory to close all elements (e.g., the <p> element).
But, we highly recommend closing all HTML elements.
Good:
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>Bad:
<body>
<p>This is a paragraph.
<p>This is a paragraph.
</body>Use Lowercase Attribute Names
HTML allows mixing uppercase and lowercase letters in attribute names.
But, we recommend using lowercase attribute names because they are cleaner, simpler, easier to write and look good.
Good:
<h1 id="myid" class="myclass">Heading 1</h1> Bad:
<h1 ID="myid" CLASS="myclass">Heading 1</h1> Always Double Quote Attribute Values
Although HTML permits attribute values without quotes or in single quotes, we highly recommend double quoting attribute values for ease of use and assigning multiple attribute values or values which contain spaces.
Good:
<h1 id="myid" class="myclass">Heading 1</h1> Bad:
<h1 id=myid class=myclass>Heading 1</h1> Very bad:
This won't work because the value contains spaces.
<h1 id=myid class=myclass anotherclass>Heading 1</h1> Always Specify alt, width, and height for Images
It's crucial to always include the alt attribute for images. This attribute is essential in case the image cannot be displayed for any reason.
Additionally, it's best practice to specify the width and height of images. This helps reduce flickering, as the browser can allocate space for the image before loading it.
Good:
<img src="image.png" alt="Image" style="width:32px;height:32px">Bad:
<img src="image.png">Spaces and Equal Signs
HTML permits spaces around equal signs. However, omitting spaces is easier to read and effectively groups entities together.
Good:
<link rel="stylesheet" href="style.css"> Bad:
<link rel = "stylesheet" href = "styles.css">Avoid Long Code Lines
When using an HTML editor, scrolling horizontally to read the HTML code is inconvenient.
It's best to avoid excessively long lines of code.
Blank Lines and Indentation
Avoid adding blank lines, spaces, or indentations without a specific purpose.
For improved readability, include blank lines to separate large or logical code blocks.
For indentation, use two spaces instead of the tab key.
Good:
<body>
<h1>Main Heading</h1>
<div class="content">
<h2>Section Heading</h2>
<p>This is a paragraph.</p>
<h2>Section Heading</h2>
<p>This is a paragraph</p>
</div>
</body>Bad:
<body>
<h1>Main Heading</h1>
<h2>Section Heading</h2>
<p>This is a paragraph.</p>
<h2>Section Heading</h2>
<p>This is a paragraph</p>
</body>Never Skip the <title> Element
The <title> element is a mandatory component in HTML, which specifies the title of the page, is critical for search engine optimization (SEO) and shows a title for the page in search engine results
Hence, it's advisable to create a title that is both precise and relevant.
<title>HTML Structure and Styling - Best Practices</title>Must Use <html> and <body>
An HTML page can validate without the <html> and <body> tags. However, we strongly recommend to always include them in your HTML pages because omitting the <body> tag can result in errors in older browsers.
Furthermore, omitting both the <html> and <body> tags can potentially cause crashes in DOM and XML software.
The <head> Tag
The HTML <head> tag can be omitted because browsers automatically add all elements before <body> to a default <head> element. . But, we recommend including the <head> tag.
Empty HTML Elements
In HTML, it is not necessary to close empty elements. For example, both of the below codes are allowed.
<img src="image.png" alt="Image"><img src="image.png" alt="Image" />But we recommend closing these for better compatibility with various software and browsers.
Always specify the lang Attribute
Always include the lang attribute within the <html> tag to specify the language of the web page. This helps search engines and browsers understand the page's language.
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>Meta Data
To ensure accurate interpretation and proper indexing by search engines, it's crucial to define both the language and the character encoding <meta charset="charset"> as early as possible in an HTML document.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>Setting The Viewport
The viewport refers to the visible area of a web page as seen by the user. It differs based on the device, being smaller on a mobile phone compared to a computer screen.
For optimal display, include the following <meta> element in all your web pages.
<meta name="viewport" content="width=device-width, initial-scale=1.0">This <meta> element provides the browser with instructions on managing the page's dimensions and scaling.
The width=device-width segment sets the page width to match the device's screen width, which varies by device.
The initial-scale=1.0 segment sets the initial zoom level when the browser first loads the page.
HTML Comments
Short comments should be on one line, like this.
<!-- This is a short comment -->Comments that span multiple lines should be written like this.
<!--
This is a long comment. This is a long comment.
This is a long comment. This is a long comment.
-->Long comments are easier to read when indented with two spaces.
Using Style Sheets
When linking to style sheets, use a simple syntax without the type attribute.
<link rel="stylesheet" href="styles.css">Short CSS rules can be written in a compressed format, like this:
p.intro {font-family:Verdana;font-size:16em;}Long CSS rules should be written across multiple lines.
body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
}- Place the opening bracket on the same line as the selector
- Use one space before the opening bracket
- Indent each property-value line with two spaces
- Use a semicolon after each property-value pair, including the last one
- Only use quotes around values if they contain spaces
- Place the closing bracket on a new line, without leading spaces
Use Lower Case File Names
Some web servers, like Apache on Unix systems, are case-sensitive regarding file names. This means that "name.jpg" cannot be accessed as "Name.jpg".
On the other hand, servers like Microsoft's IIS are not case-sensitive, so "name.jpg" can be accessed as "Name.jpg".
It's crucial to be aware of this difference if you use a mix of uppercase and lowercase in your file names. If you move from a case-insensitive to a case-sensitive server, even small errors can break your website!
To avoid these problems, it's best practice to always use lowercase file names.
File Extensions
HTML files should typically have a .html extension, although using .htm is also allowed.
CSS files should have a .css extension, for example: "style.css".
JavaScript files should have a .js extension, for example: "script.js".
Please check below options for the links to our previous or next tutorial.