HTML Notes

UPCISS
HTML 5
Basic Tutorials
Contents
HTML Introduction 2
HTMLQuotation and CitationElements-----------------------------------------------------17
HTML Colors 19
HTML Links 35
HTML Images 40
HTML Tables 43
HTML Lists 48
HTML Blockand Inline Elements 52
HTML The classAttribute 53
HTML The id Attribute 57
My Header 57
HTML Iframes 59
HTML File Paths 61
HTML Head 62
HTML Symbols 65
HTML Forms 69
HTML Form Elements 74
HTML Input Types 78
HTMLInput Attributes 86
1
HTML Introduction
What is HTML?
HTML is the standard markup language for creating Web pages.
• HTML stands for Hyper Text Markup Language

• HTML describes the structure of a Web page
• HTML consists of a series of elements
• HTML elements tell the browser how to display the content
• HTML elements are represented by tags
• HTML tags label pieces of content such as "heading", "paragraph", "table",
and so on
• Browsers do not display the HTML tags, but use them to render the content
of the page
2
Example Explained
• The <!DOCTYPE html> declaration defines this document to be HTML5
• The <html> element is the root element of an HTML page
• The <head> element contains meta information about the document
• The < t i t l e > element specifies a title for the document
• The <body> element contains the visible page content
• The <h1> element defines a large heading
• The <p> element defines a paragraph
HTML Tags
HTML tags are element names surrounded by angle brackets:
<tagname>content goes here...</tagname>
• HTML tags normally come in pairs like <p> and </p>

• The first tag in a pair is the start tag, the second tag is the end tag
• The end tag is written like the start tag, but with a forward slash inserted
before the tag name
Tip: The start tag is also called the opening tag, and the end tag the closing tag.
3
The<!DOCTYPE>Declaration
The <!DOCTYPE> declaration represents the document type, and helps browsers to
display web pages correctly.
It must only appear once, at the top of the page (before any HTML tags).
The <!DOCTYPE> declaration is not case sensitive.
The <!DOCTYPE> declaration for HTML5 is: <!DOCTYPE html>
HTMLHeadings
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading:
4
PCISS
HTML Paragraphs
HTML paragraphs are defined with the <p> tag:
HTML Links
HTML links are defined with the <a> tag:
5
<Html>
<Head>
<title> This is Link Page</title>
</Head>
<body>
<a href=“”>This is Link Tag</a>
</body>
</Html>
The link's destination is specified in the h re f attribute.
Attributes are used to provide additional information about HTML elements.
You will learn more about attributes in a later chapter.
HTML Images
HTML images are defined with the <img> tag.
The source file ( src ), alternative text ( alt ) , width , and height are provided as
attributes:
HTMLLists
HTML lists are defined with the <ul> (unordered/bullet list) or
the <ol>(ordered/numbered list) tag, followed by < l i > tags (list items):
6
Empty HTML Elements
HTML elements with no content are called empty elements.
<br> is an empty element without a closing tag (the <br> tag defines a line break):
Empty elements can be "closed" in the opening tag like this: <br />.
HTML5 does not require empty elements to be closed. But if you want stricter
validation, or if you need to make your document readable by XML parsers, you
must close all HTML elements properly.
HTML HorizontalRules
The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.
The <hr> element is used to separate content (or define a change) in an HTML page:
7
HTML IsNot CaseSensitive
HTML tags are not case sensitive: <P> means the same as <p>.
The HTML5 standard does not require lowercase tags, but
UPCISS recommends lowercase in HTML, and demands lowercase for stricter
document types like XHTML.
8
HTML TextFormattingElements
HTML also defines special elements for defining text with a special meaning.
HTML uses elements like <b> and <i> for formatting output, like bold or italic text.
Formatting elements were designed to display special types of text:
• <b> - Bold text

• <st r ong> - Important text
• <i> - Italic text
• <em> - Emphasized text
• <u> - Underline text
• <ma rk> - Marked text
• <smal l > - Small text
• <big> - Big Text
• <del> - Deleted text
• <ins> - Inserted text
• <sub> - Subscript text
• <sup> - Superscript text
9
HTML Attributes
• All HTML elements can have attributes
• Attributes provide additional information about an element
• Attributes are always specified in the start tag
• Attributes usually come in name/value pairs like: name="value"
Thehref Attribute
HTML links are defined with the <a> tag. The link address is specified in the h r e f
attribute:
Example
<a href="www.google.com">This i s a l i n k < / a >
ThesrcAttribute
HTML images are defined with the <img> tag.
The filename of the image source is specified in the src attribute:
Example
<img s r c = " i m g _ g i r l . j p g " >
Thewidth and height Attributes

HTML images also have width and height attributes, which specifies the width and
height of the image:
Example
<img s r c = " i m g _ g i r l . j p g " width="500" height="600">
The width and height are is specified in pixels by default; so width="500" means
500 pixels wide.
You will learn more about images in our HTML Images chapter.
ThealtAttribute
The a l t attribute specifies an alternative text to be used, if an image cannot be
displayed.
10
The value of the a l t attribute can be read by screen readers. This way, someone
"listening" to the webpage, e.g. a vision impaired person, can "hear" the element.
Example
<img s r c = " i m g _ g i r l . j p g " a l t = " G i r l wit h a j a c k et ">
The a l t attribute is also useful if the image cannot be displayed (e.g. if it does not
exist):
ThestyleAttribute
The s t y l e attribute is used to specify the styling of an element, like color, font,
size etc.
Example
<p s t yl e = " col o r : re d" > T hi s i s a paragraph.</p>
You will learn more about styling later in this tutorial, and in our CSS Tutorial.
ThelangAttribute
The language of the document can be declared in the <html> tag.
The language is declared with the lang attribute.
Declaring a language is important for accessibility applications (screen readers) and

search engines:
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
The first two letters specify the language (en). If there is a dialect, add two more
letters (US).
ThetitleAttribute
Here, a t i t l e attribute is added to the <p> element. The value of the title attribute
will be displayed as a tooltip when you mouse over the paragraph:
11
Example
<p t i t l e = " I ' m a t o o l t i p " >
This i s a paragraph.
</p>
We Suggest: Use Lowercase Attributes

The HTML5 standard does not require lowercase attribute names.
The title attribute can be written with uppercase or lowercase like title or TITLE.
UPCISS recommends lowercase in HTML, and demands lowercase for stricter

document types like XHTML.
We Suggest: Quote Attribute Values

The HTML5 standard does not require quotes around attribute values.
The h r e f attribute, demonstrated above, can be written without quotes:
Bad
<a href=https://www.Google.com>
Good
<a href="https://www.google.com">
Example
<p t i t l e = A b o u t >
Single or Double Quotes?

Double quotes around attribute values are the most common in HTML, but single
quotes can also be used.
12
In some situations, when the attribute value itself contains double quotes, it is
necessary to use single quotes:
<p t i t l e = ' L u " L u c k n o w " u p '>
Or vice versa:
<p t i t l e = " L u ' L u c k n o w ’ U p ">
Single or double Quotes?

In Some situations, when the attributes value itself contains
double quotes, it is necessary to use single quotes;
Move your mouse over the paragraphs below to see the effect
Lucknow to single quotes

Lucknow to double quotes
13
HTML Display
You cannot be sure how HTML will be displayed.
Large or small screens, and resized windows will create different results.
With HTML, you cannot change the output by adding extra spaces or extra lines in
your HTML code.
The browser will remove any extra spaces and extra lines when the page is
displayed:
Problem
This poem will display on a single line:
TheHTML <pre> Element

The HTML <pre> element defines preformatted text.
The text inside a <pre> element is displayed in a fixed-width font (usually Courier),
and it preserves both spaces and line breaks:
14
TheHTML Style Attribute
Setting the style of an HTML element, can be done with the s ty l e attribute.
The HTML s t y l e attribute has the following syntax:
<tagname s t yl e = " pr op er t y : val u e; " >
The property is a CSS property. The value is a CSS value.
You will learn more about CSS later in this tutorial.
Background Color
The CSS background- colo r property defines the background color for an HTML
element.
This example sets the background color for a page to powderblue:
Example
<body style="background-color:powderblue;">
<h1>This i s a heading</h1>
<p>This i s a paragraph.</p>
</body>
15
TextColor
The CSS c o l o r property defines the text color for an HTML element:
Example
<h1 s t yl e = " c o l o r : b l u e ; " >T h i s i s a heading</h1>
<p s t yl e = " c o l o r : r e d ; " >T h i s i s a paragraph.</p>
Fonts
The CSS f o n t - fa mi l y property defines the font to be used for an HTML element:
Example
<h1 s t yl e = "f o nt-f am i l y: ver d a na; " > Th i s i s a heading</h1>
<p s t y l e = " f o n t - f a m i l y : c o u r i e r ; " > T h i s i s a paragraph.</p>
16
TextSize
The CSS f o n t - s i ze property defines the text size for an HTML element:
Example
<h1 style="f ont-size:300%;"> This i s a heading</h1>
<p style="f ont-size:160%;"> This i s a paragraph.</p>
Text Alignment
The CSS t e x t - a li gn property defines the horizontal text alignment for an HTML
element:
Example
<h1 s t yl e = " te xt- al i g n: c ent e r ;" > C e nt er e d Heading</h1>
<p s t y l e = " t e x t - a l i g n : l e f t ; " > l e f t paragraph.</p>
HTML Quotation and Citation Elements

