Scribd
Upload
59 views

HTML Tags: Name HTML Tag HTML Code Example Browser View

This document defines various HTML tags and provides code examples and browser views of how each tag will be displayed. It includes tags for text formatting, links, lists, forms, images, and more. The tags are organized in a table with the HTML tag name, code example using that tag, and how it would look displayed in a browser.

Uploaded by

jupiterdiana
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
59 views

HTML Tags: Name HTML Tag HTML Code Example Browser View

This document defines various HTML tags and provides code examples and browser views of how each tag will be displayed. It includes tags for text formatting, links, lists, forms, images, and more. The tags are organized in a table with the HTML tag name, code example using that tag, and how it would look displayed in a browser.

Uploaded by

jupiterdiana
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 13

HTML Tags

Name

HTML Tag

HTML Code Example

Browser View

HTML Comment

<!--

<!--This can be viewed in the HTML part of a


document-->

Nothing will show (Tip)

HTML Anchor

<a>

<a href="http://www.domain.com/">
Visit Our Site</a>

Visit Our Site (Tip)

HTML Bold

<b>

<b>Example</b>

Example

HTML Big (Text)

<big>

<big>Example</big>

Example (Tip)

Body of HTML
Document

<body>

<body>The content of your HTML page</body>

Contents of your web page (Tip)

HTML Line Break <br>

The contents of your page<br>The contents of your page

The contents of your page


The contents of your page

HTML Center

<center>

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

<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

<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

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

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

HTML Definition
Description

HTML Definition
List

HTML Definition
Term

<dt>

This will center your contents

<dd>Definition of the term</dd>


</dl>
This is an Example of using the emphasis
tag

HTML Emphasis

<em>

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

HTML Embed
Object

<embed>

<embed src="yourfile.mid" width="100%" height="60"


align="center">

HTML Embed
Object

<embed>

<embed src="yourfile.mid" autostart="true"


hidden="false" loop="false">
<noembed><bgsound src="yourfile.mid"
loop="1"></noembed>

HTML Font

<font>

<font face="Times New Roman">Example</font>

Example (Tip)

HTML Font

<font>

<font face="Times New Roman"


size="4">Example</font>

Example (Tip)

HTML Font

<font>

<font face="Times New Roman" size="+3"


color="#ff0000">Example</font>

Example (Tip)
Name:

<form>

<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>

HTML Form

Name

HTML Tag

HTML Code Example

(Tip)

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.

(Tip)

Email:

Browser View

HTML Heading 1
HTML Heading 2
HTML Heading 3
HTML Heading 4
HTML Heading 5
HTML Heading 6

<h1>
<h2>
<h3>
<h4>
<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>

Heading of HTML
<head>
Document

<head>Contains elements describing the


document</head>

HTML Horizontal
<hr>
Rule

<hr />

Nothing will show


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

HTML Horizontal
<hr>
Rule

<hr width="50%" size="3" />

HTML Horizontal
<hr>
Rule

<hr width="50%" size="3" noshade />

<hr>
HTML Horizontal
(Internet
Rule
Explorer)
<hr>
HTML Horizontal
(Internet
Rule
Explorer)
HTML Hypertext <html>
Markup Language

Contents of your web page


Contents of your web page
Contents of your web page
Contents of your web page
<hr width="75%" color="#ff0000" size="4" />
Contents of your web page
Contents of your web page
<hr width="25%" color="#6699ff" size="6" />
Contents of your web page
<html>
<head>
<meta>
<title>Title of your web page</title>
</head>
<body>HTML web page contents
</body>

Contents of your web page

</html>
HTML Italic

<i>

<i>Example</i>

HTML Image

<img>

<img src="Earth.gif" width="41" height="41"


border="0" alt="text describing the image" />

Example
(Tip)

Example:
HTML Input Field <input>

HTML Input
Password

<input>

<form method=post action="/cgi-bin/example.cgi">


<input type="text" size="10" maxlength="30">
<input type="Submit" value="Submit">
</form>

Example: (Tip)

<form method=post action="/cgi-bin/example.cgi">


<input type="password" size="10" maxlength="30">
<input type="Submit" value="Submit">
</form>
Example:

HTML Input
(Background
Color)

<input>
(Internet
Explorer)

<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>

Example: (Tip)

Example:

HTML Input
(Image Submit
Button)

HTML Input
(Comment Box)

<input>

<input>

<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>
Example:

Example: (Tip)

Example: (Tip)

<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>
Example:

HTML Input
(Radio Button)

<input>

