Basic HTML Tags List And Their Uses

http://www.techdoses.com/tutorials/basic-html-tags-list-and-their-uses

Listed below is the basic HTML tags list and their uses

Name HTML Tag HTML Code Example Browser View

HTML Comment <!– <!–This can be viewed in the HTML part of a document–> Nothing will show

HTML Anchor <a - <a href=“http://www.domain.com/”>Visit Our Site</a> Visit Our Site

HTML Bold <b> <b>Example</b> Example

HTML Big (Text) <big> <big>Example</big> Example

Body ofHTML Document <body> <body>The content of your HTML page</body> Contents of your web page

HTML Line Break <br> The contents of your page<br>The contents of your page The contents of your pageThe contents of your page

HTML Center

<center>This will center your contents</center>

This will center your contents

HTML Definition Description

<dd>

<dl><dt>Definition Term</dt><dd>Definition of the term</dd><dt>Definition Term</dt>

<dd>Definition of the term</dd>

</dl>

Definition Term: Definition of the term
Definition Term: Definition of the term

HTML Definition List

<dl>

<dl><dt>Definition Term</dt><dd>Definition of the term</dd><dt>Definition Term</dt>

<dd>Definition of the term</dd>

</dl>

Definition Term: Definition of the term
Definition Term: Definition of the term

HTML Definition Term

<dt>

<dl><dt>Definition Term</dt><dd>Definition of the term</dd><dt>Definition Term</dt>

<dd>Definition of the term</dd>

</dl>

Definition Term: Definition of the term
Definition Term: Definition of the term

HTML Emphasis <em> This is an <em>Example</em> of using the emphasis tag This is an Example of using the emphasis tag

HTML Embed Object <embed> <embed src=”yourfile.mid” width=”100%” height=”60″ align=”center”>

HTML Embed Object <embed> <embedsrc=”yourfile.mid” autostart=”true” hidden=”false” loop=”false”><noembed><bgsound src=”yourfile.mid” loop=”1″></noembed> Music will begin playing when your page is loaded and will only play onetime. A control panel will be displayed to enable your visitors to stop the music.

HTML Font <font> <font face=”Times New Roman”>Example</font> Example

HTML Font <font> <font face=”Times New Roman” size=”4″>Example</font> Example

HTML Font <font> <font face=”Times New Roman” size=”+3″ color=”#ff0000″>Example</font> Example

HTML Form

<form>

<formaction=”mailto:you@yourdomain.com”>Name: <input name=”Name” value=”" size=”10″><br>Email: <input name=”Email” value=”" size=”10″><br><center><input type=”submit”></center>

</form>

HTML Heading1HTML Heading2HTML Heading3HTML Heading 4

HTML Heading 5

HTML Heading 6

<h5>

<h6>

<h1>Heading 1 Example</h1><h2>Heading 2 Example</h2><h3>Heading 3 Example</h3><h4>Heading 4 Example</h4>

<h5>Heading 5 Example</h5>

<h6>Heading 6 Example</h6>

h1

h2

h3

h4

h5

h6

Heading ofHTML Document <head> <head>Contains elements describing the document</head> Nothing will show

HTML Horizontal Rule

<hr>

<hr />

Contents of your web page

HTML Horizontal Rule

<hr>

<hr width=”50%” size=”3″ />

Contents of your web page

HTML Horizontal Rule

<hr>

<hr width=”50%” size=”3″ noshade />

Contents of your web page

HTML Horizontal Rule

<hr>(InternetExplorer)

<hr width=”75%” color=”" size=”4″ />

Contents of your web page

HTML Horizontal Rule

<hr>(InternetExplorer)

<hr width=”25%” color=”" size=”6″ />

Contents of your web page

HTML Hypertext Markup Language

<html>

<html><head><meta><title>Title of your web page</title>

</head>

<body>HTML web page contents

</body>

</html>

Contents of your web page

HTML Italic <i> <i>Example</i> Example

HTML Image <img> <img src=”Earth.gif” width=”41″ height=”41″ border=”0″ alt=”text describing the image” />

HTML Input Field

<input>

Example 1:<form method=post action=”/cgi-bin/example.cgi”><input type=”text” size=”10″ maxlength=”30″><input type=”Submit” value=”Submit”>

