M a i l a n d W e b S e r v i c e s P a g e | 1

L e s s o n 8 C r e a t e H T M L d o c u m e n t s a n d e n h a n c e t h e m w it h b r o w s e r e x t e n s io n s

H T M L is t h e s t a n d a r d m a r k u p la n g u a g e f o r W e b p a g e s .

C o u rs e L e a rn in g O u tc o m e s
A t t h e e n d o f t h e le s s o n , y o u s h o u ld b e a b le t o :
1. D e f in e H T M L a n d u n d e r s t a n d h o w it w o r k s
2. E x a m in e t h e t o o ls u s e d t o c r e a t e H T M L d o c u m e n t s
3. D e s c r ib e t a g s , a t tr ib u t e s , a n d a n c h o r s
4. C re a te a n H T M L D o c u m e n t

E x a m p le
< ! D O C T Y P E h t m l>
< h t m l>
< head>
< t it le > P a g e T it le < / t it le >
< /h e a d >
< body>
< h 1 > T h is is a H e a d in g < / h 1 >
< p > T h is is a p a r a g r a p h . < / p >
< /b o d y >
< / h t m l>

E x a m p le E x p la in e d
T h e < ! D O C T Y P E h t m l> d e c la r a t io n d e f in e s t h is d o c u m e n t t o b e H T M L 5
T h e < h t m l> e le m e n t is t h e r o o t e le m e n t o f a n H T M L p a g e
T h e < h e a d > e le m e n t c o n t a in s m e t a in f o r m a t io n a b o u t t h e d o c u m e n t
T h e < t it le > e le m e n t s p e c if ie s a t it le f o r t h e d o c u m e n t
T h e < b o d y > e le m e n t c o n t a in s t h e v is ib le p a g e c o n t e n t
T h e < h 1 > e le m e n t d e f in e s a la r g e h e a d in g
T h e < p > e le m e n t d e f in e s a p a r a g r a p h

H TM L Tags
H T M L t a g s a r e e le m e n t n a m e s s u r r o u n d e d b y a n g le b r a c k e t s :
< t a g n a m e > c o n t e n t g o e s h e r e .. . < / t a g n a m e >
 H T M L t a g s n o r m a lly c o m e i n p a i r s lik e < p > a n d < / p >
 T h e f ir s t t a g in a p a ir is t h e s t a r t t a g , t h e s e c o n d t a g is t h e e n d t a g
 T h e e n d t a g is w r it t e n lik e t h e s t a r t t a g , b u t w it h a f o r w a r d s l a s h in s e r t e d b e f o r e
th e ta g n a m e

W eb B ro w sers
T h e p u r p o s e o f a w e b b r o w s e r ( C h r o m e , E d g e , F ir e f o x , S a f a r i) is t o r e a d H T M L
d o c u m e n t s a n d d is p la y t h e m .
T h e b r o w s e r d o e s n o t d is p la y t h e H T M L t a g s , b u t u s e s t h e m t o d e t e r m in e h o w t o
d is p la y t h e d o c u m e n t :

J e n n if e r R o x a s -M a g b a n la c , M I T
M a i l a n d W e b S e r v i c e s P a g e | 2

H T M L P a g e S tru c tu re
B e lo w is a v is u a liz a t io n o f a n H T M L p a g e s tr u c t u r e :
< h t m l>
< head>
< t it le > P a g e t it le < / t it le >
< /h e a d >
< body>
< h 1 > T h is is a h e a d in g < / h 1 >
< p > T h is is a p a r a g r a p h . < / p >
< p > T h is is a n o t h e r p a r a g r a p h . < / p >
< /b o d y >
< / h t m l>

T h e < !D O C T Y P E > D e c la r a tio n

T h e < ! D O C T Y P E > d e c la r a t io n r e p r e s e n t s t h e d o c u m e n t t y p e , a n d h e lp s b r o w s e r s t o
d is p la y w e b p a g e s c o r r e c t ly .
I t m u s t o n ly a p p e a r o n c e , a t t h e t o p o f t h e p a g e ( b e f o r e a n y H T M L t a g s ) .
T h e < ! D O C T Y P E > d e c la r a t io n is n o t c a s e s e n s it iv e .
T h e < ! D O C T Y P E > d e c la r a t io n f o r H T M L 5 is :
< ! D O C T Y P E h t m l>