HTML <q> for ShortQuotations
The HTML <q> element defines a short quotation.
Browsers usually insert quotation marks around the <q> element.
17
Example
<p>WWF's goal i s t o : <q>Build a f u t u r e where people l i v e i n harmony wit h
nature.</q></p>
HTML <blockquote> forQuotations

The HTML <blo ckquo te> element defines a section that is quoted from another
source.
Browsers usually indent <blockquote> elements.
Example
<p>Here i s a quote from WWF's website:</p>
<blockquote>
For 50 years, WWF has been p r o t ect i n g the f u t u r e o f nat ur e.
The wo r l d ' s leading conservation o r g a ni za t i o n,
WWF works i n 100 count ries and i s supported by
1.2 m i l l i o n members i n the United States and
close t o 5 m i l l i o n g l o b a l l y .
</blockquote>
HTML <abbr> for Abbreviations

The HTML <abbr> element defines an abbreviation or an acronym.
Marking abbreviations can give useful information to browsers, translation systems

and search-engines.
Example
<p>The <abbr t i t l e = " W o r l d Health Organization">WHO</abbr> was founded i n
1948.</p>
HTML <address> for ContactInformation

The HTML <addre ss> element defines contact information (author/owner) of a
document or an article.
The <addre ss> element is usually displayed in italic. Most browsers will add a line
break before and after the element.
18
Example
<address>
W ritten by John Doe.<br>
V i s i t us at : <br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
HTML <cite> for WorkTitle

The HTML <cite> element defines the title of a work.
Browsers usually display <cite> elements in italic.
Example
<p><cite>The Scream</cite> by Edvard Munch. Painted i n 1893.</p>
HTML <bdo> for Bi-DirectionalOverride

The HTML <bdo> element defines bi-directional override.
The <bdo> element is used to override the current text direction:
Example
<bdo d i r = " r t l " > T h i s t e x t w i l l be w r i t t e n from r i g h t t o l e f t </ b do>
HTML Colors
HTML colors are specified using predefined color names, or RGB, HEX, HSL,
RGBA, HSLA values.
Color Names
In HTML, a color can be specified by using a color name:
Tomato
19
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
Background Color
You can set the background color for HTML elements:
Hello World
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat.
Example
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>
20
Text Color
You can set the color of text:
Hello World
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
Example
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut w i s i enim...</p>
Border Color
You can set the color of borders:
Hello World
Hello World
Hello World
Example
<h1 style="border:2px s o l i d Tomato;">Hello World</h1>
<h1 style="border:2px s o l i d DodgerBlue;">Hello World</h1>
<h1 style="border:2px s o l i d V i o l e t ; " > H e l l o World</h1>
Color Values
In HTML, colors can also be specified using RGB values, HEX values, HSL values,
RGBA values, and HSLA values:
Same as color name "Tomato":
rgb(255, 99, 71)

21
#ff6347
h s l ( 9 , 100%, 64%)
Same as color name "Tomato", but 50% transparent:
Example
<h1 style="background-color:rgb(255, 99, 7 1 ) ; " > . . . < / h 1 >
<h1 st yle = " background-color:#ff6347;"> ...</h1>
<h1 st yle = " background-color:hsl( 9, 100%, 64%);">...</h1>
<h1 style="background-color:rgba(255, 99, 71, 0 . 5 ) ; " > . . . < / h 1 >

<h1 st yle = " background-color:hsla( 9, 100%, 64%, 0 . 5 ) ; " > . . . < / h 1 >
RGBValue
In HTML, a color can be specified as an RGB value, using this formula:
rgb(red, green, blue)

Each parameter (red, green, and blue) defines the intensity of the color between 0
and 255.
For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest
value (255) and the others are set to 0.
To display black, set all color parameters to 0, like this: rgb(0, 0, 0).
To display white, set all color parameters to 255, like this: rgb(255, 255, 255).
Experiment by mixing the RGB values below:
rgb(255, 99, 71)
22
Example
rgb(255, 0 , 0 )
rgb(0, 0 , 255)
rgb(60, 179, 113)
rgb(238, 130, 238)
rgb(255, 165, 0 )
rgb(106, 90, 205)

Shades of gray are often defined using equal values for all the 3 light sources:
Example
rgb(0, 0 , 0 )
rgb(60, 60, 60)
rgb(120, 120, 120)
23
rgb(180, 180, 180)
rgb(240, 240, 240)
rgb(255, 255, 255)
HEXValue
In HTML, a color can be specified using a hexadecimal value in the form:
#rrggbb
Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff
(same as decimal 0-255).
For example, #ff0000 is displayed as red, because red is set to its highest value
(ff) and the others are set to the lowest value (00).
Example
#ff0000
#0000ff
#3cb371
24
#ee82ee
#ffa500
#6a5acd
Shades of gray are often defined using equal values for all the 3 light sources:
Example
#000000
#3c3c3c
#787878
#b4b4b4
# f 0 f 0f 0
#ffffff
25
HSLValue
In HTML, a color can be specified using hue, saturation, and lightness (HSL) in the
form:
hsl(hue, saturation, lightness)

Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is
blue.
Saturation is a percentage value, 0% means a shade of gray, and 100% is the full
color.
Lightness is also a percentage, 0% is black, 50% is neither light or dark, 100% is

white
Example
h s l ( 0 , 100%, 50%)
hsl(240, 100%, 50%)
hsl(147, 50%, 47%)
hsl(300, 76%, 72%)
hsl(39, 100%, 50%)
hsl(248, 53%, 58%)
26
Saturation
Saturation can be described as the intensity of a color.
100% is pure color, no shades of gray
50% is 50% gray, but you can still see the color.
0% is completely gray, you can no longer see the color.
Example
h s l ( 0 , 100%, 50%)
h s l ( 0 , 80%, 50%)
h s l ( 0 , 60%, 50%)
h s l ( 0 , 40%, 50%)
h s l ( 0 , 20%, 50%)
h s l ( 0 , 0%, 50%)
Lightness
The lightness of a color can be described as how much light you want to give the
color, where 0% means no light (black), 50% means 50% light (neither dark nor
light) 100% means full lightness (white).
27
Example
h s l ( 0 , 100%, 0%)
h s l ( 0 , 100%, 25%)
h s l ( 0 , 100%, 50%)
h s l ( 0 , 100%, 75%)
h s l ( 0 , 100%, 90%)
h s l ( 0 , 100%, 100%)
Shades of gray are often defined by setting the hue and saturation to 0, and adjust
the lightness from 0% to 100% to get darker/lighter shades:
Example
h s l ( 0 , 0%, 0%)
h s l ( 0 , 0%, 24%)
28
h s l ( 0 , 0%, 47%)
h s l ( 0 , 0%, 71%)
h s l ( 0 , 0%, 94%)
h s l ( 0 , 0%, 100%)
RGBAValue
RGBA color values are an extension of RGB color values with an alpha channel -
which specifies the opacity for a color.
An RGBA color value is specified with:
rgba(red, green, blue, alpha)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not
transparent at all):
29
HSLAValue
HSLA color values are an extension of HSL color values with an alpha channel -
which specifies the opacity for a color.
An HSLA color value is specified with:
hsla(hue, saturation, lightness, alpha)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not
transparent at all):
Styling HTML withCSS

CSS stands for Cascading Style Sheets.
CSS describes how HTML elements are to be displayed on screen, paper, or

in other media.
CSS saves a lot of work. It can control the layout of multiple web pages all at
once.
CSS can be added to HTML elements in 3 ways:
• Inline - by using the style attribute in HTML elements

• Internal - by using a <style> element in the <head> section
• External - by using an external CSS file
The most common way to add CSS, is to keep the styles in separate CSS files.
However, here we will use inline and internal styling, because this is easier to
demonstrate, and easier for you to try it yourself.
30
Inline CSS
An inline CSS is used to apply a unique style to a single HTML element.
An inline CSS uses the style attribute of an HTML element.
This example sets the text color of the <h1> element to blue:
Example
<h1 s t yl e = " c o l o r : b l u e ; " >T h i s i s a Blue Heading</h1>
Internal CSS
An internal CSS is used to define a style for a single HTML page.
An internal CSS is defined in the <head> section of an HTML page, within

