Scribd
Upload
35 views

HTML Tags Chart: Example

The document provides examples of common HTML tags and their functions, including tags for text formatting, links, images, tables, forms, headings, and lists. It displays the code required to implement each tag and a brief definition or example of how it will appear in the browser. The chart serves as a quick reference for the most frequently used HTML tags and their attributes.

Uploaded by

Rahul Kushwaha
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
35 views

HTML Tags Chart: Example

The document provides examples of common HTML tags and their functions, including tags for text formatting, links, images, tables, forms, headings, and lists. It displays the code required to implement each tag and a brief definition or example of how it will appear in the browser. The chart serves as a quick reference for the most frequently used HTML tags and their attributes.

Uploaded by

Rahul Kushwaha
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 9

HTML Tags Chart

Tag <!-<A <B> <BIG> <BODY> <BR> <CENTER> Name comment anchor bold big (text) Code Example <!--This can be viewed in the HTML part of a document--> Browser View Nothing will show (Tip) <A HREF="http://www.yourdomain.com/">Visit Our Visit Our Site (Tip) Site</A> <B>Example</B> <BIG>Example</BIG> Example

Example (Tip)
Contents of your webpage (Tip) The contents of your page The contents of your page This will center your contents Definition Term Definition of the term Definition Term Definition of the term

body of <BODY>The content of your page</BODY> document line break center The contents of your page<BR>The contents of your page <CENTER>This will center your contents</CENTER>

<DD>

<DL> <DT>Definition Term definition <DD>Definition of the term description <DT>Definition Term <DD>Definition of the term </DL> <DL> <DT>Definition Term <DD>Definition of the term <DT>Definition Term <DD>Definition of the term </DL> <DL> <DT>Definition Term <DD>Definition of the term <DT>Definition Term <DD>Definition of the term </DL> This is an <EM>Example</EM> of using the emphasis tag <EMBED src="yourfile.mid" width="100%" height="60" align="center"> <EMBED src="yourfile.mid" autostart="true" hidden="false" loop="false"> <noembed><bgsound src="yourfile.mid" loop="1"></noembed>

<DL>

definition list

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

<DT>

definition term

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>

emphasis embed object embed object

Music will begin playing when your page is loaded and will only play one time. A control

panel will be displayed to enable your visitors to stop the music. <FONT> <FONT> <FONT> font font font <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]"> Name: <INPUT name="Name" value="" size="10"><BR> Email: <INPUT name="Email" value="" size="10"><BR> <CENTER><INPUT type="submit"></CENTER> </FORM>

Example (Tip)

Example (Tip)

Example (Tip)
Name: Email:

(Tip)

<FORM>

form

Submit Query

<H1>

heading 1 <H1>Heading 1 Example</H1>

Heading 1 Example
Heading 2 Example
Heading 3 Example
Heading 4 Example
Heading 5 Example
Heading 6 Example

<H2> <H3> <H4> <H5> <H6> <HEAD>

heading 2 <H2>Heading 2 Example</H2> heading 3 <H3>Heading 3 Example</H3> heading 4 <H4>Heading 4 Example</H4> heading 5 <H5>Heading 5 Example</H5> heading 6 <H6>Heading 6 Example</H6> heading of <HEAD>Contains elements describing the document document</HEAD> horizontal <HR> rule horizontal <HR WIDTH="50%" SIZE="3"> rule horizontal <HR WIDTH="50%" SIZE="3" NOSHADE> rule horizontal <HR WIDTH="75%" COLOR="#FF0000" rule SIZE="4"> horizontal <HR WIDTH="25%" COLOR="#6699FF" rule SIZE="6"> hypertext markup <HTML><HEAD><META><TITLE>Title of your webpage</TITLE></HEAD><BODY>Webpage

Nothing will show

<HR>

Contents of your webpage (Tip) Contents of your webpage Contents of your webpage Contents of your webpage Contents of your webpage Contents of your webpage Contents of your webpage Contents of your webpage Contents of your webpage Contents of your webpage Contents of your webpage

<HR> <HR> <HR> (Internet Explorer) <HR> (Internet Explorer) <HTML>

language <I> <IMG> italic image

contents</BODY></HTML> <I>Example</I> <IMG SRC="Earth.gif" WIDTH="41" HEIGHT="41" BORDER="0" ALT="a sentence about your site"> Example 1: Example

(Tip) Example 1: (Tip)

Submit

<INPUT>

input field

<FORM METHOD=post ACTION="/cgibin/example.cgi"> <INPUT type="text" size="10" maxlength="30"> <INPUT type="Submit" VALUE="Submit"> </FORM> Example 2:

<INPUT> (Internet Explorer)

input field

<FORM METHOD=post ACTION="/cgiExample 2: (Tip) bin/example.cgi"> <INPUT type="text" STYLE="color: #FFFFFF; fontfamily: Verdana; font-weight: bold; font-size: 12px; Submit background-color: #72A4D2;" size="10" maxlength="30"> <INPUT type="Submit" VALUE="Submit"> </FORM> Example 3: <FORM METHOD=post ACTION="/cgibin/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> Example 4: <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: Example 5: (Tip) <FORM METHOD=post ACTION="/cgibin/example.cgi"> <CENTER> Select an option: Select an option:

Example 3: (Tip)

<INPUT>

input field

Example 4: (Tip)

<INPUT>

input field

Submit

Clear

<INPUT>

input field

<SELECT> <OPTION >option 1 <OPTION SELECTED>option 2 <OPTION>option 3 <OPTION>option 4 <OPTION>option 5 <OPTION>option 6 </SELECT><BR> <INPUT type="Submit" VALUE="Submit"></CENTER> </FORM> Example 6:

Submit