H T M L V e rs io n s
S in c e t h e e a r ly d a y s o f t h e w e b , t h e r e h a v e b e e n m a n y v e r s io n s o f H T M L :

V e rs io n Y ear

H TM L 1991

H T M L 2 .0 1995

H T M L 3 .2 1997

H T M L 4 .0 1 1999

X H TM L 2000

H TM L5 2014

J e n n if e r R o x a s -M a g b a n la c , M I T
M a i l a n d W e b S e r v i c e s P a g e | 3

H T M L E d ito rs
W r it e H T M L U s in g N o t e p a d o r T e x t E d it
W e b p a g e s c a n b e c r e a t e d a n d m o d if ie d b y u s in g p r o f e s s io n a l H T M L e d it o r s .
H o w e v e r , f o r le a r n in g H T M L w e r e c o m m e n d a s im p le t e x t e d it o r lik e N o t e p a d ( P C ) o r
T e x t E d it ( M a c ) .
W e b e lie v e u s in g a s im p le t e x t e d it o r is a g o o d w a y t o le a r n H T M L .
F o llo w t h e s t e p s b e lo w t o c r e a t e y o u r f ir s t w e b p a g e w it h N o t e p a d o r T e x t E d it .

S te p 1 : O p e n N o te p a d (P C )
W in d o w s 8 o r la te r:
O p e n t h e S t a r t S c r e e n ( t h e w in d o w s y m b o l a t t h e b o tt o m le ft o n y o u r s c r e e n ) .
T y p e N o te p a d .
W in d o w s 7 o r e a rlie r:
O p e n S ta rt > P ro g ra m s > A c c e s s o rie s > N o te p a d

S te p 1 : O p e n T e x tE d it (M a c )
O p e n F in d e r > A p p lic a tio n s > T e x tE d it
A ls o c h a n g e s o m e p r e f e r e n c e s t o g e t t h e a p p lic a t io n t o s a v e f ile s
c o r r e c t ly . I n P r e f e r e n c e s > F o r m a t > c h o o s e " P l a i n T e x t "
T h e n u n d e r " O p e n a n d S a v e " , c h e c k t h e b o x t h a t s a y s " D is p la y H T M L f ile s a s H T M L
c o d e in s t e a d o f f o r m a tt e d t e x t " .
Then open a new d o c u m e n t to p la c e th e c o d e .

S te p 2 : W rite S o m e H T M L
W r it e o r c o p y s o m e H T M L in t o N o t e p a d .
< ! D O C T Y P E h t m l>
< h t m l>
< body>
< h 1 > M y F ir s t H e a d in g < / h 1 >
< p > M y f ir s t p a r a g r a p h . < / p >
< /b o d y >
< / h t m l>

S te p 3 : S a v e th e H T M L P a g e
S a v e t h e f ile o n y o u r c o m p u t e r . S e le c t F i l e > S a v e a s in t h e N o t e p a d m e n u .

J e n n if e r R o x a s -M a g b a n la c , M I T
M a i l a n d W e b S e r v i c e s P a g e | 4

N a m e t h e f ile " i n d e x . h t m " a n d s e t t h e e n c o d in g t o U T F - 8 ( w h ic h is t h e p r e f e r r e d

e n c o d in g f o r H T M L f ile s ) .

Y o u c a n u s e e it h e r . h t m o r . h t m l a s f ile e x t e n s io n . T h e r e is n o d if f e r e n c e , it is u p t o y o u .

S te p 4 : V ie w th e H T M L P a g e in Y o u r B ro w s e r
O p e n t h e s a v e d H T M L f ile in y o u r f a v o r it e b r o w s e r ( d o u b le c lic k o n t h e f ile , o r r ig h t - c lic k
- a n d c h o o s e " O p e n w it h " ) .
T h e r e s u lt w ill lo o k m u c h lik e t h is :

E x a m p le
< ! D O C T Y P E h t m l>
< h t m l>
< head>
< t it le > P a g e T it le < / t it le >
< /h e a d >
< body>
< h 1 > T h is is a H e a d in g < / h 1 >
< p > T h is is a p a r a g r a p h . < / p >
< /b o d y >
< / h t m l>

