My Mix India

The New Way

HTML Education Tutorials

HTML-TAGS

Avatar photo

ByMMI_Team

Apr 21, 2020 #html, #html tutorials, #html tags, #basic tags
mmi-html-tutorials-html-Basic-Tags-web-development-tutorials

HTML Tags

What are HTML Tags?

The HTML tags are the basic building blocks of the document. The whole Web Page is divided into blocks and these blocks are sequentially placed to form a structured document page, To create a Website HTML tags are mandatory to use for the basic structure.

Contents hide
1 HTML Tags
1.1 What are HTML Tags?
1.1.1 Paired tags:
1.1.2 Unpaired tags:
1.1.3 List of HTML Tags
1.1.3.1 Anchor Tag
1.1.3.2 Addreass Tag
1.1.3.3 Abbr Tag
1.1.3.4 Area Tag
1.1.3.5 Article Tag
1.1.3.6 Aside Tag
1.1.3.7 Audio Tag
1.1.3.8 Bold Tag
1.1.3.9 Base Tag
1.1.3.10 Bdo Tag
1.1.3.11 Blockquote Tag
1.1.3.12 Br Tag
1.1.3.13 Button Tag
1.1.3.14 Canvas Tag
1.1.3.15 Draw a square
1.1.3.16 Draw a square and color it red with the script
1.1.3.17 Draw a circle and color it with the script
1.1.3.18 Draw a rectangle and color it with gradient
1.1.3.19 Draw text in canvas and color it with different font style
1.1.3.20 Draw image on the canvas
1.1.3.21 Image inside canvas
1.1.3.22 Caption Tag
1.1.3.23 Cite Tag
1.1.3.24 Code Tag
1.1.3.25 Col Tag
1.1.3.26 ColGroup Tag
1.1.3.27 Data Tag
1.1.3.28 DataList Tag
1.1.3.29 Dd Tag
1.1.3.30 Del Tag
1.1.3.31 Details Tag
1.1.3.32 Dfn Tag
1.1.3.33 Dialog Tag
1.1.3.34 Div Tag
1.1.3.35 Dl Tag
1.1.3.36 Dt Tag
1.1.3.37 Em Tag
1.1.3.38 Embed Tag
1.1.3.39 Fieldset Tag
1.1.3.40 Figcaption Tag
1.1.3.41 Figure Tag
1.1.3.42 Footer Tag
1.1.3.43 FormTag
1.1.3.44 Heading Tags From H1 To H6
1.1.3.45 Header Tags
1.1.3.46 Hr Tags
1.1.3.47 i Tags
1.1.3.48 iframe Tags
1.1.3.49 img Tags
1.1.3.50 Input Tags
1.1.3.51 Ins Tags
1.1.3.52 Kbd Tags
1.1.3.53 Label Tags
1.1.3.54 Legend Tags
1.1.3.55 Li Tags
1.1.3.56 Link Tags
1.1.3.57 Main Tags
1.1.3.58 Map Tags
1.1.3.59 Mark Tags
1.1.3.60 Meter Tags
1.1.3.61 Nav Tags
1.1.3.62 Noscript Tags
1.1.3.63 Object Tags
1.1.3.64 Ol Tags
1.1.3.65 Optgroup Tags
1.1.3.66 Option Tags
1.1.3.67 Output Tags
1.1.3.68 P Tags
1.1.3.69 Param Tags
1.1.3.70 Picture Tags
1.1.3.71 Pre Tags
1.1.3.72 Progress Tags
1.1.3.73 q Tags
1.1.3.74 rp Tags
1.1.3.75 rt Tags
1.1.3.76 ruby Tags
1.1.3.77 s Tags
1.1.3.78 samp Tags

Tags are the basic elements of the HTML which contain the content in between them. The Html tags are of two types: paired and unpaired.

Paired tags:

The paired tags are the starting and closing tags of an Html element. Elements like Html, head, body, div, style, script, button, table, etc.

<div>  starting tag 

....

</div>   closing tag

Unpaired tags:

Unlike paired Html tags, the unpaired tags only have a starting tag. Elements like br, hr, input, doctype, image, etc. are the unpaired tags.

starting tag 

<input type="text" name="mmi" >

<br/> or <br>

<hr>

Here is the list of HTML tags.

List of HTML Tags

Click on the table to scroll left and right.

TagsDescriptionExample
<a>
Anchor Tag
Anchor tag is used to link any external or internal source file with the current document.
Here the a is the tag element, href is the attribute, next_page.html is the link/external file source or the destination file, and GO TO NEXT PAGE is the Text/content which will be appeared on the document. Also, it is a paired tag because it has a starting and a closing tag.

Attributes
href = url,
target = _blank,
target = _parent,
target = _self,
target = _top,
name = name,
id,
class.
 <a href="next_page.html" >
Go To Next Page
</a>
<address>
Addreass Tag
The Address tag is a paired tag and it is used for describing the address information in the contact us page, footer section, about us area/page, or where the address is required. The tag also supports some attributes like id, class, and title.

Attributes
id,
class,
title		<address>
ABCD MyMixInda.com.