a <style> element:
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
< / s t yl e >
</head>
<body>
</body>
</html>
External CSS
An external style sheet is used to define the style for many HTML pages.
31
www.youtube.com/upciss UPCISS
With an external style sheet, you can change the look of an entire web
site, by changing one file!
To use an external style sheet, add a link to it in the <head> section of the HTML
page:
Example
<!DOCTYPE html>
<html>
<head>
< l i n k r e l = " s t yl e s h e e t " h r ef = " st yl e s. css " >
</head>
<body>
</body>
</html>
An external style sheet can be written in any text editor. The file must not contain
any HTML code, and must be saved with a .css extension.
Here is how the "styles.css" looks:
body {
background-color: powderblue;
}
h1 {
c o l o r : blue;
}
p {
c o lo r : red;
}
CSSFonts
The CSS c o l o r property defines the text color to be used.
The CSS f o n t - fa mi l y property defines the font to be used.
The CSS f o n t - s i z e property defines the text size to be used.
32
Example
<!DOCTYPE html>
<html>
<head>
<st yl e>
h1 {
c o l o r : blue;
f o n t - f a m i l y : verdana;
f o n t - s i z e : 300%;
}
p {
c o lo r : red;
font-family: courier;
f o n t - s i z e : 160%;
}
< / s t yl e >
</head>
<body>
</body>
</html>
CSSBorder
The CSS border property defines a border around an HTML element:
Example
p {
bor der : 1px s o l i d powderblue;
}
CSSPadding
The CSS padding property defines a padding (space) between the text and the
border:
Example
p {
padding: 30px;
}
33
CSSMargin
The CSS margin property defines a margin (space) outside the border:
Example
p {
margin: 50px;
}
TheidAttribute
To define a specific style for one special element, add an i d attribute to the
element:
<p id="p01">I amd i f f e r e n t < / p >
then define a style for the element with the specific id:
Example
#p01 {
c o l o r : blue;
}
Note: The id of an element should be unique within a page, so the id selector is

used to select one unique element!
TheclassAttribute
To define a style for special types of elements, add a class attribute to the
element:
<p c l a s s = " e r r o r " > I amd i f f e r e n t < / p >
then define a style for the elements with the specific class:
Example
p.error {
c o lo r : red;
}
34
External References
External style sheets can be referenced with a full URL or with a path relative to the
current web page.
This example uses a full URL to link to a style sheet:
Example
< l i n k r e l = " s t yl e s h e e t " href="https://www.w3schools.com/html/styles.css ">
This example links to a style sheet located in the html folder on the current web
site:
Example
< l i n k r e l = " s t yl e s h e e t " h r e f = " / h t m l / s t yl e s . c s s " >
This example links to a style sheet located in the same folder as the current page:
Example
< l i n k r e l = " s t yl e s h e e t " h r e f =" st yl e s. cs s" >
You can read more about file paths in the chapter HTML File Paths.
HTML Links
Links are found in nearly all web pages. Links allow users to click their way from
page to page.
HTML Links- Hyperlinks

HTML links are hyperlinks.
You can click on a link and jump to another document.
When you move the mouse over a link, the mouse arrow will turn into a little hand.
Note: A link does not have to be text. It can be an image or any other HTML
element.
35
HTML Links- Syntax
Hyperlinks are defined with the HTML
<a> tag:
<a h r e f = " u r l " > l i n k t ext </a>
Example
<a href ="https://www.w3schools.com/html/ ">Visit our HTML t u t o r i a l < / a >
The h r e f attribute specifies the destination address

(https://www.w3schools.com/html/) of the link.
The link text is the visible part (Visit our HTML tutorial).
Clicking on the link text will send you to the specified address.
Note: Without a forward slash at the end of subfolder addresses, you might
generate two requests to the server. Many servers will automatically add a forward
slash to the end of the address, and then create a new request.
Local Links
The example above used an absolute URL (a full web address).
A local link (link to the same web site) is specified with a relative URL (without
https://www....).
Example
<a href="html_images.asp">HTML Images</a>
HTML LinkColors
By default, a link will appear like this (in all browsers):
• An unvisited link is underlined and blue

• A visited link is underlined and purple
• An active link is underlined and red
You can change the default colors, by using CSS:
Example
<style>
a:link {
c o l o r : green;
36
background-color: t r anspar ent ;
t e xt - d e c o r a t i o n : none;
}
a:visited {
color : pink;
}
a:hover {
c o lo r : red;
t e xt - d e c o r a t i o n : u n d e r l i n e ;
}
a : a c t i ve {
c o l o r : ye l l o w;
t e xt - d e c o r a t i o n : u n d e r l i n e ;
}
< / s t yl e >
Links are often styled as buttons, by using CSS:
Example
<style>
a: link , a:visited {
background-color: #f44336;
c o l o r : wh i t e ;
padding: 15px 25px;
t e x t - a l i g n : center;
display: inline-block ;
}
a: hover , a : a c t i ve {
background-color: r e d ;
}
< / s t yl e >
HTML Links- The target Attribute

The t a r g e t attribute specifies where to open the linked document.
The t a r g e t attribute can have one of the following values:
37
• _bla nk - Opens the linked document in a new window or tab
• _ s e l f - Opens the linked document in the same window/tab as it was clicked
(this is default)
• _pa ren t - Opens the linked document in the parent frame
• _top - Opens the linked document in the full body of the window
• framename - Opens the linked document in a named frame
This example will open the linked document in a new browser window/tab:
Example
<a href="https://www.w3schools.com/" t a r g et =" _b l a nk" > V i si t W3Schools!</a>
Tip: If your webpage is locked in a frame, you can use target="_ t o p " to break out
of the frame:
Example
<a href="https://www.w3schools.com/html/ " target="_top">HTML5 t u t o r i a l ! < / a >
HTML Links- Image asLink

It is common to use images as links:
Example
<a hr ef =" def ault .asp" >
<img s r c = " s m i l e y . g i f " alt="HTML
t u t o r i a l " s t yl e = " wi d t h : 4 2 p x; h e i g h t : 4 2 p x; b o r d e r : 0 ; " >
</a>
Note: border:0; is added to prevent IE9 (and earlier) from displaying a border
around the image (when the image is a link).
LinkTitles
The t i t l e attribute specifies extra information about an element. The information
is most often shown as a tooltip text when the mouse moves over the element.
Example
<a href="https://www.w3schools.com/html/ " t i t l e = " G o t o W3Schools HTML
s e c t i o n " > V i s i t our HTML T ut or ial < / a>
38
HTML Links- Create aBookmark
HTML bookmarks are used to allow readers to jump to specific parts of a Web page.
Bookmarks can be useful if your webpage is very long.
To make a bookmark, you must first create the bookmark, and then add a link to it.
When the link is clicked, the page will scroll to the location with the bookmark.
Example
First, create a bookmark with the i d attribute:
<h2 id="C4">Chapter 4</h2>
Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same
page:
<a href="#C4">Jump t o Chapter 4</a>
Or, add a link to the bookmark ("Jump to Chapter 4"), from another page:
Example
<a href="html_demo.html#C4">Jump t o Chapter 4</a>
External Paths
External pages can be referenced with a full URL or with a path relative to the
current web page.
This example uses a full URL to link to a web page:
Example
<a href="https://www.w3schools.com/html/default.asp">HTML t u t o r i a l < / a >
This example links to a page located in the html folder on the current web site:
Example
<a href="/html/default.asp">HTML t u t o r i a l < / a >
This example links to a page located in the same folder as the current page:
Example
<a href="default.asp">HTML t u t o r i a l < / a >
39
HTML Images
<img s r c = " i m g _ g i r l . j p g " a l t = " G i r l i n a j a c k et " >
HTML ImagesSyntax
In HTML, images are defined with the <img> tag.
The <img> tag is empty, it contains attributes only, and does not have a closing
tag.
The src attribute specifies the URL (web address) of the image:
<img s r c = " u r l " >
ThealtAttribute
The a l t attribute provides an alternate text for an image, if the user for some
reason cannot view it (because of slow connection, an error in the src attribute, or
if the user uses a screen reader).
The value of the a l t attribute should describe the image:
Example
<img src="img_chania.jpg" alt="Flowers i n Chania">
If a browser cannot find an image, it will display the value of the a l t attribute:
Example
<img src="wrongname.gif" alt="Flowers i n Chania">
Note: The a l t attribute is required. A web page will not validate correctly without
it.
Width and Height, or Style?

The width , height , and s t y l e attributes are valid inHTML.
However, we suggest using the s t y l e attribute. It prevents styles sheets from

changing the size of images:
40
Example
<!DOCTYPE html>
<html>
<head>
<st yl e>
img {
wi d t h : 100%;
}
< / s t yl e >
</head>
<body>
<img s r c = " h t m l 5 . g i f " alt="HTML5 I con" width="128" height="128">

<img s r c = " h t m l 5 . g i f " alt="HTML5 I con" style="width:128px;height:128px;">
</body>
</html>
Image asa Link

To use an image as a link, put the <img> tag inside the <a> tag:
Example
<a hr ef =" def ault .asp" >
<img s r c = " s m i l e y . g i f " alt="HTML
t u t o r i a l " st yle = " widt h:42px; heig ht:42px; border:0;">
</a>
Note: border:0; is added to prevent IE9 (and earlier) from displaying a border
around the image (when the image is a link).
Image Floating
Use the CSS f l o a t property to let the image float to the right or to the left of a
text:
Example
<p><img s r c = " s m i l e y . g i f " alt="Smiley
f ace" s t y l e = " f l o a t : r i g h t ; w i d t h : 4 2 p x ; h e i g h t : 4 2 p x ; " >
The image w i l l f l o a t t o the r i g h t o f the t e x t . < / p >
<p><img s r c = " s m i l e y . g i f " alt="Smiley

f ace" s t y l e = " f l o a t : l e f t ; w i d t h : 4 2 p x ; h e i g h t : 4 2 p x ; " >
The image w i l l f l o a t t o the l e f t o f the t e x t . < / p >
41
ImageMaps
The <map> tag defines an image-map. An image-map is an image with clickable
areas.
In the image below, click on the computer, the phone, or the cup of coffee:
Example
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" a l t = " C of f ee " href ="coffee.htm">
</map>
The name attribute of the <map> tag is associated with the <img>'s usemap attribute
and creates a relationship between the image and the map.
The <map> element contains a number of <are a> tags, that define the clickable
areas in the image-map.
42
HTML Tables
HTML Table Example
Defining an HTML Table

An HTML table is defined with the <table > tag.
Each table row is defined with the <tr> tag. A table header is defined with
the <th> tag. By default, table headings are bold and centered. A table data/cell is
defined with the <td> tag.
43
Example
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
< / table >
Note: The <td> elements are the data containers of the table.
They can contain all sorts of HTML elements; text, images, lists, other tables, etc.
HTML Table - Adding aBorder

If you do not specify a border for the table, it will be displayed without borders.
A border is set using the CSS border property:
Example
table, t h, td {
bor der : 1px s o l i d b l a c k ;
}
Remember to define borders for both the table and the table cells.
HTML Table - CollapsedBorders

If you want the borders to collapse into one border, add the CSS border-
col l apse property:
Example
table, t h, td {
bor der : 1px s o l i d b l a c k ;
44
bor der -collapse : c o l l a p s e ;
}
HTML Table - Adding CellPadding

Cell padding specifies the space between the cell content and its borders.
If you do not specify a padding, the table cells will be displayed without padding.
To set the padding, use the CSS padding property:
Example
t h, td {
padding: 15px;
}
HTML Table - Left-align Headings

By default, table headings are bold and centered.
To left-align the table headings, use the CSS t e x t - a l i g n property:
Example
th {
text-align: l e f t ;
}
HTML Table - Adding BorderSpacing

Border spacing specifies the space between the cells.
To set the border spacing for a table, use the CSS border- spacin g property:
Example
table {
border-spacing: 5px;
}
Note: If the table has collapsed borders, border-spacing has no effect.
HTML Table - Cells that Span Many Columns

To make a cell span more than one column, use the colspan attribute:
45
Example
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
< t d > B i l l Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
< / table >
HTML Table - Cells that Span Many Rows

To make a cell span more than one row, use the rowspan attribute:
Example
<tr>
<th>Name:</th>
< t d > B i l l Gates</td>
</tr>
<t r >
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
< / table >
HTML Table - Adding aCaption

To add a caption to a table, use the <caption> tag:
Example
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
46
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
< / table >
Note: The <caption> tag must be inserted immediately after the <table> tag.
A Special Style for OneTable

To define a special style for a special table, add an i d attribute to the table:
Example
<table id= " t 01">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
< / table >
Now you can define a special style for this table:

table#t01 {
wi d t h : 100%;
background-color: #f 1f 1c1 ;
}
And add more styles:

table#t01 t r : n t h - c h i l d ( e v e n ) {
background-color: #eee;
}
table#t01 t r : n t h - c h i l d ( o d d ) {
background-color: # f f f ;
}
table#t01 t h {
background-color: b l a c k ;
}
47
HTML Lists
Unordered HTML List
An unordered list starts with the <ul> tag. Each list item starts with the < l i > tag.
The list items will be marked with bullets (small black circles) by default:
Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Unordered HTML List - Choose List ItemMarker

