Course Content
HTML Introduction
0/1
HTML Editors
0/1
HTML Basic Tags
0/1
HTML Elements
0/1
HTML Attributes
0/1
HTML Headings
0/1
HTML Paragraph
0/1
HTML Text Formatting
0/1
HTML Meta Tags
0/1
HTML Quotations
0/1
HTML Comments
0/1
HTML Images
0/1
HTML Background
0/1
HTML Colors
0/1
HTML Lists
0/1
HTML Tables
0/1
HTML Forms
0/1
HTML Spell Check
0/1
HTML Media
0/1
HTML Marquees
0/1
HTML CSS
0/1
HTML Links
0/1
HTML Block & Inline
0/1
HTML Classes
0/1
HTML Id
0/1
HTML I frames
0/1
HTML Java script
0/1
HTML File paths
0/1
HTML Layout
0/1
HTML Responsive
0/1
HTML Computer Code
0/1
HTML Tutorial
About Lesson

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

Image not found

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

Students
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



 

error: Content is protected !!