New Delhi

India
</address>
<abbr>
Abbr Tag
The Abbr tag is a paired tag and it is used for the abbreviation. The abbr title display the title text like a tooltip.

Attributes
title = title of abbreviation
HTML Tutorial on
<abbr title="abbr tag example on My Mix India">
My Mix India
</abbr>

<area>
Area Tag
The Area is a paired tag and it is used for defining an area inside a image-map. It is used with map tag as defining an area/hyper link area on the image which is the related to map.

Attributes
shape = rect,
shape = circle,
shape = poly,
coords = coordinate_points,
href=hyperlink/url,
alt=alternate text.

<img src="image_file.jpg" width="300" height="300" alt="MyMixIndia" title="mmi" usemap ="#mmi">

<map name="mmi" >

<area shape ="rect" coords ="0,0,115,90" href="" alt="croud"/>

<area shape ="poly" coords ="20,30,462,182,175,102,121,122,135,348,124,186" alt="water"/>

</map>
<article>
Article Tag


The article tag is a paired tag and it is used for writing an article with a heading as subject and text as paragraph. It is also use as a block for any content mostly article type feeds like blog post, newspaper, etc.

Arttributes
id,
class,
title.

<article>

<h1>Subject of the Article>/h1>

<p>
This is the Example of the Article Tag in Html - Tutorial in My Mix India
</p>

</article>
<aside>
Aside Tag
The aside tag is a paired tag and it is used for making the content adjustable with other content. It is also a block type tag element which define its content placed relatively with other or with surrounding content.

Attributes
title,
class,
id.

<aside>

<h1>Subject of the Article>/h1>

<p>
This is the Example of the Article Tag in Html - Tutorial in My Mix India
</p>


</aside>
<audio>
Audio Tag

The audio tag is a paired tag and it is media type tag in html. The audio tag is used to embed/use the sound file in the web page. It has an attribute controls and inner/nested source tag which include the source sound file. The controls attribute provide the play and pause button, download button, timer, and a seekbar.
It support mp3, wav, ogg.

Attributes
Controls = basic audio controls,
autoplay = autoplay,
preload = metadata,
preload = none,
preload = auto,
loop = loop - to start over,
muted = muted,
src = url/source file path.

<audio controls preload="auto">

<source src="sound_file.mp3" type="audio/mpeg">

</audio>
<b>
Bold Tag


The bold tag is a paired tag and it is used to make bold to any word, letter, sentence, paragraph, etc.

Arttributes
id,
class,
title.

This is
<b>
the bold text.
</b>
<base>
Base Tag


The base tag is a unpaired tag and it is used as alternate base url for all the relative url and links used in the document. Base url is used as a common url placed inside head tag and all the other links will used only main directory path.

Attributes
href = url,
target = _blank,
target = _parent,
target = _self,
target = _top.

<base href="https://mymixindia.com/" target="_blank" >
<bdo>
Bdo Tag


The bdo tag is a paired tag and it is used to change the direction or override the direction of the text. The bdo is stands for Bi-Directional Override. bdo is more useful for right-to-left writing scripts/languages.

Attributes
dir(direction) = rlt(right to left),
dir(direction) = ltr(left to right),
id,
class,
title.

<bdo dir="rtl" >
My Mix India Text will appear from right to left

</bdo>
<blockquote>
Blockquote Tag


The blockquote tag is a paired tag and it is used for quotation. The blockquote can be import from other external source.

Attributes
cite = url (quote source),
id,
class,
title.

<blockquote cite="www.your_quote_source.com" >
My Mix India - The New Way

</blockquote>
<br>
Br Tag


The br tag is a unpaired tag and it is used for break line. The break line tag breaks a single line from current position and provide a line space.

Attributes
id,
class,
title.

This is line one.
<br>
This is line two.
<button>
Button Tag


The button tag is a paired tag and it is used for creating a visual button in the document. The button tag is used for submitting a form of data and also used for making clickable objects or content like image-button, text, link, etc.

Attributes
name = text, (name of the button),
type = button,(default behavior)
type = reset,(reset the form data/values)
type = submit,(submit form data to server)
autofocus = autofocus, ( focus button on load )
autofocus = false,
disabled = disabled, ( disabled button )
id,
class,
title.

<button type="button" name="btn_name" class="btn btn-primary" >
I m a Button
</button>
<canvas>
Canvas Tag


The canvas tag is a paired tag and it is used for drawing or embedding the graphics and graphics elements in the web document. This tag is used with a script tag where the main code for graphical drawing is placed. Basically JavaScript is used for scripting the graphics and it will display inside canvas tag. Any Text inside the canvas will not display as the output in the browser.
You can draw circles, squares, rectangle, path, images also can be added and you can draw simple and animated text with methods.

Attributes
id,
class,
width,
height,
title.

Canvas Drawing Script

  • Set Canvas Id to draw canvas.
    id = "canvas_id",
    script {
    var canvas = document.getElementById("canvas_id");
    }


  • Draw Graphical Object
    script{
    var ctx = canvas.getContext("2d");
    }


  • Color on Object
    script{
    ctx.fillStyle = "#ff0"; defalt style-color = #000.
    }


  • Draw object like rectangle, circle, etc.
    script{
    ctx.fillRect(0, 0, 150, 75); method - fillRect is used for drawing rectangle.
    }



