* HTML
& Tags *
Comment Tag :- { <!--...--> }
Example :-
Definition and
Usage :- The comment tag is used to insert comments in
the source code. Comments are not displayed in the browsers.
You can use comments
to explain your code, which can help you when you edit the source code at a
later date. This is especially useful if you have a lot of code.
<!DOCTYPE> Declaration
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
|
|
Example :-
Definition
and Usage :- All HTML documents must start with
a <!DOCTYPE> declaration.
The declaration is not
an HTML tag. It is an "information" to the browser about what
document type to expect.
In HTML 5, the declaration is
simple:
Anchor Tag <a href =”..”>Dev</a>
Example :- Creat a link of
badamind.blogspot.com
<a href="https://www.badamind.blogspot.com">Visit Bada Mind.com!</a>
|
|
Definition
and Usage :- The <a> tag defines a
hyperlink, which is used to link from one page to another.
The
most important attribute of the <a> element is the href attribute, which indicates the link's destination.
Tips and Notes :-
Tip: If the <a> tag
has
no href attribute, it is only a placeholder
for a hyperlink.
Tip: A linked page is normally displayed in the current browser
window, unless you specify another target.
Abbreviation Tag Or <abbr> Tag
The <abbr title="World Health
Organization">WHO</abbr> was founded in
1948.
|
|
Example :- An abbreviation is
marked up as follows:
Definition and Usage :-
The <abbr> tag defines an abbreviation
or an acronym, like "HTML", "CSS", "Mr.",
"Dr.", "ASAP", "ATM".
Tip: Use the global title attribute to show the description
for the abbreviation/acronym when you mouse over the element.
<acronym> Tag
Error : Not Supported in HTML5.
The <acronym> tag was used in HTML 4
to define an acronym.
<address> Tag
Example :- Contact information for
iasdevnand@gmail.com:
<address>
Written by <a href="mailto:iasdevnand@gmail.com">Deva Bhai</a>.<br>
Visit us at:<br>
badamind.blogspot.com<br>
Box 564, Sarnath<br>
Varanasi
</address>
|
|
Definition and Usage :-
The <address> tag defines the contact
information for the author/owner of a document or an article.
The contact
information can be an email address, URL, physical address, phone number, social
media handle, etc.
The text in
the <address> element usually
renders in italic, and browsers will always add a line break before
and after the <address> element.
<applet> Tag
Not Supported in HTML5.
The <applet> tag was used in
HTML 4 to define an embedded applet (Plug-in).
Plug-ins :- Plug-ins are a computer programs that extend the standard functionality
of the browser.
Plug-ins have been used for many different purposes:
- Run
Java applets
- Run
ActiveX controls
- Display
Flash movies
- Display
maps
- Scan
for viruses
- Verify
a bank id
<area> Tag
Example :- An image map, with
clickable areas:
<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>
|
|
Definition and Usage :-
The <area> tag
defines an area inside an image map (an image map is an image with clickable
areas).
<area> elements
are always nested inside a <map> tag.
Note:- The usemap attribute in <img> is associated
with the <map> element's name attribute, and
creates a relationship between the image and the map.
<article> Tag
Example :- Three article with independent, self-Contained content :
<article>
<h2>Google
Chrome</h2>
<p>Google
Chrome is a web browser developed by Google, released in 2008. Chrome is
the world's most popular web browser today!</p>
</article>
<article>
<h2>Mozilla
Firefox</h2>
<p>Mozilla
Firefox is an open-source web browser developed by Mozilla. Firefox has
been the second most popular web browser since January, 2018.</p>
</article>
|
|
<article>
<h2>Microsoft Edge</h2>
<p>Microsoft
Edge is a web browser developed by Microsoft, released in 2015. Microsoft
Edge replaced Internet Explorer.</p>
</article>
|
|
Definition and Usage :- The <article> tag
specifies independent, self-contained content.
An article should make sense
on its own and it should be possible to distribute it independently from the
rest of the site.
Potential sources for
the <article> element:
- Forum post
- Blog post
- News story
Note: The <article> element does
not render as anything special in a browser. However, you can use CSS to style
the <article> element (see example below).
<aside> Tag
Example :- Display
some content aside from the content it is placed in:
<p>My
family and I visited The Epcot center this summer. The weather was nice,
and Epcot was amazing! I had a great summer together with my family!</p>
<aside>
<h4>Epcot
Center</h4>
<p>Epcot
is a theme park at Walt Disney World Resort featuring exciting attractions,
international pavilions, award-winning fireworks and seasonal special
events.</p>
</aside>
|
|
Definition and
Usage :- The <aside> tag
defines some content aside from the content it is placed in.
The
aside content should be indirectly related to the surrounding content.
Tip: The <aside> content is
often placed as a sidebar in a document.
Note: The <aside> element does
not render as anything special in a browser. However, you can use CSS to style
the <aside> element
(see example below).
<audio> Tag
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
|
|
Example :- Play a
sound file :
Definition and Usage :-
The <audio> tag is used to
embed sound content in a document, such as music or other audio streams.
The <audio> tag contains
one or more <source> tags with
different audio sources. The browser will choose the first source it supports.
The
text between the <audio> and </audio> tags will only
be displayed in browsers that do not support the <audio> element.
There
are three supported audio formats in HTML: MP3, WAV, and OGG.
Audio Format
and Browser Support
|
Browser
|
MP3
|
WAV
|
OGG
|
|
Edge / IE
|
YES
|
YES*
|
YES*
|
|
Chrome
|
YES
|
YES
|
YES
|
|
Firefox
|
YES
|
YES
|
YES
|
|
Safari
|
YES
|
YES
|
NO
|
|
Opera
|
YES
|
YES
|
YES
|
Tips and Notes :- Tip: For video
files, look at the <video> tag
<b> Tag
<p>This
is normal text - <b>and
this is bold text</b>.</p>
|
|
Example :- Make some text bold (without marking it as important):
Definition and
Usage :- The <b> tag specifies
bold text without any extra importance.
Tips and Notes :-
Note:- According
to the HTML5 specification, the <b> tag
should be used as a LAST resort when no other tag is more appropriate. The
specification states that headings should be denoted with the <h1> to <h6> tags,
emphasized text should be denoted with the <em> tag,
important text should be denoted with the <strong> tag,
and marked/highlighted text should be denoted with the <mark> tag.
Tip: You
can also use the following CSS to set bold text: "font-weight:
bold;".
<base> Tag
<head>
<base href="https://www.badamind.blogspot.com/" target="_blank">
</head>
<body>
<img src="images/stickman.gif" width="24" height="39" alt="Stickman">
<a href="tags/tag_base.asp">HTML base Tag</a>
</body>
|
|
Example :- Specify a default URL
and a default target for all links on a page:
Definition and Usage :-
The <base> tag specifies
the base URL and/or target for all relative URLs in a document.
The <base> tag must have
either an href or a target attribute present, or both.
There can only be one
single <base> element in a document, and
it must be inside the <head> element.
<basefont> Tag
Not
Supported in HTML5.
The <basefont> tag was used in
HTML 4 to specify a default text-color, font-size or font-family for all the
text in an HTML document.
<bdi> Tag
Example :- Isolate the usernames from the
surrounding text-direction settings:
|
|
<ul>
<li>User <bdi>hrefs</bdi>: 60 points</li>
<li>User <bdi>jdoe</bdi>: 80 points</li>
<li>User <bdi>إيان</bdi>:
90 points</li>
</ul>
|
|
Definition and
Usage :- BDI
stands for Bi-Directional Isolation.
The <bdi> tag isolates a
part of text that might be formatted in a different direction from other text
outside it.
This
element is useful when embedding user-generated content with an unknown text
direction.
<bdo> Tag
<bdo dir="rtl">
This text will go right-to-left.
</bdo>
|
|
Example :- Specify the text
direction:
Definition and Usage :- BDO stands for Bi-Directional Override.
The <bdo> tag is used to
override the current text direction.
<big> Tag
Not Supported in HTML5.
The <big> tag was used in
HTML 4 to define bigger text.
Example :-
<html>
<head>
<style>
p.ex1 {
font-size: 30px;
}
p.ex2 {
font-size: 50px;
}
</style>
|
|
Specify
different font-sizes for HTML elements (with CSS):
</head>
<body>
<p>This
is a normal paragraph.</p>
<p class="ex1">This is a bigger
paragraph.</p>
<p class="ex2">This is a much bigger
paragraph.</p>
</body>
</html>
|
|
<blockquote> Tag
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. The world's
leading conservation organization, WWF works in 100 countries and is
supported by 1.2 million members in the United States and close to 5
million globally.
</blockquote>
|
|
A section that is quoted from another source :-
Definition and Usage :-
The <blockquote> tag specifies a
section that is quoted from another source.
Browsers usually
indent <blockquote> elements (look at example
below to see how to remove the indentation).
Tips and Notes :- Use <q> for inline (short)
quotations.
<body> Tag
Example :-
<html>
<head>
<title>Title
of the document</title>
</head>
<body>
<h1>This
is a heading</h1>
<p>This
is a paragraph.</p>
</body>
</html>
|
|
A Simple Html Documents :-
Definition and
Usage :-
The <body> tag defines the
document's body.
The <body> element
contains all the contents of an HTML document, such as headings, paragraphs,
images, hyperlinks, tables, lists, etc.
Note: There
can only be one <body> element
in an HTML document.
<br> Tag
<p>To
force<br> line
breaks<br> in
a text,<br> use
the br<br> element.</p>
|
|
Example :- Insert
single line breaks in a text:
Definition and Usage :-
Ø The <br> tag inserts a
single line break.
Ø The <br> tag is useful
for writing addresses or poems.
Ø The <br> tag is an empty
tag which means that it has no end tag.
Tips and Notes :-
Note: Use the <br> tag to enter
line breaks, not to add space between paragraphs.
<button> Tag
<button type="button">Click Me!</button>
|
|
Example :- A clickable button is marked up
as follows:
Definition and
Usage :-
Ø The <button> tag defines a
clickable button.
Ø Inside a <button> element you can
put text (and tags like <i>, <b>, <strong>, <br>, <img>, etc.). That is not
possible with a button created with the <input> element!
Ø Tip: Always specify
the type attribute for a <button> element, to
tell browsers what type of button it is.
<canvas> Tag
<canvas id="myCanvas">
Your browser does not support the canvas tag.
</canvas>
<script>
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>
|
|
Example :- Draw a red rectangle
on the fly, and show it inside the <canvas> element:
Definition and
Usage :-
Ø The <canvas> tag is used to
draw graphics, on the fly, via scripting (usually JavaScript).
Ø The <canvas> tag is
transparent, and is only a container for graphics, you must use a script to
actually draw the graphics.
Ø Any
text inside the <canvas> element
will be displayed in browsers with JavaScript disabled and in browsers that do
not support <canvas>.
Tips and Notes :-
Ø Tip: Learn
more about the <canvas> element
in our HTML
Canvas Tutorial.
Ø Tip: For
a complete reference of all the properties and methods, please visit our HTML
Canvas Reference.
<caption> Tag
Example :- A table
with a caption :
|
|
<table>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
|
|
Definition and Usage :-
Ø The <caption> tag defines a
table caption.
Ø The <caption> tag must be
inserted immediately after the <table>
tag.
Ø Tip: By
default, a table caption will be center-aligned above a table. However, the CSS
properties text-align
and caption-side can be used to
align and place the caption.
<center> Tag
Not Supported in HTML5.
v The <center> tag
was used in HTML4 to center-align text.
Example :- Center-align
text (with CSS):
|
|
<html>
<head>
<style>
h1 {text-align: center;}
p {text-align: center;}
div {text-align: center;}
</style>
</head>
<body>
<h1>This
is a heading</h1>
<p>This
is a paragraph.</p>
<div>This
is a div.</div>
</body>
</html>
|
|
<cite> Tag
<p><cite>The
Scream</cite> by
Edward Munch. Painted in 1893.</p>
|
|
Example :- Define
the title of a work with the <cite> tag:
Definition and Usage :-
Ø The <cite> tag defines the
title of a creative work (e.g. a book, a poem, a song, a movie, a painting, a
sculpture, etc.).
v Note: A
person's name is not the title of a work.
ü The text in the <cite> element usually renders in italic.
<code> Tag
Example :- Define some text as computer code in a document:
<p>The
HTML <code>button</code> tag defines a
clickable button.</p>
<p>The
CSS <code>background-color</code> property defines
the background color of an element.</p>
|
|
Definition and Usage :-
Ø The <code> tag is used to
define a piece of computer code. The content inside is displayed in the
browser's default monospace font.
v Tip: This
tag is not deprecated. However, it is possible to achieve richer effect by using
CSS.
<col> Tag
Example :- Set the background
color of the three columns with the <colgroup> and <col> tags:
|
|
<table>
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My
first HTML</td>
<td>$53</td>
</tr>
</table>
|
|
Definition and Usage :-
Ø
The <col> tag
specifies column properties for each column within a <colgroup>element.
Ø The <col> tag is useful
for applying styles to entire columns, instead of repeating the styles for each
cell, for each row.
*BOOK PUBLICATION
* & MARKETING PRIVATE LIMITED ,* VARANASI – 221001
Author :- Er. Devnand Mishra
|
|
<colgroup> Tag
Example :- Set the background
color of the three columns with the <colgroup> and <col> tags:
|
|
<table>
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My
first HTML</td>
<td>$53</td>
</tr>
</table>
|
|
Definition and Usage :-
Ø The <colgroup> tag specifies a
group of one or more columns in a table for formatting.
Ø The <colgroup> tag is useful
for applying styles to entire columns, instead of repeating the styles for each
cell, for each row.
Note:
Ø The <colgroup> tag must be a
child of a <table> element, after any <caption> elements and before
any <thead>, <tbody>, <tfoot>, and <tr> elements.
Tip:
v To define different
properties to a column within a <colgroup>, use the <col> tag
within the <colgroup> tag.
