Tips (Total 25)
# Tips-1) What is HTML Style Guide
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.
Example of HTML Style Guide
Always declare the document type as the first line in your document. The correct document type for HTML is:
index.html
Example:
HTML
<!DOCTYPE html>
# Tips-2) How to create Always Declare Document Type
Always declare the document type as the first line in your document.
Example of Always Declare Document Type
The correct document type for HTML is:
index.html
Example:
HTML
<!DOCTYPE html>
# Tips-3) How to Use Lowercase Element Names
HTML allows mixing uppercase and lowercase letters in element names.
However, we recommend using lowercase element names, because:
- Mixing uppercase and lowercase names looks bad
- Developers normally use lowercase names
- Lowercase looks cleaner
- Lowercase is easier to write
Good:
index.html
Example:
HTML
<body>
<p>This is a paragraph.</p>
</body>
Bad:
index.html
Example:
HTML
<BODY>
<P>This is a paragraph.</P>
</BODY>
# Tips-4) How to 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:
index.html
Example:
HTML
<section>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</section>
Output should be:
Bad:
index.html
Example:
HTML
<section>
<p>This is a paragraph.
<p>This is a paragraph.
</section>
Output should be:
# Tips-5) How to 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 looks 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>
# Tips-6) How to create Always Quote Attribute Values
HTML allows attribute values without quotes.
However, we recommend quoting attribute values, because:
- Developers normally quote attribute values
- Quoted values are easier to read
- You MUST use quotes if the value contains spaces
Good:
<table class="striped">
Bad:
<table class=striped>
Very bad:
This will not work, because the value contains spaces:
<table class=table striped>
# Tips-7) How to create 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">
# Tips-8) How to create HTML Spaces and Equal Signs
HTML allows spaces around equal signs. But space-less is easier to read and groups entities better together.
<link rel="stylesheet" href="styles.css">
Bad:
<link rel = "stylesheet" href = "styles.css">
# Tips-9) How to Avoid HTML 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.
# Tips-10) How to create HTML Blank Lines and Indentation
Do not add blank lines, spaces, or indentations without a reason.
For readability, add blank lines to separate large or logical code blocks.
For readability, add two spaces of indentation. Do not use the tab key.
Good:
<body>
<h1>Famous Cities</h1>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom.</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>Tokyo</h2><p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>
<h2>London</h2><p>London is the capital city of England. It is the most populous city in the United Kingdom.</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 A</td>
</tr>
<tr>
<td>B</td>
<td>Description of B</td>
</tr>
</table>
Good List Example:
<ul>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ul>
# Tips-11) How to create Never Skip the <title> Element
The <title> element is required in HTML.
The contents of a page title is very important for search engine optimization (SEO)! The page title is used by search engine algorithms to decide the order when listing pages in search results.
The <title> element:
- defines a title in the browser toolbar
- provides a title for the page when it is added to favorites
- displays a title for the page in search-engine results
So, try to make the title as accurate and meaningful as possible:
Example
<title>HTML Style Guide and Coding Conventions</title>
# Tips-12) What is Omitting <html> and <body>
An HTML page will validate without the <html> and <body> tags:
Example of Omitting <html> and <body>
index.html
Example:
HTML
<!DOCTYPE html>
<head>
<title>Page Title</title>
</head>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
Output should be:
However, we strongly recommend to always add the <html> and <body> tags! Omitting <body> can produce errors in older browsers. Omitting <html> and <body> can also crash DOM and XML software.
# Tips-13) What is Omitting <head>
The HTML <head> tag can also be omitted.
Browsers will add all elements before <body>, to a default <head> element.
Example of Omitting HEAD
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<title>Page Title</title>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Output should be:
However, we recommend using the <head> tag.
# Tips-14) How to Close Empty HTML Elements
In HTML, it is optional to close empty elements.
Allowed:
<meta charset="utf-8">
Also Allowed:
<meta charset="utf-8" />
If you expect XML/XHTML software to access your page, keep the closing slash (/), because it is required in XML and XHTML.
# Tips-15) How to Add the lang Attribute
You should always include the lang attribute inside the <html> tag, to declare the language of the Web page. This is meant to assist search engines and browsers.
Example of Adding the lang Attribute
Example:
HTML
<html lang="en-us">
Full Example of Adding the lang Attribute
index.html
Example:
HTML
<!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>
Output should be:
# Tips-16) What is Meta Data
o 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 of Meta Data
Example:
HTML
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
# Tips-17) How to Set 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:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This gives the browser instructions on how to control the page's dimensions and scaling.
The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag:
Tip: If you are browsing this page with a phone or a tablet, you can click on the two links below to see the difference.
# Tips-18) How to set HTML Comments
Short comments should be written on one line, like this:
Example of Comment
Comments that spans more than one line, should be written like this:
index.html
Example:
HTML
<!--
This is a long comment example. This is a long comment example.
This is a long comment example. This is a long comment example.
-->
# Tips-19) How to use Style Sheets
Use simple syntax for linking to style sheets (the type attribute is not necessary):
Example of HTML Style Sheet
Example:
HTML
<link rel="stylesheet" href="styles.css">
Short CSS rules can be written compressed, like this:
Example:
CSS
p.intro {font-family:Verdana;font-size:16em;}
Long CSS rules should be written over multiple lines:
Example:
CSS
body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
}
Output should be:
# Tips-20) How to load JavaScript in HTML
Use simple syntax for loading external scripts (the type attribute is not necessary):
Example of Loading JS in HTML
This is only path guide
index.html
Example:
HTML
<script src="myscript.js">
Example of Loading JS in HTML
This example of url based for Loading JS in HTML
index.html
Example:
HTML
<script src="https://www.w3schools.com/lib/uic.js?v=1.0.5">
# Tips-21) How to access HTML Elements with JavaScript
Using "untidy" HTML code can result in JavaScript errors.
These two JavaScript statements will produce different results:
Example of Accessing HTML Elements with JavaScript
These two JavaScript statements will produce different results:
index.html
Example:
HTML
<script>
// Only paragraph 2 will be overwritten
document.getElementById("demo").innerHTML = "HELLO.";
</script>
Full Example of Accessing HTML Elements with JavaScript
These two JavaScript statements will produce different results:
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<p id="Demo">This is paragraph 1.</p>
<p id="demo">This is paragraph 2.</p>
<script>
// Only paragraph 2 will be overwritten
document.getElementById("demo").innerHTML = "HELLO.";
</script>
</body>
</html>
Output should be:
# Tips-22) How to Use Lower Case File Names
Some web servers (Apache, Unix) are case sensitive about file names: "london.jpg" cannot be accessed as "London.jpg".
Other web servers (Microsoft, IIS) are not case sensitive: "london.jpg" can be accessed as "London.jpg".
If you use a mix of uppercase and lowercase, you have to be aware of this.
If you move from a case-insensitive to a case-sensitive server, even small errors will break your web!
To avoid these problems, always use lowercase file names!
Example of Using Lower Case File Names
When you will upload a file. The file name should small case.
Example:
HTML
bangladesh-cricket-video.mp4
# Tips-23) What is 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.
Example of File Extensions
video.mp4 here is .mp4 is a file extension.
index.html
Example:
HTML
.mp4 .mp3 .html .php .3gp .apk
# Tips-24) What is the 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.
Differences Between .htm and .html
There is no such big difference between HTML and HTM. The only difference between HTML and HTM is one letter only, or we can say the spelling of the words (the letter 'L'). Earlier operating systems were not so powerful and capable of taking a four-letter word as an extension, so HTM found its existence.
Differences Between .htm and .html
HTM and HTML refer to file extensions of HTML files. They are files of a plain text type. HTML stands for Hyper Text Markup Language, which is a markup language used for creating web pages. HTML actually uses markup tags for describing web pages. As file extensions, they are denoted as .htm or .html. If you use HTML files to create your web page, then an .html or .htm will most likely appear at the end of its URL. Here are examples: http://code.google.com/chrome/extensions/samples.html and ‘http://edgewisdom.com/Finance1.htm
Differences Between .htm and .html
The extension .html is a standard extension for web pages created in HTML (Hypertext Markup Language). The .htm extension is a variation of the same extension that you can use for your website files.By default, the page you'll see when you visit your web address is index.html. If you don't have an index.html file, our servers will look for a file called index.htm. If your website does not contain either of these files, you will get a warning, and your website visitors will see an error if they try to visit your web address. If you are not using the standard index.html
# Tips-25) What is Default Filenames
When a URL does not specify a filename at the end (like "https://horje.com/"), the server just adds a default filename, such as "index.html", "index.htm", "default.html", or "default.htm".
If your server is configured only with "index.html" as the default filename, your file must be named "index.html", and not "default.html".
However, servers can be configured with more than one default filename; usually you can set up as many default filenames as you want.