Draw a square


<canvas id="canvas_id" width="100" height="100"
style="border:2px solid #000000;">
</canvas>



Draw a square and color it red with the script


<canvas id="canvas_id" width="100" height="100"
style="border:2px solid #000;">

</canvas>

<script>
var obj = document.getElementById("canvas_id");
var ctx = obj.getContext("2d");
ctx.fillStyle = "#FF0";
ctx.fillRect(0,0,100,100);
</script>



Draw a circle and color it with the script


<canvas id="canvas_id" width="100" height="100"
style="border:1px solid #000; border-radius:50%">

</canvas>

<script>
var obj = document.getElementById("canvas_id");
var ctx = obj.getContext("2d");
ctx.beginPath();
ctx.arc(50,50,40,0,2*Math.PI);
ctx.stroke();
</script>


Draw a rectangle and color it with gradient


<canvas id="canvas_id" width="300" height="100"
style="border:1px solid #000;">

</canvas>

<script>

var obj = document.getElementById("canvas_id");
var ctx = obj.getContext("2d");

// Make Gradient
var grd = ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"#212526");
grd.addColorStop(1,"white");


//Add Gradient

ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);

</script>

for linear gradient use :
var grd = ctx.createLinearGradient(0, 0, 200, 0);


Draw text in canvas and color it with different font style


<canvas id="canvas_id_2" width="500" height="500"
style="border:1px solid #000;">

</canvas>

<script>

var obj2 = document.getElementById("canvas_id_2");

var ctx = obj2.getContext("2d");

ctx.font = "28px Comic Sans MS";

ctx.fillText("Namaste!",10,50);

ctx.strokeText("My Mix India", 10, 100);

ctx.fillStyle = "purple";

ctx.fillText("HTML-TUTORIALS",10,150);

</script>


Draw image on the canvas


<img id="shopkeeper" width="100" height="100"
src="image.jpg" alt="The ShopKeeper">

Image inside canvas


<canvas id="canvas_id_3" width="700" height="700"
style="border:2px solid #000;">

</canvas>

<script>

window.onload = function() {
var canvas = document.getElementById("canvas_id_3");

var ctx = canvas.getContext("2d");

var img = document.getElementById("shopkeeper");

ctx.drawImage(img, 0, 0);

};
</script>
<caption>
Caption Tag


The caption tag is a paired tag and it is used to describe a caption for a table. Any text or any information about the or related to it can be placed inside caption tags which will appear above the table.

Attributes
id,
class,
title.

<table>
<caption>Students Details</caption>
</table>
<cite>
Cite Tag


The cite tag is a paired tag and it is used to describe a text as a specific text. It can be a name of any item, product, brand, place, etc.

Attributes
id,
class,
title.

<p>
HTML tutorials are available on
<cite>My Mix India.Com</cite>
</p>
<code>
Code Tag


The cite tag is a paired tag and it is used to display the programming codes as an example in the web document. It can be used with <pre> tag for more clear code sample writing.

Attributes
id,
class,
title.
<code>
This is an Example of a C++ Code


#include <iostream.h>
<br>
using namespace std;
<br>
int main()
<br>
{
<br>
int a;
<br>
cout<<"Namaste To All Users\n";
<br>
cout<<"Enter the value of a\n";
<br>
cin>>a;
<br>
cout<<"\nThe value a is : "<<a;
<br>
return 0;
<br>
}


</code>


run this code in C++ IDE/Editor and remove the Html Tags.

<code>This is indside code tag with pre tag
<pre>
This is an Example of a C++ Code


#include <iostream.h>

using namespace std;

int main()

{

int a;

cout<<"Namaste To All Users\n";

cout<<"Enter the value of a\n";

cin>>a;

cout<<"\nThe value a is : "<<a;

return 0;

}


</pre>
</code>
run this code in C++ IDE/Editor and remove html tags.
<col>
Col Tag


The col tag is a unpaired tag and it is used as a supportive tag of <colgroup>. The col tag is used for specifying column's property of the column group. In side the table tag group of columns and rows represent the data and sometimes is easy to group and highlight some columns and rows where col tag helps in highlighting the col - groups.

Attributes
span = it define number of column,
id,
class,
title.

<style>
table, th, td {
border: 1px solid black;
}

<table>
<colgroup>
<col span="1" style="background-color:white;">
<col span="1" style="background-color:red">
<col span="1" style="background-color:pink">
<col span="1" style="background-color:green">
<col span="2" style="background-color:orange">

</colgroup>
<tr>
<th>Name</th>
<th>Class</th>
<th>Teacher</th>
<th>Status</th>
<th>Subject</th>
<th>Fees</th>
</tr>
<tr>
<td>Abcd</td>
<td>Online</td>
<td>Mr. XYZ</td>
<td>Active</td>
<td>Computer Science</td>
<td>500 rupees</td>
</tr>
<tr>
<td>Efgh</td>
<td>Online</td>
<td>Mr. CDF</td>
<td>Active</td>
<td>Maths</td>
<td>500 rupees</td>
</tr>
<tr>
<td>Ijkl</td>
<td>Online</td>
<td>Mr. OPQ</td>
<td>Active</td>
<td>Physics</td>
<td>500 rupees</td>
</tr>
</table>
<colgroup>
ColGroup Tag