H T M L B a s ic E x a m p le s
H T M L D o c u m e n ts
A ll H T M L d o c u m e n t s m u s t s t a r t w it h a d o c u m e n t t y p e d e c la r a t io n : < ! D O C T Y P E h t m l> .

J e n n if e r R o x a s -M a g b a n la c , M I T
M a i l a n d W e b S e r v i c e s P a g e | 5

T h e H T M L d o c u m e n t it s e lf b e g in s w it h < h t m l> a n d e n d s w it h < / h t m l> .

T h e v is ib l e p a r t o f t h e H T M L d o c u m e n t is b e t w e e n < b o d y > a n d < / b o d y > .

< ! D O C T Y P E h t m l>
< h t m l>
< body>

< h 1 > M y F ir s t H e a d in g < / h 1 >

< p > M y f ir s t p a r a g r a p h . < / p >

< /b o d y >
< / h t m l>

H T M L H e a d in g s
H T M L h e a d in g s a r e d e f in e d w it h t h e < h 1 > t o < h 6 > t a g s .
< h 1 > d e f in e s t h e m o s t im p o r t a n t h e a d in g . < h 6 > d e f in e s t h e le a s t im p o r t a n t h e a d in g :

E x a m p le
< h 1 > T h is is h e a d in g 1 < / h 1 >
< h 2 > T h is is h e a d in g 2 < / h 2 >
< h 3 > T h is is h e a d in g 3 < / h 3 >

H T M L P arag rap h s
H T M L p a r a g r a p h s a r e d e f in e d w it h t h e < p > t a g :
E x a m p le
< p > T h is is a p a r a g r a p h . < / p >
< p > T h is is a n o t h e r p a r a g r a p h . < / p >

H T M L L in k s
H T M L lin k s a r e d e f in e d w it h t h e < a > t a g :

E x a m p le
< a h r e f= " h t t p s : / / w w w . m y m a il. c o m " > T h is is a lin k < / a >
T h e lin k 's d e s t in a t io n is s p e c if ie d in t h e h r e f a t tr ib u t e .
A t t r ib u t e s a r e u s e d t o p r o v id e a d d it io n a l in f o r m a t io n a b o u t H T M L e le m e n t s .
Y o u w il l le a r n m o r e a b o u t a tt r ib u t e s in a la t e r c h a p t e r .

H T M L Im a g e s
H T M L im a g e s a r e d e f in e d w it h t h e < im g > t a g .
T h e s o u r c e f ile ( s r c ) , a lt e r n a t iv e t e x t ( a lt ) , w id t h , a n d h e ig h t a r e p r o v id e d a s a tt r ib u t e s :

E x a m p le
< im g s r c = " m y im g . jp g " a lt = " m y m a il. c o m " w id t h = " 1 0 4 " h e ig h t = " 1 4 2 " >

H T M L B u tto n s
H T M L b u t t o n s a r e d e f in e d w it h t h e < b u tt o n > t a g :

J e n n if e r R o x a s -M a g b a n la c , M I T
M a i l a n d W e b S e r v i c e s P a g e | 6

E x a m p le
< b u t t o n > C lic k m e < / b u tt o n >

H T M L L is ts
H T M L lis t s a r e d e f in e d w it h t h e < u l> ( u n o r d e r e d / b u lle t lis t ) o r
t h e < o l> ( o r d e r e d / n u m b e r e d lis t ) t a g , f o llo w e d b y < li> t a g s ( lis t it e m s ) :

E x a m p le
< u l>
< li> C o f f e e < / li>
< li> T e a < / li>
< li> M ilk < / li>
< / u l>
< o l>
< li> C o f f e e < / li>
< li> T e a < / li>
< li> M ilk < / li>
< / o l>

H T M L E le m e n ts
H T M L E le m e n t s
A n H T M L e le m e n t u s u a lly c o n s is t s o f a s t a r t t a g a n d a n e n d t a g , w it h t h e c o n t e n t
in s e r t e d in b e t w e e n :
< t a g n a m e > C o n t e n t g o e s h e r e . .. < /t a g n a m e >