</form>

HTML Input Field

<input>(Internet Explorer)

Example 2:<form method=post action=”/cgi-bin/example.cgi”><input type=”text” style=”color: #ffffff; font-family: Verdana; font-weight: bold; font-size: 12px; background-color: #72a4d2;” size=”10″ maxlength=”30″><input type=”Submit” value=”Submit”>

</form>

HTML Input Field

<input>(Internet Explorer)

</form>

HTML Input Field

<input>

Example 3:<form method=post action=”/cgi-bin/example.cgi”><table border=”0″ cellspacing=”0″ cellpadding=”2″><tr><td bgcolor=”#8463ff”><input type=”text” size=”10″ maxlength=”30″></td><td bgcolor=”#8463ff” valign=”Middle”> <input type=”image” name=”submit” src=”yourimage.gif”></td></tr> </table></form>

HTML Input Field

<input>

Example 4:<form method=post action=”/cgi-bin/example.cgi”>Enter Your Comments:<br><textarea wrap=”virtual” name=”Comments” rows=3 cols=20 maxlength=100></textarea><br>

<input type=”Submit” value=”Submit”>

<input type=”Reset” value=”Clear”>

</form>

HTML Input Field

<input>

Example 6:<form method=post action=”/cgi-bin/example.cgi”>Select an option:<br><inputtype=”radio” name=”option”> Option 1

<input type=”radio” name=”option” checked> Option 2

<input type=”radio” name=”option”> Option 3

<br>

Select an option:<br>

<input type=”checkbox” name=”selection”> Selection 1

<input type=”checkbox” name=”selection” checked> Selection 2

<input type=”checkbox” name=”selection”>Selection 3

<input type=”Submit” value=”Submit”>

</form>

HTML List Item

<li>

Example 1:<menu><li type=”disc”>List item1</li><li type=”circle”>List item 2</li>

<li type=”square”>List item 3</li>

</MENU>

Example 2:

<li>List item 1</li>

<li>List item 2</li>

<li>List item 3</li>

<li>List item 4</li>

</ol>

Example 1:

List item 1
List item 2
List item 3

Example 2:

List item 1
List item 2
List item 3
List item 4

HTML Link <link> <head><link rel=”stylesheet” type=”text/css” href=”style.css” /></head>

HTMLScrolling Text <marquee>(InternetExplorer) <marquee bgcolor=”" loop=”-1″ scrollamount=”2″ width=”100%”>Example Marquee</marquee> Example Marquee

HTML Menu

<menu>

<menu><li type=”disc”>List item 1</li><li type=”circle”>List item 2</li><li type=”square”>List item 3</li>

</menu>

List item 1
List item 2
List item 3

HTML Meta <meta> <meta name=”Description” content=”Description of your site”><meta name=”keywords” content=”keywords describing your site”> Nothing will show

HTML Meta <meta> <meta HTTP-EQUIV=”Refresh” CONTENT=”4;URL=http://www.yourdomain.com/”> Nothing will show

HTML Meta <meta> <meta http-equiv=”Pragma” content=”no-cache”> Nothing will show

HTML Meta <meta> <meta name=”rating” content=”General”> Nothing will show

HTML Meta <meta> <meta name=”robots” content=”all”> Nothing will show

HTML Meta <meta> <meta name=”robots” content=”noindex,follow”> Nothing will show

HTML Ordered List

<ol>

Numbered<ol><li>List item 1</li><li>List item2</li>

</ol>

Numbered Special Start

<ol start=”5″>

</ol>

Lowercase Letters

<ol type=”a”>

</ol>

Capital Letters

<ol type=”A”>

</ol>

Capital Letters Special Start

<ol type=”A” start=”3″>

</ol>

Lowercase Roman Numerals

<ol type=”i”>

</ol>

Capital Roman Numerals

<ol type=”I”>

</ol>

Capital Roman Numerals Special Start

<ol type=”I” start=”7″>

</ol>

Numbered

List item 1
List item 2
List item 3
List item 4

Numbered Special Start

List item 1
List item 2
List item 3
List item 4

Lowercase Letters

