Saturday, July 16, 2011

Basic HTML tags

In this post I want to explain basic HTML tags that are used during the web page design. I think  it will be a good reference.

<!--...-->
This is the HTML comments tag which is used for creating comments within your HTML code.
Eg : <!-- The level 4 heading goes here -->
<h4>How to comment out your code</h4>

<a>
The HTML a tag is used for creating a hyperlink to either another document, or somewhere within the current document.
Eg : <a href="http://ajaysoman.blogspot.com/2011/07/basic-html-tags.html" target="_blank">Killer Ab Workout</a>

<acronym>
The HTML acronym tag is used for indicating an acronym.
Eg : <acronym title="Computerized Axial Tomography">CAT</acronym>

<applet>
The HTML applet tag is used for embedding a Java applet within an HTML document.
Eg : <applet code="wooferDog.class" width="500" height="650">
Java applet of a woofer dog.
</applet>

<b>
The HTML b tag is used for specifying bold text.
Eg  : The HTML b tag specifies <b>bold</b> text.


<basefont>
The HTML basefont tag is used to specify a base font for the document to use.
Eg : <basefont face="cursive,serif" color="#ff9900" size="4" />

<body>
The HTML body tag is used for indicating the main content section of the HTML document. The body tag is placed between the </head>and the </html> tags.
Eg : <body style="background-color:orange">
Document content goes here
</body>

<br>
The HTML br tag is used for specifying a line break.
Eg : <p>This is before the line break<br /> and this after the line break.</p>

<button>
The HTML button tag is used for creating a button within forms.
Eg : <form>
<button name="quackitButton" value="Submit" type="button">Click Me</button>
</form>

<caption>
The HTML caption tag is used for creating table captions.
Eg : <table border="1">
<caption>Table caption</caption>
<tr>
<td>Left cell</td>
<td>Right cell</td>
</tr>
</table>

<center>
The HTML center tag is used to center-align HTML elements.
Eg : <center>This text is centered</center>

<del>
The HTML del tag is used for markup of deleted text. Markup of deleted text can be useful in determining differences between multiple versions of the same document. Browsers will normally strike a line through deleted text and underline inserted text.
Eg : p>I am <del>very</del> <ins>extremely</ins> happy that you visited this page.</p>

<font>
The HTML font tag is used to specify the font to use.
Eg : <p><font face="cursive,serif" color="#ff9900" size="4">The HTML font tag is now deprecated. You should use <a href="/css/properties/css_font.cfm" target="_blank">CSS font</a> to set font properties instead.</font></p>

<form>
The HTML form tag is used for declaring a form.
Eg : <form action="/html/tags/html_form_tag_action.cfm" method="get">
First name:
<input type="text" name="first_name" value="" maxlength="100" />
<br />
Last name:
<input type="text" name="last_name" value="" maxlength="100" />
<input type="submit" value="Submit" />
</form>

<frame>
The HTML frame tag is used to specify each frame within a frameset. For example, you can have a left frame for navigation and a right frame for the main content. For each frame, you specify the frame with the frame tag.
Eg : <frameset cols = "25%, *">
  <noframes>
  <body>Your browser doesn't support frames.
  Therefore, this is the noframe version of the site.</body>
  </noframes>
  <frame src ="/html/tags/frame_example_left.html" />
  <frame src ="/html/tags/frame_example_right.html" />
</frameset>

<h1> to <h6>
The HTML h1 tag is used for specifying level 1 headings. There are 6 levels of headings (h1 - h6) with h1 the most important and h6 the least important.
Eg : <h1>Level 1 heading using the HTML h1 tag</h1>

<head>
The HTML head tag is used for indicating the head section of the HTML document.
The head can contain other HTML tags that provide information about the document such as title, description, keywords etc.
Eg : <html>
<head>
<title>HTML head tag</title>
</head>
<body style="background-color:orange">
Document content goes here
</body>
</html>

<html>
The HTML html tag is the container that contains all other HTML elements (except for the !DOCTYPE tag which is located before the opening html tag).

<i>
The HTML i tag is used for specifying text in italics.
Eg: The HTML i tag specifies text in <i>italics</i>.

<img>
The HTML img tag is used for embedding images into an HTML document.
Eg: <img src="/pix/milford_sound/milford_sound_t.jpg" width="225" height="151" alt="Milford Sound in New Zealand">

<input>
The HTML input tag is used within a form to declare an input element - a control that allows the user to input data. Using the input tag, you can add controls such as text input, radio buttons, checkbox controls, submit buttons, and more.
Eg : <form action="/html/tags/html_form_tag_action.cfm" method="get">
First name:
<input type="text" name="first_name" value="" maxlength="100" />
<br />
Last name:
<input type="text" name="last_name" value="" maxlength="100" />
<input type="submit" value="Submit" />
</form>


