HTML Tags

If you're doing business on the Internet, taking the time to learn how to design your own web site
and write your

own HTML code (hypertext markup language will play a ma!or role in your success" #ot only will learning
HTML coding pro$ide you with the freedom to update your own HTML documents, but it will also sa$e you a
great deal of money, as you will be able to a$oid hiring a professional web designer"
If you're looking for some HTML tags to spice up your web site, you'$e come to the right place" %ou will find a
$ariety of HTML codes and tips to assist you below"
Howe$er, before re$iewing the HTML tags, if you're new to HTML and web site design, the following section
will assist you in creating an HTML web page" &or 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
' web page is created using a language called, Hypertext Markup Language, better known as HTML (ode" %ou
can write your own coding within a plain text editor, such as #ote )ad, or use an HTML editor, which will write
the code for you"
HTML codes, also referred to as HTML 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 si,e-.+
'n element may also be followed by attributes, which are words describing the properties of the element, and
further instruct the browser"
*font size-.+
'ttributes are only contained in the opening HTML tags to the right of the element and are separated by a space
and followed by an e/ual (- sign"
The value follows the e/ual sign and is enclosed in /uotes"
*font si,e-2+
Basic HTML Document Code Structure
0egin writing your HTML tags by creating your document's basic layout" (opy and paste this code into your
text or HTML editor"
*html+
*head+
*title+%our )age Title*1title+
*1head+
*body+
This area will contain e$erything that will be $isible through a web browser, such as text and
graphics" 'll of the information will be HTML coded"
&or a complete list of HTML codes, tags and examples, see the HTML chart below"
*1body+
*1html+
<html 2 0egins your HTML document"
<head 2 (ontains information about the page such as the TITL3, M3T' tags for proper 4earch 3ngine
indexing, 4T%L3 tags, which determine the page layout, and 5a$a4cript coding for special effects"
<title 2 The TITL3 of your page" This will be $isible in the title bar of the $iewers6 browser"
<!title 2 (loses the HTML *title+ tag"
<!head 2 (loses the HTML *head+ tag"
<bod" 2 This is where you will begin writing your document and placing your HTML codes"
<!bod" 2 (loses the HTML *body+ tag"
<!html 2 (loses 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 #ame Code $%am&le Bro'ser (ie'
*722 comment
<)**This can be $iewed in the HTML part of a
document**
#othing will show (Tip
*a 2 anchor
<a href+8http911www"domain"com18+
:isit ;ur 4ite<!a
:isit ;ur 4ite (Tip
*b+ bold <b3xample<!b $%am&le
*big+ big ,te%t- <big3xample<!big 3xample (Tip
*body+
bod" of
HTML
document
<bod"The content of your HTML page<!bod"
(ontents of your web page
(Tip
*br+ line brea.
The contents of your page<brThe contents of your
page
The contents of your web
page
The contents of your web
page
*center+ center <centerThis will center your contents<!center This will center your
contents
*dd+
definition
descri&tion
*dl+
*dt+<efinition Term*1dt+
<ddDefinition of the term<!dd
<ddDefinition of the term<!dd
*1dl+
<efinition Term
Definition of the
term
<efinition Term
Definition of the
term
*dl+
definition
list
<dl
*dd+<efinition of the term*1dd+
<!dl
<efinition Term
<efinition of the
term
<efinition Term
<efinition of the
term
*dt+
definition
term
*dl+
<dtDefinition Term<!dt
<dtDefinition Term<!dt
*1dl+
Definition Term
<efinition of the
term
Definition Term
<efinition of the
term
*em+ em&hasis
This is an <em3xample<!em of using the emphasis
tag
This is an Example of using
the emphasis tag
*embed+
embed
ob/ect
<embed src-8yourfile"mid8 width-8=>>?8
height-8@>8 align-8center8+ (Tip
*embed+ embed
ob/ect
*embed src-8yourfile"mid8 autostart-8true8
hidden-8false8 loop-8false8+
*noembed+*bgsound src-8yourfile"mid8
loop-8=8+*1noembed+
*bgsound
src-8wonderfu"mid8
autostart-8false8
loop-8=8 1+
Music will begin playing
when your page is loaded
and will only play one time"
' control panel will be
displayed to enable your
$isitors to stop the music"
*font+ font <font face-8Times #ew Aoman8+3xample<!font 3xample (Tip
*font+ font
<font face-8Times #ew Aoman8
si,e-8B8+3xample<!font
3xample (Tip
*font+ font
<font face-8Times #ew Aoman8 si,e-8CD8
color-8Eff>>>>8+3xample<!font
3xample (Tip
*form+ form
<form action-8mailto9youFyourdomain"com8+
#ame9 *input name-8#ame8 $alue-88
si,e-8=>8+*br+
3mail9 *input name-83mail8 $alue-88
si,e-8=>8+*br+
*center+*input type-8submit8+*1center+
<!form
#ame9 (Tip
3mail9
Submit
*h=+
*h.+
*hD+
*hB+
*hG+
*h@+
heading 0
heading 2
heading 1
heading 2
heading 3
heading 4
<h0Heading = 3xample<!h0
<h2Heading . 3xample<!h2
<h1Heading D 3xample<!h1
<h2Heading B 3xample<!h2
<h3Heading G 3xample<!h3
<h4Heading @ 3xample<!h4
*head+
heading of
HTML
document
<head(ontains elements describing the
document<!head
#othing will show
*hr+
horizontal
rule
<hr !
(Tip
*hr+
horizontal
rule
<hr width-8G>?8 si,e-8D8 1+
*hr+
horizontal
rule
<hr width-8G>?8 si,e-8D8 noshade 1+
*hr+
(Internet
3xplorer
horizontal
rule
<hr width-8HG?8 color-8Eff>>>>8 si,e-8B8 1+
*hr+
(Internet
3xplorer
horizontal
rule
<hr width-8.G?8 color-8E@@IIff8 si,e-8@8 1+
*html+
h"&erte%t
mar.u&
language
<html
*head+
*meta+
*title+Title of your web page*1title+
*1head+
*body+HTML 'eb &age contents
*1body+
<!html
*i+ italic <i3xample<!i Example
*img+ image
<img src-83arth"gif8 width-8B=8 height-8B=8
border-8>8 alt-8text describing the image8 1+
(Tip
*input+ in&ut field
3xample =9
*form method-post action-81cgi2bin1example"cgi8+
<in&ut type-8text8 si,e-8=>8 maxlength-8D>8+
<in&ut type-84ubmit8 $alue-84ubmit8+
*1form+
3xample =9 (Tip
Submit
*input+
(Internet
3xplorer
in&ut field
3xample .9
<in&ut type-8text8 style-8color9 EffffffJ font2family9
:erdanaJ font2weight9 boldJ font2si,e9 =.pxJ
background2color9 EH.aBd.J8 si,e-8=>8
maxlength-8D>8+
*1form+
3xample .9 (Tip
Submit
*input+ in&ut field
3xample D9
*table border-8>8 cellspacing-8>8
cellpadding-8.8+*tr+*td bgcolor-8EKB@Dff8+*input
type-8text8 si,e-8=>8 maxlength-8D>8+*1td+*td
bgcolor-8EKB@Dff8 $align-8Middle8+ *input
type-8image8 name-8submit8
src-8yourimage"gif8+*1td+*1tr+ *1table+
*1form+
3xample D9 (Tip
*input+ in&ut field
3xample B9
3nter %our (omments9*br+
*textarea wrap-8$irtual8 name-8(omments8 rows-D
cols-.> maxlength-=>>+*1textarea+*br+
<in&ut type-8Aeset8 $alue-8(lear8+
*1form+
3xample B9 (Tip
Submit Clear
*input+ in&ut field
3xample G9
*center+
4elect an option9
*select+
*option +option =*1option+
*option selected+option .*1option+
*option+option D*1option+
*option+option B*1option+
*option+option G*1option+
*option+option @*1option+
*1select+*br+
<in&ut type-84ubmit8 $alue-84ubmit8+*1center+
*1form+
3xample G9 Tip
4elect an option9
Submit
*input+ in&ut field
3xample @9
4elect an option9*br+
<in&ut type-8radio8 name-8option8+ ;ption =
<in&ut type-8radio8 name-8option8 checked+ ;ption
.
<in&ut type-8radio8 name-8option8+ ;ption D
*br+
*br+
4elect an option9*br+
<in&ut type-8checkbox8 name-8selection8+ 4election
=
<in&ut type-8checkbox8 name-8selection8 checked+
4election .
<in&ut type-8checkbox8 name-8selection8+ 4election
D
*1form+
3xample @9 (Tip
4elect an option9
;ption =
;ption .
;ption D
4elect an option9
4election =
4election .
4election D
Submit
*li+ list item 3xample =9 3xample =9 (Tip
*menu+
<li type-8disc8+List item =<!li
<li type-8circle8+List item .<!li
<li type-8s/uare8+List item D<!li
*1M3#L+
3xample .9
*ol type-8i8+
<liList item =<!li
<liList item .<!li
<liList item D<!li
<liList item B<!li
*1ol+
List item 0
o List item 2
List item 1
3xample .9
i" List item 0
ii" List item 2
iii" List item 1
i$" List item 2
*link+ lin.
*head+
*link rel-8stylesheet8 type-8text1css8
href-8style"css8 1+
*1head+
*mar/uee+
(Internet
3xplorer
scrolling
te%t
<mar5uee bgcolor-8Ecccccc8 loop-82=8
scrollamount-8.8 width-8=>>?8+3xample
Mar/uee<!mar5uee
(Tip
*menu+ menu
<menu
*li type-8disc8+List item =*1li+
*li type-8circle8+List item .*1li+
*li type-8s/uare8+List item D*1li+
<!menu
List item =
o List item .
List item D
*meta+ meta
<meta name-8<escription8 content-8<escription of
your site8+
<meta name-8keywords8 content-8keywords
describing your site8+
*meta+ meta
<meta HTT)23MLI:-8Aefresh8
(;#T3#T-8BJLAL-http911www"yourdomain"com18+
*meta+ meta <meta http2e/ui$-8)ragma8 content-8no2cache8+ #othing will show (Tip
*meta+ meta <meta name-8rating8 content-8Neneral8+ #othing will show (Tip
*meta+ meta <meta name-8robots8 content-8all8+ #othing will show (Tip
*meta+ meta <meta name-8robots8 content-8noindex,follow8+ #othing will show (Tip
*ol+ ordered list #umbered
<ol
#umbered
=" List item =
." List item .
*li+List item =*1li+
*li+List item .*1li+
*li+List item D*1li+
*li+List item B*1li+
<!ol
#umbered S&ecial Start
<ol start+636
<!ol
Lo'ercase Letters
<ol t"&e+6a6
<!ol
Ca&ital Letters
<ol t"&e+676
<!ol
Ca&ital Letters S&ecial Start
<ol t"&e+676 start+616
<!ol
Lo'ercase 8oman #umerals
<ol t"&e+6i6
D" List item D
B" List item B
#umbered S&ecial Start
G" List item =
@" List item .
H" List item D
K" List item B
Lo'ercase Letters
a" List item =
b" List item .
c" List item D
d" List item B
Ca&ital Letters
'" List item =
0" List item .
(" List item D
<" List item B
Ca&ital Letters S&ecial
Start
(" List item =
<" List item .
3" List item D
&" List item B
Lo'ercase 8oman
#umerals
i" List item =
ii" List item .
iii" List item D
i$" List item B
Ca&ital 8oman #umerals
I" List item =
II" List item .
III" List item D
<!ol
<ol t"&e+696
<!ol
Ca&ital 8oman #umerals S&ecial Start
<ol t"&e+696 start+6:6
<!ol
I:" List item B
S&ecial Start
:II" List item =
:III" List item .
IO" List item D
O" List item B
*option+
listbo%
o&tion
*center+
4elect an option9
*select+
<o&tionoption =<!o&tion
<o&tion selectedoption .<!o&tion
<o&tionoption D<!o&tion
<o&tionoption B<!o&tion
<o&tionoption G<!o&tion
<o&tionoption @<!o&tion
*1select+*br+
*1center+
*1form+
4elect an option9 (Tip
*p+ &aragra&h This is an example displaying the use of the paragraph
tag" *p+ This will create a line break and a space
between lines"
'ttributes9
3xample =9*br+
*br+
<& align+6left6
This is an example
displaying the use of the
paragraph tag"
This will create a line break
and a space between lines"
'ttributes9
This is an example*br+
displaying the use*br+
of the paragraph tag"*br+
*br+
3xample .9*br+
*br+
<& align+6right6
of the paragraph tag"*br+
*br+
3xample D9*br+
*br+
<& align+6center6
of the paragraph tag"
3xample =9
This is an example
displaying the use
3xample .9
This is an example
displaying the use
3xample D9
This is an example
displaying the use
*small+ small ,te%t- <small3xample<!small 3xample (Tip
*strike+ deleted te%t <stri.e3xample<!stri.e 3xample
*strong+
strong
em&hasis
<strong3xample<!strong $%am&le
*table+ table
3xample =9
<table border+8B8 cellpadding-8.8 cellspacing-8.8
width-8=>>?8+
*tr+
*td+(olumn =*1td+
*td+(olumn .*1td+
*1tr+
<!table
3xample .9 (Internet 3xplorer
<table border+8.8 bordercolor-8EDD@@II8
cellpadding-8.8 cellspacing-8.8 width-8=>>?8+
*tr+
*td+(olumn =*1td+
*td+(olumn .*1td+
*1tr+
<!table
3xample D9
3xample =9 (Tip
(olumn = (olumn .
3xample .9 (Tip
(olumn = (olumn .
3xample D9 (Tip
(olumn = (olumn .
Aow . Aow .
<table cell&adding+8.8 cellspacing-8.8
width-8=>>?8+
*tr+
*td bgcolor-8Ecccccc8+(olumn =*1td+
*td bgcolor-8Ecccccc8+(olumn .*1td+
*1tr+
*tr+
*td+Aow .*1td+
*td+Aow .*1td+
*1tr+
<!table
*td+ table data
*table border-8.8 cellpadding-8.8 cellspacing-8.8
width-8=>>?8+
*tr+
<tdColumn 0<!td
<tdColumn 2<!td
*1tr+
*1table+
Column 0 Column 2
*th+
table
header
*di$ align-8center8+
*table+
*tr+
<thColumn 0<!th
<thColumn 2<!th
<thColumn 1<!th
*1tr+
*tr+
*td+Aow .*1td+
*td+Aow .*1td+
*td+Aow .*1td+
*1tr+
*tr+
*td+Aow D*1td+
*td+Aow D*1td+
*td+Aow D*1td+
*1tr+
*tr+
*td+Aow B*1td+
*td+Aow B*1td+
*td+Aow B*1td+
*1tr+
*1table+
*1di$+
Column
0
Column
2
Column
1
Aow . Aow . Aow .
Aow D Aow D Aow D
Aow B Aow B Aow B
*title+
document
title
<titleTitle of your HTML &age<!title
Title of your web page will
be $iewable in the title bar"
(Tip
*tr+ table ro'
*table border-8.8 cellpadding-8.8 cellspacing-8.8
width-8=>>?8+
<tr
*td+(olumn =*1td+
*td+(olumn .*1td+
<!tr
*1table+
Column 0 Column 2
*tt+ telet"&e <tt3xample<!tt
Example
*u+ underline *u+3xample*1u+ 3xample
*ul+
unordered
list
3xample =9*br+
*br+
<ul
<!ul
*br+
3xample .9*br+
<ul t"&e+6disc6
<ul t"&e+6circle6
<!ul
<!ul
;hat is HTML<
HTML is a language for describing web pages"
HTML stands for Hyper Text Markup Language
HTML is not a programming language, it is a mar.u& language
' markup language is a set of mar.u& tags
HTML uses mar.u& tags to describe web pages
HTML Tags
HTML markup tags are usually called HTML tags
HTML tags are keywords surrounded by angle brac.ets like *html+
HTML tags normally come in &airs like *b+ and *1b+
The first tag in a pair is the start tag= the second tag is the end tag
4tart and end tags are also called o&ening tags and closing tags
HTML Documents + ;eb Pages
HTML documents describe 'eb &ages
HTML documents contain HTML tags and plain text
HTML documents are also called 'eb &ages
The purpose of a web browser (like Internet 3xplorer or &irefox is to read HTML documents and display them
as web pages" The browser does not display the HTML tags, but uses the tags to interpret the content of the
page9
*html+
*body+
*h=+My &irst Heading*1h=+
*p+My first paragraph"*1p+
*1body+
*1html+
$%am&le $%&lained
The text between *html+ and *1html+ describes the web page
The text between *body+ and *1body+ is the $isible page content
The text between *h=+ and *1h=+ is displayed as a heading
The text between *p+ and *1p+ is displayed as a paragraph

HTML Tags

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Tags

Uploaded by

Copyright:

Available Formats

If you're doing business on the Internet, taking the time to learn how to design your own web site

and write your

You might also like