The CSS l i s t - s t y l e - t y p e property is used to define the style of the list item
marker:
Value Description
disc Sets the list item marker to a bullet (default)
circle Sets the list item marker to a circle
square Sets the list item marker to a square
none The list items will not be marked
Example - Disc
< ul s t y l e = " l i s t - s t y l e - t y p e : d i s c ; " >
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ordered HTML List

An ordered list starts with the <ol> tag. Each list item starts with the < l i > tag.
The list items will be marked with numbers by default:
48
Example
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Ordered HTML List - TheTypeAttribute

The type attribute of the <ol> tag, defines the type of the list item marker:
Type Description
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers
Numbers:
< ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
HTML DescriptionLists
HTML also supports description lists.
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term (name),
and the <dd> tag describes each term:
Example
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
49
Nested HTML Lists
List can be nested (lists inside lists):
Example
<ul>
<li>Coffee</li>
<li>Tea
<ul>
< li> Black t e a < / l i >
<li>Green t e a < / l i >
< / ul>
</li>
<li>Milk</li>
</ul>
Note: List items can contain new list, and other HTML elements, like images and
links, etc.
Control List Counting

By default, an ordered list will start counting from 1. If you want to start counting
from a specified number, you can use the s t a r t attribute:
Example
< ol st ar t="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Horizontal List withCSS

HTML lists can be styled in many different ways with CSS.
One popular way is to style a list horizontally, to create a navigation menu:
Example
50
<!DOCTYPE html>
<html>
<head>
<st yl e>
ul {
l i s t - s t y l e - t y p e : none;
margin: 0 ;
padding: 0 ;
over f low: hidden;
background-color: #333333;
}
li {
float: left;
}
li a {
display: block;
padding: 16px;
}
l i a:hover {
background-color: #111111;
}
< / s t yl e >
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href ="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
51
HTML Blockand InlineElements
Every HTML element has a default display value depending on what type of
element it is.
The two display values are: block and inline.
Block-level Elements
A block-level element always starts on a new line and takes up the full width
available (stretches out to the left and right as far as it can).
The <div> element is a block-level element.
Example
<div>Hello World</div>
Block level elements in HTML:
<addr e ss> <ar t i c le > <asi de> <b l ockquo t e> <canvas> <dd> <d i v >
<dl> <dt> < f i e l d s e t > <f igcaption> <figure> <footer> <form>
<h1>-<h6> <header> <hr> < l i > <main> <nav> <noscript> <ol>
<p> <pre> <sect i on> <t a ble > <t f oo t> <u l > <v i deo>
Inline Elements
An inline element does not start on a new line and only takes up as much width as
necessary.
This is an inline <span> element inside a paragraph.
Example
<span>Hello World</span>
Inline elements in HTML:
<a> <abbr> <acronym> <b> <bdo> <big> <br> <button>
<c i t e> <code> <dfn> <em> <i > <img> <in put > <kbd> <l abel >
<map> <object> <output> <q> <samp> < s c r ipt > <select> <small>
<span> <strong> <sub> <sup> <t exta r e a> <t i me> <t t > <var >
52
The<div> Element
The <div> element is often used as a container for other HTML elements.
The <div> element has no required attributes, but s t yl e , class and i d are
common.
When used together with CSS, the <div> element can be used to style blocks of
content:
Example
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London i s the c a p i t a l c i t y o f England. I t i s the most populous c i t y i n the
United Kingdom, wit h a metropolitan area o f over 13 m i l l i o n i n h a b i t a nt s. </ p>
</div>
The<span>Element
The <span> element is often used as a container for some text.
The <span> element has no required attributes, but s t yl e , class and i d are
common.
When used together with CSS, the <span> element can be used to style parts of
the text:
Example
<h1>My <span style="color:red">Important</span> Heading</h1>
HTML The class Attribute

Using The classAttribute
The HTML class attribute is used to define equal styles for elements with the same
class name.
So, all HTML elements with the same class attribute will get the same style.
Here we have three <div> elements that point to the same class name:
53
Example
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color: b l a c k ;
margin: 20px;
padding: 20px;
}
< / s t yl e >
</head>
<body>
<div c l a s s = " c i t i e s " >

<h2>London</h2>
<p>London i s the c a p i t a l o f England.</p>
</div>

<h2>Paris</h2>
<p>Paris i s the c a p i t a l o f France.</p>
</div>

<h2>Tokyo</h2>
<p>Tokyo i s the c a p i t a l o f Japan.</p>
</div>
</body>
</html>
Result:
London
London is the capital of England.
Paris
Paris is the capital of France.
Tokyo
Tokyo is the capital of Japan.
54
Using The classAttribute on Inline Elements
The HTML class attribute can also be used on inline elements:
Example
<!DOCTYPE html>
<html>
<head>
<style>
span.note {
f o n t - s i z e : 120%;
c o lo r : red;
}
< / s t yl e >
</head>
<body>
<h1>My <span class="note">Important</span> Heading</h1>

<p>This i s some <span class="note">important</span> t e xt . < / p >
</body>
</html>
Tip: The class attribute can be used on any HTML element.
Note: The class name is case sensitive!
Select Elements With aSpecificClass

