HTML Tag
A Tag is a coded HTML command that indicates how part of web page should
be displayed. All HTML tags are surrounded by the two characters < > ,characters are called angle brackets.
Example: <HEAD> </HEAD> is a tag. Similarly <H1> </H1> is a tag.
HTML tags are not case sensitive for example <HTML><BODY> means the same as <html><body>.
HTML Tags Name
| Tage Name |
| Html |
| Tags Code |
| <html></html> |
| Purpose |
| The <HTML> tag is in
fact the only tag you need to create the simplest webpage. The <HTML>
tag tells the browser that this is an HTML document, so the browser
understands how to show the page. The first line in each file will be <HTML>
and the last line in each file will be </HTML>. |
| HTML Code |
<html>
<head>
</head>
<body>
<p>My First HTML Page</p>
</body>
</html>
|
|
| Result |
|
|
|
| Tage Name |
| Head |
| Tags Code |
| <head></head> |
| Purpose |
| The <HEAD> tag contains
information about the document, including its title, and document
description. The <HEAD> and </HEAD>
tag is entered between <HTML> tags. |
| HTML Code |
<html>
<head>
</head>
<body>
<p>My First HTML Page</p>
</body>
</html>
|
|
| Result |
|
|
|
|
| Tage Name |
| Title |
| Tags Code |
| <title></title> |
| Purpose |
| This tag contains the document title. The title specified
inside <TITLE> tag appears on the
browses’ title bar. The <TITLE> and </TITLE>
tag is entered between <HEAD></HEAD>
tags. |
| HTML Code |
<html>
<head>
<title>Example Title</title>
</head>
<body>
<p>My First HTML Page</p>
</body>
</html>
|
|
| Result |
|
|
|
| Tage Name |
| Body |
| Tags Code |
| <body></body> |
| Purpose |
| The <BODY> tag encloses
all the tags, attributes and information to be displayed in the web page.
The <BODY> tag is entered below the
closing </HEAD> tag and above the
closing <HTML> tag. |
| HTML Code |
<html>
<head>
<title>Example Body</title>
</head>
<body>
<p>My First HTML Page</p>
</body>
</html>
|
|
| Result |
|
|
|
| Tage Name |
| Comment |
| Tags Code |
| <!--></--!> |
| Purpose |
| Text in the comment tag will be ignored by the browser, and not displayed as part of the resulting webpage. |
| HTML Code |
<html>
<head>
</head>
<body>
<p>My First HTML Page</p>
<!--My First HTML Page. Comments are not displayed in the browser-->
</body>
</html>
|
|
| Result |
|
|
|
| Tage Name |
| Break or Line Break |
| Tags Code |
| <br> or <br /> |
| Purpose |
| If you wanted to add a line break inside the middle of a paragraph you can use the line break tag.
This tag can be used anywhere within the Body of your HTML code. |
| HTML Code |
<html>
<head>
<title>Example Break or Line Break</title>
</head>
<body>
<p>My First HTML Page line 1<br>My First HTML Page line
2<br>My First HTML Page line 3</p>
</body>
</html>
|
|
| Result |
|
|
|
| Tage Name |
| Horizontal Rule |
| Tags Code |
| <hr> or <hr /> |
| Purpose |
| The <HR> tag produces a horizontal line spread across the width of the browser window. |
| HTML Code |
<html>
<head>
<title>Example Horizontal Rule</title>
</head>
<body>
<p>My First HTML Page line 1<br>My First HTML Page line
2<br>My First HTML Page line 3</p>
<hr>
<p>My First HTML Page line 4<br>My First HTML Page line
5<br>My First HTML Page line 6</p>
</body>
</html>
|
|
| Result |
|
|
|
| Tage Name |
| Breaking Space |
| Tags Code |
| |
| Purpose |
| It is used to add extra spaces. |
| HTML Code |
<html>
<head>
<title>Example Breaking Space</title>
</head>
<body>
<p>My First HTML Page</p>
<p>My First HTML
Page</p>
<p>My First HTML
Page</p>
</body>
</html>
|
|
| Result |
|
|
|
| Tage Name |
| Headings |
| Tags Code |
| <h1></h1>,<h2></h2>,<h3></h3>,<h4></h4>,<h5></h5>,<h6></h6> |
| Purpose |
| HTML has six levels of headings, numbered 1 through 6, with 1 being the largest. |
| HTML Code |
<html>
<head>
<title>Example Headings</title>
</head>
<body>
<h1>This is a heading H1 </h1>
<h2>This is a heading H2 </h2>
<h3>This is a heading H3 </h3>
<h4>This is a heading H4 </h4>
<h5>This is a heading H5 </h5>
<h6>This is a heading H6 </h6>
</body>
</html>
|
|
| Result |
|
|
|
| Tage Name |
| Paragraph |
| Tags Code |
| <p></p> |
| Purpose |
| The paragraph tag tells your web browser where to make paragraph breaks by enclosing each paragraph with a
<p> tag before the text, and a </p> tag after the text. |
| HTML Code |
<html>
<head>
<title>Example Paragraph</title>
</head>
<body>
<p>My First HTML Page 1</p>
<p>My First HTML Page
2</p>
</body>
</html>
|
|
| Result |
|
|
|
| Tage Name |
| Center |
| Tags Code |
| <center></center> |
| Purpose |
| Text positioned between these tags will be centered on your HTML page. |
| HTML Code |
<html>
<head>
<title>Example Center</title>
</head>
<body>
<center>My First HTML Page</center>
</body>
</html>
|
|
| Result |
|
|
|
| Tage Name |
| Bold |
| Tags Code |
| <b></b> , <strong></strong> |
| Purpose |
| Text positioned between these tags will be displayed in bold font on your HTML page. |
| HTML Code |
<html>
<head>
<title>Example Bold</title>
</head>
<body>
<p>My First <b>HTML</b> Page</p>
<p>My First
<strong> HTML</strong> Page</p>
</body>
</html>
|
|
| Result |
|
|
|
| Tage Name |
| Italic |
| Tags Code |
| <i></i> , <em></em> |
| Purpose |
| Text positioned between these tags will be displayed in italic font on your HTML page. |
| HTML Code |
<html>
<head>
<title>Example Italic</title>
</head>
<body>
<p>My First <i>HTML</i> Page</p>
<p>My First
<em> HTML</em> Page</p>
</body>
</html>
|
|
| Result |
|
|
|
| Tage Name |
| Underline |
| Tags Code |
| <u></u> , <ins></ins> |
| Purpose |
| Text positioned between these tags will be displayed underlined on your HTML page. |
| HTML Code |
<html>
<head>
<title>Example Underline</title>
</head>
<body>
<p>My First <u>HTML</u> Page</p>
<p>My First
<ins> HTML</ins> Page</p>
</body>
</html>
|
|
| Result |
|
|
|
| Tage Name |
| Font |
| Tags Code |
| <font></font> |
| Purpose |
| Use these tags for specifying the font face of your page. |
| HTML Code |
<html>
<head>
<title>Example Font</title>
</head>
<body>
<p>My First <font color="#00FFFF">HTML</font> Page</p>
</body>
</html>
|
|
| Result |
|
|
|
| Tage Name |
| IFrame |
| Tags Code |
| <iframe></iframe> |
| Purpose |
| The HTML tag represents a nested browsing context, effectively embedding another HTML page into the current page. |
| HTML Code |
<html>
<head>
<title>Example Iframe</title>
</head>
<body>
<p>My First HTML Page</p>
<br>
<iframe src="
http://itcollegeall.blogspot.com
"></iframe>
<p>My First HTML Page</p>
</body>
</html>
|
|
| Result |
 |
