HTML - Tag

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
&nbsp;
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&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp; 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
Share This:

No comments:

Post a Comment

Subscribe to: Posts (Atom)
Advertiser
Counter
Flag Counter
Copyright © 2017-2022 Learn Online I T Courses HTML CSS PHP ASP more All Rights Reserved· | powered by BLOGGER