In CSS, to select elements with a specific class, write a period (.) character,
followed by the name of the class:
Example
Use CSS to style all elements with the class name "city":
<style>
.city {
background-color: tomato;
padding: 10px;
}
< / s t yl e >
<h2 class="city">London</h2>
<h2 class="city">Paris</h2>
55
<h2 class="city">Tokyo</h2>
Result:
London
London is the capital of England.
Paris
Paris is the capital of France.
Tokyo
Tokyo is the capital of Japan.
Multiple Classes
HTML elements can have more than one class name, each class name must be
separated by a space.
Example
Style elements with the class name "city", also style elements with the class name
"main":
<h2 c l a s s = " c i t y main">London</h2>

In the example above, the first <h2> element belongs to both the "city" class and
the "main" class.
Different TagsCan Share SameClass

Different tags, like <h2> and <p>, can have the same class name and thereby share
the same style:
Example
<p c l a s s =" c i t y" >P a r i s i s the c a p i t a l o f France</p>
56
HTML The id Attribute
Using The id Attribute
The i d attribute specifies a unique id for an HTML element (the value must be
unique within the HTML document).
The id value can be used by CSS and JavaScript to perform certain tasks for the
element with the specific id value.
In CSS, to select an element with a specific id, write a hash (#) character, followed
by the id of the element:
Example
Use CSS to style an element with the id "myHeader":
<style>
#myHeader {
background-color: l i g h t b l u e ;
c o l o r : black;
padding: 40px;
}
< / s t yl e >
<h1 id="myHeader">My Header</h1>
Result:
My Header
Tip: The id attribute can be used on any HTML element.
Note: The id value is case-sensitive.
Note: The id value must contain at least one character, and must not contain
whitespace (spaces, tabs, etc.).
Difference Between ClassandID

An HTML element can only have one unique id that belongs to that single element,
while a class name can be used by multiple elements:
57
Example
<style>
/ * St yle the element wit h the i d "myHeader" * /
#myHeader {
background-color: l i g h t b l u e ;
c o l o r : black;
padding: 40px;
}
/ * St yle a l l elements wit h the class name " c i t y " * /

.city {
background-color: tomato;
padding: 10px;
}
< / s t yl e >
< ! - - Aunique element - - >

<h1 id="myHeader">My Cities</h1>
< ! - - Mu l t i p l e s i m i l a r elements - - >

<h2 class="city">London</h2>
Bookmarks with ID and Links

HTML bookmarks are used to allow readers to jump to specific parts of a Web page.
Bookmarks can be useful if your webpage is very long.
To make a bookmark, you must first create the bookmark, and then add a link to
it.
When the link is clicked, the page will scroll to the location with the bookmark.
Example
First, create a bookmark with the i d attribute:
<h2 id="C4">Chapter 4</h2>
58
Then,
add a link to the bookmark ("Jump to Chapter 4"), from within the same page:
<a href="#C4">Jump t o Chapter 4</a>
Or, add a link to the bookmark ("Jump to Chapter 4"), from another page:
Example
<a href="html_demo.html#C4">Jump t o Chapter 4</a>
Using The id Attribute in JavaScript

JavaScript can access an element with a specified id by using
the getElementById() method:
Example
Use the id attribute to manipulate text with JavaScript:
< scr ipt >

f u n c t i o n d i s p l a yR e s u l t ( ) {
document.getElementById("myHeader").innerHTML = "Have a nice d a y ! " ;
}
</script>
HTML Iframes
Iframe Syntax
An HTML iframe is defined with the <iframe> tag:
<iframe src="URL"></iframe>
The src attribute specifies the URL (web address) of the inline frame page.
59
Iframe- Set Height andWidth
Use the height and width attributes to specify the size of the iframe.
The height and width are specified in pixels by default:
Example
<iframe src="demo_iframe.htm" height="200" width="300"></iframe>
The height and width can also be specified in percent:
Example
<iframe src="demo_iframe.htm" height="100%" width="100%"></iframe>
Or you can use CSS to set the height and width of the iframe:
Example
<iframe src="demo_iframe.htm" style="height:200px;width:300px;">< /iframe>
Iframe - Remove the Border

By default, an iframe has a border around it.
To remove the border, add the s t y l e attribute and use the CSS border property:
Example
<iframe src="demo_iframe.htm" style="border:none;"></iframe>
With CSS, you can also change the size, style and color of the iframe's border:
Example
<iframe src="demo_iframe.htm" style="border:2px s o l i d red;"></iframe>
Iframe - Target for aLink

An iframe can be used as the target frame for a link.
The t a r g e t attribute of the link must refer to the name attribute of the iframe:
60
Example
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>
HTML FilePaths
Path Description
<img src="picture.jpg"> picture.jpg is located in the same folder as

the current page
<img src="images/picture.jpg"> picture.jpg is located in the images folder

in the current folder
<img src="/images/picture.jpg"> picture.jpg is located in the images folder

at the root of the current web
<img src="../picture.jpg"> picture.jpg is located in the folder one level

up from the current folder
HTML FilePaths
A file path describes the location of a file in a web site's folder structure.
File paths are used when linking to external files like:
• Web pages
• Images
• Style sheets
• JavaScripts
Absolute File Paths

An absolute file path is the full URL to an internet file:
61
Example
<img src="https://www.w3schools.com/images/picture.jpg " alt="Mountain">
Relative FilePaths
A relative file path points to a file relative to the current page.
In this example, the file path points to a file in the images folder located at the root
of the current web:
Example
<img s r c =" /i m ag e s/ pi ct u r e. j pg " alt="Mountain">
In this example, the file path points to a file in the images folder located in the
current folder:
Example
<img sr c="images/picture.j pg" alt="Mountain">
In this example, the file path points to a file in the images folder located in the
folder one level above the current folder:
Example
<img s r c = " . . / i m a g e s / p i c t u r e . j p g " alt="Mountain">
HTML Head
TheHTML <head> Element
The <head> element is a container for metadata (data about data) and is placed
between the <html> tag and the <body> tag.
HTML metadata is data about the HTML document. Metadata is not displayed.
Metadata typically define the document title, character set, styles, scripts, and
other meta information.
The following tags describe

metadata: < t i t l e > , <style> , <meta>, <link> , <script> , and <base>.
62
TheHTML <title> Element
The < t i t l e > element defines the title of the document, and is required in all HTML
documents.
The < t i t l e > element:
• defines a title in the browser tab

• provides a title for the page when it is added to favorites
• displays a title for the page in search engine results
A simple HTML document:
Example
<!DOCTYPE html>
<html>
<head>
<title>Page T i t l e < / t i t l e >
</head>
<body>
The content o f the d o c u m e n t . . . . . .
</body>
</html>
TheHTML <style> Element

The <style> element is used to define style information for a single HTML page:
Example
<style>
body {background-color: powderblue;}
h1 { c o l o r : r e d ; }
p {color: blue;}
< / s t yl e >
TheHTML <link> Element

The <link> element is used to link to external style sheets:
Example
< l i n k r e l = " s t yl e s h e e t " href="mystyle.css">
63
TheHTML <meta> Element
The <meta> element is used to specify which character set is used, page
description, keywords, author, and other metadata.
Metadata is used by browsers (how to display content), by search engines

(keywords), and other web services.
Define the character set used:
<meta charset="UTF-8">
Define a description of your web page:
<meta name="description" content="Free Webt u t o r i a l s " >
Define keywords for search engines:
<meta name="keywords" content="HTML, CSS, XML, JavaScript">
Define the author of a page:
<meta name="author" content="John Doe">
Refresh document every 30 seconds:
<meta h t t p - eq ui v = " r ef r es h" content="30">
Example of <meta> tags:
Example
<meta charset="UTF-8">
<meta name="description" content="Free Webt u t o r i a l s " >
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">
Setting The Viewport

