These are the all html tags with explanation
In html there is a opening and closing for every tag. We need to write data between that open and closed tags.
Example: <p> tag is used for declaring paragraphs text in html file.
<p> is opening and </p> is closing tag. Data should be write between these 2 tags. Example:- <p> Hellow world</p>
Here i am giving a clear description of html tags.
Essential tags:
I) <html> </html> this tag should be used otherwise the the webpage can not executed. Everything should be written between this 2 tags. <html> means opening of web page tag and </html> means closing of web page tag.
This HTML web page consists of 2 parts, 1st one is headder part <head> </head> and <body> </body> part.
<head> part consists mainly of information not displayed in a webpage. I will explain further in css and java script topics.
<body> tag contains all the information like, text, images, links and others audio, video will be placed in this part.
TO know how to execute html programs and basic structure , Please click here.
here i gave some sample examples for tags. after 3 days i will give the necessary example programs links also at here.
This comment html tag is used to write some comments in an HTML document. This is used for not displaying text in the webpage.
Example: <!--...--> Everything will write in between this place.
<!--Hello, this is for hiding text-->
Purpose: If they are writing this in document then they are just indicating what the tags and other things are happening in the webpage.
2. <b> tag:
This tag is used to display text in bold characters in a webpage.
Example: <b> Hellow world ! </b>
Output: Hellow world !
3. <i> tag:
This tag is used to display text in italic text in output webpage.
Example: <i> Hellow world ! </i>
Output: Hellow world !
4.<u> tag: (underline):
This tag is used to display text in underline format.
Example: <u> Hellow world !</u>
Output: Hellow world !
5. <br> tag: (line break):
This tag is mainly used for giving line breaks for each text sentence lines. So it will works just as Enter key
Example: <p> hellow how r u </p> <br> <p>this is example</p>
Output:
hellow how r u
this is example
6. tag:
this is used for giving an empty space between tags or words. Below i gave 3 tags. This is for giving 3 empty spaces. If you give empty spaces with space key in keyboard then it will not give a space in output, so we are using this tag for giving spaces.
Example: <p> hellow how r u </p> <p>this is example</p>
7. <center> Tag:
This <center> tag is used to display the text in center of a web page. Without this <center> tag the text or images displays at left side in a webpage( this is default position) .
Example: <center> <u>Welcome to www</u> </center>
Output: Welcome to www
TIP: We can apply multiple html tags for same text as mentioned above.
9. <div> tag:
This <div> tag is mainly used to to apply a division section for a single tag or a group of tags.
<div> properties are align="center"/"right"/"left"
Example:
<div align="center">
<p> this is para text</p> <br>
<b>This is bold text</b> <br>
<i> This is italic text</i> <br>
In output all the text lines will come at center of the page.
11.<big> tag:
This html tag is used to display text in big letters.
Example: <big> this is sample text</big>
Output: this is sample text
12. <small> tag:
This html tag is used to display text in small letters
Example: <small>this is sample text</small>
Output: this is sample text
13. <del> tag:
This tag is used to display text in stricked .
Example: <del> this is sample text</del>
Output:this is sample text
14. <img> tag: (Image)
this image tag is used to display an image in the webpage. This tag is used with combination of SRC tag, means source of an image.
Example: <img src="abc.jpg" width=200 height=200 title="this is john photo" alt="this is john photo" />
You can display an image with specific width and height, if you do not give this width and height then it will display at full size of this image. Title tag is used for if any one roll the mouse on the image then it will display the text "his is john photo".
Here if the image and html file are in same folder then u do not need to give full path of the image. other wise you need to give the complete source path.
Example: <img src="C:\Users\prasanthp\Desktop\images\bird.jpg" /> / is the ending tag of the <img>.
Image types: you can your .gif image, jpeg images (jpg), .bmp etc...
Note: The image what ever you are using in <img> tag then give the image full extension for the image . use birf.jpg instead of bird. ok
15. <audio> Tag:
<audio> Tag is used to place a sound track or an audio song in a webpage.
Example: <audio controls>
<source src="michlejackson.ogg" type="audio/ogg">
<source src="michlejackson.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
After opening of this <audio> tag then we need to <source file name in it along with its correct file extenssion. Ok
We should use controls attribute with this <audio> so that we can get options like play button, pause button etc... in output.
This <audio> tag suports only .ogg format and .mp3 and .wav format audio files.
Note: The audio file and html file should be in same folder otherwise we need to set path of that "michlejackson.mp3" as "c:\songs\michlejackson.mp3" in src.
<audio> can be used with <audio controls autoplay loop> Also. The above tag plays the adio with automatic play when the webpage is opened. Loop means after ending the play time it will again play form the start of the song.
this supports in latest IE and Latest firefox and chrome browsers.
16. <video> tag:
<video controls>
<source src="michlejackson.mp4" type="video/ogg">
<source src="michlejackson.ogg" type="video/mpeg">
Your browser does not support the video tag.
</video>
After opening of this <video> tag then we need to <source file name in it along with its correct file extenssion.
We should use controls attribute with this <video> so that we can get options like play button, pause button etc... in output.
This <video> tag suports only .mp4 format and .gg format video files.
Note: The video file and html file should be in same folder otherwise we need to set path of that "michlejackson.mp4" as "c:\songs\michlejackson.mp4" in src.
<video> can be used with <video controls autoplay loop> Also. The above tag plays the video with automatic play when the webpage is opened. Loop means after ending the play time it will again play form the start of the song.
17. <address> Tag:
Example:
<address>
Johny dhee,<br>
S/o Johny bravo,<br>
C/o popey show house,<br>
Hollywood, America<br>
</address>
This is mainly used for displaying address part in a web page. This tag is not so important. All these text written in between <address> </address> tag will disply as intalic text automatically
Output:
Johny dhee,
S/o Johny bravo,
C/o popey show house,
Hollywood, America
This anchor text is used to make linking from one web page to another.
We will write this <a> tag with usage of href tag.
Eg:- <a href="http//:www.google.com">Google site</a>
Or
<a href="http://www.Yahoo.com">Yahoo site</a>
Here the word "Google site" got hyper linking. This word should be written between <a> and </a> tags. <a> is opening tag and </a> is closing tag.
This <a> tag has some extra attributes are there, we will see them in frames concept in below.
19. <marquee> tag
This <marquee> tag is used to scroll the text in a web page.
Text should be in between the opening and closing tags of this <marquee>
Example: <marquee> Example scrolling text </marquee>
Output:
you can set the direction also. <marquee direction="left/right/top/bottom" > with increasing of speed also. <marquee direction="right" scrollamount="20"> In html there is a opening and closing for every tag. We need to write data between that open and closed tags.
Example: <p> tag is used for declaring paragraphs text in html file.
<p> is opening and </p> is closing tag. Data should be write between these 2 tags. Example:- <p> Hellow world</p>
Here i am giving a clear description of html tags.
Essential tags:
I) <html> </html> this tag should be used otherwise the the webpage can not executed. Everything should be written between this 2 tags. <html> means opening of web page tag and </html> means closing of web page tag.
This HTML web page consists of 2 parts, 1st one is headder part <head> </head> and <body> </body> part.
<head> part consists mainly of information not displayed in a webpage. I will explain further in css and java script topics.
<body> tag contains all the information like, text, images, links and others audio, video will be placed in this part.
TO know how to execute html programs and basic structure , Please click here.
here i gave some sample examples for tags. after 3 days i will give the necessary example programs links also at here.
All the below tags should be placed in <body> </body> tag:
1.Comment tag:
This comment html tag is used to write some comments in an HTML document. This is used for not displaying text in the webpage.
Example: <!--...--> Everything will write in between this place.
<!--Hello, this is for hiding text-->
Purpose: If they are writing this in document then they are just indicating what the tags and other things are happening in the webpage.
2. <b> tag:
This tag is used to display text in bold characters in a webpage.
Example: <b> Hellow world ! </b>
Output: Hellow world !
3. <i> tag:
This tag is used to display text in italic text in output webpage.
Example: <i> Hellow world ! </i>
Output: Hellow world !
4.<u> tag: (underline):
This tag is used to display text in underline format.
Example: <u> Hellow world !</u>
Output: Hellow world !
5. <br> tag: (line break):
This tag is mainly used for giving line breaks for each text sentence lines. So it will works just as Enter key
Example: <p> hellow how r u </p> <br> <p>this is example</p>
Output:
hellow how r u
this is example
6. tag:
this is used for giving an empty space between tags or words. Below i gave 3 tags. This is for giving 3 empty spaces. If you give empty spaces with space key in keyboard then it will not give a space in output, so we are using this tag for giving spaces.
Example: <p> hellow how r u </p> <p>this is example</p>
7. <center> Tag:
This <center> tag is used to display the text in center of a web page. Without this <center> tag the text or images displays at left side in a webpage( this is default position) .
Example: <center> <u>Welcome to www</u> </center>
Output: Welcome to www
TIP: We can apply multiple html tags for same text as mentioned above.
9. <div> tag:
This <div> tag is mainly used to to apply a division section for a single tag or a group of tags.
<div> properties are align="center"/"right"/"left"
Example:
<div align="center">
<p> this is para text</p> <br>
<b>This is bold text</b> <br>
<i> This is italic text</i> <br>
In output all the text lines will come at center of the page.
11.<big> tag:
This html tag is used to display text in big letters.
Example: <big> this is sample text</big>
Output: this is sample text
12. <small> tag:
This html tag is used to display text in small letters
Example: <small>this is sample text</small>
Output: this is sample text
13. <del> tag:
This tag is used to display text in stricked .
Example: <del> this is sample text</del>
Output:
14. <img> tag: (Image)
this image tag is used to display an image in the webpage. This tag is used with combination of SRC tag, means source of an image.
Example: <img src="abc.jpg" width=200 height=200 title="this is john photo" alt="this is john photo" />
You can display an image with specific width and height, if you do not give this width and height then it will display at full size of this image. Title tag is used for if any one roll the mouse on the image then it will display the text "his is john photo".
Here if the image and html file are in same folder then u do not need to give full path of the image. other wise you need to give the complete source path.
Example: <img src="C:\Users\prasanthp\Desktop\images\bird.jpg" /> / is the ending tag of the <img>.
Image types: you can your .gif image, jpeg images (jpg), .bmp etc...
Note: The image what ever you are using in <img> tag then give the image full extension for the image . use birf.jpg instead of bird. ok
15. <audio> Tag:
<audio> Tag is used to place a sound track or an audio song in a webpage.
Example: <audio controls>
<source src="michlejackson.ogg" type="audio/ogg">
<source src="michlejackson.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
After opening of this <audio> tag then we need to <source file name in it along with its correct file extenssion. Ok
We should use controls attribute with this <audio> so that we can get options like play button, pause button etc... in output.
This <audio> tag suports only .ogg format and .mp3 and .wav format audio files.
Note: The audio file and html file should be in same folder otherwise we need to set path of that "michlejackson.mp3" as "c:\songs\michlejackson.mp3" in src.
<audio> can be used with <audio controls autoplay loop> Also. The above tag plays the adio with automatic play when the webpage is opened. Loop means after ending the play time it will again play form the start of the song.
this supports in latest IE and Latest firefox and chrome browsers.
16. <video> tag:
<video controls>
<source src="michlejackson.mp4" type="video/ogg">
<source src="michlejackson.ogg" type="video/mpeg">
Your browser does not support the video tag.
</video>
After opening of this <video> tag then we need to <source file name in it along with its correct file extenssion.
We should use controls attribute with this <video> so that we can get options like play button, pause button etc... in output.
This <video> tag suports only .mp4 format and .gg format video files.
Note: The video file and html file should be in same folder otherwise we need to set path of that "michlejackson.mp4" as "c:\songs\michlejackson.mp4" in src.
<video> can be used with <video controls autoplay loop> Also. The above tag plays the video with automatic play when the webpage is opened. Loop means after ending the play time it will again play form the start of the song.
17. <address> Tag:
Example:
<address>
Johny dhee,<br>
S/o Johny bravo,<br>
C/o popey show house,<br>
Hollywood, America<br>
</address>
This is mainly used for displaying address part in a web page. This tag is not so important. All these text written in between <address> </address> tag will disply as intalic text automatically
Output:
Johny dhee,
S/o Johny bravo,
C/o popey show house,
Hollywood, America
18. <a> tag: (anchor/Hyper link tag):
This anchor text is used to make linking from one web page to another.
We will write this <a> tag with usage of href tag.
Eg:- <a href="http//:www.google.com">Google site</a>
Or
<a href="http://www.Yahoo.com">Yahoo site</a>
Here the word "Google site" got hyper linking. This word should be written between <a> and </a> tags. <a> is opening tag and </a> is closing tag.
This <a> tag has some extra attributes are there, we will see them in frames concept in below.
19. <marquee> tag
This <marquee> tag is used to scroll the text in a web page.
Text should be in between the opening and closing tags of this <marquee>
Example: <marquee> Example scrolling text </marquee>
Output:
Or you can slow down the scroll also. <marquee direction="right" scrolldelay="50">
We can set width and height also.
<marquee direction="top" width="200" height="200" >
20. <font> tag: (text property):
<font> tag is used to display the text with our own properties. We can increase the text size and change the color of the text.
The txt should be place between <font> and </font> tags.
Example: <font color="red" size="5"> hellow world</font>
Out put: hellow world
This means text size is increased from current position size i.e, which is written in editor or notepad (source file).
21. <ol> Tag: (Unorder list)
This <ol> tag is used to display text in a clean and clear order format. This <ul> tag need <li> and </li> tags. Data should be written in between these<li></li> tags. <li> is opening tag and </li> is closing tag. <ol> tag contains any number of <li> tags. If you use 10 <li></li> tags then you will get 10 lists at webpage. After all listing this <li> tags then we need to close the </ol> tag at bottom.
Example:
<ol>
<li> Apple</li>
<li> Orange</li>
<li> Bananna</li>
<li> Guva</li>
</ol>
Output:
- Apple
- Orange
- Bananna
- Guva
You can use types in <ol> also. There are 5 types re there to make number for the list. i.e., 1,a,A,i,I
If we can use <ol type="a"> then it will display list with numbering of a,b,c,d etc.. If you use <ol type="i"> then it will display the list in small roman number format.
22. <ul> tag: (unorder list)
This is same as the above tag. But the changes is only replace the <ol> to <ul>. This is used to display text in unorder list format. It has 3 options, i.e, disk, circle,sqare.
Example:
<ol type="disk">
<li> Apple</li>
<li> Orange</li>
<li> Bananna</li>
<li> Guva</li>
</ul>
23. <hr> tag: (horizontal row)
This <hr> tag is used to create a horizontal line in a web page. This tag has not ending tag. We need to just type <hr> then it will displays the a horizontal line in a web page.
We can make this <hr> tag as per our wish.
Increasing size:- <hr size=10>
Output:
you can use some colors also for this tag. Example: <hr size=10 color="cyan">
Output:
24. <h1> to <h6> Tags: (heading tags)
These are the heading tags which can be used to display a piece of text in different sizes. The sizes will increase from bottom to top tags.
for example if you use <h6> tag then it displays a small text. If you use <h5> tag then it displays a little bit big text then h6 tag. the h1 is used for displaying mot biggest text.
content should be written in between opening and closing tags.
Example:
<h1>this is perfect example 1</h1>
<h2>this is perfect example 2</h2>
<h3>this is perfect example 3</h3>
<h4>this is perfect example 4</h4>
<h5>this is perfect example 5</h5>
<h6>this is perfect example 6</h6>
Output:
this is perfect example 1
this is perfect example 2
this is perfect example 3
this is perfect example 4
this is perfect example 5
this is perfect example 6
25. <fieldset> Tag:This <fieldset> tag is ued to set a group of tags in a combination by adding a rectangle box around for it.
We need to write tags after opening of <fieldset> and this tag should be closed after writing of some tags.
Example:
<fieldset>
<p>this is example</p>
<b>this is best field</b>
<i>this is very good</i>
</fieldset>
26. <body> tag in depth:
We can change the background color and set background image and other font colors etc...
<body bgcolor="red" > OR <body background="sunset.jpg" > OR <body background="c:\documents\pictures\images\sunset.jpg" >
Or <body text="green"> used to display all text in green color.
OR <body text="green" vlink="red" alink="green"> vlink means visited link color, and alink means active link color.
27. HTML Tables:
This table tags are used to to display data in table format in web page.
Syntax: <table> data and other tags </table>
This table contains <tr>,<th><td> tags.
<tr> tag is used to create a complete row in a table. <tr> is the opening tag and </tr> is the closing tag, it means table row. <tr> tags are not suficient to display text and it need <td> </td> tags, it means Table data.
Data should be written in these <td> and </td> tags. Each of this <td> and </td> pair creates a single cell in a table.
If we write <td> hellow </td> then it will displays the this "hellow" text in a cell, if you want empty cell then use <td> </td>. ok
Each <tr> </tr> creates one single row in a table. All these tags should be written after opening of <table> and should be before </table> closing tag. To make our work simple then we need draw our imagination table on a paper and then we need to proceed to our work.
Example:
<table>
<tr>
<td>one</td>
<td> Two</td>
<td>Three</td>
</tr>
</table>
Here one table is created with one row. Please click here to see some more examples of tables.
we can create width and height of the tables also. Please click here to see example programs on tables. In the above link i mentioned how to use rowspan and colspan in tables.
28. <footer> tag:-
This tag i sused to to display the author informationa dn contact details at the bottom of the web page. This tag is usually written after writting of tags.
<footer>
<p>Posted by: Michel Jackson</p>
<p>Contact Adress: <a href="mailto:michle@example.com">michle@example.com</a>.</p>
</footer>
29.<embed> Tag:-
Generally used to insert a piece of grafix information in a web page.
Example: i want to insert a .swf game or flash files then we will use this tags.
Syntax:-
If the html program and flash file are in smae folder then ue it
<embed src="congrats.swf"> Or
If the flash file is at already in another website.
<embed src="http://www.google.om/images/flash/congrats.swf">
If the flash file is in not in same html file saved folder and this flash file is in another folder then use it.
<embed src="c:\documents\flash files\ congrats.swf">
30. <code> Tag:-
If you want to display a piece of html or css or any java code in a web page you can use this opening <code> and closing </code> tag.
Example: If i want to tell some working of html code, if i write it without this <code> tag then it will disply direct output in a webpage.
So i will write it in this <code> tag.
<code>
<p>used for prag text</p>
<u> used for underline text</u>
</code>
If i write this code in notepad without <code> then it will disply the text in <p> and <u> tags.
31. <strong> Tag:-
Used to disply text in strong letters.
Example:-
<strong> This is visible in strong letters</strong>
This tag works just like as a <b> tag as i explained above.
32. <button> tag:-
<button> tag:-
This is used to create a button in a web page. Here i am only explaining that how to display a button. Further operations on button tags will be explained in java script.
We need to write like this, <button> is a opening tag and </button> is a closing tag. The name to display on button should be written between these opening and closing tags as fallows:
We need to write the type of the button also. Example, button, submit, reset.
<button type="button" >Click Me!</button>
We can chage the sizes of the button also. Numbers are in pixels. ok
<button type="button" width="100" height="200">Click Me!</button>
changing the text color in button.
<button type="button" ><font color="blue">Click Me!</font></button>
33. <legend> tag:-
This <legend> tag is used with combination of <fieldset> tag.
Generally used to give a heading name to the rectange box in <fieldset> tag. It has opening and closing tags are there. <legend> heading</legend>
Example:
<fieldset>
<legend> Data: </legend>
<p>How is this text</p>
<b>This is bold text</b>
</legend>
34. <mark> Tag:-
This <mark> tag is used to display a text with some marked grafix.
Targeted marked text should be written in between <mark> and </mark>. ok
Example: <p>Please go to <mark>hell</mark> after no love</p>
Output: Please go to hell after no love
35. <iframe> tag:
This <iframe> tag is used to disply a webpage or multiple web pages in a webpage.
Example: I want to disply 2 web sites in a webpage. So i will use this tags.
Each iframe is used to display a webpage in one block.
If you want to use 2 iframes then use 2 <iframe> tags.
Src used to set the path of the webpage.
<iframe src="http://www.funnyimagesforfacebook.com">
<p>Your browser does not support iframes.</p>
</iframe>
<iframe src="http://htmlraja.blogspot.com/">
<p>Your browser does not support iframes.</p>
</iframe>
There are differnece options for this <iframe> tag.
to set a place in a webpage. Then use align with option: top/right/left/middle/bottom
<iframe align="top">
For complete guidance click here for example programs.
36. <nav> tag:
This <nav> tag is used to display link side by side with a little gap. Generally used at begining of a web page.
We should write All the web pages after opening of <tag> and should be write before the </nav> closing tag.
Use this symbol | adter each <a> tag. so that every a beuatiful gap will come for every link.
Example:
<nav>
<a href="one.html">one</a> |
<a href="two.html">two</a> |
<a href="3.html">three</a> |
<a href="4.">four</a>
</nav>
Output:
37. <progress> tag:-
This is used to display the progress of a webpage or a downloading file in a grafix moving format. For perfect tag , we need to use with Java script code.
Example:-
<progress value="30" max="100">
</progress>
Output:
In the above example value means the current position of the total progress and Max is the maximum value of the length of the progress bar. If you give 200 as max then the progress bar size will double.
38.<span> tag:-
The <span> tag is used to display the text or to make same propery to a group of tags.
Example: here i want to set the color for a text.
<p>He is the best one <span style="color:blue">in the great </span> eyes.</p>
39. <sup> tag:-
This tag is used to disply text in supper post possition. It has opening tag and ending tag. The supper target text should be written between <sup> and </sup> tags.
Example: <p>this is very big number 2<sup>32</sup>
Output:
this is very big number 232
40. <sub> tag:-
This tag is used to dispaly the text in sub possition. It has opening and closing tag as like as above. Using is also same as the above tag.
Example: <p>This is math quote log<sub>10</sub>
Output:
40. <sub> tag:-
This tag is used to dispaly the text in sub possition. It has opening and closing tag as like as above. Using is also same as the above tag.
Example: <p>This is math quote log<sub>10</sub>
Output:
This is math quote log10
41. Html forms:- (login forms, registration forms, etc... )
This forms are used to receive the input data from the user in a web page.
Example: Login form. This login form is used to take the user id and password from the users. After that some java script or php codes will process it. Here i am explaining you about how to display forms.
This <form> has open and closing of </form> tag. All the input and buttons tags should be write in between these tags.
List of tags:-
Every tag has a self closing is there by just adding a '/' at the end of the tag.
<form>
<input type="text" /> Used to create a text box for input data.
<input type="password" />Used to create a text box for input password. If any type letters in it, then it displays text as stars (****). ok
<input type="checkbox" /> used to to display text box.
<input type="radio" /> Used to display a radio button.
<textarea> </textarea> used to display a big text box to enter address or some matter.
<Select> used to display some drop-down list in the webpage.
<input type="submit" value="submit" /> Used to display a submit button in a webpage. If an one click on it then data will enter into data base or next page.
<input type="reset" value="reset" /> This button is used to refresh the webpage or to reset all the field values to empty.
</form>
Here every tag has name and value. Name is used to track the input data using java script. Without the Name also the webpage will displays the output. If you use Name then it will useful when you are using java script.
Example:- <input type="text" name="usrid">
For further example programs and other options in tags then please click here to see more.
Below i mentioned some tags which can be used in <head> </head> part of a webpage.
<meta> tag:-
This meta tag is used for serchengines and not for the users out put.
For example if you write a meta tag for description and the search engines thought that this is for description. These <meta> tags are for search engines only and this is part of seo, i will further explain it in SEO concepts. ok
<head>
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Hege Refsnes">
<meta charset="UTF-8">
</head>
<title> tag :-
This title tag is used to display the text or title on the top of the web page. this is used in <head> tag.
Example: <head>
<title> examlpe web page</title>
</head>
This displays the above text on above the navigation bar of a web page.
<frames> tags:-
These tags are used to display multiple webpage in a single webpage(window). This most wasted tag and google search engine does not these webpages with frames.
But just learn these tags.
These frames tags should be used between in <head> and </head> tags.
If you this frames in a webpage then you can not use any <body> tag to display the <p> or <b> or other tags.
<frameset> is a tag which is used to set the frames in a webpage and it will declare how many frames should be displyed in a window.
Each <frameset> contains one or more <frame> tags used to specify the name of the frame and source of the frame.
Example: <frame src="www.google.com">
For further examples and detailed view then please click here to see some clear programs.
No comments:
Post a Comment