Scribd
Upload
80 views9 pages

HTML Tags Chart: Tag Name Code Example Browser View

The document defines various HTML tags and their purposes: 1) Opening tags like <html> and <head> define the overall structure and metadata of an HTML page, with <head> containing the <title> and other informational tags and <body> containing the visible page content. 2) Common text formatting tags like <b>, <i>, <font>, and <center> control things like bold, italics, font properties, and text alignment. 3) Lists are created with <ol> and <ul> tags along with <li> list items, and forms use <form> and <input> tags along with other options like textareas, selects, radios and check

Uploaded by

Aastha Gupta
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
80 views9 pages

HTML Tags Chart: Tag Name Code Example Browser View

The document defines various HTML tags and their purposes: 1) Opening tags like <html> and <head> define the overall structure and metadata of an HTML page, with <head> containing the <title> and other informational tags and <body> containing the visible page content. 2) Common text formatting tags like <b>, <i>, <font>, and <center> control things like bold, italics, font properties, and text alignment. 3) Lists are created with <ol> and <ul> tags along with <li> list items, and forms use <form> and <input> tags along with other options like textareas, selects, radios and check

Uploaded by

Aastha Gupta
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 9

<html> - Begins your HTML document.

<head> - Contains information about the page such as the TITLE, META tags for proper Search Engine indexing, STYLE tags, which determine the page layout, and JavaScript coding for special effects. <title> - The TITLE of your page. This will be visible in the title bar of the viewers browser. </title> - Closes the HTML <title> tag. </head> - Closes the HTML <head> tag. <body> - This is where you will begin writing your document and placing your HTML codes. </body> - Closes the HTML <body> tag. </html> - Closes the <html> tag.

HTML Tags Chart


To use any of the following HTML tags, simply select the HTML code you'd like and copy and paste it into your web page. Tag <!-<a <b> <big> <body> Name comment anchor bold Code Example <!--This can be viewed in the HTML part of a document--> <a href="http://www.domain.com/"> Visit Our Site</a> <b>Example</b> Browser View Nothing will show (Tip) Visit Our Site (Tip) Example

big (text) <big>Example</big> body of <body>The content of HTML your HTML page</body> document

Example (Tip)
Contents of your web page (Tip)

<br>

The contents of your web The contents of your page<br>The contents page line break of your page The contents of your web page center <center>This will center your contents</center> This will center your contents Definition Term Definition of the term Definition Term Definition of the term Definition Term Definition of the term Definition Term Definition of the term

<center>

<dd>

<dl> <dt>Definition Term</dt> definition <dd>Definition of the term</dd> descriptio <dt>Definition Term</dt> n <dd>Definition of the term</dd> </dl> <dl> <dt>Definition Term</dt> definition <dd>Definition of the term</dd> list <dt>Definition Term</dt> <dd>Definition of the term</dd> </dl>

<dl>

<dt>

<dl> <dt>Definition Term</dt> definition <dd>Definition of the term</dd> term <dt>Definition Term</dt> <dd>Definition of the term</dd> </dl> emphasis embed object This is an <em>Example</em> of using the emphasis tag <embed src="yourfile.mid" width="100%" height="60" align="center">

Definition Term Definition of the term Definition Term Definition of the term This is an Example of using the emphasis tag (Tip)

<em> <embed>

<embed>

embed object

Music will begin playing <embed src="yourfile.mid" autostart="true" when your page is loaded hidden="false" loop="false"> and will only play one <noembed><bgsound src="yourfile.mid" time. A control panel will loop="1"></noembed> be displayed to enable your visitors to stop the music. <font face="Times New Roman">Example</font> <font face="Times New Roman" size="4">Example</font> <font face="Times New Roman" size="+3" color="#ff0000">Example</font> <form action="mailto:[email protected] m"> Name: <input name="Name" value="" size="10"><br> Email: <input name="Email" value="" size="10"><br> <center><input type="submit"></center> </form> Example (Tip)

<font> <font> <font>

font font font

Example (Tip)

Example
Name: Email:
Submit

(Tip)

(Tip)

<form>

form

<h1> <h2> <h3> <h4> <h5> <h6>