HTML5 introduced a method to let web designers take control over the viewport,
through the <meta> tag.
The viewport is the user's visible area of a web page. It varies with the device, and
will be smaller on a mobile phone than on a computer screen.
You should include the following <meta> viewport element in all your web pages:
<meta name="viewport" content="width=device-width, i n i t i a l - s c a l e = 1 . 0 " >
64
A <meta> viewport element gives the browser instructions on how to control the
page's dimensions and scaling.
The width=device-width part sets the width of the page to follow the screen-width
of the device (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded
by the browser.
Here is an example of a web page without the viewport meta tag, and the same
web page with the viewport <meta>tag:
TheHTML <script> Element

The <sc rip t > element is used to define client-side JavaScripts.
This JavaScript writes "Hello JavaScript!" into an HTML element with id="demo":
Example
< scr ipt >
f u n c t i o n myFunction {
document.getElementById("demo").innerHTML = " H e l l o J a v a S c r i p t ! " ;
}
</script>
TheHTML <base> Element

The <base> element specifies the base URL and base target for all relative URLs in
a page:
Example
<base href="https://www.w3schools.com/images/" target="_blank">
HTML Symbols
HTML SymbolEntities
HTML entities were described in the previous chapter.
Many mathematical, technical, and currency symbols, are not present on a normal
keyboard.
To add such symbols to an HTML page, you can use an HTML entity name.
65
If no entity name exists, you can use an entity number, a decimal, or hexadecimal
reference.
Example
<p>I w i l l display €</p>
Will display as:

I will display €
I will display €
I will display €
Some Mathematical Symbols Supported by

HTML
Char Number Entity Description
∀ ∀ ∀ FOR ALL
∂ ∂ ∂ PARTIAL DIFFERENTIAL
∃ ∃ ∃ THERE EXISTS
∅ ∅ ∅ EMPTY SETS
∇ ∇ ∇ NABLA
∈ ∈ ∈ ELEMENT OF
66
∉ ∉ ∉ NOT AN ELEMENT OF
∋ ∋ &ni; CONTAINS AS MEMBER
∏ ∏ ∏ N-ARY PRODUCT
∑ ∑ ∑ N-ARY SUMMATION
Full Math Reference
Some Greek Letters Supported by HTML
Α Α Α GREEK CAPITAL LETTER ALPHA
Β Β Β GREEK CAPITAL LETTER BETA
Γ Γ Γ GREEK CAPITAL LETTER GAMMA
Δ Δ Δ GREEK CAPITAL LETTER DELTA
Ε Ε Ε GREEK CAPITAL LETTER EPSILON
67
Ζ Ζ Ζ GREEK CAPITAL LETTER ZETA
Some Other Entities Supported byHTML
© © © COPYRIGHT SIGN
® ® ® REGISTERED SIGN
€ € € EURO SIGN
™ ™ ™ TRADEMARK
← ← ← LEFTWARDS ARROW
↑ ↑ ↑ UPWARDS ARROW
→ → → RIGHTWARDS ARROW
↓ ↓ ↓ DOWNWARDS ARROW
♠ ♠ &spades; BLACK SPADE SUIT
68
♣ ♣ &clubs; BLACK CLUB SUIT
♥ ♥ &hearts; BLACK HEART SUIT
♦ ♦ &diams; BLACK DIAMOND SUIT
HTML Forms
The<form>Element
The HTML <form> element defines a form that is used to collect user input:
<form>
.
form elements
.
</form>
An HTML form contains form elements.
Form elements are different types of input elements, like text fields, checkboxes,
radio buttons, submit buttons, and more.
The<input>Element
The <input> element is the most important form element.
The <input> element can be displayed in several ways, depending on

the type attribute.
Here are some examples:
Type Description
<input type="text"> Defines a one-line text input field
69
<input type="radio"> Defines a radio button (for selecting one
of many choices)
<input type="submit"> Defines a submit button (for submitting

the form)
TextInput
<input type="te xt"> defines a one-line input field for text input:
Example
<form>
F i r s t name:<br>
<input t yp e = " t e xt " name="firstname"><br>
Last name:<br>
<input t yp e = " t e xt " name="lastname">
</form>
This is how it will look like in a browser:
First name:
Last name:
Note: The form itself is not visible. Also note that the default width of a text field is
20 characters.
Radio Button Input

<input type="radio"> defines a radio button.
Radio buttons let a user select ONE of a limited number of choices:
Example
<form>
<input t ype= " radio" name="gender" value="male" checked> Male<br>
<input t ype= " radio" name="gender" value="female"> Female<br>
<input t ype=" radio" name="gender" value="other"> Other
</form>
70
This is how the HTML code above will be displayed in a browser:
Male
Female
Other
TheSubmitButton
<input type="submit"> defines a button for submitting the form data to a form-
handler.
The form-handler is typically a server page with a script for processing input data.
The form-handler is specified in the form's action attribute:
Example
<form action="/action_page.php">
F i r s t name:<br>
<input t yp e = " t e xt " name="firstname" value="Mickey"><br>
Last name:<br>
<input t yp e = " t e xt " name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>
First name:
Mickey
Last name:
Mouse
Submit
TheActionAttribute
The action attribute defines the action to be performed when the form is
submitted.
Normally, the form data is sent to a web page on the server when the user clicks
on the submit button.
In the example above, the form data is sent to a page on the server called
"/action_page.php". This page contains a server-side script that handles the form
data:
71
If the action attribute is omitted, the action is set to the current page.
TheTargetAttribute
The t a r g e t attribute specifies if the submitted result will open in a new browser
tab, a frame, or in the current window.
The default value is " _self " which means the form will be submitted in the current
window.
To make the form result open in a new browser tab, use the value " _blank ":
Example
<form action="/action_page.php" target="_blank">
Other legal values are " _parent ", " _top ", or a name representing the name of an
iframe.
TheMethodAttribute
The method attribute specifies the HTTP method (GET or POST) to be used when
submitting the form data:
Example
<form action="/action_page.php" method="get">
or:
Example
<form action="/action_page.php" method="post">
When to Use GET?

The default method when submitting form data is GET.
However, when GET is used, the submitted form data will be visible in the page
address field:
/action_page.php?firstname=Mickey&lastname=Mouse
Notes on GET:
72
• Appends form-data into the URL in name/value pairs
• The length of a URL is limited (about 3000 characters)
• Never use GET to send sensitive data! (will be visible in the URL)
• Useful for form submissions where a user wants to bookmark the result
• GET is better for non-secure data, like query strings in Google
When to Use POST?

Always use POST if the form data contains sensitive or personal information. The
POST method does not display the submitted form data in the page address field.
Notes on POST:
• POST has no size limitations, and can be used to send large amounts of data.
• Form submissions with POST cannot be bookmarked
TheNameAttribute
Each input field must have a name attribute to be submitted.
If the name attribute is omitted, the data of that input field will not be sent at all.
This example will only submit the "Last name" input field:
Example
F i r s t name:<br>
<input t yp e = " t e xt " value="Mickey"><br>
Last name:<br>
</form>
Grouping Form Data with<fieldset>

The < fie ld se t> element is used to group related data in a form.
The < legend> element defines a caption for the < f i e l d s e t> element.
Example
<fieldset>
<legend>Personal inf ormation: </legend>
F i r s t name:<br>
73
Last name:<br>
</fieldset>
</form>
Personal information: First name:

Mickey
Last name:
Mouse
Submit
HTML FormElements
This chapter describes all HTML form elements.
The<input> Element
The most important form element is the <in put > element.
The <input> element can be displayed in several ways, depending on

the type attribute.
Example
<input name="firstname" t ype = " text">
If the type attribute is omitted, the input field gets the default type: "text".
All the different input types are covered in the next chapter.
The<select>Element
The <se lect > element defines a drop-down list:
Example
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option va l u e = " f i a t " >F i at < /o pt i o n >
74
<option value="audi">Audi</option>
< / select>
The <op tio n> elements defines an option that can be selected.
By default, the first item in the drop-down list is selected.
To define a pre-selected option, add the sele c t ed attribute to the option:
Example
<option v a l u e = " f i a t " selected>Fiat</option>
Visible Values:
Use the size attribute to specify the number of visible values:
Example
<select name="cars" size="3">
</ select>
Allow Multiple Selections:

Use the m u l t i p l e attribute to allow the user to select more than one value:
Example
<select name="cars" size="4" multiple>
< / select>
The<textarea>Element
The < texta r ea> element defines a multi-line input field (a text area):
Example
<textarea name="message" rows="10" cols="30">
The cat was playing i n the garden.
</textarea>
75
The rows attribute specifies the visible number of lines in a text area.
The cols attribute specifies the visible width of a text area.
You can also define the size of the text area by using CSS:
Example
<textarea name="message" style="width:200px; height:600px;">
The cat was playing i n the garden.
</textarea>
The<button> Element
The <bu tto n> element defines a clickable button:
Example
<button type="button" o n c l i c k = " a l e r t ( ' H e l l o W o r l d ! ' ) " > C l i c k Me!</button>
Click Me!
Note: Always specify the type attribute for the button element. Different browsers
may use different default types for the button element.
HTML5 FormElements
HTML5 added the following form elements:
• <da tal i s t >

• <ou tpu t>
Note: Browsers do not display unknown elements. New elements that are not
supported in older browsers will not "destroy" your web page.
76
HTML5 <datalist>Element
The <da ta li s t > element specifies a list of pre-defined options for
an <input> element.
Users will see a drop-down list of the pre-defined options as they input data.
The l i s t attribute of the <input> element, must refer to the i d attribute of

the < d a t a l i s t > element.
Example
<input list = " br owser s" >
< d a t a l i s t id="browsers">
<option value = " I nternet Explorer">
<option value="Firef ox">
<option value="Chrome">
<option value="Opera">
<option value="Saf ari">
</datalist>
</form>
HTML5 <output>Element
The <ou tput > element represents the result of a calculation (like one performed by
a script).
Example
Perform a calculation and show the result in an <output> element:
<form action="/action_page.php"
oninput ="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" i d = " a " name="a" value="50">
100 +
<input type="number" i d = " b " name="b" value="50">
=
<output name="x" f or = " a b"></output>
<br><br>
<input type="submit">
</form>
77
HTML InputTypes
This chapter describes the different input types for the <input> element.
HTML InputTypes
Here are the different input types you can use in HTML:
• <input type="button">
• <input type="checkbox">
• <input type="color">
• <input type="date">
• <input type="datetime -local">
• <input type="email">
• <input type="file">
• <input type="hidden">
• <input type="image">
• <input type="month">
• <input type="number">
• <input type="password">
• <input type="radio">
• <input type="range">
•
<input type="reset">
•
<input type="search">
•
<input t yp e = " t e l " >
•
<input type="te xt">
•
<input type="time">
•
<input t yp e = " u r l " >
•
<input type="week">
•
Input Type Text

<input type="te xt"> defines a one-line text input field:
Example
<form>
F i r s t name:<br>
<input t yp e = " t e xt " name="firstname"><br>
Last name:<br>
<input t yp e = " t e xt " name="lastname">
</form>
78
Input Type Password
<input type="password"> defines a password field:
Example
<form>
User name:<br>
<input t yp e = " t e xt " name="username"><br>
User password:<br>
<input type="password" name="psw">
</form>
Input Type Submit

<input type="submit"> defines a button for submitting form data to a form-
handler.
The form-handler is typically a server page with a script for processing input data.
The form-handler is specified in the form's action attribute:
Example
F i r s t name:<br>
Last name:<br>
</form>
Input Type Reset

<input type="reset"> defines a reset button that will reset all form values to
their default values:
Example
F i r s t name:<br>
Last name:<br>
<input type="reset">
</form>
79
If you change the input values and then click the "Reset" button, the form-data will
be reset to the default values.
Input Type Radio

<input type="radio"> defines a radio button.
Radio buttons let a user select ONLY ONE of a limited number of choices:
Example
<form>
<input t ype= " radio" name="gender" value="male" checked> Male<br>
<input t ype= " radio" name="gender" value="female"> Female<br>
<input t ype= " radio" name="gender" value="other"> Other
</form>
Input Type Checkbox

<input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of choices.
Example
<form>
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a car
</form>
I have a bike
I have a car
Input Type Button

<input type="button"> defines a button:
Example
<input type="button" o n c l i c k = " a l e r t ( ' H e l l o W o r l d ! ' ) " value="Click Me!">
80
HTML5 Input Types
HTML5 added several new input types:
• color
• date
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url
• week
New input types that are not supported by older web browsers, will behave
as <input type="text"> .
Input Type Color

The <input type="color"> is used for input fields that should contain a color.
Depending on browser support, a color picker can show up in the input field.
Example
<form>
Select your f a v o r i t e c o l o r :
<input t ype= " color " name="favcolor">
</form>
Input Type Date

The <input type="date"> is used for input fields that should contain a date.
Depending on browser support, a date picker can show up in the input field.
Example
<form>
B i r t h d ay:
<input type="date" name="bday">
</form>
You can also use the min and max attributes to add restrictions to dates:
81
Example
<form>
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31"><br>
Enter a date a f t e r 2000-01-01:
<input type="date" name="bday" min="2000-01-02"><br>
</form>
Input Type Datetime-local

The <input type="datetime -local"> specifies a date and time input field, with no
time zone.
Example
<form>
Birthday (date and t i m e ) :
<input t ype= " datetim e-local" name="bdaytime">
</form>
Input Type Email

The <input type="email"> is used for input fields that should contain an e-mail
address.
Depending on browser support, the e-mail address can be automatically validated

when submitted.
Some smartphones recognize the email type, and add ".com" to the keyboard to
match email input.
Example
<form>
E-mail:
<input type="email" name="email">
</form>
Input Type File

The <input t y p e = " f i l e " > defines a file-select field and a "Browse" button for file
uploads.
82
Example
<form>
Select a f i l e : <input t y p e = " f i l e " name="myFile">
</form>
Input Type Month

The <input type="month"> allows the user to select a month and year.
Example
<form>
Birthday (month and y e a r ) :
<input type="month" name="bdaymonth">
</form>
Input Type Number

The <input type="number"> defines a numeric input field.
You can also set restrictions on what numbers are accepted.
The following example displays a numeric input field, where you can enter a value
from 1 to 5:
Example
<form>
Quantity (between 1 and 5 ) :
<input type="number" name="quantity" min="1" max="5">
</form>
Input Restrictions
Here is a list of some common input restrictions:
Attribute Description
disabled Specifies that an input field should be disabled
83
max Specifies the maximum value for an input field
maxlength Specifies the maximum number of character for an input field
min Specifies the minimum value for an input field
pattern Specifies a regular expression to check the input value against
readonly Specifies that an input field is read only (cannot be changed)
required Specifies that an input field is required (must be filled out)
size Specifies the width (in characters) of an input field
step Specifies the legal number intervals for an input field
value Specifies the default value for an input field
You will learn more about input restrictions in the next chapter.
The following example displays a numeric input field, where you can enter a value
from 0 to 100, in steps of 10. The default value is 30:
Example
<form>
Q uant it y:
<input type="number" name="points" min="0" max="100" step="10" value="30">
</form>
84
Input Type Range
The <input type="range"> defines a control for entering a number whose exact
value is not important (like a slider control). Default range is 0 to 100. However,
you can set restrictions on what numbers are accepted with the min, max,
and step attributes:
Example
<form>
<input type="range" name="points" min="0" max="10">
</form>
Input Type Search

The <input type="search"> is used for search fields (a search field behaves like a
regular text field).
Example
<form>
Search Google:
<input type="search" name="googlesearch">
</form>
Input Type Tel

The <input t yp e = " t e l " > is used for input fields that should contain a telephone
number.
Example
<form>
Telephone:
<input t y p e = " t e l " name="phone" p a t t e r n = " [ 0 - 9 ] { 3 } - [ 0 - 9 ] { 2 } - [ 0 - 9 ] { 3 } " >
</form>
Input Type Time

The <input type="time"> allows the user to select a time (no time zone).
Depending on browser support, a time picker can show up in the input field.
85
Example
<form>
Select a t i m e :
<input type="time" name="usr_time">
</form>
Input Type Url

The <input t yp e = " u r l " > is used for input fields that should contain a URL
address.
Depending on browser support, the url field can be automatically validated when
submitted.
Some smartphones recognize the url type, and adds ".com" to the keyboard to
match url input.
Example
<form>
Add your homepage:
<input t y p e = " u r l " name="homepage">
</form>
Input Type Week

The <input type="week"> allows the user to select a week and year.
Example
<form>
Select a week:
<input type="week" name="week_year">
</form>
HTML InputAttributes
ThevalueAttribute
The value attribute specifies the initial value for an input field:
86
Example
<form action="">
F i r s t name:<br>
<input t yp e = " t e xt " name="firstname" value="John">
</form>
ThereadonlyAttribute
The re adonl y attribute specifies that the input field is read only (cannot be
changed):
Example
<form action="">
F i r s t name:<br>
<input t yp e = " t e xt " name="firstname" value="John" readonly>
</form>
ThedisabledAttribute
The d isab led attribute specifies that the input field is disabled.
A disabled input field is unusable and un-clickable, and its value will not be sent
when submitting the form:
Example
<form action="">
F i r s t name:<br>
<input t yp e = " t e xt " name="firstname" value="John" disabled>
</form>
ThesizeAttribute
The size attribute specifies the size (in characters) for the input field:
Example
<form action="">
F i r s t name:<br>
<input t yp e = " t e xt " name="firstname" value="John" size="40">
</form>
87
ThemaxlengthAttribute
The max l engt h attribute specifies the maximum allowed length for the input field:
Example
<form action="">
F i r s t name:<br>
<input t yp e = " t e xt " name="firstname" maxlength="10">
</form>
With a max l engt h attribute, the input field will not accept more than the allowed
number of characters.
The max l engt h attribute does not provide any feedback. If you want to alert the
user, you must write JavaScript code.
Note: Input restrictions are not foolproof, and JavaScript provides many ways to
add illegal input. To safely restrict input, it must be checked by the receiver (the
server) as well!
HTML5Attributes
HTML5 added the following attributes for <input> :
• autocomplete
• autofocus
• form
• formaction
• formenctype
• formmethod
• formnovalidate
• formtarget
• height and width
• list
• min and max
• multiple
• pattern (regexp)
• placeholder
• required
• step
and the following attributes for <form>:
• autocomplete
• novalidate
88
TheautocompleteAttribute
The auto comp let e attribute specifies whether a form or input field should have
autocomplete on or off.
When autocomplete is on, the browser automatically completes the input values
based on values that the user has entered before.
Tip: It is possible to have autocomplete "on" for the form, and "off" for specific
input fields, or vice versa.
The auto comp let e attribute works with <form> and the following <input> types:
text, search, url, tel, email, password, datepickers, range, and color.
Example
An HTML form with autocomplete on (and off for one input field):
<form action="/action_page.php" autocomplete="on">

F i r s t name:<input t yp e = " t e xt " name="fname"><br>
Last name: <input t yp e = " t e xt " name="lname"><br>
E- m ail: <input type="email" name="email" autocomplete="off"><br>
</form>
Tip: In some browsers you may need to activate the autocomplete function for this
to work.
ThenovalidateAttribute
The novalidate attribute is a <form> attribute.
When present, novalidate specifies that the form data should not be validated when
submitted.
Example
Indicates that the form is not to be validated on submit:
<form action="/action_page.php" novalidate>

E- m ail: <input type="email" name="user_email">
</form>
89
TheautofocusAttribute
The auto fo cus attribute specifies that the input field should automatically get focus
when the page loads.
Example
Let the "First name" input field automatically get focus when the page loads:
F i r s t name:<input t yp e = " t e xt " name="fname" autofocus>
TheformAttribute
The form attribute specifies one or more forms an <input> element belongs to.
Example
An input field located outside the HTML form (but still a part of the form):
<form action="/action_page.php" id="form1">

F i r s t name: <input t yp e = " t e xt " name="fname"><br>
</form>
Last name: <input t yp e = " t e xt " name="lname" form="form1">
TheformactionAttribute
The fo rmact io n attribute specifies the URL of a file that will process the input
control when the form is submitted.
The formaction attribute overrides the action attribute of the <fo rm> element.
The formaction attribute is used with type="submit" and type="image" .
Example
An HTML form with two submit buttons, with different actions:
<input type="submit" value="Submit"><br>
<input type="submit" formaction="/action_page2.php"
90
value="Submit as admin">
</form>
TheformenctypeAttribute
The fo rmenct y pe attribute specifies how the form data should be encoded when
submitted (only for forms with method="post").
The fo rmenct y pe attribute overrides the enctype attribute of the <form> element.
The fo rmenct y pe attribute is used with type="submit" and type="image" .
Example
Send form-data that is default encoded (the first submit button), and encoded as
"multipart/form-data" (the second submit button):
<form action="/action_page_binary.asp" method="post">

<input type="submit" f ormenctype="multipart/form-data"
value="Submit as Mult ipar t / f or m - data" >
</form>
TheformmethodAttribute
The fo rmmet hod attribute defines the HTTP method for sending form-data to the
action URL.
The fo rmmet hod attribute overrides the method attribute of the <form> element.
The fo rmmet hod attribute can be used with type="submit" and type="image" .
Example
The second submit button overrides the HTTP method of the form:
<form action="/action_page.php" method="get"> F i r s t

name: <input t yp e = " t e xt " name="fname"><br> Last
name: <input t yp e = " t e xt " name="lname"><br>
<input type="submit" formmethod="post" value="Submit using POST">
</form>
91
TheformnovalidateAttribute
The fo rmnova li dat e attribute overrides the novalidate attribute of
the <form element.
>
The formnovalidate attribute can be used with type="submit" .
Example
A form with two submit buttons (with and without validation):
E- m ail: <input type="email" name="userid"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formnovalidate value="Submit without v a l i d a t i o n " >
</form>
TheformtargetAttribute
The fo rmta r get attribute specifies a name or a keyword that indicates where to
display the response that is received after submitting the form.
The fo rmta r get attribute overrides the target attribute of the < fo rm> element.
The fo rmta r get attribute can be used with type="submit" and type="image" .
Example
A form with two submit buttons, with different target windows:
<input type="submit" value="Submit as normal">
<input type="submit" f ormtarget="_blank"
value="Submit t o a new window">
</form>
Theheight and width Attributes

The height and width attributes specify the height and width of an <input
t y pe=" i mage" > element.
Always specify the size of images. If the browser does not know the size, the page
will flicker while images load.
92
Example
Define an image as the submit button, with height and width attributes:
<input type="image" src="img_submit.gif " alt="Submit" width="48" height="48">
ThelistAttribute
The l i s t attribute refers to a < d a t a l i s t > element that contains pre-defined
options for an <input> element.
Example
An <input> element with pre-defined values in a <datalist>:
<input list = " br owser s" >
< d a t a l i s t id="browsers">
<option value = " I nternet Explorer">
<option value="Firef ox">
<option value="Chrome">
<option value="Opera">
<option value="Saf ari">
</datalist>
Themin and maxAttributes

The min and max attributes specify the minimum and maximum values for
an <input> element.
The min and max attributes work with the following input types: number, range,
date, datetime-local, month, time and week.
Example
<input> elements with min and max values:
Enter a date before 1980-01-01:

<input type="date" name="bday" max="1979-12-31">
Enter a date a f t e r 2000-01-01:

<input type="date" name="bday" min="2000-01-02">
Quantity (between 1 and 5 ) :

<input type="number" name="quantity" min="1" max="5">
93
ThemultipleAttribute
The mul t ip l e attribute specifies that the user is allowed to enter more than one
value in the <input> element.
The mul t ip l e attribute works with the following input types: email, and file.
Example
A file upload field that accepts multiple values:
Select images: <input t y p e = " f i l e " name="img" m ult iple >
ThepatternAttribute
The pattern attribute specifies a regular expression that the < input > element's
value is checked against.
The pattern attribute works with the following input types: text, search, url, tel,
email, and password.
Tip: Use the global title attribute to describe the pattern to help the user.
Tip: Learn more about regular expressions in our JavaScript tutorial.
Example
An input field that can contain only three letters (no numbers or special
characters):
Country code: <input t yp e = " t e xt " name="country_code" pattern="[A-Za-

z ] { 3 } " t i t l e = " T h r e e l e t t e r country code">
TheplaceholderAttribute
The p lacehold er attribute specifies a hint that describes the expected value of an
input field (a sample value or a short description of the format).
The hint is displayed in the input field before the user enters a value.
The p lacehold er attribute works with the following input types: text, search, url,
tel, email, and password.
94
Example
An input field with a placeholder text:
<input t yp e = " t e xt " name="fname" placeholder =" Fir st name">
TherequiredAttribute
The re qui r ed attribute specifies that an input field must be filled out before
submitting the form.
The re qui r ed attribute works with the following input types: text, search, url, tel,
email, password, date pickers, number, checkbox, radio, and file.
Example
A required input field:
Username: <input t yp e = " t e xt " name="usrname" required>
ThestepAttribute
The step attribute specifies the legal number intervals for an < inpu t> element.
Example: if step="3", legal numbers could be -3, 0, 3, 6, etc.
Tip: The step attribute can be used together with the max and min attributes to
create a range of legal values.
The step attribute works with the following input types: number, range, date,
datetime-local, month, time and week.
Example
An input field with a specified legal number intervals:
<input type="number" name="points" step="3">
95