The colgrouptag is a paired tag and it is used for grouping up the columns. The colgroup tag is used for specifying column groups in a table. It is supported by <col> tag to highlight the specific column group.

Attributes
span = it define number of column,
id,
class,
title.

<style>
table, th, td {
border: 1px solid black;
}

<table>
<colgroup>
<col span="1" style="background-color:white;">
<col span="1" style="background-color:red">
<col span="1" style="background-color:pink">
<col span="1" style="background-color:green">
<col span="2" style="background-color:orange">

</colgroup>
<tr>
<th>Name</th>
<th>Class</th>
<th>Teacher</th>
<th>Status</th>
<th>Subject</th>
<th>Fees</th>
</tr>
<tr>
<td>Abcd</td>
<td>Online</td>
<td>Mr. XYZ</td>
<td>Active</td>
<td>Computer Science</td>
<td>500 rupees</td>
</tr>
<tr>
<td>Efgh</td>
<td>Online</td>
<td>Mr. CDF</td>
<td>Active</td>
<td>Maths</td>
<td>500 rupees</td>
</tr>
<tr>
<td>Ijkl</td>
<td>Online</td>
<td>Mr. OPQ</td>
<td>Active</td>
<td>Physics</td>
<td>500 rupees</td>
</tr>
</table>
<data>
Data Tag


The data tag is a paired tag and it is used for make a link with the data placed between these tags and it also converts that data into machine readable format. It converts the data for data processors in machine readable format and for rendering in browser it converts that code in human readable format.

Attributes
value = machine readable format,
id,
class,
title.

<ol>
<li><data title="44567809" value="44567809">HTML</data></li>
<li><data title="44567810" value="44567810">CSS</data></li>
<li><data title="44567811" value="44567811">BOOTSTRAP</data></li>
<li><data title="44567812" value="44567812">PHP</data></li>
<li><data title="44567813" value="44567813">MY SQL</data></li>
</ol>
<datalist>
DataList Tag


The datalist tag is a paired tag and it is used for making a pre-define list of input data in input tag. Basically it creats an drop down of that data which is used as a list form and will be autofilled/autocomplete the input.

Attributes
id = is used for the name match with input list name,
class,
title.

<h3>Select Your Subject</h3>
<input list="Subjects" name="Subjects">
<datalist id="Subjects">
<option value="Computer Science">
<option value="Maths">
<option value="Science">
<option value="English">
<option value="Hindi">
</datalist>
<input type="submit" value="OK">
<dd>
Dd Tag


The dd tag is a paired tag and it is used with the description list tag. <dd> tag is used for putting the description or the main data of the description list.

Attributes
id,
class,
title.

<dl>
<dt>Title</dt>
<dd>Main Stetments</dd>
<dt>Title 2</dt>
<dd>Main Data</dd>
<dt>Title 3</dt>
<dd>Image</dd>
<dt>Title 4</dt>
<dd>Content</dd>
</dl>
<del>
Del Tag


The del tag is a paired tag and it is used for representing a deleted text. Mostly like ecommerce websites or other websites where the price of an item has been reduced or changed from a certain amount to a particular amount and display as a deleted text.

Attributes
id,
class,
title.

<p>Offer on the new shirt : <del>$50</del> $35 you are saving $15</p>
<details>
Details Tag


The details tag is a paired tag and it is used for specifying more details about any thing and user can view and hide that extra details. It provides additional information with a open and close button. This tag is used with summary tag and it is by default hide the content, which is visible when user click on the summary data.

Attributes
open = open,
id,
class,
title.

<details>
<summary>This is a little information, want to know more so click on this phara.</summary>
<p> Click to Open and Click to Close.</p>
<p> Hello Buddy is not a magic, Its Computer Science</p>
<p>Computer Languages are the most powerful components of the Digital Worls</p>
</details>
<dfn>
Dfn Tag


The dfn tag is a paired tag and it is used for specifying definition terms used in the document. Example: dfn is used in a definition of HTML, here html is the main term and next sentence after this will treat as its definition or explanation.

Attributes
id,
class,
title.

<p><dfn>Computer:</dfn> A computer is a machine that can be instructed to carry out sequences of arithmetic or logical operations automatically via computer programming</p>
<dialog>
Dialog Tag


The dialog tag is a paired tag and it is used to define a dialog box or a window like a modal box.

Attributes
open = open,
id,
class,
title.

<dialog open>This is an open dialog window</dialog>
<div>
Div Tag


The div tag is a paired tag. It is a common and most used tag in the html documents. It is used for making divisions and sections or blocks in a html document. It is a used as a container which contain the content and provide a separation among other html elements.

Attributes
id,
class,
title.