heading heading heading heading heading heading

1 2 3 4 5 6

<h1>Heading <h2>Heading <h3>Heading <h4>Heading <h5>Heading <h6>Heading

1 2 3 4 5 6

Example</h1> Example</h2> Example</h3> Example</h4> Example</h5> Example</h6>

<head>

heading <head>Contains elements describing the of HTML document</head> document horizonta <hr /> l rule horizonta <hr width="50%" size="3" />

Nothing will show

<hr>

Contents of your web page (Tip) Contents of your web page Contents of your web page

<hr>

l rule <hr> <hr> (Internet Explorer) <hr> (Internet Explorer) horizonta <hr width="50%" size="3" noshade /> l rule horizonta <hr width="75%" color="#ff0000" l rule size="4" /> horizonta <hr width="25%" color="#6699ff" l rule size="6" /> <html> <head> <meta> hypertext <title>Title of your web page</title> markup </head> language <body>HTML web page contents </body> </html> italic image <i>Example</i> <img src="Earth.gif" width="41" height="41" border="0" alt="text describing the image" /> Example 1: input field <form method=post action="/cgibin/example.cgi"> <input type="text" size="10" maxlength="30"> <input type="Submit" value="Submit"> </form> Example 2: <form method=post action="/cgibin/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> Example 3:

Contents of your web page Contents of your web page Contents of your web page Contents of your web page Contents of your web page Contents of your web page Contents of your web page

<html>

Contents of your web page

<i> <img>

Example

(Tip)

Example 1: (Tip)
Submit

<input>

<input> (Internet Explorer)

Example 2: (Tip)
Submit

input field

<input>

input field

<form method=post action="/cgibin/example.cgi"> Example 3: (Tip) <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> Example 4: Example 4: (Tip)

<input>

input field

<form method=post action="/cgibin/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> Example 5: <form method=post action="/cgibin/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> <input type="Submit" value="Submit"></center> </form> Example 6: <form method=post action="/cgibin/example.cgi"> Select an option:<br> <input type="radio" name="option"> Option 1 <input type="radio" name="option" checked> Option 2 <input type="radio" name="option"> Option 3 <br> <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> Example 1: <menu> <li type="disc">List item 1</li> <li type="circle">List item 2</li> <li type="square">List item 3</li> </MENU>

Submit

Clear

Example 5: Tip) Select an option:


Submit

<input>

input field

Example 6: (Tip) Select an option: Option 1 Option 2 Option 3 Select an option: Selection 1 Selection 2 Selection 3
Submit

<input>

input field

<li>

list item

Example 1: (Tip)

List item 1 List item 2


Example 2: <ol type="i"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> </ol> <head> <link rel="stylesheet" type="text/css" href="style.css" /> </head>

List item 3

Example 2: i. ii. iii. iv. List item 1 List item 2 List item 3 List item 4

<link>

link

<marquee > scrolling (Internet text Explorer)

<marquee bgcolor="#cccccc" loop="-1" scrollamount="2" width="100%">Example Marquee</marquee> (Tip) <menu> <li type="disc">List item 1</li> <li type="circle">List item 2</li> <li type="square">List item 3</li> </menu> <meta name="Description" content="Description of your site"> <meta name="keywords" content="keywords describing your site">

List item 1 List item 2 List item 3

<menu>

menu

<meta>

meta

Nothing will show (Tip)

<meta> <meta> <meta> <meta> <meta> <ol>

meta meta meta meta meta ordered list

<meta HTTP-EQUIV="Refresh" CONTENT="4;URL=http://www.yourdomain. Nothing will show (Tip) com/"> <meta http-equiv="Pragma" content="nocache"> <meta name="rating" content="General"> <meta name="robots" content="all"> <meta name="robots" content="noindex,follow"> Numbered <ol> <li>List <li>List <li>List <li>List </ol> item item item item 1</li> 2</li> 3</li> 4</li> Nothing will show (Tip) Nothing will show (Tip) Nothing will show (Tip) Nothing will show (Tip) Numbered 1. 2. 3. 4. List List List List item item item item 1 2 3 4

Numbered Special Start 5. 6. List item 1 List item 2