HTML Notes

Uploaded by

Document Informationclick to expand document information

Document Informationclick to expand document information

Copyright:

Available Formats

HTML Notes

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 Notes

Uploaded by

Copyright:

Available Formats

UPCISS

• HTML stands for Hyper Text Markup Language

<tagname>content goes here...</tagname>

• HTML tags normally come in pairs like <p> and </p>

The <!DOCTYPE> declaration is not case sensitive.

The <!DOCTYPE> declaration for HTML5 is: <!DOCTYPE html>

The link's destination is specified in the h re f attribute.

Attributes are used to provide additional information about HTML elements.

You will learn more about attributes in a later chapter.

Formatting elements were designed to display special types of text:

• <b> - Bold text

The filename of the image source is specified in the src attribute:

Thewidth and height Attributes

The language is declared with the lang attribute.

Declaring a language is important for accessibility applications (screen readers) and

We Suggest: Use Lowercase Attributes

UPCISS recommends lowercase in HTML, and demands lowercase for stricter

We Suggest: Quote Attribute Values

The h r e f attribute, demonstrated above, can be written without quotes:

Single or Double Quotes?

<p t i t l e = ' L u " L u c k n o w " u p '>

<p t i t l e = " L u ' L u c k n o w ’ U p ">

Single or double Quotes?