|
|
| Tage Name |
| Frame |
| Tags Code |
| <frame></frame> |
| Purpose |
| Frame is a HTML tag that is used for dividing the web page into various frames/windows. |
| HTML Code |
<html>
<head>
<title>Example Frame</title>
</head>
<frameset cols = "25%,75%">
<frame name = "left" src = "frame_1.html" />
<frame name = "center" src = "frame_2.html" />
</frameset>
</html>
|
|
| Result |
|
|
|
| Tage Name |
| Anchor |
| Tags Code |
| <a></a> |
| Purpose |
| You can use the Anchor tag to link to other documents in your Web site or to other pages on the Internet. |
| HTML Code |
<html>
<head>
<title>Example Anchor</title>
</head>
<body>
<p>Open WebPage <a href='Itcollegeall.blogspot.com'>
Itcollegeall</a></p>
</body>
</html>
|
|
| Result |
|
|
|
| Tage Name |
| Image |
| Tags Code |
| <img /> |
| Purpose |
| Display an image on a page, you need to use the src attribute. |
| HTML Code |
<html>
<head>
<title>Example Image</title>
</head>
<body>
<p>My First HTML Page</p><img src='' />
</body>
</html>
|
|
| Result |
|
|
|
| Tage Name |
| Ordered Lists |
| Tags Code |
| <ol></ol> |
| Purpose |
| Ordered list tags can be used to make a numbered list on your Web page. The opening and closing tags are used to specify the beginning and end of the list. List items are surrounded by list item tags. |
| HTML Code |
<html>
<head>
<title>Example Ordered Lists</title>
</head>
<body>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>
</body>
</html>
|
|
| Result |
|
|
|
| Tage Name |
| Unordered Lists |
| Tags Code |
| <ul></ul> |
| Purpose |
| Unordered list tags can be used to make a bullet list on your Web page. The opening and closing tags are used to specific the beginning and end of the list. List items are surrounded by list item tags. |
| HTML Code |
<html>
<head>
<title>Example Unordered Lists</title>
</head>
<body>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ul>
</body>
</html>
|
|
| Result |
|
|
|
| Tage Name |
| List Item |
| Tags Code |
| <li></li> |
| Purpose |
| List item tags are used to specify list items in both Ordered lists and Unordered lists. |
| HTML Code |
<html>
<head>
<title>Example List Item</title>
</head>
<body>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ul>
</body>
</html>
|
|
| Result |
|
|
|
| Tage Name |
| Blockquote |
| Tags Code |
| <blockquote></blockquote> |
| Purpose |
| Use the Blockquote tags to indent lines, paragraphs, and lists of text. These tags will indent your text by approximately 5 to 7 spaces. |
| HTML Code |
<html>
<head>
<title>Example Blockquote</title>
</head>
<body>
<p>My First HTML Page
<blockquote>My First HTML Page</blockquote>
<blockquote>My First HTML Page</blockquote>
My First HTML Page</p>
</body>
</html>
|
|
| Result |
|
|
|
| Tage Name |
| Table |
| Tags Code |
| <table></table> |
| Purpose |
A table represents information in a grid format.
Grid : A pattern of regularly spaced horizontal and vertical lines.
|
| HTML Code |
<html>
<head>
<title>Example Table</title>
</head>
<body>
<table border='1'>
<tr>
<td>cell</td>
<td>cell</td>
</tr>
</table>
</body>
</html>
|
|
| Result |
|
|
|
| Tage Name |
| Table Header |
| Tags Code |
| <th></th> |
| Purpose |
| This tag specifies a header cell in a table. |
| HTML Code |
<html>
<head>
<title>Example Table Header</title>
</head>
<body>
<table border='1'>
<tr>
<th>cell</th>
</tr>
<tr>
<td>cell</td>
</tr>
</table>
</body>
</html>
|
|
| Result |
|
|
|
| Tage Name |
| Table Body |
| Tags Code |
| <tbody></tbody> |
| Purpose |
| This tag is used to group the rows within the body of a table. |
| HTML Code |
<html>
<head>
<title>Example Table Body</title>
</head>
<body>
<table border='1'>
<tr>
<th>cell</th>
</tr>
<tbody>
<tr>
<td>cell</td>
</tr>
</tbody>
</table>
</body>
</html>
|
|
| Result |
 |
