The <summary> tag used to add to a visible heading of the <details> tag. The heading is clickable to view/hide the details.
The <summary> tag is new in HTML5 and it has opening and closing ends.The <summary> tag should be the first child tag for the <details> tag or we can say that <summary> tag should put as first tag inside <details> tag,So we assume that <summary> tag and <details> tag are family tag.
<details> tag is the wrapper for all the content we want to show or hide, and <summary> contains summary and Heading of the section.
The open attribute is by default and there is no closed attribute for <details> tag.
Generally when we want to make a interactive widget that provides a way of hide and show of our content,it require a long javascript coding but by using HTML5 <details> and <summary> tags we can create this toggle feature with just a few lines of HTML and without any JavaScript.So these HTML5 tags make webpage attractive and provide a way to save space in webpage.
Inside <details>, we can put any type of content taht we want.
You can understand use of <details> and <summary> tags by a simple example:-
e.g.
<!DOCTYPE html>
<html>
<head>
<title>Deatails tag< and <Summary>/title>
</head>
<body>
<details>
<summary>Show/Hide</sumary>
<p>Indianwebschool is india's leading web development learning portal .</p>
</details>
<details>
<summary>How To Start Blogging Learn by Blogger Video(please click here)</summary>
<p>Blogger Getting Started Guide by Google </p>
<iframe width="560" height="315" src="//www.youtube.com/embed/NXx4zbid45Q"></iframe>
</details>
<details>
<summary>indianwebschool</summary>
<p> Designed by Ndal Gurjar. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the company indianwebschool.</p>
</details>
</body>
</html>
Result:-
Show/Hide
Indianwebschool is india's leading web development learning portal .
How To Start Blogging Learn by Blogger Video(please click here)
Blogger Getting Started Guide
indianwebschool
Designed by Ndal Gurjar. All Rights Reserved.
All content and graphics on this web site are the property of the company indianwebschool.
The <sup> tag is used to define superscript text in an HTML webpage while <sub> tag is used to define subscript text.
A subscript or superscript may a number, figure, fable(symbol), or indicator that is smaller than the stated parentage text (normal text).Subscripts appear under the baseline, even if superscripts are above.
Subscripts and superscripts are generally used in mathematical expressions and in languages.just like we want to add 3 power of 2 then we use supscript. <sub> tag for defining subscript text.
Superscript text can be used for footnotes, like Indianwebschool is india's leading web development learning portal[1].You can see it's example at wikipedia where it is used to show reference no.
You can understand use of <sup> and <sub> tags by a this example:-
e.g.
<!DOCTYPE html>
<html>
<head>
<title>sup tag< and <sub>/title>
</head>
<body>
<p>
This is superscripted<sup>text</sup>
</p>
<p>
This is subscripted<sub>text</sub>
</p>
</body>
</html>
The <table> tag is used to add an HTML table in webpage.
The <table> tag is used in conjunction with the <tbody>,<thead> and <tfoot> tags in the table tag to specify each part of a table (header, body, footer).
The <table> tag have one or more <tr> and <td> tags inside <tbody>,<thead> and <tfoot> tags.It is an HTML5 tag.It has also opening and closing tags.It has boder attribute to define border of table.Two attribiutes cellpadding and cellspacing which can use to adjust the white space in your table cell. Cellspacing defines the width of the border, while cellpadding specifies the distance between cell borders and the content within. (valid in blogger.)
Optional Attributes for <table> tag :- align|width|summary|sortable|rules|frame|cellpadding|border|bgcolor
These attributes are not supported in HTML5 but valid in older version.
You can understand use of <table> tag by a simple example:-
e.g.1
<!DOCTYPE html>
<html>
<head>
<title>use of Table tag</title>
</head>
<body>
Cell1-cell6 includes in table body,Header1-header6 includes table header and footer1 is include in table footer.In table footer we use colspan that is use to merge columns.
e.g.2
<!DOCTYPE html>
<html>
<head>
<title>use of Table tag</title>
</head>
<body>
The <tbody> tag is used to add a body to an HTML table.
The <tbody> element is used in conjunction with the <thead> and <tfoot> tags in the table tag to specify each part of a table (header, body, footer).The <tbody> tag have one or more<tr> and <td> tags inside.It is an HTML5 tag.It has also opening and closing tags.
Optional Attributes for <tbody> tag :- align|valign|char|charoff
These attributes are not supported in HTML5.
align=left| center|right|justify|char ---- (horizontal alignment of
cells in group)
char=Character---- (alignment character for cells)
charoff=Length ----(alignment character offset)
valign= top|middle|bottom|baseline---- (vertical alignment of cells
in group)
You can understand use of <tbody> tag by a simple example:-
Cell1-cell6 includes in table body,Header1-header6 includes table header and footer1 is include in table footer.In table footer we use colspan that is use to merge columns.
Conclusion:--
So the <tbody> tag is used to add a body to an HTML table.tr and td tags are child tag for tbody tag.It is important section for designing a table in a webpage.
The <td> tag is used to define a standard cell in an HTML table in a webpage.The text in <td> tags are regular and left-aligned by default.<td> tag is an HTML5 tag.It has also opening and closing ends.
Optional Attributes of <td> tag :- align|Axis|charoff|valign|bgcolor|char
Thesee attributes are not valid in HTML5 but in earlier version these are valid.
You can understand use of <td> tag by a simple example:-
There are two attribiutes cellpadding and cellspacing which can use to adjust the white space in your table cell. Cellspacing defines the width of the border, while cellpadding specifies the distance between cell borders and the content within.
The <tr> tag is used to define a row in an HTML table in a webpage.The <tr> tag contains one or more <th> or <td> tags.These three grouping tags: headers (thead tag), bodies (tbody tag) and footers (tfoot tag) contain rows.It is an HTML5 tag.It has opening and closing tags.
Optional Attributes of <tr> tag :- ALIGN/HALIGN|VALIGN|BGCOLOR
Thesee attributes are not valid in HTML5 but in earlier version these are valid.
ALIGN/HALIGN: horizontal alignment of cell contents
VALIGN: vertical alignment of cell contents
BGCOLOR: background color.
You can understand use of <tr> tag by a simple example:-
There are two attribiutes cellpadding and cellspacing which can use to adjust the white space in your table cell. Cellspacing defines the width of the border, while cellpadding specifies the distance between cell borders and the content within.
So the <tr> tag is used to define a row in an HTML table in a webpage and <th> and <td> tags are used inside <tr> tag.You can understand it by above example.
The <textarea> tag is used to insert a multi-heritage(multiline) text input in the document or form in a webpage.Differently from the HTML input tag, as soon as the "type" attribute set to "text", this control can espouse to on peak of one descent of text as input. This feature, makes of this tag a best assuage on recieving comments or long messages.It is an HTML5 tag.It has opening and closing tags.
The <textarea> tag is destined to mass recommendation provided by the devotee. Once filled in, the content of this run can be submitted by the enthusiast and later recognized by a meting out agent that will handle the data collected.
The content of <textarea> tag represents the manage's initial value.
A text place can maintain an alter number of characters, and the text renders in a unadulterated-width font.
Optional Attributes for <textarea> tag :- autofocus|cols|disabled|formmaxlength | name | placeholder | readonly | required | rows | wrap
You can understand use of <textarea> tag by a simple example:-
If you want to merge header then use colspan attribute.Just like we use in above example.
e.g.2
The size of a text area can be set by the cols and rows attributes or you can use css 'height' and 'width' properties.Attribute row is used to define the number of viewable rows.
while cols is used to define the number of viewable columns.
<!DOCTYPE html>
<html>
<head>
<title>use of textarea tag</title>
</head>
<body>
<textarea rows="5" cols="60">
www.indianwebschool.com is india's leading web programming portal.
</textarea>
</body>
</html>
Result:-
<textarea> Tag Attributes
Attribute
Value
Description
autofocus
autofocus
Specifies that a text place should automatically acquire focus once the page loads
cols
number
Specifies the visible width of a text place
disabled
disabled
Specifies that a text place should be disabled
form
form_id
Specifies one or more forms the text place belongs to
maxlength
number
Specifies the maximum number of characters allowed in the text place
name
text
Specifies a name for a text place
placeholder
text
Specifies a quick hint that describes the declared value of a text place
readonly
readonly
Specifies that a text place should be read-only
required
required
Specifies that a text place is required/must be filled out
rows
number
Specifies the visible number of lines in a text place
wrap
hard
soft
Specifies how the text in a text place is to be wrapped following submitted in a form
Conclusion:--
So the <textarea> tag to add a multi-heritage(multiline) text input in the document in a webpage.The <textarea> tag is destined to mass come taking place in the middle of the keep for advice provided by the adherent. Once filled in, the content of this run can be submitted by the adherent and fused ascribed by a dispensation agent that will handle the data collected.
The <tfoot> tag is used to define a group footer rows in an HTML table.
The <tfoot> element is used in conjunction with the <tbody> and <thead> tags in the table tag to specify each part of a table (header, body, footer).The <tfoot> tag have one or more
and
tags inside.It is an HTML5 tag.It has also opening and closing tags.
Optional Attributes :- align|valign|char|charoff
These attributes are not supported in HTML5,but in od versions of HTML theseare valid.
align=left| center|right|justify|char ---- (horizontal alignment of
cells in group)
char=Character---- (alignment character for cells)
charoff=Length ----(alignment character offset)
valign= top|middle|bottom|baseline---- (vertical alignment of cells
in group)
You can understand use of <tfoot> tag by a simple example:-
So the <tfoot> tag is used to define a group footer rows in an HTML table and used in conjunction with the <tbody> and <thead> tags in the table tag to specify each part of a table.
The <th> tag is used to define a header cell within an HTML table in webpage.
The <th> element is used in conjunction with the <tr> and <td> tags in the table tag to specify row and columns in the table.It is an HTML5 tag.It has opening and closing tags.
There are two types of cell In an HTML table:-
1.Header cell-that contains information created with the <th> tag and the text in this section is by default bold and centered.
2.Standard cells- contains data created with the <td> tag and the text in this tag is by default regular and left-aligned.
We use colspan and rowspan attributes to merge columns and rows respectively.
So the <th> tag is used to define a header cell within an HTML table in webpage.By using colspan and rowspan we can merge columns and rows respectively.
The <thead> tag is used to define a group header rows in an HTML table.
The <thead> element is used in conjunction with the <tbody> and <tfoot> tags in the table tag to specify each part of a table (header, body, footer).The <thead> tag have one or more
and
tags inside.It is an HTML5 tag.It has also opening and closing tags.
Optional Attributes :- align|valign|char|charoff
These attributes are not supported in HTML5.
align=left| center|right|justify|char ---- (horizontal alignment of
cells in group)
char=Character---- (alignment character for cells)
charoff=Length ----(alignment character offset)
valign= top|middle|bottom|baseline---- (vertical alignment of cells
in group)
You can understand use of <thead> tag by a simple example:-
So the <thead> tag is used to define a group header rows in an HTML table and used in conjunction with the <tbody> and <tfoot> tags in the table tag to specify each part of a table.
The <var> tag is stand for variable tag.
The Variable tag represents a variable in a mathematical expression or a programming context,although there are actually no restrictions where you can use this HTML tag. It has the opening and closing ends and text between these tags display as a variable text.It's display result is similar to <i> (italic) tag.
You can understand use of <var> tag by a simple example:-
So the <var> tag is used to define a varible in a mathematical expression or a programming context in webpage.
<var> tag का उपयोग गणितीय expressions or कंप्यूटर प्रोग्रामिंग में variables (परिवर्तनांक) को दिखाने के लिए किया जाता है जिसे आप ऊप्पर दिए गए उदाहरण से समझ सकते है
The <title> tag is used to define the title of webpage.This tag is necessary in all webpages.It is useful tag that defines a tittle in browser toolbar,provides a tittle for the page when you bookmark that page,display a title for the page in search-engine results.
You can not add more than one <title> tag in an HTML document.It defines inside tags,before starting body tag.It also have opening and closing tags.It is an HTML5 tag.
You can understand use of <title> tag by a simple example:-
e.g.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>
The title tag is added inside <head> tag.
</p>
</body>
</html>
Result:-
The title tag in browser toolbar look like it.
Conclusion:--
So the <title> tag is used to define title of webpage.
<title> tag का उपयोग वेबपेज का title देने के लिए किया जाता है इस tag के कारण ही ब्राउज़र के टूलबार में आपके वेबपेज का टाइटल दिखाई देता है
The <ul> tag is used to define unorder list.This tag is used when we want to create ordered bulleted lists in a webpage document.To Create a unordered list We Use the <ul> tag together with the <li> tag.This tag is generally use to create dropdown menu,navigations bars etc.This tag is used to give special design to a webpage When we use it with css.
We put <li> tag inside the <ul> tag and inside different <li> tags we put different list items.When we want to create a ordered list we have to use <ol> tag that stand for ordered list.
In <ul> tag we can define inline css by using <style> tag.
You can understand use of <ul> tag by a simple example:-
The <u> tag reffered to underline tag.This tag is used when we want to underline specific text in a webpage document.Underline tag is used to Set proper titles apart from regular text,Clarify an unfamiliar word.Any text that we want to underline put inside the opening and closing <u> tag.It is also include in HTML5 tags.
You can understand use of <br> tag by a simple example:-
e.g.
<!DOCTYPE html>
<html>
<body>
<p>
The capital of India is <u>Delhi</u>.
</p>
</body>
</html>
Result:-
The capital of India isDelhi.
Conclusion:--
So the <u> tag use to underline a text in a webpage paragraph.
<u> tag का उपयोग निर्धारित पैराग्राफ में निर्धारित टेक्स्ट को अंडरलाइन करने के लिए किया जाता है इस tag का उपयोग हम तब करते है जब हम पैराग्राफ में किसी टेक्स्ट को विशेष रूप से दिखाना चाहते है
The <ins> and <del> tags are used to show edits in the webpage documents.So respectively <del> tag
used to define text that has been deleted and <ins> tag deine insert text in the document of a webpage .
Browsers will normally strike a parentage(line) through deleted text and underline inserted text.Both of tags
required end tag(</del>,</ins>).The text that is edited(either deleted or inserted) put inside opening
and closing tags.
You can understand use of <ins> and <del> tag by a simple example:-
e.g.
<!DOCTYPE html>
<html>
<body>
<p>
The capital of India is <del>Kolkata</del> <ins>Delhi</ins>.
</p>
</body>
</html>
Result:-
The capital of India is Kolkata Delhi.
The capiatl of india earlier was kolkata and now it is delhi so we use del and ins tag to define these edits in
webpage documents.
The following attributes can be set for both the <ins> and <del> tags:-
<ins> and <del> Tag Attributes
<ins cite="why.htm">specify the inserted reason</ins>
<ins datetime="2015-04-04T20:53:03Z">specify the time at inserted</ins>
Attribute
Value
Discription
cite
URL
Specifies a URL to a document that explains the reason of edited text
(inserted/deleted)
datetime
YYYY-MM-DDThh:mm:ssTZD
Specifies the date and time when the text was edited.
Conclusion:--
So the <ins> and <del> tags are used to define edited text in a webpage document.
<ins> and <del> tag का उपयोग webpage के document में पुराने और नये changes को show करने के लिए किया जाता है जैसे की इंडिया की राजधानी पहले
कोलकाता थी और अब दिल्ली हो गयी है और आप चाहते है की इंडिया की पुरानी और नयी दोनों राजधानियाँ webpage में show हो तो आप <ins>और <del> का उपयोग कर सकते है
The <video> tag specifies video, such as a movie scrape or new video
streams in an HTML page.Currently supported video formats for the
<video> tag:MP4|WebM|Ogg.
<video> tag is new in HTML5 tags.
You can understand use of <video> tag by a simple example:-
Adding video using video tag:-
e.g.
<!DOCTYPE html>
<html>
<body>
<video width="320" height="180" controls>
<source src="http://....movie.mp4" type="video/mp4" >
<source src="http://....movie.ogg" type="video/ogg" >
Your browser does not support the video tag.
</videogt;
</body>
</html>
Result:-
Any text between the <video> and </video> tags will be displayed
in browsers that do not support the <video> element.
The following attributes can be set for the <video> tag:-
<video> Tag Attributes
Attribute
Value
Description
autoplay
autoplay
video will start playing as soon as webpage load
controls
controls
Specifies that video controls(play/pause button etc.)
height
pixels
height of the video player
width
pixels
width of the video player
loop
loop
video will start over again, every time it is
finished
muted
muted
video will be muted
src
URL
Specifies the URL of the video
Conclusion:--
So the <video> tag use to insert a video in a webpage.It is inserted in
webpage by video src.
<video> tag का उपयोग webpage में video को Add करने के लिए किया जाता है जिस video को वेबपेज में
add करना होता है उसे src attribute में define किया जाता है
The <img> tag use to define(show) an image in an HTML page.The two
general attributes required for <img> tag are *src*,*alt*.Image is
inserted in a web page by source link(address of server upload img).
In HTML the <img> tag has no end tag while in XHTML the <img> tag
must be properly closed.Dimensions(height&width) are also set by height and
width attributes.Image should be in proper dimension before uploading at
server it reduces the web page loading time.Image provides a marvellous look
to a webpage.
You can understand use of <img> tag by a simple example:-
Unclickable Image:-
When you want to add an unclickable image you can useimg tag.
The following attributes can be set for the <img> tag:-
<img> Tag Attributes
Attribute
Value
Description
align
top
Specifies the alignment for the
image.
bottom
middle
left
right
alt
text
Specifies an alternate text for an image
src
URL
Specifies the URL of an image
vspace hspace
pixels
Specifies the whitespace on top and bottom of an
image
pixels
Specifies the whitespace on left and right side of an
image
width height
pixels
Specifies the width of an image
pixels
Specifies the height of an image
Conclusion:--
So the <img> tag use to insert a image in a webpage.It is inserted in
webpage by image url.
<img> tag का उपयोग webpage में पिक्चर को Add करने के लिए किया जाता है यह webpage में url code
के द्वारा add किया जाता है जिस पिक्चर को वेबपेज में add करना होता है उसे src attribute में define किया जाता है
alt attribute का उपयोग पिक्टुरेस से related text को define करने के लिए किया जाता है
The <col> tag uses to define column properties for each column within a
<colgroup> element.So we can say that the <col> tag is useful for
applying styles to entire columns, instead of repeating the styles for each
cell, for each row.
The declaration order affects the each column respectively(just like if you
define col for first/second column it show its affect only for first/second
column.).This order can be affected by the use of the "span" attribute.
This attribute can be used in this tag to affect more than one column with
the same declaration.
col tag defines in the colgrp tag in table tag.
The most common attributes available for this tag are purely presentational
(align, valign, width, char and charoff).We may also use css properties for
same work.
The <col> tag has no end tag In HTML,while has properly closed tag in
XHTML.
You can understand use of <col> tag by a simple example:-
e.g.
<!DOCTYPE html>
<html>
<body>
<p>This example shows a colgroup that has four columns of different
widths:</p>
<table border="1">
<colgroup span="3">
<col width="50" background: red;></col>
<col width="100" background: green;></col>
<col width="150" background: yellow;></col>
<col width="50" background: pink;></col>
</colgroup>
<tr>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
<td>col 4</td>
</tr>
</table>
</body>
</html>
Result:-
col 1
col 2
col 3
col 4
The following attributes can be set for the <col> tag:-
<br> Tag Attributes
<br clear="none|left|right|all">
Attribute
Value
Description
align
left
Data is aligned to the left.It is default value.
center
Data is aligned to center
right
Data is aligned to right
justify
Data is justified.
char
The text is aligned to a specific character
charoff
number
number of characters the content will be aligned from
the character specified by the char attribute.Not supported in HTML5.
span
number
number of columns a <col> element should
span
valign
top
Data is aligned to the top.
middle
Data is vertically centered.
bottom
aligned to the bottom.
baseline
All the cells in a row with this alignment should
have their first text line on a common baseline.
width
%
pixels
width of a <col> element
Conclusion:--
So the <col> tag use for specifying column properties for each column
within a colgroup.
You would normally only use this tag if the values for each column is
different. Otherwise, you can specify the properties as part of the colgroup
tag.
<col> tag का उपयोग colgrp में प्रत्येक column की अलग-अलग properties परिभाषित करने में किया
जाता है आपको इस tag को तब use करना चाहिए जब प्रत्येक कॉलम के लिए आपको भिन्न-भिन्न properties
use करनी हो अन्यथा सभी columns को समान properties देने के लिए colgrp tag में properties define
करनी चाहिए.
The <br> tag is also known a line breaking tag.
The HTML <br> tag produces a single line break.It means the text/image
use the <br> tag will be moved to the next line.
It is useful for writing a poem or an address or giving gap.
we should not use <br> tag to increase the more gap between lines of
text; use the CSS margin property or the <p> tag.
The <br> tag is an empty tag ,it has no end tag.We can make a line
break without changing paragraph by using br tag,that is also important use
of line break tag.
The line break tag is the <br> tag in HTML and <br/> in XHTML.
You can understand use of <br> tag by a simple example:-
e.g.
<!DOCTYPE html>
<html>
<body>
<p>
This is first line.<br/>above it we use br tag.
</p>
</body>
</html>
Result:-
This is first line. above it we use br tag.
The following attributes can be set for the <br> tag:-
<br> Tag Attributes
<br clear="none|left|right|all">
Attribute
Value
Discription
clear
none
It is default value which causes the new line,start
below the current line.
left
cause the new line to start below images or objects
floated on the left.
right
cause the new line to start below images or objects
floated on the right.
all
cause the new line to start below images and objects
floated on the left and right.
Example:-
<!DOCTYPE>
<html>
<head>
<title>HTML Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-
8">
</head>
<body>
<p>
This is before the br tag.
</p>
<p>This is before the br tag.<br>This is after
the br tag.<br clear="center">
This is after the br tag using the clear attribute.</p>
</body>
</html>
Result:-
This is before the br tag.
This is before the br tag. This is after
the br tag.
This is after the br tag using the clear attribute.
Use of :-
Defines single space beween text.Generally when we want to give multiple or
large space we use many .Just like we want to make space equal to
ten characters we use it ten times.
e.g.
<p>Hindi is National Language of india.
</p>
Result:-
Hindi is National Language of india.
Conclusion:--
So the <br> tag use to insert a single line break in paragrapgh or
text.
<br> tag का उपयोग पैराग्राफ को चेंज किये बिना ही नई लाइन से text आरम्भ करने के लिए करते है
<br> tag को line breakin tag के नाम से भी जाना जाता है इसका उपयोग addres ,poem ,और gap
देने के लिए किया जाता है जब हमें ज्यादा gap देना हो तो margin का उपयोग करना चाहिए इसके use और उपयोग करने का तरीका आप
ऊपर दिए गए example से समझ सकते है
The <big> tag tag defines bigger text.We use it when we want to show
specific text bigger than normal text in the paragraph.
The <big> tag is not supported in HTML5.
YOu can understand how to use <big> tag by following
example:-
e.g.
<!DOCTYPE html>
<html>
<body>
<p>This is normal text.</p>
<p><big>This is bigger text.</big></p>
</body>
</html>
Result:-
This is normal text.
This is bigger text.
Conclusion:--
So the <big> tag is used to make the text bigger than normal font
size.It is generally use when you want to show specified text bigger than
other
<big> tag का उपयोग टेक्स्ट या अक्षरो को बड़ा करने के लिए किया जाता है जब हम किसी पैराग्राफ में किसी specific
टेक्स्ट को विशेष रूप से दिखाना चाहते है तो हम उस टेक्स्ट के साथ<big> tag जोड़ देते है
जिससे वो टेक्स्ट दूसरे टेक्स्ट की तुलना में बड़ा दिखाई देता है <big> tag HTML5 में support नहीं करता है
The <bdo> tag use to to override the text direction.It reffered to Bi-
Directional Override. This tag is useful when we want to display right-
to-left written text
(such as Hebrew, Arabic that are written from right to left) within left-to-
right text (such as English) or vice versa.
YOu can understand how to use <bdo> tag by following
example:-
e.g.
<!DOCTYPE html>
<html>
<body>
<p>This text will go left-to-right.</p>
<p><bdo dir="rtl">This text will go right-to-
left.</bdo></p>
</body>
</html>
Result:-
This text will go left-to-right.[because there is direction is in auto
mode that is decided by browser according to language.]
This text will go right-to-left.
The following attributes can be set for the <bdo> tag:-
Attribute
Value
Discription
dir
ltr
override left-to-right direction
rtl
override right-to-left-direction
dir attribute is used to set the direction to ltr (left-to-right) or rtl
(right-to-left).
values for dir tag:-
ltr: Indicates left-to-right direction. rtl: Indicates right-to-left direction. auto: The browser decides which direction based on the element's
content.
Conclusion:--
So the <bdo> tag is used to set the opposite direction within specified
text direction.Just like when you are writing arebic(that is written from
right to left) and you want to add english(that is written from leftt to
rightt) within arebic text you can use bdo tag as we explain above to write
english.
<bdo> tag का उपयोग परिभाषित टेक्स्ट डायरेक्शन(जो डायरेक्शन आप use कर रहे है ये right to left या left
to right हो सकती है ) के टेक्स्ट के बीच में opposite डायरेक्शन के टेक्स्ट को लिखने के लिए किया जाता है जैसे की जब आप
अरेबिक भाषा लिख रहे है जो की right से
left दिशा में लिखी जाती है और इसके बीच में इंग्लिश टेक्स्ट लिखना चाहते है जो की left से right डायरेक्शन में लिखी जाती है तो आप
<bdo> tag का use कर सकते है
The <basefont> tag use to specify the default font-size,text-color or font-family for all the text in Webpage.
That tag is not supported in html5.
The <basefont> tag also define in header of webpage.
You can understand it by a simple example:-
e.g.
<head>
<basefont color="green" size="7">
</head>
<body>
<h1>My name is Ndal.</h1>
<p>My name is Ndal.</p>
</body>
Result:-
My name is Ndal.
My name is Ndal.
The following attributes can be set for the <basefont> tag:-
The <base> tag use to specify the base URL adress for all relative URLs in Webpage.
Once you set the base url in the header then all subsequent relative links will use that URL as a starting point.
The tag has no end tag in HTML but in XHTML it must be closed properly.
The location of the above image is http://www.indianwebschool.com/images/logo.jpg.
In the above example the main url once specified in <base> tag and then the end of url have to add.
in the above example the main url is 'http://www.indianwebschool.com/' and end part of urls are different that is in case of anchor tag is 'contact.html' while
in the image url end part is 'images/logo.jpg'.
**The relative links just like ("contact.html") will relate to url specified in <base> tag inside header.So there is no need to specified fully url at every
where.
The following attributes can be set for the </base> tag:-
The HTML <b> tag is used for specifying bold text.It is also a HTML5
tag.
You can understand it by a simple example:-
e.g.:-
<b>This text is BOLD!</b>
Result:-
This text is entirely BOLD!
Do not confuse the <b> element with the <mark>,
<em>, or <strong> elements. The <strong>
element use to represents text of certain importance,
<em> puts some emphasis on the text and the <mark>
element represents text of certain relevance. .The <b> element
doesn't convey such special semantic information; use it only when no others
fit.
Do not use <b> tag for titles and headings. For this purpose, use the
<h1> to <h6> tags.
The HTML <audio> tag is used to embed sound content in webpage. You can play and pause the media by setting src attribute to identify the media source and including a controls attribute.
In the HTML5 it does not require to specify audio formats to browsers. But most commonly used audio formats are ogg, mp3 and wav.
You can use <source> tag to specify media address(url). An audio element allows multiple source elements (different source address) and browser will use the
first recognized format.
You can understand it by a simple example:-
e.g.
<!DOCTYPE HTML>
<html>
<body>
<audio controls autoplay>
<source src="/touch/audio.ogg" type="audio/ogg" />
<source src="/touch/audio.wav" type="audio/wav" />
Your browser does not support the <audio> element.
</audio>
</body>
</html>
Result:-
Tips:-
**
There are some limitations on the types of files that can be used. Currently any browser that is based on Webkit, such as Chrome and Safari, supports the use of
regular .mp3 files. Others, such as Firefox, only support the .ogg format.**
*The controls attribute adds audio controls, like play, pause, and volume.
*Audio controls autoplay use to play the audio file automatically.
*The playback volume of any audio portions, in the range 0.0 (silent) to 1.0 (loudest).
*Multiple elements can link to different audio files. The browser will use the first recognized format.
*Any text inside the between will be displayed in browsers that do not support the <audio> tag.
The following attributes can be set for the </audio> tag:-
Attribute
Description
autoplay
Specifies that the audio will start playing as soon as it is ready
controls
Specifies that audio controls should be displayed (such as a play/pause button etc)
loop
Specifies that the audio will start over again, every time it is finished
muted
Specifies that the audio output should be muted
src
Specifies the URL of the audio file
Control attribute shows that audio controls should be displayed.
<audio control="Play|Pause|Seeking|Volume">
The audio will start over again,until you pause it.
<audio loop="loop">
Some time you want to play audio but don't want to see audio player that time you can use <hidden> attribute .
You can understand by above example:-
e.g.
<!DOCTYPE HTML>
<html>
<body>
<audio controls autoplay hidden="true">
<source src="/audio.ogg" type="audio/ogg" />
<source src="/audio.wav" type="audio/wav" />
Your browser does not support the <audio> element.
</audio>
</body>
</html>
Result:-
Here audio player is hidden but audio is playing.
You can use also div tag to hide audio player
<div style="display:none">
<embed src="sound.mp3"/>
</div>
Sometimes you wants make your website animated and for this you want to add sound with links(when cursor go over link sound play).
You can understand by above example:-
e.g.
<p style="padding-left:294px;"><a href="http://www.watchtvlive.in/p/home.html"onmouseover="mouseoversound.playclip()">HOME</a>
| <a href="http://www.watchtvlive.in/p/we-are-not-owner-of-filespicturesvideos.html"onmouseover="mouseoversound.playclip()">About us</a>
| <a href="http://www.watchtvlive.in/p/contact.html">Contact</a>
|<a href="http://www.watchtvlive.in/p/advertise-with-us.html" target="_blank">Advertise with us</a>
|<a href="http://www.watchtvlive.in/p/admin.html" target="_blank"onmouseover="mouseoversound.playclip()">Admin</a> </p>
<script>
var html5_audiotypes={ //define list of audio file extensions and their associated audio types. Add to it if your specified audio file isn't on this list:
"mp3": "audio/mpeg",
"mp4": "audio/mp4",
"ogg": "audio/ogg",
"wav": "audio/wav"
}
function createsoundbite(sound){
var html5audio=document.createElement('audio')
if (html5audio.canPlayType){ //check support for HTML5 audio
for (var i=0; i<arguments.length; i++){
var sourceel=document.createElement('source')
sourceel.setAttribute('src', arguments[i])
if (arguments[i].match(/\.(\w+)$/i))
sourceel.setAttribute('type', html5_audiotypes[RegExp.$1])
html5audio.appendChild(sourceel)
}
html5audio.load()
html5audio.playclip=function(){
html5audio.pause()
html5audio.currentTime=0
html5audio.play()
}
return html5audio
}
else{
return {playclip:function(){throw new Error("Your browser doesn't support HTML5 audio unfortunately")}}
}
}
//Initialize two sound clips with 1 fallback file each:
var mouseoversound=createsoundbite("https://googledrive.com/host/0B69IAToT7u3TRTBtUi1zZnpFems")
var clicksound=createsoundbite("https://googledrive.com/host/0B69IAToT7u3TRTBtUi1zZnpFems")
</script>
The <aside> tag use to relate aside content to the surrounding
content.The <aside> tag includes in HTML5 tags.It is easy HTML Tag that
you can understand by a simple example.
The following example shows how to an aside is used to mark up background
material on Australia in a much longer news story.
e.g.
<aside>
<h1>Australia</h1>
<p>The largest country in Oceania, the largest country without land
borders, and the largest country wholly in the Southern
Hemisphere.</p>
</aside>
Result:-
You can get better meaning of aside tag by knowing how to use an aside tag to
mark up a pull quote in a longer article.
e.g.
<p>I'm
paid to do my hobby.</p>
<aside>
<q> People ask me what I do for fun when I'm not at work. so I never
know what to answer. </q>
</aside>
Result:-
I'm
paid to do my hobby.
Conclusion:-
When we want to relate aside content to the surrounding content,we use
<aside> tag.
The <article> tag includes in HTML5 tags.
The <article> tag is used to represent an article.
The <article> tag specifies independent, self-contained content.More
specifically,the content within the tag is independent from the
other content.
<article> element may include a Forum post,Blog post,News story,user-
submitted comment etc.
We also use <article> on ‘static’ content pages,just like the About and
Contact pages, as <article> can be used for “any other independent item
of content.
an <article> element typically has a heading.
You can understand use of <article> tag by a comment example:-
e.g.:-
<article class="tour_review">
<header>
<h2>TaJ Mahal</h2>
</header>
<section class="user_reviews">
<article class="user_review">
<p>It's sign of love.</p>
<footer>
<p>
Posted on <time datetime="2013-05-16 15:00">May
16</time> by Ndal.
</p>
</footer>
</article>
<article class="user_review">
<p>Taj Mahal is glory of india.</p>
<footer>
<p>
Posted on <time datetime="2015-05-17 19:00">May
17</time> by Krishna.
</p>
</footer>
</article>
</section>
<section class="main_review">
<p>trip were great!</p>
</section>
<footer>
<p>
Posted on <time datetime="2015-05-15 19:00">May 15</time>
by Nandlal.
</p>
</footer>
</article>
Result:-
TaJ Mahal
It's sign of love.
Taj Mahal is glory of india.
trip were great!
The publication date and time of an <article> element can be described
using the pubdate attribute of a <time> element.
The <area> tag use to define an area inside an image-map.An image-map
is a image have more clickable images inside it,just like various locations
in map.When you click on that image the new webpage will be open that is
linked with that image.
The <area> element is always nested inside a <map> tag.
The usemap attribute in the <img> tag is associated with the
<map> tag and creates a relationship between the image and the map.
In HTML the <area> tag has no end tag while in Xhtml the <area>
tag has.
Generally You have a image that is related to a single link,but in image-map
there is various images which are assosiated with different locations.
You can understand <area> tag with a simple example:-
The following attributes can be set for the </area> tag:-
Attribute
Value
Description
alt
text
Specifies an alternate text for the area.
coords
if shape="rect" then
coords="left,top,right,bottom"
if shape="circ" then
coords="centerx,centery,radius"
if shape="poly" then
coords="x1,y1,x2,y2,..,xn,yn"
Specifies the coordinates appropriate to the
shape attribute to define a region of an image for image maps.
download
filename
Specifies that the target gets downloaded when
hyperlink is clicked by user.
href
URL
Specifies the URL of a page or the name of the
anchor that the link goes to.
hreflang
language_code
Specifies the language of the target URL.
media
media query
Specifies media/device the target URL is
optimized for.
nohref
true/false
Excludes an area from the image map
shape
rect,rectangle,circ, circle,poly,polygon
Specifies the shape of the image map
Please comment in comment box if you understand <area> tag and have any query regarding it.--