Lucknow to single quotes

TheHTML <pre> Element

The HTML s t y l e attribute has the following syntax:

<tagname s t yl e = " pr op er t y : val u e; " >

The property is a CSS property. The value is a CSS value.

You will learn more about CSS later in this tutorial.

This example sets the background color for a page to powderblue:

HTML Quotation and Citation Elements

Browsers usually insert quotation marks around the <q> element.

HTML <blockquote> forQuotations

Browsers usually indent <blockquote> elements.

HTML <abbr> for Abbreviations

Marking abbreviations can give useful information to browsers, translation systems

HTML <address> for ContactInformation

HTML <cite> for WorkTitle

Browsers usually display <cite> elements in italic.

HTML <bdo> for Bi-DirectionalOverride

The <bdo> element is used to override the current text direction:

Same as color name "Tomato":

rgb(255, 99, 71)

<h1 style="background-color:rgba(255, 99, 71, 0 . 5 ) ; " > . . . < / h 1 >

rgb(red, green, blue)

Experiment by mixing the RGB values below:

rgb(255, 99, 71)

rgb(60, 179, 113)

rgb(238, 130, 238)

rgb(106, 90, 205)

rgb(60, 60, 60)

rgb(120, 120, 120)

rgb(240, 240, 240)

rgb(255, 255, 255)

hsl(hue, saturation, lightness)

Lightness is also a percentage, 0% is black, 50% is neither light or dark, 100% is

hsl(240, 100%, 50%)