Numbered Special Start <ol start="5">

<li>List <li>List <li>List <li>List </ol>

item item item item

1</li> 2</li> 3</li> 4</li>

7. 8.

List item 3 List item 4

Lowercase Letters a. b. c. d. List List List List item item item item 1 2 3 4

Lowercase Letters <ol type="a"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> </ol> Capital Letters <ol type="A"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> </ol> Capital Letters Special Start <ol type="A" start="3"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> </ol> Lowercase Roman Numerals <ol type="i"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> </ol> Capital Roman Numerals <ol type="I"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> </ol> Capital Roman Numerals Special Start <ol type="I" start="7"> <li>List item 1</li> <li>List item 2</li>

Capital Letters A. B. C. D. List List List List item item item item 1 2 3 4

Capital Letters Special Start C. D. E. F. List List List List item item item item 1 2 3 4

Lowercase Roman Numerals i. ii. iii. iv. List List List List item item item item 1 2 3 4

Capital Roman Numerals I. II. III. IV. List List List List item item item item 1 2 3 4

Capital Roman Numerals Special Start VII. VIII. IX. X. List item 1 List item 2 List item 3 List item 4

<li>List item 3</li> <li>List item 4</li> </ol> <form method=post action="/cgibin/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> This is an example displaying the use of the paragraph tag. <p> This will create a line break and a space between lines. Attributes: Example 1:<br> <br> <p align="left"> This is an example<br> displaying the use<br> of the paragraph tag.<br> paragrap <br> h Example 2:<br> <br> <p align="right"> This is an example<br> displaying the use<br> of the paragraph tag.<br> <br> Example 3:<br> <br> <p align="center"> This is an example<br> displaying the use<br> of the paragraph tag. small (text) deleted text <small>Example</small> <strike>Example</strike>

<option>

listbox option

Select an option: (Tip)

This is an example displaying the use of the 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.
Example

<p>

<small> <strike> <strong>

(Tip)

Example Example

strong <strong>Example</strong> emphasis

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)

Example 1: (Tip) Column 1 Column 2

<table>

table

<table border="2" bordercolor="#336699" cellpadding="2" cellspacing="2" Example 2: (Tip) width="100%"> <tr> <td>Column 1</td> Column 1 Column 2 <td>Column 2</td> </tr> </table> Example 3: <table cellpadding="2" cellspacing="2" width="100%"> <tr> <td bgcolor="#cccccc">Column 1</td> <td bgcolor="#cccccc">Column 2</td> </tr> <tr> <td>Row 2</td> <td>Row 2</td> </tr> </table> <table border="2" cellpadding="2" cellspacing="2" width="100%"> <tr> <td>Column 1</td> <td>Column 2</td> </tr> </table> <div align="center"> <table> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> <tr> <td>Row 2</td> <td>Row 2</td> <td>Row 2</td> </tr> <tr> <td>Row 3</td> <td>Row 3</td> <td>Row 3</td> Example 3: (Tip) Column 1 Row 2 Column 2 Row 2

<td>

table data

Column 1

Column 2

<th>

table header

Colum Colum Colum n1 n2 n3


Row 2 Row 3 Row 4 Row 2 Row 3 Row 4 Row 2 Row 3 Row 4

</tr> <tr> <td>Row 4</td> <td>Row 4</td> <td>Row 4</td> </tr> </table> </div> <title> document <title>Title of your HTML page</title> title <table border="2" cellpadding="2" cellspacing="2" width="100%"> <tr> table row <td>Column 1</td> <td>Column 2</td> </tr> </table> teletype <tt>Example</tt> Title of your web page will be viewable in the title bar. (Tip) Column 1 Column 2

<tr>

<tt> <u>

Example
Example Example 1:

underline <u>Example</u> Example 1:<br> <br> <ul> <li>List item 1</li> <li>List item 2</li> </ul> <br> unordere Example 2:<br> d list <ul type="disc"> <li>List item 1</li> <li>List item 2</li> <ul type="circle"> <li>List item 3</li> <li>List item 4</li> </ul> </ul>

List item 1 List item 2

<ul>

Example 2:

List item 1 List item 2 o List item 3

List item 4

You might also like