HTML Style Guide
It is simpler for other people to read and comprehend your HTML code(HTML Style Guide) if it is consistent, neat, and organized.
Here are some rules and recommendations for writing quality HTML code.
Use Lowercase Element Names
In every document, the document type should always be declared on the first line.
For HTML, the appropriate document type is:
<!DOCTYPE html>
Use Lowercase Element Names
HTML permits element names to contain a combination of capital and lowercase letters.
Nonetheless, we advise against using capital element names because:
- It looks terrible to mix uppercase and lowercase names.
- Typically, developers use lowercase names.
- Lowercase is more aesthetically pleasing.
- Writing in lowercase is simpler.
Good:
<body>
<p>This is a sentence.</p>
<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
Bad:
<BODY>
<P>This is a sentence.</P>
</BODY>
Close All HTML Elements
Not every element in HTML needs to be closed, such as the <p> element.
Nonetheless, we highly advise closing all HTML elements, such as this one:
Good:
<section>
<p>This is a sentence.</p>
<p>This is a sentence.</p>
</section>
Bad:
<section>
<p>This is a sentence.
<p>This is a sentence.
</section>
Use Lowercase Attribute Names
HTML permits attribute names to contain a combination of capital and lowercase letters.
On the other hand, we advise utilizing lowercase attribute names due to:
- It looks terrible to mix uppercase and lowercase names.
- Typically, developers use lowercase names.
- Lowercase is more aesthetically pleasing.
- Writing in lowercase is simpler.
Good:
<a href="https://www.codingask.com/html/">Visit our HTML tutorial</a>
Bad:
<a HREF="https://www.codingask.com/html/">Visit our HTML tutorial</a>
Always Quote Attribute Values
Attribute values without quotations are supported by HTML.
On the other hand, we advise quoting attribute values due to:
- Typically, developers will quote attribute values.
- Reading quoted values is simpler.
- If the value has spaces in it, you MUST use quotes.
Good:
<table class="striped">
Bad:
<section>
<p>This is a sentence.
<p>This is a sentence.
</section>
Very bad:
This will not work, because the value contains spaces:
<table class=table striped>
Always Specify alt, width, and height for Images
For photos, always include the alt attribute. This feature is crucial in the event that the image cannot be displayed for some reason.
Don’t forget to provide the height and width of your photos. Because the browser can save space for the image before loading, flickering is reduced.
Good:
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Html5" style="width:128px;height:128px" title="Html Style Guide 2" data-lazy-src="html5.gif"><noscript><img decoding="async" src="html5.gif" alt="Html5" style="width:128px;height:128px" title="Html Style Guide 2"></noscript>
Bad:
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Html Style Guide - Html Style Guide" title="Html Style Guide 3" data-lazy-src="html5.gif"><noscript><img decoding="async" src="html5.gif" alt="Html Style Guide - Html Style Guide" title="Html Style Guide 3"></noscript>
Spaces and Equal Signs
Spaces are allowed around equal signs in HTML. However, space-less is more readable and effectively groups elements together.
Good:
<link rel="stylesheet" href="styles.css">
Bad:
<link rel = "stylesheet" href = "styles.css">
Avoid Long Code Lines
Scrolling left and right to read HTML code is not a convenient way to work with HTML editors.
Aim to keep code lines short.
Blank Lines and Indentation
Additions of empty spaces, lines, or indentations must have a purpose.
Add blank lines between long or logical code blocks to improve readability.
Indent the text by two spaces for easier reading. Avoid using the tab key.
Good:
<body>
<h1>Famous Cities</h1>
<h2>Berlin</h2>
<p>Berlin is the capital of Germany, the center of the Greater Berlin Area, and the most populous metropolitan area in the Germany.</p>
<h2>Helsinki</h2>
<p>Helsinki is the capital city of Finland. It is the most populous city in the Finland.</p>
<h2>Paris</h2>
<p>Paris is the capital of France. The Paris area is one of the largest population centers in Europe.</p>
</body>
Bad:
<body>
<h1>Famous Cities</h1>
<h2>Berlin</h2><p>Berlin is the capital of Germany, the center of the Greater Berlin Area, and the most populous metropolitan area in the Germany.</p>
<h2>Helsinki</h2><p>Helsinki is the capital city of Finland. It is the most populous city in the Finland.</p>
<h2>Paris</h2><p>Paris is the capital of France. The Paris area is one of the largest population centers in Europe.</p>
</body>
Good Table Example:
<table>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
<tr>
<td>A</td>
<td>Description of X</td>
</tr>
<tr>
<td>B</td>
<td>Description of Y</td>
</tr>
</table>
Good List Example:
<ul>
<li>Helsinki</li>
<li>Paris</li>
<li>Berlin</li>
</ul>
Never Skip the < title > Element
In HTML, the <title> element is necessary.
When it comes to search engine optimization (SEO), the content of a page title matters greatly! Search engine algorithms use the page title to determine which pages to display in search results.
The element <title>:
- describes a toolbar title in the browser.
- gives the page a title when it is added to favorites.
- gives the page’s title in search engine results.
So, try to make the title as accurate and meaningful as possible:
<title>HTML Style Guide and Coding Conventions</title>
Omitting < html > and ?
An HTML page will validate without the <html> and <body> tags:
Example
<!DOCTYPE html>
<head>
<title>Page Title</title>
</head>
<h1>This is a heading</h1>
<p>This is a sentence.</p>
Still, we highly advise including the <html> and <body> tags at all times!
In earlier browsers, omitting <body> may result in problems.
Moreover, DOM and XML software can crash when <html> and <body> are omitted.
Omitting < head >?
The HTML <head> tag can also be omitted.
Browsers will add all elements before <body>, to a default <head> element.
Example
<!DOCTYPE html>
<html>
<title>Page Title</title>
<body>
<h1>This is a heading</h1>
<p>This is a senence.</p>
</body>
</html>
However, we recommend using the <head> tag.
Close Empty HTML Elements?
In HTML, it is optional to close empty elements.
Allowed:
Also Allowed:
If you expect XML/XHTML software to access your page, keep the closing slash (/), because it is required in XML and XHTML.
Add the lang Attribute
To specify the language of the Web page, you should always place the lang property inside the <html> tag. This is for the benefit of browsers and search engines.
Example
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a sentence.</p>
</body>
</html>
Meta Data
In an HTML document, the language and the character encoding <meta charset=”charset”> should be defined as early as feasible to guarantee correct interpretation and search engine indexing:
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>Page Title</title>
</head>
Setting The Viewport
Setting The Viewport
A web page’s visible region to the user is called the viewport. It depends on the device; for example, it will be smaller on a computer screen than it is on a mobile phone.
Every web page you create should have the following <meta> element:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This provides guidance to the browser on how to manage the size and scaling of the page.
The width of the page is set to follow the device’s screen width (which varies based on the device) by using the width=device-width component.
When the browser loads the page for the first time, the initial zoom level is set by the initial-scale=1.0 component.
The following is an illustration of a webpage with and without the viewport meta tag:
HTML Comments
One line should contain a few brief remarks, like this:
<!-- This is a comment -->
Comments that spans more than one line, should be written like this:
<!-- This is a comment -->
Comments that spans more than one line, should be written like this:
<!--
This is a long comment example. This is a long comment example.
This is a long comment example. This is a long comment example.
-->
Long comments are easier to observe if they are indented with two spaces.
Using Style Sheets
Use simple syntax for linking to style sheets (the type attribute is not necessary):
<link rel="stylesheet" href="styles.css">
Short CSS rules can be written compressed, like this:
p.intro {font-family:Verdana;font-size:16em;}
Long CSS rules should be written over multiple lines:
body {
background-color: lightgrey;
font-family: "Arial Red", Helvetica, sans-serif;
font-size: 16em;
color: Red;
}
- Put the opening bracket and selector on the same line.
- Before the opening bracket, use one space.
- Make use of two indentation spaces.
- After every property-value pair, including the final one, use a semicolon.
- Use quotation marks only around values that have spaces in them.
- Without using any preceding spaces, start a new line with the closing bracket.
Loading JavaScript in HTML
Use simple syntax for loading external scripts (the type attribute is not necessary):
Accessing HTML Elements with JavaScript
Using “untidy” HTML code can result in JavaScript errors.
These two JavaScript statements will produce different results:
getElementById("Demo").innerHTML = "Hi";
getElementById("demo").innerHTML = "Hi";
Use Lower Case File Names
Use Lower Case File Names
The file name “london.jpg” cannot be retrieved as “London.jpg” on some web servers (Apache, Unix).
Other web servers (like Microsoft and IIS) do not care about case; you can access “london.jpg” as “London.jpg.”
You need to be mindful of this if you employ a combination of capital and lowercase letters.
Even little mistakes can cause your website to crash if you go from a case-insensitive to a case-sensitive server!
Use lowercase file names at all times to prevent these issues!
File Extensions
HTML files should have a .html extension (.htm is allowed).
CSS files should have a .css extension.
JavaScript files should have a .js extension.
Differences Between .htm and .html?
There is no difference between the .htm and .html file extensions!
Both will be treated as HTML by any web browser and web server.
Default Filenames
The server simply appends a default filename, such as “index.html”, “index.htm”, “default.html”, or “default.htm”, to URLs that do not specify a filename at the end (such as “https://www.codingask.com/”).
Your file must be titled “index.html” and not “default.html” if your server is set to only use “index.html” as the default filename.
On the other hand, servers can have several default filenames configured; typically, you can have as many default filenames as you’d like.