T h e H T M L e l e m e n t is e v e r y t h in g f r o m t h e s t a r t t a g t o t h e e n d t a g :
< p > M y f ir s t p a r a g r a p h . < / p >

S ta rt ta g E le m e n t c o n te n t E n d ta g

< h1> M y F ir s t H e a d in g < /h 1 >

< p> M y f ir s t p a r a g r a p h . < /p >

< b r>

H T M L e le m e n t s w it h n o c o n t e n t a r e c a lle d e m p t y e le m e n t s . E m p t y e le m e n t s d o n o t
h a v e a n e n d t a g , s u c h a s t h e < b r > e le m e n t ( w h ic h in d ic a t e s a lin e b r e a k ) .

N e s te d H T M L E le m e n ts
H T M L e le m e n t s c a n b e n e s t e d ( e le m e n t s c a n c o n t a in e le m e n t s ) .
A ll H T M L d o c u m e n t s c o n s is t o f n e s t e d H T M L e le m e n t s .
T h is e x a m p le c o n t a in s f o u r H T M L e le m e n t s :

E x a m p le
< ! D O C T Y P E h t m l>
< h t m l>
< body>
< h 1 > M y F ir s t H e a d in g < / h 1 >
< p > M y f ir s t p a r a g r a p h . < / p >

J e n n if e r R o x a s -M a g b a n la c , M I T
M a i l a n d W e b S e r v i c e s P a g e | 7

< /b o d y >
< / h t m l>

E x a m p le E x p la in e d
T h e < h t m l> e le m e n t d e f in e s t h e w h o l e d o c u m e n t .
I t h a s a s t a r t t a g < h tm l> a n d a n e n d t a g < / h t m l> .
I n s id e t h e < h tm l> e le m e n t is t h e < b o d y > e le m e n t .
< h t m l>
< body>
< h 1 > M y F ir s t H e a d in g < / h 1 >
< p > M y f ir s t p a r a g r a p h . < / p >
< /b o d y >
< / h t m l>

T h e < b o d y > e le m e n t d e f in e s t h e d o c u m e n t b o d y .
It h a s a s ta rt ta g < b o d y > a n d a n e n d ta g < /b o d y > .
I n s id e t h e < b o d y > e le m e n t is t w o o t h e r H T M L e le m e n t s : < h 1 > a n d < p > .

< body>
< h 1 > M y F ir s t H e a d in g < / h 1 >
< p > M y f ir s t p a r a g r a p h . < / p >
< /b o d y >

T h e < h 1 > e le m e n t d e f in e s a h e a d i n g .
It h a s a s ta rt ta g < h 1 > a n d a n e n d ta g < /h 1 > .

T h e e le m e n t c o n t e n t is : M y F ir s t H e a d in g .
< h 1 > M y F ir s t H e a d in g < / h 1 >

T h e < p > e le m e n t d e f in e s a p a r a g r a p h .
It h a s a s ta rt ta g < p > a n d a n e n d ta g < /p > .

T h e e le m e n t c o n t e n t is : M y f ir s t p a r a g r a p h .
< p > M y f ir s t p a r a g r a p h . < / p >

D o N o t F o rg e t th e E n d T a g
S o m e H T M L e le m e n t s w ill d is p la y c o r r e c t ly , e v e n if y o u f o r g e t t h e e n d t a g :

E x a m p le
< h t m l>
< body>
< p > T h is is a p a r a g r a p h
< p > T h is is a p a r a g r a p h
< /b o d y >
< / h t m l>

J e n n if e r R o x a s -M a g b a n la c , M I T
M a i l a n d W e b S e r v i c e s P a g e | 8

E m p ty H T M L E le m e n ts
H T M L e le m e n t s w it h n o c o n t e n t a r e c a lle d e m p t y e le m e n t s .
< b r > is a n e m p t y e le m e n t w it h o u t a c lo s in g t a g ( t h e < b r > t a g d e f in e s a lin e b r e a k ) :
E x a m p le
< p > T h is is a < b r > p a r a g r a p h w it h a lin e b r e a k . < / p >

E m p t y e le m e n t s c a n b e " c lo s e d " in t h e o p e n in g t a g lik e t h is : < b r / > .