|
|
| Tage Name |
| Table Footer |
| Tags Code |
| <tfoot></tfoot> |
| Purpose |
| This tag is used to group the rows within the footer of a table. |
| HTML Code |
<html>
<head>
<title>Example Table Footer</title>
</head>
<body>
<table border='1'>
<tr>
<th>cell</th>
</tr>
<tfoot>
<tr>
<td>cell</td>
</tr>
</tfoot>
</table>
</body>
</html> |
|
| Result |
 |
|
|
| Tage Name |
| Table Row |
| Tags Code |
| <tr></tr> |
| Purpose |
| This tag specifies a row in a table. The individual cells of the row are defined by the
<th> and <td>
tags. |
| HTML Code |
<html>
<head>
<title>Example Table Row</title>
</head>
<body>
<table border='1'>
<tr>
<td>cell</td>
<td>cell</td>
</tr>
</table>
</body>
</html> |
|
| Result |
 |
|
|
| Tage Name |
| Table Data Or Table Cell |
| Tags Code |
| <td></td> |
| Purpose |
| This tag specifies a data cell in a table. The tag should occur within a table row as defined by the
<tr> tags. A data cell can contain text, images, lists, paragraphs, forms,
tables, etc. |
| HTML Code |
<html>
<head>
<title>Example Table Data</title>
</head>
<body>
<table border='1'>
<tr>
<td>cell</td>
<td>cell</td>
</tr>
</table>
</body>
</html> |
|
| Result |
 |