<div style="border:1px solid pink;background-color:#000;color:#fff;">
This Paragraph is the content of this div element.
Which is using inline styling.
</div>
<dl>
Dl Tag


The dl tag is a paired tag. It is used for making a description list. It is the main tag for defining the description list.

Attributes
id,
class,
title.

<dl>
<dt>Title</dt>
<dd>Main Stetments</dd>
<dt>Title 2</dt>
<dd>Main Data</dd>
<dt>Title 3</dt>
<dd>Image</dd>
<dt>Title 4</dt>
<dd>Content</dd>
</dl>
<dt>
Dt Tag


The dt tag is a paired tag. It is used for defining a name / term for the content.

Attributes
id,
class,
title.

<dl>
<dt>Title</dt>
<dd>Main Stetments</dd>
<dt>Title 2</dt>
<dd>Main Data</dd>
<dt>Title 3</dt>
<dd>Image</dd>
<dt>Title 4</dt>
<dd>Content</dd>
</dl>
<em>
Em Tag


The em tag is a paired tag. It is used for emphasized text. It makes the text italic in style.

Attributes
id,
class,
title.

<p> This is an example of the <em>Emphasized text</em>.</p>
<embed>
Embed Tag


The embed tag is a unpaired tag. It is used for embed the external resource file, media. It will make a box type container.

Attributes
src=file source,
width = for container width,
height = for container height,
id,
class,
title.


<embed type="application/pdf" src="path_to_pdf_file.pdf" width="400" height="400">



<embed type="video/webm" src="path_to_video_file.mp4" width="400" height="400">



<embed type="image/png" src="path_to_image_file.png" width="400" height="400">
<fieldset>
Fieldset Tag


The fieldset tag is a paired tag. It is used make a container like box around the form elements. It is used with another html tag "legend",

Attributes
disable = disable the related form elements,
form_id = to specify the fieldset of a form,
name = name of the fieldset,
id,
class,
title.


<form action="#">
<fieldset>
<legend>


<label for="username">User Name</label>

<input type="text" name="username" id="username">
</legend>
</fieldset>

</form>
<figcaption>
Figcaption Tag


The figcaption tag is a paired tag and it is used for caption on any figure or image. It is used with another html tag "figure",

Attributes
id,
class,
title.


<figure>
<img src="image1.jpg" alt="image 1" style="height:300px;width:300px;">
<figcaption>Figure 1 - Image 1, MMI image caption or a figure caption.</figcaption>
</figure>
<figure>
Figure Tag


The figure tag is a paired tag and it is used for making a self-contained data/figure/content in the web document. It is used with another html tag "figcaption" for optional caption.

Attributes
id,
class,
title.


<figure>
<p>This is web development with MyMixIndia.com(MMI). Educatinal Hub for beginners to geeks.</p>
<figcaption>MMI, Educational Hub, web development.</figcaption>
</figure>
<footer>
Footer Tag


The footer tag is a paired tag and it is used for making a footer section at the bottom of the web document. The whole web document or a web page is made up of sections and blocks of elements.
For simple and basic web pages we use some common html tag for making sections like header, body, article, sidebar, navigation bar, footer etc.

Attributes
id,
class,
title.

<footer>
<div class="container">
<div class="row">
<div class="col-md-4">
<h5>Company Info</h5>
<hr>
<p>This is a Free Web Development Online Institute.</p>
</div>
<div class="col-md-4">
<h5>Company Refrences</h5>
<hr>
<p>Refrences - 1</p>
<br>
<p>Refrences - 2</p>
<br>
<p>Refrences - 3</p>
<br>
<p>Refrences - 4</p>
<br>
<p>Refrences - 5</p>

</div>
<div class="col-md-4">
<h5>Company Contact</h5>
<hr>
<p>To Contact Us You can send an email on the given email address for contact and query</p>
</div>
</div>
</div>
</footer>
<form>
FormTag


The form tag is a paired tag. It is used to create a html web form. The form element is a common element for collecting user data. The form element is used with scripts to send data to the server and store in database. One can collect, store and retrieve data.
check out the form tag in more details..

Attributes
id,
class,
title.


<form action="#" method="get">
<input type="text" name="name" id="name">
<br>
<input type="submit" value="submit">
</form>
< H1> to < H6>
Heading Tags
From H1 To H6


The heading tags from h1 to h6 all are paired tags. These heading tags are used for providing heading to any section, paragraph, image, block, article etc.
These tags used as they are labeled from h1 to h6 means h1 has the max font size and h6 has the least font size in all heading tags.

Attributes
id,
class,
title.

<h1>Heading 1, this is heading h1</h1>
<p>H1 is the biggest heading among h2, h3, h4, h5, h6.</p>
<br>
<h2>Heading 2, this is heading h2</h2>
<p>H2 is the samller than heading h1 and bigger than other h3, h4, h5, h6.</p>
<br>
<h3>Heading 3, this is heading h3</h3>
<p>H3 is the samller than heading h2 and bigger than other h4, h5, h6.</p>
<br>
<h4>Heading 4, this is heading h4</h4>
<p>H4 is the samller than heading h3 and bigger than other h5, h6.</p>
<br>
<h5>Heading 5, this is heading h5</h5>
<p>H5 is the samller than heading h4 and bigger than other h6.</p>
<br>
<h6>Heading 6, this is heading h6</h6>
<p>H6 is the samllest heading among h1, h2, h3, h4, h5.</p>
<br>
< Header>
Header Tags