Select an option:
<form method=post action="/cgi-bin/example.cgi">
Option 1
Select an option:<br>
<input type="radio" name="option"> Option 1
Option 2
<input type="radio" name="option" checked> Option 2
<input type="radio" name="option"> Option 3
<input type="Submit" value="Submit">
Option 3
</form>
Example:

HTML Input
(Checkbox)

<input>

HTML List Item

<li>

Example: (Tip)

Example: (Tip)

<form method=post action="/cgi-bin/example.cgi">


Select an option:
Select an option:<br>
Selection 1
<input type="checkbox" name="selection"> Selection 1
<input type="checkbox" name="selection" checked>
Selection 2
Selection 2
<input type="checkbox" name="selection"> Selection 3
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>
Example 2:

Example 1: (Tip)

List item 1

o List item 2

List item 3

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>

HTML Link

<link>

i.

List item 1

ii.

List item 2

iii.

List item 3

iv.

List item 4

<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
(Tip)

HTML Scrolling
Text

HTML Menu

<marquee> <marquee bgcolor="#cccccc" loop="-1"


(Internet
scrollamount="2" width="100%">Example
Explorer)
Marquee</marquee>

<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

o List item 2

List item 3

HTML Meta

<meta>

<meta name="Description" content="Description of


your site">
Nothing will show (Tip)
<meta name="keywords" content="keywords describing
your site">

HTML Meta

<meta>

<meta HTTP-EQUIV="Refresh"
CONTENT="4;URL=http://www.yourdomain.com/">

Nothing will show (Tip)

HTML Meta

<meta>

<meta http-equiv="Pragma" content="no-cache">

Nothing will show (Tip)

HTML Meta

<meta>

<meta name="rating" content="General">

Nothing will show (Tip)

HTML Meta

<meta>

<meta name="robots" content="all">

Nothing will show (Tip)

HTML Meta

<meta>

<meta name="robots" content="noindex,follow">

Nothing will show (Tip)

Name
HTML Ordered
List

HTML Tag
<ol>

HTML Code Example


Numbered
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>
Numbered Special Start
<ol start="5">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>
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>

Browser View
Numbered
1. List item 1
2. List item 2
3. List item 3
4. List item 4
Numbered Special Start
5. List item 1
6. List item 2
7. List item 3
8. List item 4
Lowercase Letters
a. List item 1
b. List item 2
c. List item 3
d. List item 4

<li>List item 2</li>


<li>List item 3</li>
<li>List item 4</li>
</ol>

Capital Letters
A. List item 1
B. List item 2

Capital Letters Special Start


C. List item 3
<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>

D. List item 4
Capital Letters Special Start
C. List item 1

Lowercase Roman Numerals

D. List item 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>

E. List item 3

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>

F. List item 4
Lowercase Roman Numerals
i.

List item 1

ii.

List item 2

iii.

List item 3

iv.

List item 4

Capital Roman Numerals


I.

List item 1

II.

List item 2

III.

List item 3

IV.

List item 4

Capital Roman Numerals Special Start


<li>List item 3</li>
<li>List item 4</li>
</ol>

HTML Listbox
Option (Drop
Down Box)

<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 Mailto
Email Link

<a>

<a href="mailto:[email protected]">Email
Link</a>

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">

VII.

List item 1

VIII.

List item 2

IX.

List item 3

X.

List item 4

Select an option: (Tip)

Email Link
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:<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>

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

<strong>

<strong>Example</strong>

Example

Example 1:

Example 1: (Tip)

HTML Table

<table>

<table border="4" cellpadding="2" cellspacing="2"


width="100%">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>

(Tip)

Column 1

Column 2

Example 2: (Tip)
Column 1

Column 2

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>

HTML Table
Data

HTML Table
Header

<td>

<th>

Example 3:

Example 3: (Tip)

<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>

Column 1
Row 2

Column 2
Row 2

Column 1

Column 2

<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>

Column 1
Row 2
Row 3
Row 4

Column 2
Row 2
Row 3
Row 4

Column 3
Row 2
Row 3
Row 4

<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>
HTML
Document Title

<title>

<title>Title of your HTML page</title>

Title of your web page will be viewable in the


title bar. (Tip)

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

HTML Teletype

<tt>

<tt>Example</tt>

Example

HTML Underline <u>

<u>Example</u>

Example

HTML
Unordered List

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

Example 1:

<ul>

List item 1

List item 2

Column 2

<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>

http://www.web-source.net/html_codes_chart.htm

for detailed sample of codes and output


http://www.quackit.com/html/tutorial/html_links.cfm
http://www.quackit.com/html/examples/

Example 2:

List item 1

List item 2
o List item 3
o List item 4

You might also like