|
|
| Tage Name |
| Form |
| Tags Code |
| <form></form> |
| Purpose |
| Form to refer to different tags that allow you to collect information from visitors to your site. |
| HTML Code |
<html>
<head>
<title>Example Form</title>
</head>
<body>
<form>
<input type='text'>
</form>
</body>
</html> |
|
| Result |
 |
|
|
| Tage Name |
| Form Label |
| Tags Code |
| <label></label> |
| Purpose |
| This tag is used to relate descriptions to form controls. |
| HTML Code |
<html>
<head>
<title>Example Form Label</title>
</head>
<body>
<form>
<label>First Name</label>
<input type="text">
<input type="submit">
</form>
</body>
</html> |
|
| Result |
 |
|
|
| Tage Name |
| Input Form |
| Tags Code |
| <input /> |
| Purpose |
| This tag specifies an input control for a form. The type of input is set by the type attribute and can be a variety of different types, including single-line text field, password field, hidden, check box, radio button, or push button. |
| HTML Code |
<html>
<head>
<title>Example Form Input</title>
</head>
<body>
<form>
<input type="text">
<input type="checkbox">
<input type="radio">
<input type="submit">
</form>
</body>
</html> |
|
| Result |
 |
|
|
| Tage Name |
| Input Multiline Text |
| Tags Code |
| <textarea></textarea> |
| Purpose |
| This tag specifies a multiline text field contained within a form. |
| HTML Code |
<html>
<head>
<title>Example Form Textarea</title>
</head>
<body>
<form>
<textarea rows="2" cols="20"></textarea>
</form>
</body>
</html> |
|
| Result |
 |
|
|
| Tage Name |
| Option in Selection |
| Tags Code |
| <option></option> |
| Purpose |
| This tag specifies an item in a selection list defined by the select
tag. |
| HTML Code |
<html>
<head>
<title>Example Form Option</title>
</head>
<body>
<form>
<select size="1">
<option>Male</option>
<option>Female</option>
</select>
</form>
</body>
</html> |
|
| Result |
 |
|
|
| Tage Name |
| Selection List |
| Tags Code |
| <select></select> |
| Purpose |
| This tag defines a selection list within a form. Depending on the form of the selection list, the control allows the user to select one or more list options. |
| HTML Code |
<html>
<head>
<title>Example Form Select</title>
</head>
<body>
<form>
<select size="1">
<option>Male</option>
<option>Female</option>
</select>
</form>
</body>
</html> |
|
| Result |
 |
|
|
| Tage Name |
| Button |
| Tags Code |
| <button></button> |
| Purpose |
| This tag defines a nameable region known as a button, which can be used together with scripts. |
| HTML Code |
<html>
<head>
<title>Example Button</title>
</head>
<body>
<button type="button">Next</button>
</body>
</html> |
|
| Result |
 |
|
|
|
No comments:
Post a Comment