The header tag is a paired tag. It is used for making a header section, content heading or navigation bar. It defines a section in top of any block element like defining any heading for any text paragraph or top section for nav bar.

Attributes
id,
class,
title.

<header>
<nav>
<ol>
<li>Nav Link 1</li>
<li>Nav Link 2</li>
</ol>
</nav>
</header>
< Hr>
Hr Tags


The hr tag is a unpaired tag. It is used for making a horizontal line or a horizontal bar which separates or divide content.

Attributes
id,
class,
title.

<div class="container">

<div class="box" style="width: 150px;height:150px; border:1px solid red">
This is box 1.
</div>

<hr>

<div class="box" style="width: 150px;height:150px; border:1px solid blue">
This is box 2.
<hr>
<p>This is a paragraph.</p>
</div>
</div>
< i>
i Tags


The i tag is a paired tag. It is used for making any text italic in style like letter/word/sentence/paragraph in italic style.

Attributes
id,
class,
title.

One letter in itali"<i>c</i>".
One word in "<i>italic</i>".
"<i>This is whole sentence in italic.</i>"
< iframe>
iframe Tags


The iframe tag is a paired tag. It is used for making a inline frame on the web page. it is used to add any source/document/file which will be displayed inside that iframe.

Attributes
width = width of the iframe,
height = height of the iframe,
allow = it specify the feature policy for the iframe,
name = name of the iframe,
src = source url,
allowfullscreen = true/false for requestFullscreen() function/method for iframe,
allowpaymentrequest = true/false which allow iframe to invoke the Payment Request API,
srcdoc = (HTML_code) - write html code which show html content in iframe,
referrerpolicy = (no-referrer,
no-referrer-when-downgrade,
origin,
origin-when-cross-origin,
same-origin,
strict-origin,
strict-origin-when-cross-origin,
unsafe-url) - allow referrer information that will be sent when processing the iframe attributes,
sandbox = (allow-forms
allow-pointer-lock
allow-popups
allow-same-origin
allow-scripts
allow-top-navigation), it enable more restriction for iframe content,
id,
class,
title.

<iframe src="image/a.jpg" frameborder="0" width="300px" height="300px"></iframe>
< img>
img Tags


The img tag is a unpaired tag. It is used to insert an image in the web page.

Attributes
src = url - image url,
width = width of image,
height = height of image,
alt = alternate text for image,
id,
class,
title.

<img src="image/a.jpg" alt="this is an image" width="300px" height="300px">
< input>
Input Tags


The input tag is a unpaired tag. It is used for user data input or through which a user can enter details in a form. It is used with different attributes in a form.
check more about input tag attribute

Attributes
id,
class,
title.

<form action="#">
<label for="user name">Enter User Name : </label>
<input type="text" name="username" id="username">

</form>
< ins>
Ins Tags


The ins tag is a paired tag. It is used to display an inserted text. Any text which is define as an inserted text/sentence in a web document.

Attributes
cite = URL, url for inserted text,
datetime = (YYYY-MM-DDThh:mm:ssTZD)
specify the date and time for the inserted text,
id,
class,
title.

<p>Educational Hub on <ins cite="mymixindia.com" datetime="2020-07-16T10:20:00Z">MyMixIndia.com</ins></p>
< kbd>
Kbd Tags


The kbd tag is a paired tag. It is used to display any text as a keyboard input text like commands and short cuts key combinations.

Attributes
id,
class,
title.

This is <kbd>sample</kbd> text inside kbd.
To save any work on windows we have a keyboard short cut : <kbd>Ctrl + s</kbd>.
< label>
Label Tags


The label tag is a paired tag. It is used to display a label text in a web form like "Enter Your Name".
check more about label tag in a web form


Attributes
id,
class,
title.

<form action="#">
<label for="Name">Enter Your Name Here :</label>
<input type="text" name="name" id="name">
</form>
< legend>
Legend Tags


The legend tag is a paired tag. It is used to set caption for a fieldset element in a web form like "Enter Your Name".
check more about legend tag in a web form

Attributes
id,
class,
title.

<form action="#" method="post">

<fieldset>
<legend>Details : </legend>
<label for="name"> Name :</label>
<input type="text" id="name" name="name">
</fieldset>
</form>
< li>
Li Tags


The li tag is a paired tag. It is used to make a list element inside a list type. It is used with ol, ul list type.check more about list tag and list type

Attributes
id,
class,
title.

<ol>
<li>This is item One.</li>
<li>This is item Two</li>
</ol>
< link>
Link Tags


The link tag is a unpaired tag. It is used to link the external source files with the current document like style sheets, script files, etc.check more about file linking in html document.