Example 6: (Tip) <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 type="circle">List item 2 <LI type="square">List item 3 </MENU> <LI> list item Example 2: <OL type="i"> <LI>List item 1 <LI>List item 2 <LI>List item 3 <LI>List item 4 </OL> Example 2: o List item 1 List item 2 List item 3 Select an option:

Option 1 Option 2 Option 3


Select an option:

<INPUT>

input field

Selection 1 Selection 2 Selection 3


Submit

Example 1: (Tip)

i. ii. iii. iv.

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

<LINK>

link

Visit our <A Visit our site HREF="http://www.yourdomain.com/">site</A>

<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 type="circle">List item 2 <LI type="square">List item 3 </MENU> <META name="Description" content="Description of your site"> <META name="keywords" content="keywords describing your site"> o List item 1 List item 2 List item 3

<MENU>

menu

<META>

meta

Nothing will show (Tip)

<META> <META> <META> <META> <META>

meta meta meta meta meta

<META HTTP-EQUIV="Refresh" Nothing will show (Tip) CONTENT="4;URL=http://www.yourdomain.com/"> <META http-equiv="Pragma" content="no-cache"> Nothing will show (Tip) <META name="rating" content="General"> <META name="ROBOTS" content="ALL"> <META NAME="ROBOTS" content="NOINDEX,FOLLOW"> Example 1: <OL> <LI>List item 1 <LI>List item 2 <LI>List item 3 <LI>List item 4 </OL> Nothing will show (Tip) Nothing will show (Tip) Nothing will show (Tip) Example 1:

1. 2. 3. 4.

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

<OL>

ordered list Example 2: <OL type="a"> <LI>List item 1 <LI>List item 2 <LI>List item 3 <LI>List item 4 </OL>

Example 2:

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


Select an option: (Tip)

<OPTION>

listbox option

<FORM METHOD=post ACTION="/cgibin/example.cgi"> <CENTER> Select an option: <SELECT> <OPTION>option 1 <OPTION SELECTED>option 2 <OPTION>option 3 <OPTION>option 4 <OPTION>option 5

<OPTION>option 6 </SELECT><BR> </CENTER> </FORM> This is an example displaying This is an example displaying the use of the paragraph tag. <P> This will create a line break and the use of the paragraph tag. a space between lines. This will create a line break and Attributes: a space between lines. Example 1:<BR> <BR> <P align="left"> This is an example<BR> displaying the use<BR> of the paragraph tag.<BR> <BR> paragraph 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) <SMALL>Example</SMALL> strong emphasis table <STRONG>Example</STRONG> 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="#336699" CELLPADDING="2" CELLSPACING="2" WIDTH="100%"> <TR> <TD>Column 1</TD> <TD>Column 2</TD> </TR> </TABLE> Example 3: (Tip) Column 1 Row 2 Column 2 Row 2 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> <STRONG> <TABLE>

(Tip)

Example Example 1: (Tip) Column 1 Column 2

Example 2: (Tip) Column 1 Column 2

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> table data <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> </TR> <TR> <TD>Row 4</TD> <TD>Row 4</TD> <TD>Row 4</TD> </TR> </TABLE> </DIV>

<TD>

Column 1

Column 2

Column 1 Row 2 Row 3 Row 4

Column 2 Row 2 Row 3 Row 4

Column 3 Row 2 Row 3 Row 4

<TH>

table header

<TITLE>

document <TITLE>Title of your webpage</TITLE> title <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="2" WIDTH="100%"> <TR> <TD>Column 1</TD> <TD>Column 2</TD> </TR> </TABLE>

Title of your webpage will be viewable in the title bar. (Tip) Column 1 Column 2

<TR>

table row

<TT> <U>

teletype underline

<TT>Example</TT> <U>Example</U>

Example Example Example 1: List item 1 List item 2

<UL>

Example 1:<BR> <BR> <UL> <LI>List item 1 <LI>List item 2 </UL> <BR> unordered Example 2:<BR> list <UL type="disc"> <LI>List item 1 <LI>List item 2 <UL type="circle"> <LI>List item 3 <LI>List item 4 </UL> </UL>

Example 2: List item 1 List item 2 o List item 3 o List item 4

HTML Codes / Tags Chart


If you're looking for some HTML codes to spice up your web site, you've come to the right place. You will find a variety of HTML codes and tips below. If you're new to HTML and web site design, the following section will assist you in creating an HTML web page. For additional web site design information, make sure you don't miss the web design articles and tutorials at the bottom of this page.

Creating an HTML Page


A web page is created using a language called, Hypertext Markup Language, better known as HTML. You can write your own HTML tags within a plain text editor, such as Note Pad, or use an HTML editor, which will write the code for you. HTML codes, also referred to as tags, are enclosed by the lesser than (<) and greater than (>) brackets and may be written in capital or lower case letters. The opening bracket is followed by an element, which is a browser command, and ends with the closing bracket. <font size=2> An element may also be followed by attributes, which are words describing the properties of the element, and further instruct the browser. <font size=2>

Attributes are only contained in the opening tags to the right of the element and are separated by a space and followed by an equal (=) sign. The value follows the equal sign and is enclosed in quotes. <font size=2>

Basic HTML Document Structure


Begin writing your HTML tags by creating your document's basic layout. Copy and paste this code into your text or HTML editor.

<HTML> <HEAD> <TITLE>Your Page Title</TITLE> </HEAD> <BODY> This area will contain everything that will be visible through a web browser, such as text and graphics. All of the information will be HTML coded. For a complete list of HTML codes and examples, see the HTML chart below. </BODY> </HTML> <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 <TITLE> tag. </HEAD> - Closes the <HEAD> tag. <BODY> - This is where you will begin writing your document and placing your HTML codes. </BODY> - Closes the <BODY> tag. </HTML> - Closes the <HTML> tag.

You might also like