HTML Handbook
HTML Cheatsheet
History behind index file
Generally, We name our HTML file as index.html that is because earlier Apache2 was used everywhere which will server the HTML pages.
Apache2 render the HTML file named index.html by default. From then we started using index.html and there was also default.html but it’s not used nowadays.
For writing HTML code faster we can use Emmet. VSCODE and other famous IDE gives it by default.
Core Structure of HTML
All the tags in HTML are case insensitive. So, <html> and <HTML> are same.
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body></body>
</html>
<!DOCTYPE html> : It tells the browser that this document file is html file.
<html lang="en"> : While HTML grown world wide we use lang to tell browser that it’s written in English or any other language.
There are two child in <html> tag.
<head><body>
<meta> : These tags are the information which we don’t want to display we it should be known to Browser or Server. like we want to add support for emojis we can add UTF-16 in charset, or zoom level when page loads in different devices like tablet, laptop, smartphone etc.
Best resource for meta tags - Meta tags and Attributes that Google Supports
1
<h1 title="main heading">Heading</h1>
In above code, entire line is called element, Where h1 is tag & title is attribute.
HTML Tags
Heading & Paragraphs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
<head>
<title>Heading & Paragraphs</title>
</head>
<body>
<h1>Heading One</h1>
<h2>Heading Two</h2>
<h3>Heading Three</h3>
<h4>Heading Four</h4>
<h5>Heading Five</h5>
<h6>Heading Six</h6>
<hr />
<p>
This is the paragraph text.
<br />
Content of the paragraph text.
</p>
<pre>
line 1
line 2
line 3
line 4
</pre>
</body>
</html>
<h1> to <h6> : These are heading tag which are used to define headings in our HTML Document.
<p> : Paragraph tag is used to define normal text as paragraph in our HTML Document.
<br> : Used for line break. Content will be in new line after <br> tag.
<hr> : Horizontal Line to separate the content.
<pre> : Used to represents preformatted text which is to be presented exactly as written in the HTML Document.
Formatting Style & Global Attributes
Commenting
- Single line Comment
1
<!-- <h1> Commented Text </h1> -->
- Multiline Comment
1 2 3
<!-- <h1>Commented Text</h1> <h1>Commented Text 2</h1> <h1>Commented Text 3</h1> -->
Bold Text
1
2
<p>This is <b> just bold </b> Text.</p>
<p>This is <strong> important </strong> Text.</p>
This is just bold Text.
This is important Text.
<b> : Use <b> tag just to bold the content when content is not that important.
<strong> : When Content is important (Strong Importance) and we want to bold we will use <strong> tag.
Italicize Text
1
2
<p>This is <i> Italic </i> Text.</p>
<p>This is <em> Emphasis </em> Text.</p>
This is Italic Text.
This is Emphasis Text.
<i> : Use <i> tag to Italicize the Text.
<em> : Use <em> tag to Italicize the Text.
Subscript & Superscript
1
2
3
4
5
<p>Water: H<sub>2</sub>O also known as "Water"</p>
<p>
<var>a<sup>2</sup></var> + <var>b<sup>2</sup></var> = <var>c<sup>2</sup></var>
</p>
Water: H2O also known as “Water”
a2 + b2 = c2
<sub>: Used to specifies inline text which should be displayed as subscript for solely typographical reasons
<sup>: Used to specifies inline text which is to be displayed as superscript for solely typographical reasons
Del, Small & Mark Tags
1
2
3
4
5
6
7
<p>This is <del>deleted</del> Text.</p>
<p>
<small>This is smaller content...</small>
</p>
<p>This is <mark>highlighted</mark> Text.</p>
This is deleted Text.
This is smaller content…
This is highlighted Text.
<del> : Used to represents a range of text that has been deleted from a document.
<small> : Used to represents smaller content, generally used for copyright etc.
<mark> : Used to mark or highlight the text in HTML Document.
Quote Tags
1
2
3
4
5
<q cite="Reference Link / Person"> Talk is cheap, show me your code! </q>
<blockquote cite="Reference Link / Person">
Coding like poetry should be short and concise!
</blockquote>
Talk is cheap, show me you code!
Coding like poetry should be short and concise!
<p> : Used to indicate the Text as Quote with cite.
<blockquote> : Used to indicate the Text as Quote with Block & cite.
Abbreviation Tag
1
<p><abbr>HTML</abbr> is cool markup language!</p>
<abbr> : Used to indicate part of text as abbreviation text to basically display the context of the text.
Link (Anchor) Tag
1
<a href="https://omjogani.github.com/blogs/">My Blogs</a>
<a> : Used to provide link in HTML Document. It has attribute called target which essentially define where to display linked URL. Earlier we were using frame and frameset where _parent and _top was useful but nowadays we make use of _self which is default and _blank to open link in new page.
We can also define the ID of the element in href to quickly navigate to that HTML Tag.
Image Tag
1
<img src="https://picsum.photos/200/300" alt="Random Image" />
<img> : Used to display image. It has alt attribute which is used to tell user context behind the user when Image is not loaded by any reason.
There are 2 additional attributes of image called height and width. Used to represent the height and width of image.
1
2
3
4
5
6
7
8
9
10
11
<picture>
<source
media="(min-width: 460px)"
srcset="https://picsum.photos/200/300?grayscale"
/>
<source
media="(min-width: 650px)"
srcset="https://picsum.photos/200/300?blur=2"
/>
<img src="https://picsum.photos/200/300" alt="Random Image" />
</picture>
<picture> : It contains zero or more <source> tags as children.
<source> : Used to define one or more media resources for pictures, audio, video etc. Say, if we want to load different images as per the device like for mobile device we want to load low quality image and for desktop we want to load high quality image. We can do that using source tag and media attribute.
Map Tag
1
2
3
4
5
6
7
8
9
10
11
12
13
<img src="./image.png" alt="Random Image" />
<map name="image-map">
<area
onclick="func()"
target=""
alt=""
title=""
href="...link..."
coords="961,537,131"
shape="circle"
/>
</map>
<map> : Used to define certain section of Image and on click of that image we can call different action like we can navigate to any link or run function of JavaScript.
Colors in HTML
Hexadecimal Color Format
RR - Red (00 - FF)
GG - Green (00 - FF)
BB - Blue (00 - FF)
1
<h1 style="color: #87CEEB;">Sky Blue Text</h1>
HSL Color Format
H - Hue (0 - 360)
S - Saturation (0% - 100%)
L - Lightness (0% - 100%)
1
<h1 style="color: hsl(197, 71%, 73%);">Sky Blue Text</h1>
RGB Color Format
R - Red (0 - 255)
G - Green (0 - 255)
B - Blue (0 - 255)
Hence 256 x 256 x 256 = 16777216 Colors possible.
1
<h1 style="color: rgb(137, 207, 235);">Sky Blue Text</h1>
Additionally we can add A as opacity in RGB then it would be RGBA.
1
<h1 style="color: rgba(137, 207, 235, .5);">Sky Blue Text with Half Opacity</h1>
Styling in HTML
Inline CSS
We provide css styling in HTML tag it self with style attribute.
1
<h1 style="color: #87CEEB;">Example of Inline CSS</h1>
It has highest priority of applying css. Weather you mentioned CSS color property in Internal or External CSS. It will get overridden for this h1 with Inline CSS.
Internal CSS
We provide styling of HTML tags in <style> ... </style> in <head> section.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
<head>
<title>Internal CSS</title>
<!-- Internal CSS -->
<style>
h1 {
color: #87ceeb;
}
</style>
</head>
<body>
<h1>Sky Blue Text</h1>
</body>
</html>
External CSS
When we have lots of styling code and we want to keep it separate in a CSS file. We can use External CSS.
We basically link external CSS file to our HTML code such that it can be applied to our HTML Tags.
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
<title>External CSS</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Sky Blue Text</h1>
</body>
</html>
1
2
3
4
/* style.css */
h1 {
color: #87ceeb;
}
If you have both Internal and External CSS in your HTML then order of placing the CSS will be matter. If last CSS have property defined in first CSS then it will get overridden by last CSS.