Attributes
crossorigin = (use-credentials, anonymous) it is used to handle cross-origin requests,
href = URL, path/url of the source file,
rel = (alternate,
dns-prefetch,
author,
icon,
next,
help,
pingback,
preconnect,
license,
prefetch,
preload,
prerender,
prev,
search,
stylesheet) define a relationship between the link and current document file,
size = (any, height x width) for rel = "icon" link,
type = (media_type) define the media type of the link document,
media = (media_query) specify the device for link document,
id,
class,
title.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<h2>example of a link tag placed in head section.</h2>
</body>
</html>
< main>
Main Tags


The main tag is a paired tag. It is used to make any part of the document as a non-repeated content or a unique content like the things which is set to be non repeated example navigation bar, sidebar, any block content, copyright section, etc.

Attributes
id,
class,
title.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<main>
<h4>Copyright Section</h4>
<p>This is a copyright section under the main tag.</p>
</main>
< map>
Map Tags


The map tag is a paired tag. It is used to make a clickable image. This tag will represent an image as a map with a clickable area on that image. This tag need "img" and "area" tags.

Attributes
name = mapname of the map which have the same value as img "usemape" attribute,
id,
class,
title.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<img src="../image/a.jpg" width="300" height="300" alt="MMI" title="mmi" usemap ="#sk">
<map name="sk" >
<area shape ="rect" coords ="0,0,115,90" href="" alt="croud"/>
<area shape ="poly" coords ="10,10,162,82,175,100,181,102,175,148,122,146" alt="water"/>
</map>
< mark>
Mark Tags


The mark tag is a paired tag. It is used to mark any sentence or word, like to highlight any word.

Attributes
id,
class,
title.

<p>We can score <mark style="background-color: yellowgreen;">200+</mark> in a T-20 Match.</p>
< meter>
Meter Tags


The meter tag is a paired tag. It is used to make a graphical range meter with fractional values. It is like a unit measurement, range of any unit, etc.

Attributes
value = number (range value),
form = form_id (main form in which the meter tag is used),
high = number (for high range value),
low = number (for high range value),
max = number (max range value ),
min = number (min range value),
optimum = number (optimum range value),
id,
class,
title.

<label for="fe">Work has been done in Front-End:</label>
<meter id="fe" value="0.5">50%</meter><br>
<br>
<label for="be">Work has been done in Back-End:</label>
<meter id="be" value="0.8">80%</meter><br>
<br>
<label for="New Range">New Range:</label>
<meter id="New Range" value="0.4" high="0.9" low="0.5" optimum="0.7"></meter>
< nav>
Nav Tags


The nav tag is a paired tag. It is used to make navigation bar. It contain all navigation links of the nav bar.

Attributes
id,
class,
title.

<nav>
<a href="page.html">Page 1</a>
<a href="page2.html">Page 2</a>
</nav>
< noscript>
Noscript Tags


The noscript tag is a paired tag. It is used to notify the user if the browser not support java script, then this noscript tag will display on the browser.

Attributes
id,
class,
title.

<noscript>If Your browser does not support JavaScript! Then this noscript msg will be displayed.</noscript>
< object>
Object Tags


The object tag is a paired tag. It is used to contain some external resources like file, media, plug in application and it also like a container object

Attributes
data = URL,
form_id = form id,
height = height of the object,
width = width of the object,
name = name of the object,
type = media type of data in data attribute,
typemustmatch = true or false,
usemap = #mapname - map used with the object,
id,
class,
title.

<object data="example.html" width="400" height="400">

</object>
< ol>
Ol Tags


The ol tag is a paired tag. It is used make a ordered list. The ordered list is a list with the number or alphabet in list order. it is used with the other Html element list tag"li".

Attributes
reversed = reversed for list order,
start = starting number of the list,
type = (I,A,a,i,1)specify the list marker,
id,
class,
title.

<ol style="list-style-type: decimal-leading-zero;">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
< optgroup>
Optgroup Tags


The optgroup tag is a paired tag. it is used to group the select tag elements.

Attributes
disabled = disabled the option-group,
label = label for an option-group,
id,
class,
title.

<select name="BOOK" id="BOOK">
<optgroup label="HISTORY BOOK">
<option value="AHP1">Ancient History Part 1</option>
<option value="AHP2">Ancient History Part 2</option>
</optgroup>
<optgroup label="Geography">
<option value="World">World</option>
<option value="India">India</option>
</optgroup>
</select>
< option>
Option Tags


The option tag is a paired tag. it is used as the option in the select tag. Like list of options.

Attributes
disabled = disabled the option-group,
label = label for an option-group,
selected = selected used for the pre-selected options,
value = option value/data,
id,
class,
title.

<select name="BOOK" id="BOOK">
<optgroup label="HISTORY BOOK">
<option value="AHP1">Ancient History Part 1</option>
<option value="AHP2">Ancient History Part 2</option>
</optgroup>
<optgroup label="Geography">
<option value="World">World</option>
<option value="India">India</option>
</optgroup>
</select>
< output>
Output Tags


The output tag is a paired tag. It is used to result an output of any calculation of a script.

Attributes
for = element_id used in the calculation,
form = form_id of the output form,
name = name for the output element,
id,
class,
title.