<label>
The HTML label tag is used for adding a label to a form control. If you use the label tag, in some browsers, users can select a radio button or checkbox option by clicking on its label.
Eg : <form>
<input type="radio" name="fruit" id="banana" />
<label for="banana">Banana</label>
<br />
<input type="radio" name="fruit" id="None" />
<label for="none">None</label>
</form>

<link>
The HTML link tag is used for defining a link to an external document. It is placed in in the <head> section of the document. The HTML link tag is commonly used for linking to an external style sheet. Despite its name ("link"), the link tag is not used for creating a hyperlink to another HTML document. If you need to link to another HTML document, use the HTML <a> tag.
Eg: <link rel="stylesheet" type="text/css" href="/global.css" />

<map>
he HTML map tag is used for defining an image map. This element is used in conjunction with the HTML <area> tag and the HTML <img> tag to create the image map.
Eg : <map id ="muellermap" name="muellermap">
  <area shape ="rect" coords ="90,80,120,151"
  target="_blank"
  alt="Mueller Hut" />
</map>

<menu>
The HTML menu tag is used for specifying a menu list. For other list types, see the ul tag (for an unordered list), the ol tag (for an ordered list), and the dir tag (for a directory list).
Eg : <menu>
<li>dir</li>
<li>menu</li>
<li>ul</li>
</menu>

<noscript>
The HTML noscript tag is used for providing alternative content for browsers that don't support javascript or other scripting languages. This element is used in conjunction with the <script> tag.
Eg : <script  language="javascript" type="text/javascript">
  document.write('Disable your JavaScript then reload this page');
</script>
<noscript>
  Your browser doesn't support JavaScript or you
  have disabled JavaScript. Therefore, here's
  alternative content...
</noscript>

<object>
The HTML object tag is used for embedding an object within an HTML document. Use this tag to embed multimedia in your web pages. You can also use the <param> tag to supply parameters to your embedded object.
Eg : <object title="Woofer dog." classid="wooferDog.class">
  <!-- If the applet didn't work, try the image file -->
  <object data="wooferDog.gif" type="image/gif">
  <!-- If the image didn't work, display the text -->
  Woofer dog.
  </object>
</object>

<option>
The HTML option tag is used in conjunction with the select tag and is used for defining option items within the select list.
Eg : <select>
  <option value ="sydney">Sydney</option>
  <option value ="melbourne">Melbourne</option>
  <option value ="cromwell" selected>Cromwell</option>
  <option value ="queenstown">Queenstown</option>
</select>

<p>
The HTML p tag is used for defining a paragraph.
Eg : <p>This paragraph is defined using the HTML p tag</p>.

<q>
The HTML <q> tag is used for indicating short quotations (i.e. quotations that needs to display within a non-quoted paragraph).
Eg : And then she said <q>like... whatever!</q>

<s>
The HTML <s> tag is used for rendering a strike (or line) through the middle of the text.
Eg : The HTML s tag renders a <s>strike</s> (or <s>line</s>) through the middle of the text .


<script>
The HTML script tag is used for declaring a script (such as JavaScript) within your HTML document.
Eg: <script type="text/javascript">
  document.write('The HTML Script tag allows you to place a
                    script within your HTML documents');
</script>

<strike>
The HTML strike tag is used for rendering a strike (or line) through the middle of the text.

<strong>
The HTML strong tag is used for indicating stronger emphasis than the em tag. The strong tag surrounds the emphasised word/phrase.
Eg : I'm <strong>serious</strong>. I really can <strong>not</strong> emphasise this strongly enough!

<style>
The HTML <style> tag is used for declaring style sheets within the head of your HTML document. Each HTML document can contain multiple <style> tags. Each tag must be located between the <head> tags.
Eg : <head>
<style type="text/css">
  h1 { color:#000099 }
</style>
</head>

<table>
The HTML <table> tag is used for defining a table. The table tag contains other tags that define the structure of the table.
Eg : <table border = "1">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table>

<td>
The HTML <td> tag is used for specifying a cell (or table data) within a table.

<th>
The HTML <th> tag is used for specifying a header cell (or table header) within a table.
Eg : <table border = "1">
<tr>
<th>Tag</th>
<th>Description</th>
</tr>
<tr>
<td>th</td>
<td>Specifies a table header</td>
</tr>
</table>

<tr>
The HTML <tr> tag is used for specifying a table row within a table. A table row contains one or more td and/or th tags which determine individual cells.


<thead>
The HTML <thead> tag is used for adding a header to a table.
Eg : <table border = "1">
<thead>
     <tr> <td colspan="2">Table Header (thead)</td></tr>
</thead>
.
.
</table>

<title>
The HTML <title> tag is used for declaring the title of the HTML document.
Eg : <html>
<head>
<title>HTML title tag</title>
</head>
<body style="background-color:orange">
Document content goes here
</body>
</html>

<u>
The HTML <u> tag is used for rendering underlined text.

Thanks

AJAY

No comments:

Post a Comment