H T M L 5 d o e s n o t r e q u ir e e m p t y e le m e n t s t o b e c lo s e d . B u t if y o u w a n t s t r ic t e r v a lid a t io n ,
o r if y o u n e e d t o m a k e y o u r d o c u m e n t r e a d a b le b y X M L p a r s e r s , y o u m u s t c lo s e a ll
H T M L e le m e n t s p r o p e r ly .

H T M L Is N o t C a s e S e n s itiv e
H T M L t a g s a r e n o t c a s e s e n s it iv e : < P > m e a n s t h e s a m e a s < p > .
T h e H T M L 5 s t a n d a r d d o e s n o t r e q u ir e lo w e r c a s e t a g s , b u t
W 3 C r e c o m m e n d s lo w e r c a s e in H T M L , a n d d e m a n d s lo w e r c a s e f o r s t r ic t e r d o c u m e n t
t y p e s lik e X H T M L .

H T M L A ttrib u te s
 A ll H T M L e le m e n t s c a n h a v e a t t r i b u t e s
 A t t r ib u t e s p r o v id e a d d i t i o n a l i n f o r m a t i o n a b o u t a n e le m e n t
 A t t r ib u t e s a r e a lw a y s s p e c if ie d in t h e s t a r t t a g
 A t t r ib u t e s u s u a lly c o m e in n a m e / v a lu e p a ir s lik e : n a m e = " v a l u e "

T h e h r e f A t t r ib u t e
H T M L lin k s a r e d e f in e d w it h t h e < a > t a g . T h e lin k a d d r e s s is s p e c if ie d in
t h e h r e f a t tr ib u t e :

E x a m p le
< a h r e f= " h t t p s : / / w w w . m y m a il. c o m " > T h is is a lin k < / a >

T h e s rc A ttrib u te
H T M L im a g e s a r e d e f in e d w it h t h e < im g > t a g .
T h e f ile n a m e o f t h e im a g e s o u r c e is s p e c if ie d in t h e s r c a t tr ib u t e :

E x a m p le < im g s r c = " im g _ g irl.jp g " >

T h e w id th a n d h e ig h t A ttrib u te s
H T M L im a g e s a ls o h a v e w id t h a n d h e ig h t a t t r ib u t e s , w h ic h s p e c if ie s t h e w id t h a n d
h e ig h t o f t h e im a g e :

E x a m p le < im g s r c = " im g _ g irl.jp g " w id th = " 5 0 0 " h e ig h t = " 6 0 0 " >

T h e w id t h a n d h e ig h t a r e s p e c if ie d in p ix e ls b y d e f a u lt ; s o w id t h = " 5 0 0 " m e a n s 5 0 0 p ix e ls
w id e .

T h e a lt A ttrib u te
T h e a lt a t t r ib u t e s p e c if ie s a n a lt e r n a t iv e t e x t t o b e u s e d , if a n im a g e c a n n o t b e
d is p la y e d .

J e n n if e r R o x a s -M a g b a n la c , M I T
M a i l a n d W e b S e r v i c e s P a g e | 9

T h e v a lu e o f t h e a lt a t tr ib u t e c a n b e r e a d b y s c r e e n r e a d e r s . T h is w a y , s o m e o n e
" lis t e n in g " t o t h e w e b p a g e , e . g . a v is io n im p a ir e d p e r s o n , c a n " h e a r " t h e e le m e n t.

E x a m p le
< im g s r c = " im g _ g ir l. jp g " a lt = " G ir l w it h a ja c k e t " >
T h e a lt a t t r ib u t e is a ls o u s e f u l if t h e im a g e c a n n o t b e d is p la y e d ( e . g . if it d o e s n o t e x is t ) :

E x a m p le
S e e w h a t h a p p e n s if w e t r y t o d is p la y a n im a g e t h a t d o e s n o t e x is t:
< im g s r c = " im g _ t y p o . jp g " a lt = " G ir l w it h a ja c k e t " >

T h e s ty le A ttrib u te
T h e s t y le a t t r ib u t e is u s e d t o s p e c if y t h e s t y lin g o f a n e le m e n t , lik e c o lo r , f o n t, s iz e e t c .

E x a m p le < p s ty le= "c o lo r:re d " > T h is is a p a ra g ra p h .< /p >