<form oninput="val1.value=parseInt(num1.value)+parseInt(num2.value)">
<input type="range" id="num1" value="100">
+<input type="number" id="num2" value="75">
=<output name="val1" for="num1 num2"></output>
</form>
< p>
P Tags


The p tag is a paired tag. It is used for paragraph writing in the web page.

Attributes
id,
class,
title.

<p>This is an example of a paragraph tag.</p>
< param>
Param Tags


The param tag is a unpaired tag. It is used for setting the parameters for and object.

Attributes
name = name of the parameter,
value= value of the parameter,
id,
class,
title.

<object data="video.mp4">
<param name="autoplay" value="true">
</object>
< picture>
Picture Tags


The picture tag is a paired tag. It is used for more rich and flexible content of images. It helps in designing and responsiveness of the image as it scale up with change in width and height and down with change in width and height. It is use with source and img tags.

Attributes
source = image and media,
img = image,
id,
class,
title.

<picture>
<source media="(min-width:750px)" srcset="Pic1.jpg">
<source media="(min-width:450px)" srcset="Pic2.jpg">
<source media="(min-width:250px)" srcset="Pic3.jpg">
<img src="defaultPic.jpg" alt="Default" style="width:auto;">
</picture>
< pre>
Pre Tags


The pre tag is a paired tag. It is used for preformatted text with fix font size and space.

Attributes
id,
class,
title.

<pre>
This is an example of a "pre" tag
this text is displayed with the fixed
font size, and also it preserves
both spaces and
line breaks

Like space 1 and space 2
</pre>
< progress>
Progress Tags


The progress tag is a paired tag. It is used for representing the progress bar or any task in which is in progress.

Attributes
value = value/number - how much task is completed,
max = number - how much task work required in total,
id,
class,
title.

<label for="video">Downloading.....</label>
<progress id="video" value="99" max="100"> 99% </progress>
< q>
q Tags


The q tag is a paired tag. It is used for short quotation.

Attributes

id,
class,
title.

<p>This is a paragraph with quotation marks -
<q>This is a short quotation text inside a paragraph.</q>
</p>
< rp>
rp Tags


The rp tag is a paired tag. It is used with other ruby supporting tags rt and ruby. It is used for providing parentheses around a ruby annotation.

Attributes
id,
class,
title.

<ruby>攻殻<rp>（</rp><rt>こうかく</rt><rp>）</rp>機動隊<rp>（</rp><rt>きどうたい</rt><rp>）</rp></ruby>
< rt>
rt Tags


The rt tag is a paired tag. It is used with other ruby supporting tags rp and ruby. It is used defines an explanation or pronunciation of characters (for East Asian typography) in a ruby annotation.

Attributes
id,
class,
title.

<ruby>攻殻<rp>（</rp><rt>こうかく</rt><rp>）</rp>機動隊<rp>（</rp><rt>きどうたい</rt><rp>）</rp></ruby>
< ruby>
ruby Tags


The ruby tag is a paired tag. It is used with other ruby supporting tags rt and rp. It is used for East Asian typography and for different writing characters, and pronunciation. The ruby is used with Japanese writing characters, Chinese writing characters and Korean style writing character in a ruby annotation though which these characters can be displayed by the web browser.

Attributes
id,
class,
title.

<ruby>攻殻<rp>（</rp><rt>こうかく</rt><rp>）</rp>機動隊<rp>（</rp><rt>きどうたい</rt><rp>）</rp></ruby>
< s>
s Tags


The s tag is a paired tag. It is used for the incorrect text in a sentence Like - Any word or sentence which is not accurate
or changed.

Attributes
id,
class,
title.

<h4>Quick Purchase</h4>
<p>Chair 1 at rupees <s>2000</s> 1500 only</p>
<p>Click to Purchase</p>
< samp>
samp Tags


The samp tag is a paired tag. It is used to display the monospace font. It is basically used for the output like text as a result of a computer program.

Attributes
id,
class,
title.

<p>Press Enter To Continue:</p>

<p><samp>Press Enter</samp></p>
Series Navigation<< HTML-INTROHTML-Attributes >>
Avatar photo

By MMI_Team

Related Post

Education computer Tutorials Scripting Languages Blog Post HTML Quiz Html Quiz

HTML QUIZ – 10

Jan 12, 2024 MMI_Team
HTML Quiz Html Quiz Education computer Tutorials Scripting Languages Blog Post

HTML QUIZ – 9

Jan 11, 2024 MMI_Team
Education Tutorials Scripting Languages Blog Post HTML Quiz Html Quiz

HTML QUIZ – 8

Jan 10, 2024 MMI_Team

Leave a Reply

Your email address will not be published. Required fields are marked *

Latest for You

Education computer Tutorials Scripting Languages Blog Post HTML Quiz Html Quiz

HTML QUIZ – 10

HTML Quiz Html Quiz Education computer Tutorials Scripting Languages Blog Post

HTML QUIZ – 9

Education Tutorials Scripting Languages Blog Post HTML Quiz Html Quiz

HTML QUIZ – 8

News Blog Post Trending India

Best Tourist Places in India in 2024