List item 1
List item 2
List item 3
List item 4

Capital Letters

List item 1
List item 2
List item 3
List item 4

Capital Letters Special Start

List item 1
List item 2
List item 3
List item 4

Lowercase Roman Numerals

List item 1
List item 2
List item 3
List item 4

Capital Roman Numerals

List item 1
List item 2
List item 3
List item 4

Capital Roman Numerals Special Start

List item 1
List item 2
List item 3
List item 4

HTML Listbox Option

<form method=post action=”/cgi-bin/example.cgi”><center>Select an option:<select>

<option>option 1</option>

<option selected>option 2</option>

<option>option 3</option>

<option>option 4</option>

<option>option 5</option>

<option>option 6</option>

</select><br>

</center>

</form>

HTML Paragraph

<p>

This is an example displaying the use of the paragraph tag. <p> This will create a line break and a space between lines.Attributes:<p align=”left”>Example 1:<br />

<br />

This is an example<br>

displaying the use<br>

of the paragraph tag.</p>

<p align=”right”>

Example 2:<br>

<br>

This is an example<br>

displaying the use<br>

of the paragraph tag.</p>

<p align=”center”>

Example 3:<br>

<br>

This is an example<br>

displaying the use<br>

of the paragraph tag.</p>

This is an example displaying the use of the HTML paragraph tag.

This will create a line break and a space between lines.

Attributes:

Example 1:

This is an example

displaying the use

of the paragraph tag.

Example 2:

This is an example

displaying the use

of the paragraph tag.

Example 3:

This is an example

displaying the use

of the paragraph tag.

HTML Small (Text) <small> <small>Example</small> Example

HTML Deleted Text <strike> <strike>Example</strike> Example

HTML Strong Emphasis <strong> <strong>Example</strong> Example

HTML Table

<table>

Example 1:<table border=“4″ cellpadding=”2″ cellspacing=”2″ width=”100%”><tr><td>Column 1</td>

<td>Column 2</td>

</tr>

</table>

Example 2: (Internet Explorer)

<table border=“2″ bordercolor=”" cellpadding=”2″ cellspacing=”2″ width=”100%”>

<tr>

<td>Column 1</td>

<td>Column 2</td>

</tr>

</table>

Example 3:

<table cellpadding=“2″ cellspacing=”2″ width=”100%”>

<tr>

<td bgcolor=”">Column 1</td>

<td bgcolor=”">Column 2</td>

</tr>

<tr>

</tr>

</table>

Example 1:

Column 1

Column 2

Example 2:

Column 1

Column 2

Example 3:

Column 1	Column 2
Row 2	Row 2

HTML Table Data

<td>

<table border=”2″ cellpadding=”2″ cellspacing=”2″ width=”100%”><tr><td>Column 1</td><td>Column 2</td>

</tr>

</table>

Column 1

Column 2

HTML Table Header

<th>

<div align=”center”><table><tr><th>Column 1</th>

<th>Column 2</th>

<th>Column 3</th>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

Column 1	Column 2	Column 3
Row 2	Row 2	Row 2
Row 3	Row 3	Row 3
Row 4	Row 4	Row 4

HTML Document Title <title> <title>Title of your HTML page</title> Title of your web page will be viewable in the title bar.

HTML Table Row

<tr>

<table border=”2″ cellpadding=”2″ cellspacing=”2″ width=”100%”><tr><td>Column 1</td><td>Column 2</td>

</tr>

</table>

Column 1

Column 2

HTML Teletype <tt> <tt>Example</tt> Example

HTML Underline <u> <u>Example</u> Example

HTML Unordered List

<ul>

Example 1:<br><br><ul><li>List item 1</li>

</ul>

<br>

Example 2:<br>

<ul type=”disc”>

<ul type=”circle”>

</ul>

</ul>

Example 1:

List item 1
List item 2

Example 2:

List item 1
List item 2
- List item 3
- List item 4

Pages

Wednesday 20 March 2013

Basic HTML Tags List And Their Uses

Basic HTML Tags List And Their Uses

Listed below is the basic HTML tags list and their uses

h1

h2

h3

h4

h5

h6

No comments:

Post a Comment

Blog Archive