T h e la n g A ttrib u te
T h e la n g u a g e o f t h e d o c u m e n t c a n b e d e c la r e d in t h e < h t m l> t a g .
T h e la n g u a g e is d e c l a r e d w it h t h e la n g a t t r ib u t e .

D e c la r in g a la n g u a g e is im p o r t a n t f o r a c c e s s ib ilit y a p p l ic a t io n s ( s c r e e n r e a d e r s ) a n d
s e a r c h e n g in e s :
< ! D O C T Y P E h t m l>
< h t m l la n g = " e n - U S " >
< body>
...
< /b o d y >
< / h t m l>

T h e f ir s t t w o le t t e r s s p e c if y t h e la n g u a g e ( e n ) . If t h e r e is a d ia le c t , a d d t w o m o r e le t t e r s
(U S ).

T h e title A ttrib u te
H e r e , a t it le a t t r ib u t e is a d d e d t o t h e < p > e le m e n t . T h e v a lu e o f t h e t it le a tt r ib u t e w ill b e
d is p la y e d a s a t o o lt ip w h e n y o u m o u s e o v e r t h e p a r a g r a p h :

E x a m p l e < p ti t l e = " I 'm a t o o l ti p " >

T h is is a p a ra g ra p h .
< /p >

W e S u g g e s t: U s e L o w e rc a s e A ttrib u te s
T h e H T M L 5 s t a n d a r d d o e s n o t r e q u ir e lo w e r c a s e a t t r ib u t e n a m e s .
T h e t it le a t t r ib u t e c a n b e w r it t e n w it h u p p e r c a s e o r lo w e r c a s e lik e t i t l e o r T I T L E .

W e S u g g e s t : Q u o t e A t tr i b u t e V a l u e s
T h e H T M L 5 s t a n d a r d d o e s n o t r e q u ir e q u o t e s a r o u n d a tt r ib u t e v a lu e s .
T h e h r e f a tt r ib u t e , d e m o n s t r a t e d a b o v e , c a n b e w r it t e n w it h o u t q u o t e s :

J e n n if e r R o x a s -M a g b a n la c , M I T
M a i l a n d W e b S e r v i c e s P a g e | 10

B a d < a h r e f = h t t p s :/ /w w w . m y m a il . c o m >

G o o d < a h r e f = " h t t p s :/ /w w w . m y m a il . c o m " >

E x a m p l e < p ti t l e = A b o u t m y m a i l >

S in g le o r D o u b le Q u o te s ?
D o u b le q u o t e s a r o u n d a t t r ib u t e v a lu e s a r e t h e m o s t c o m m o n in H T M L , b u t s in g le
q u o t e s c a n a ls o b e u s e d .
I n s o m e s it u a t io n s , w h e n t h e a tt r ib u t e v a lu e it s e lf c o n t a in s d o u b le q u o t e s , it is
n e c e s s a r y t o u s e s in g le q u o t e s : < p t it le = 'J o h n " S h o t G u n " N e ls o n ' >

O r v ic e v e r s a : < p t it le = " J o h n 'S h o tG u n ' N e ls o n " >

H T M L A ttrib u te s

A ttrib u te D e s c rip tio n

a lt S p e c if ie s a n a lt e r n a t iv e t e x t f o r a n im a g e , w h e n t h e im a g e c a n n o t b e d is p la y e d

d is a b le d S p e c if ie s t h a t a n in p u t e le m e n t s h o u ld b e d is a b le d

h re f S p e c if ie s t h e U R L ( w e b a d d r e s s ) f o r a lin k

id S p e c if ie s a u n iq u e id f o r a n e le m e n t

s rc S p e c if ie s t h e U R L ( w e b a d d r e s s ) f o r a n im a g e

s t y le S p e c if ie s a n in l in e C S S s t y le f o r a n e le m e n t

t it le S p e c if ie s e x t r a in f o r m a t io n a b o u t a n e le m e n t ( d is p la y e d a s a t o o l t ip )

R e fe re n c e
h t t p s :/ / w w w . w 3 s c h o o ls . c o m / h t m l/ h t m l_ e le m e n t s . a s p

J e n n if e r R o x a s -M a g b a n la c , M I T