HTML <!DOCTYPE> Tag
In this tutorial, we will learn about doctype tag in HTML with the help of examples.
<!DOCTYPE> Tag
<!DOCTYPE> declaration is used to determine the type of document and the version of HTML used in the document.
It is always used before the <html> tag in the HTML document.
<!DOCTYPE> declaration is not compulsory to write.
Syntax
<!DOCTYPE html>
Note : <!DOCTYPE> declaration is not case-sensitive.
Example
<!DOCtype html>
<!dOcTyPe html>
<!docTYPE html>
<!doctype html>
All of the above <!DOCTYPE> declarations are correct.
HTML <a> Tag
In this tutorial, we will learn about anchor tag in HTML with the help of examples.
<a> Tag
Anchor tag <a> is used to create a hyperlink with another document or somewhere within the current document.
Syntax
<a href = "link">...Clickable Link..</a>
Note : We have to provide the complete link to the website or the ID of the element in that document in place of link in href attribute.
Example
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink</title>
</head>
<body>
<a href = "www.abc.com" target = "_blank">An HTML Link</a>
</body>
</html>
Output
An HTML Link
Specific Attribute
Attribute | Value | Description |
---|---|---|
charset | character_encoding | Defines the character encoding of the linked document |
coords | For rectangular shape coords are left, top, right, bottom For circular shape coords are centerx, centery, radius For polygon shape coords are x1, y1, x2, y2, x3, y3……………xn, yn |
Specifies the coordinates to define image map i.e. clickable region for hyperlink |
download | filename | This downloads the target when user clicks on the hyperlink |
href | URL | Specifies the URL of a page or the name of the anchor we want to hyperlink the document |
hreflang | language_code | Language code of the destination URL |
media | media_query | Specifies the type of media linked to the document |
name | section name | Marks an area of the page that a link jumps to |
rel | alternate author bookmark help license next nofollow noreferrer prefetch prev search tag |
Describes the relation between the current document and the destination URL |
rev | alternate designates stylesheet start next prev contents index glossary copyright chapter section subsection appendix help bookmark |
Specifies the relation between the target URL and the current document |
shape | rect rectangle circ circle poly polygon |
Specifies the shape of the image map |
target | _blank _parent _self _top |
Specifies where to open the target URL _blank = the target URL will open in a new window. _self = the target URL will open in the same frame as it was clicked. _parent = the target URL will open in the parent frameset. _top = the target URL will open in the full body of the window |
type | mime_type | Specifies the MIME (Multipurpose Internet Mail Extensions) type of the target URL |
HTML <abbr> Tag
In this tutorial, we will learn about abbreviation tag in HTML with the help of examples.
<abbr> Tag
Abbreviation tag <abbr> is used for defining abbreviation or an acronym, like etc. , pvt. , Mr. , Dr. , ATM , HTML , CSS .
The text inside the <abbr> tag represented with the dotted line under it.
Syntax
<abbr title = "acronym">......</abbr>
Note : We have to provide the acronym or full form of the text in place of acronym in title attribute.
Example
<!DOCTYPE html>
<html>
<head>
<title>Abbreviation Tag</title>
</head>
<body>
<p><abbr title = "Hyper Text Markup Language">HTML</abbr> is a markup language.</p>
</body>
</html>
Output
HTML is a markup language.
In the above example, when you hover over the text, you will see the text provided in the title attribute.
HTML <address> Tag
In this tutorial, we will learn about address tag in HTML with the help of examples.
<address> Tag
Abbreviation tag <address> is used to define the contact information in a webpage.
This contact information belongs to anyone and can be an email address, URL, physical address, phone number, etc.
The contact information usually renders in italic and the browser will always add a line break before and after the <address> tag.
Syntax
<address>......</address>
Example
<!DOCTYPE html>
<html>
<head>
<title>Address Tag</title>
</head>
<body>
<address>Cupertino, California, United States</address>
</body>
</html>
Output
Cupertino, California, United States
In the above example, you can see that the text inside the <address> tag render in italic.
Global Attribute
Address Tag support all the global attributes of HTML.
Event Attribute
Address Tag support all the event attributes of HTML.
HTML <area> Tag
In this tutorial, we will learn about area tag in HTML with the help of examples.
<area> Tag
Area tag <area> defines an clickable area in a image map.
Area tag are always nested inside a <map> tag.
Syntax
<area shape = "" coords = "" alt = ""/>
Example
<!DOCTYPE html>
<html>
<head>
<title>Area Tag</title>
</head>
<body>
<img src = "boat.png" width = "500" height = "500" alt = "Image not found" usemap = "#tutorial">
<map name = "tutorial">
<area shape = "poly" coords = "70,0,112,28,99,70,50,70,39,25" href = "www.algbly.com" target = "_blank" />
<area shape = "rect" coords = "500,580,125,120" href = "www.algbly.com" target = "_blank" />
</map>
</body>
</html>
Output
In the above example, polygon shaped <area> tag is present in top-left corner of the image and rectangle shaped <area> tag is present in area where boats are present in image.
Specific Attribute
Attribute | Value | Description |
---|---|---|
alt | text | Specifies alterate text for the area |
coords | For rectangular shape coords are left, top, right, bottom For circular shape coords are centerx, centery, radius For polygon shape coords are x1, y1, x2, y2, x3, y3……………xn, yn |
Specifies the coordinates to define image map i.e. clickable region for hyperlink |
download | filename | This downloads the target when user clicks on the hyperlink |
href | URL | Specifies the URL of a page or the name of the anchor we want to hyperlink the document |
hreflang | language_code | Language code of the destination URL |
media | media_query | Specifies the type of media linked to the document |
nohref | true/false | Excludes an area for the image map |
rel | alternate author bookmark help license next nofollow noreferrer prefetch prev search tag |
Describes the relation between the current document and the destination URL |
rev | alternate designates stylesheet start next prev contents index glossary copyright chapter section subsection appendix help bookmark |
Specifies the relation between the target URL and the current document |
shape | rect rectangle circ circle poly polygon |
Specifies the shape of the image map |
target | _blank _parent _self _top |
Specifies where to open the target URL _blank = the target URL will open in a new window. _self = the target URL will open in the same frame as it was clicked. _parent = the target URL will open in the parent frameset. _top = the target URL will open in the full body of the window |
type | mime_type | Specifies the MIME (Multipurpose Internet Mail Extensions) type of the target URL |
Global Attribute
Area Tag support all the global attributes of HTML.
Event Attribute
Area Tag support all the event attributes of HTML.
HTML <article> Tag
In this tutorial, we will learn about article tag in HTML with the help of examples.
<article> Tag
Article tag <article> specifies self-contained content in a site, document, page or application.
Article tag is used in a blog post, forum post, newspaper article etc.
Syntax
<article>....</article>
Example
<!DOCTYPE html>
<html>
<head>
<title>Article Tag</title>
</head>
<body>
<article>
<h2>PHP</h2>
<p>PHP is PHP Hypertext Preprocessor.</p>
</article>
</body>
</html>
Output
PHP
PHP is PHP Hypertext Preprocessor.
Global Attribute
Article Tag support all the global attributes of HTML.
Event Attribute
Article Tag support all the event attributes of HTML.
HTML <aside> Tag
In this tutorial, we will learn about aside tag in HTML with the help of examples.
<aside> Tag
Aside tag <aside> specifies a section of a page aside from the related section.
The content inside aside tag should be indirectly related to the surrounding content.
This tag mainly used to place a sidebar in a document.
Note : It doesn’t render anything special in a browser i.e. we have to use CSS to style the <aside> tag.
Syntax
<aside>....</aside>
Example
<!DOCTYPE html>
<html>
<head>
<title>Aside Tag</title>
</head>
<body>
<aside>
<h2>PHP</h2>
<p>PHP is PHP Hypertext Preprocessor.</p>
</aside>
</body>
</html>
Output
HTML <audio> Tag
In this tutorial, we will learn about audio tag in HTML with the help of examples.
<audio> Tag
Audio tag <audio> is used to play an audio file on the web page.
The <source> tag allows us to specify alternative audio files.
Control attribute is used to adds audio controls, like play, pause, volume.
The text inside <audio> and </audio> element will display when the browser doesn’t support the <audio> element.
Common audio formats are MP3, MP4 (It is video format but also be used for audio).
Syntax
<audio>....</audio>
Example
<!DOCTYPE html>
<html>
<head>
<title>Audio Tag</title>
</head>
<body>
<audio controls>
<source src = "audio.mp3" type = "audio/mp3">
<source src = "audio.ogg" type = "audio/ogg">
Your browser does not support the audio format.
</audio>
</body>
</html>
Output
Specific Attribute
Attribute | Value | Description |
---|---|---|
autoplay | autoplay | Automatically starts playing audio as it is ready to play |
controls | controls | Used to display basic audio controls |
loop | loop | Specifies that the audio will start over again, every time it is finished |
muted | muted | Specifies that the audio output should be muted |
preload | auto metadata none |
Specifies the audio should be loaded when the page will load or not |
src | URL | Specifies the URL or source of the audio file |
HTML <b> Tag
In this tutorial, we will learn about bold tag in HTML with the help of examples.
<b> Tag
Bold tag <b> is used to make the text look bolder.
Note : We can also use CSS font-weight property to make the text look bolder.
Syntax
<b>....</b>
Example
<!DOCTYPE html>
<html>
<head>
<title>Bold Tag</title>
</head>
<body>
<b>It's harder to read code than to write it.</b>
</body>
</html>
Output
It's harder to read code than to write it.
HTML <base> Tag
In this tutorial, we will learn about base tag in HTML with the help of examples.
<base> Tag
Base tag <base> is used to specifies the base URL for all relative URL in a document.
A base URL is the consistent part of your web address i.e. every URL follows the base URL.
We can use only one base tag in an HTML document inside the head tag only.
<base> tag is declared inside <head> tag.
Note : The base tag must have an href attribute present in it.
Syntax
<base>....</base>
Example
<!DOCTYPE html>
<html>
<head>
<title>Base Tag</title>
<base href = "www.google.com" target = "_blank">
</head>
<body>
<a>It's harder to read code than to write it.</a>
</body>
</html>
Output
It's harder to read code than to write it.
Specific Attribute
Attribute | Value | Description |
---|---|---|
href | URL | Specifies the URL of a page or the name of the anchor we want to hyperlink the document |
target | _blank _parent _self _top |
Specifies where to open the target URL _blank = the target URL will open in a new window. _self = the target URL will open in the same frame as it was clicked. _parent = the target URL will open in the parent frameset. _top = the target URL will open in the full body of the window |
HTML <bdi> Tag
In this tutorial, we will learn about bdi tag in HTML with the help of examples.
<bdi> Tag
Bdi tag <bdi> is used to embed text with a different direction from another text.
BDI stands for Bi-Directional Isolation.
Syntax
<bdi>....</bdi>
Example
<!DOCTYPE html>
<html>
<head>
<title>Bdi Tag</title>
</head>
<body>
<bdi>It's harder to read code than to write it.</bdi>
</body>
</html>
Output
It's harder to read code than to write it.
HTML <bdo> Tag
In this tutorial, we will learn about bdo tag in HTML with the help of examples.
<bdo> Tag
Bdo tag <bdo> tag is used to override the current text direction.
BDO stands for Bi-Directional Override.
Note : We must have to provide the dir attribute for <bdo> tag.
Syntax
<bdo>....</bdo>
Example
<!DOCTYPE html>
<html>
<head>
<title>Bdo Tag</title>
</head>
<body>
<bdo dir = "rtl">It's harder to read code than to write it.</bdo>
<bdo dir = "ltr">It's harder to read code than to write it.</bdo>
</body>
</html>
Output
It's harder to read code than to write it.
It's harder to read code than to write it.
Specific Attribute
Attribute | Value | Description |
---|---|---|
dir | ltr rtl |
Specifies the text direction of the text inside the <bdo> tag |
HTML <blockquote> Tag
In this tutorial, we will learn about blockquote tag in HTML with the help of examples.
<blockquote> Tag
Blockquote tag <blockquote> tag is used to specify long Quotations or quotes from another source.
Note :Browser usually indent <blockquote> tag content.
Syntax
<blockquote>....</blockquote>
Example
<!DOCTYPE html>
<html>
<head>
<title>Bdo Tag</title>
</head>
<body>
<h2>Whale</h2>
<blockquote>Whales are a widely distributed and diverse group of fully aquatic placental
marine mammals. Whales are fully aquatic, open ocean creatures, and feed,
mate, give birth, suckle and raise their young at sea. Whales range in size from
the 2.6 metres (8.5 ft) and 135 kilograms (298 lb) dwarf sperm whale to the
29.9 metres (98 ft) and 190 metric tons (210 short tons) blue whale, which is
the largest known creature that has ever lived.</blockquote>
</body>
</html>
Output
Whale
Whales are a widely distributed and diverse group of fully aquatic placental
marine mammals. Whales are fully aquatic, open ocean creatures, and feed,
mate, give birth, suckle and raise their young at sea. Whales range in size from
the 2.6 metres (8.5 ft) and 135 kilograms (298 lb) dwarf sperm whale to the
29.9 metres (98 ft) and 190 metric tons (210 short tons) blue whale, which is
the largest known creature that has ever lived.
Specific Attribute
Attribute | Value | Description |
---|---|---|
cite | URL | URL of the source from where quote is taken |
Note : We must have to provide the cite attribute for <blockquote> tag if the quote is taken from other source.
HTML <body> Tag
In this tutorial, we will learn about body tag in HTML with the help of examples.
<body> Tag
Body tag <body> tag is used to define the body of the HTML document i.e. all the visible content such as headings, images, paragraphs, hyperlinks, table, list, etc.
Note : We can use only one <body> tag in an HTML document.
Syntax
<body>....</body>
Example
<!DOCTYPE html>
<html>
<head>
<title>Body Tag</title>
</head>
<body>
<p>Welcome to algbly.com</p>
</body>
</html>
Output
Welcome to algbly.com
Specific Attribute
Attribute | Value | Description |
---|---|---|
alink | rgb(x,x,x) #xxxxxx colorname |
Deprecated – It specifies the color of the active links in the HTML document |
background | URL | Deprecated – It specifies the background image file path |
bgcolor | rgb(x,x,x) #xxxxxx colorname |
Deprecated – It specifies the background color |
link | rgb(x,x,x) #xxxxxx colorname |
Deprecated – It specifies the color of all the links in the HTML document |
text | rgb(x,x,x) #xxxxxx colorname |
Deprecated – It specifies the color of the text in the HTML document |
vlink | rgb(x,x,x) #xxxxxx colorname |
Deprecated – It specifies the color of the visited links in the HTML document |
Note : We must have to provide the cite attribute for <blockquote> tag if the quote is taken from other source.
HTML <br> Tag
In this tutorial, we will learn about break tag in HTML with the help of examples.
<br> Tag
Break tag <br> tag is used to insert a single line break in the text.
Note : Break tag is a empty/singular/void tag i.e. it has no end tag.
Syntax
<br>
Example
<!DOCTYPE html>
<html>
<head>
<title>Br Tag</title>
</head>
<body>
<h2>Whale</h2>
<blockquote>Whales are a widely distributed and diverse group of fully aquatic placental<br>
marine mammals. Whales are fully aquatic, open ocean creatures, and feed,<br>
mate, give birth, suckle and raise their young at sea. Whales range in size from<br>
the 2.6 metres (8.5 ft) and 135 kilograms (298 lb) dwarf sperm whale to the<br>
29.9 metres (98 ft) and 190 metric tons (210 short tons) blue whale, which is<br>
the largest known creature that has ever lived.</blockquote>
</body>
</html>
Output
Whale
Whales are a widely distributed and diverse group of fully aquatic placental
marine mammals. Whales are fully aquatic, open ocean creatures, and feed,
mate, give birth, suckle and raise their young at sea. Whales range in size from
the 2.6 metres (8.5 ft) and 135 kilograms (298 lb) dwarf sperm whale to the
29.9 metres (98 ft) and 190 metric tons (210 short tons) blue whale, which is
the largest known creature that has ever lived.
HTML <button> Tag
In this tutorial, we will learn about button tag in HTML with the help of examples.
<button> Tag
Button tag <button> tag is used for creating a button within HTML form.
We must have to specify the type attribute for the <button> tag to know the type of button used.
Note : We can also use <input> tag to create similar buttons. but we are not able to use tags like <i>, <br>, <strong>, <img> etc. inside button created by using <input> tag.
Syntax
<button>.....</button>
Example
<!DOCTYPE html>
<html>
<head>
<title>Button Tag</title>
</head>
<body>
<button value = "Click me" type = "button">Click me</button>
</body>
</html>
Output
Specific Attribute
Attribute | Value | Description |
---|---|---|
autofocus | autofocus | Specifies that the button should have input focus when the page loads |
disable | disable | Specifies that the button is disable |
form | form_id | specifies the form to which the button belongs |
formaction | URL | Specifies the link where the form submits on the clicking of the button |
formenctype | application multipart/ data text/plain | Specifies that the button should have input focus when the page loads |
formmethod | get post |
Specifies how to send form data to the server |
formnovalidate | formnovalidate | Specifies that the form data should not be validated |
formtarget | _blank _parent _self _top |
Specifies where to open the target URL _blank = the target URL will open in a new window. _self = the target URL will open in the same frame as it was clicked. _parent = the target URL will open in the parent frameset. _top = the target URL will open in the full body of the window |
name | name | Specifies the name of the button |
type | type | Specifies the type of the button |
value | text | Specifies button initial value |
HTML <canvas> Tag
In this tutorial, we will learn about canvas tag in HTML with the help of examples.
<canvas> Tag
Canvas tag <canvas> is used for creating graphics, animations, etc using scripting (usually Javascript).
<canvas> tag is only a transparent container for graphics, you must use a script to draw the graphics and CSS for styling the <canvas> tag.
Note : <canvas> tag is mainly used for game development.
Syntax
<canvas>.....</canvas>
Example
<!DOCTYPE html>
<html>
<head>
<title>Canvas Tag</title>
</head>
<body>
<canvas id = "Canvas">
Your browser does not support the canvas tag.
</canvas>
<script>
var canvas = document.getElementById("Canvas");
var ctx = canvas.getContext("2D");
ctx.fillStyle = "#0099ff";
</script>
</body>
</html>
Output
Specific Attribute
Attribute | Value | Description |
---|---|---|
height | pixels | Specifies the height of the canvas |
width | pixels | Specifies the width of the canvas |
Note : The default value for the attribute height is 150 and for the width is 300.
HTML <caption> Tag
In this tutorial, we will learn about caption tag in HTML with the help of examples.
<caption> Tag
Caption tag <caption> is used for creating a caption for a table.
It must be inserted immmedately after the <table> tag.
Note : <caption> tag can be only used once in a table i.e. one caption per table.
Syntax
<caption>.....</caption>
Example
<!DOCTYPE html>
<html>
<head>
<title>caption Tag</title>
</head>
<body>
<table>
<caption>Students</caption>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
<tr>
<td>Sunny</td>
<td>Chaudhary</td>
<td>20</td>
</tr>
<tr>
<td>Anu</td>
<td>Chaudhary</td>
<td>19</td>
</tr>
</table>
</body>
</html>
Output
First Name | Last Name | Age |
---|---|---|
Sunny | Chaudhary | 20 |
Anu | Chaudhary | 19 |
HTML <cite> Tag
In this tutorial, we will learn about cite tag in HTML with the help of examples.
<cite> Tag
Cite tag <cite> is used to define the title of creative work like a poem, a song, a movie, a painting, etc.
The text inside the <cite> tag usually renders in italic.
Note : The title of work cannot be the name of a person.
Syntax
<cite>.....</cite>
Example
<!DOCTYPE html>
<html>
<head>
<title>cite Tag</title>
</head>
<body>
<p>
<cite>Gulliver's Travel </cite>
by Jonathan Swift
</p>
</body>
</html>
Output
Gulliver’s Travel by Jonathan Swift