Scribd
Upload
97 views

What Is HTML

HTML is the standard markup language used to create web pages. It uses tags to define headings, paragraphs, images, links and other page elements. An HTML document consists of nested elements that describe the structure of the page. Elements are made up of opening and closing tags that contain content. Attributes provide additional information about elements. Common elements include headings, paragraphs, links, images and lists.

Uploaded by

Suman Kumari
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
97 views

What Is HTML

HTML is the standard markup language used to create web pages. It uses tags to define headings, paragraphs, images, links and other page elements. An HTML document consists of nested elements that describe the structure of the page. Elements are made up of opening and closing tags that contain content. Attributes provide additional information about elements. Common elements include headings, paragraphs, links, images and lists.

Uploaded by

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

1

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 Web pages using markup
 HTML elements are the building blocks of HTML pages
 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

A Simple HTML Document

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>

RESULT-:
My First Heading
My first paragraph.

Here,
 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 <title> 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
2

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.

HTML Page Structure


Below is a visualization of an HTML page structure:

<html>

<head>

<title>Page title</title>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

</body>

</html>

Note: Only the content inside the <body> section (the white area above) is displayed in a browser.

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

HTML Versions

Since the early days of the web, there have been many versions of HTML:
Version Year

HTML 1991

HTML 2.0 1995

HTML 3.2 1997

HTML 4.01 1999

XHTML 2000

HTML5 2014

HTML BASIC
HTML Documents

All HTML documents must start with a document type declaration: <!DOCTYPE html>.
The HTML document itself begins with <html> and ends with </html>.
The visible part of the HTML document is between <body> and </body>.

Example
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>

HTML Headings

HTML headings are defined with the <h1> to <h6> tags.


<h1> defines the most important heading. <h6> defines the least important heading:

Example
<!DOCTYPE html>
<html>
<body>
4

<h1>This is heading 1</h1>


<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

</body>
</html>

RESULT:-

This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6

HTML Paragraphs

HTML paragraphs are defined with the <p> tag:

Example
<!DOCTYPE html>
<html>
<body>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

RESULT:-
This is a paragraph.
This is another paragraph.
5

HTML Links

HTML links are defined with the <a> tag:

Example
<!DOCTYPE html>
<html>
<body>

<h2>HTML Links</h2>
<p>HTML links are defined with the a tag:</p>

<a href="img.jpg">This is a link</a>

</body>
</html>

The link's destination is specified in the href attribute.


Attributes are used to provide additional information about HTML elements.

HTML Images
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width, and height are provided as attributes:
<!DOCTYPE html>
<html>
<body>

<h2>HTML Images</h2>
<p>HTML images are defined with the img tag:</p>

<img src="xyz.jpg" alt=”xyz.com" width="104" height="142">

</body>
</html>
6

HTML Buttons
HTML buttons are defined with the <button> tag:

Example
<!DOCTYPE html>
<html>
<body>

<h2>HTML Buttons</h2>
<p>HTML buttons are defined with the button tag:</p>

<button>Click me</button>

</body>
</html>

HTML Lists

HTML lists are defined with the <ul> (unordered/bullet list) or the <ol> (ordered/numbered list) tag,
followed by <li> tags (list items):

Example
<!DOCTYPE html>
<html>
<body>

<h2>An Unordered HTML List</h2>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

<h2>An Ordered HTML List</h2>

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
7

</body>
</html>

RESULT:-
An Unordered HTML List
 Coffee
 Tea
 Milk
An Ordered HTML List
1. Coffee
2. Tea
3. Milk
4.

HTML Elements
An HTML element usually consists of a start tag and end tag, with the content inserted in
between:

<tagname>Content goes here...</tagname>

The HTML element is everything from the start tag to the end tag:

<p>My first paragraph.</p>

Start tag Element content End tag

<h1> My First Heading </h1>

<p> My first paragraph. </p>

<br>

HTML elements with no content are called empty elements. Empty elements do not have an end
tag, such as the <br> element (which indicates a line break).

Nested HTML Elements


HTML elements can be nested (elements can contain elements).

All HTML documents consist of nested HTML elements.


8

This example contains four HTML elements:


Example
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>

RESULT:-
My First Heading
My first paragraph.

HTML Attributes
Attributes provide additional information about HTML elements.
 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"

The href Attribute

HTML links are defined with the <a> tag. The link address is specified in the href attribute:

Example
<a href="https://wwwxyz.com">This is a link</a>

The src Attribute

HTML images are defined with the <img> tag.


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

Example
<img src="img_girl.jpg">
9

The width and height Attributes

Images in HTML have a set of size attributes, which specifies the width and height of the image:

Example
<img src="img_girl.jpg" width="500" height="600">

The image size is specified in pixels: width="500" means 500 pixels wide.

The alt Attribute

The alt attribute specifies an alternative text to be used, when an image cannot be displayed.
The value of the 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 src="img_girl.jpg" alt="Girl with a jacket">
Note: The alt attribute is also useful if the image does not exist

The style Attribute


The style attribute is used to specify the styling of an element, like color, font, size etc.

Example
<!DOCTYPE html>
<html>
<body>

<h2>The style Attribute</h2>


<p>The style attribute is used to specify the styling of an element, like
color:</p>

<p style="color:red">I am a paragraph.</p>

</body>
</html>

RESULT
The style Attribute
The style attribute is used to specify the styling of an element, like color:
I am a paragraph.
10

HTML Headings
Headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading.
Example
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Note: Browsers automatically add some white space (a margin) before and after a heading.

Bigger Headings
Each HTML heading has a default size. However, you can specify the size for any heading with
the style attribute, using the CSS font-size property:

Example
<h1 style="font-size:60px;">Heading 1</h1>

HTML Horizontal Rules


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:

<!DOCTYPE html>
<html>
<body>

<h1>This is heading 1</h1>


<p>This is some text.</p>
<hr>

<h2>This is heading 2</h2>


<p>This is some other text.</p>
<hr>

<h2>This is heading 2</h2>


<p>This is some other text.</p>

</body>
</html>
11

RESULT
This is heading 1
This is some text.

This is heading 2
This is some other text.

This is heading 2
This is some other text.

The HTML Style Attribute


Setting the style of an HTML element, can be done with the style attribute.

The HTML style attribute has the following syntax:

<tagname style="property:value;">
The property is a CSS property. The value is a CSS value.

HTML Background Color


The background-color property defines the background color for an HTML element.
This example sets the background color for a page to powderblue:

Example

<!DOCTYPE html>
<html>
<body style="background-color:powderblue;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

HTML Text Color


12

The color property defines the text color for an HTML element:

Example
<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;">This is a heading</h1>


<p style="color:red;">This is a paragraph.</p>

</body> </html>

HTML Fonts
The font-family property defines the font to be used for an HTML element:

Example
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>

HTML Text Size


The font-size property defines the text size for an HTML element:

Example
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>

HTML Text Alignment


The text-align property defines the horizontal text alignment for an HTML element:

Example
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>

HTML Text Formatting

HTML Formatting Elements


In the previous chapter, you learned about the HTML style attribute.
13

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
 <strong> - Important text
 <i> - Italic text
 <em> - Emphasized text
 <mark> - Marked text
 <small> - Small text
 <del> - Deleted text
 <ins> - Inserted text
 <sub> - Subscript text
 <sup> - Superscript text

HTML <b> and <strong> Elements


The HTML <b> element defines bold text, without any extra importance.

Example
<b>This text is bold</b>

The HTML <strong> element defines strong text, with added semantic "strong" importance.

Example

<strong>This text is strong</strong>

HTML <i> and <em> Elements


The HTML <i> element defines italic text, without any extra importance.

Example
<i>This text is italic</i>

The HTML <em> element defines emphasized text, with added semantic importance.

Example

<em>This text is emphasized</em>


14

Note: Browsers display <strong> as <b>, and <em> as <i>. However, there is a difference in
the meaning of these tags: <b> and <i> defines bold and italic text,
but <strong> and <em> means that the text is "important".

HTML <small> Element


The HTML <small> element defines smaller text:

Example
<h2>HTML <small>Small</small> Formatting</h2>

HTML <mark> Element

The HTML <mark> element defines marked or highlighted text:

Example
<h2>HTML <mark>Marked</mark> Formatting</h2>

HTML <del> Element


The HTML <del> element defines deleted (removed) text.

Example
<p>My favorite color is <del>blue</del> red.</p>

HTML <ins> Element

The HTML <ins> element defines inserted (added) text.

Example
<p>My favorite <ins>color</ins> is red.</p>

HTML <sub> Element


15

The HTML <sub> element defines subscripted text.

Example
<p>This is <sub>subscripted</sub> text.</p>

HTML <sup> Element


The HTML <sup> element defines superscripted text.

Example
<p>This is <sup>superscripted</sup> text.</p>

HTML Text Formatting Elements

Tag Description

<b> Defines bold text

<em> Defines emphasized text

<i> Defines italic text

<small> Defines smaller text

<strong> Defines important text

<sub> Defines subscripted text

<sup> Defines superscripted text

<ins> Defines inserted text


16

<del> Defines deleted text

<mark> Defines marked/highlighted text

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

Orange

DodgerBlue

MediumSeaGreen

Gray

SlateBlue
17

Violet

LightGray

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>

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

Example
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

Border Color

You can set the color of borders:

Hello World
Hello World
Hello World

Example
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello 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)

#ff6347

hsl(9, 100%, 64%)


Same as color name "Tomato", but 50% transparent:
19

rgba(255, 99, 71, 0.5)

hsla(9, 100%, 64%, 0.5)


Example
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

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


<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

RGB Value
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 the color black, all color parameters must be set to 0, like this: rgb(0, 0, 0).
To display the color white, all color parameters must be set to 255, like this: rgb(255, 255,
255).
Experiment by mixing the RGB values below:

rgb(255, 99, 71)


RED
255
GREEN
99
BLUE
71

Example

rgb(255, 0, 0)

rgb(0, 0, 255)
20

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)

rgb(180, 180, 180)

rgb(240, 240, 240)

rgb(255, 255, 255)


21

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

#ee82ee

#ffa500

#6a5acd

Shades of gray are often defined using equal values for all the 3 light sources:
Example

#000000

#3c3c3c

#787878
22

#b4b4b4

#f0f0f0

#ffffff

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

hsl(0, 100%, 50%)

hsl(240, 100%, 50%)

hsl(147, 50%, 47%)

hsl(300, 76%, 72%)

hsl(39, 100%, 50%)

hsl(248, 53%, 58%)


23

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

hsl(0, 100%, 50%)

hsl(0, 80%, 50%)

hsl(0, 60%, 50%)

hsl(0, 40%, 50%)

hsl(0, 20%, 50%)

hsl(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).
Example

hsl(0, 100%, 0%)

hsl(0, 100%, 25%)


24

hsl(0, 100%, 50%)

hsl(0, 100%, 75%)

hsl(0, 100%, 90%)

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

hsl(0, 0%, 0%)

hsl(0, 0%, 24%)

hsl(0, 0%, 47%)

hsl(0, 0%, 71%)

hsl(0, 0%, 94%)

hsl(0, 0%, 100%)

RGBA Value
25

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

rgba(255, 99, 71, 0)

rgba(255, 99, 71, 0.2)

rgba(255, 99, 71, 0.4)

rgba(255, 99, 71, 0.6)

rgba(255, 99, 71, 0.8)

rgba(255, 99, 71, 1)

HSLA Value
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):
Example

hsla(9, 100%, 64%, 0)


26

hsla(9, 100%, 64%, 0.2)

hsla(9, 100%, 64%, 0.4)

hsla(9, 100%, 64%, 0.6)

hsla(9, 100%, 64%, 0.8)

hsla(9, 100%, 64%, 1)

Styling HTML with CSS


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.
Tip: You can learn much more about CSS in our CSS Tutorial.

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 style="color:blue;">This is a Blue Heading</h1>

Internal CSS
An internal CSS is used to define a style for a single HTML page.
27

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;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

External CSS
An external style sheet is used to define the style for many HTML pages.
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>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</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 {
28

color: blue;
}
p {
color: red;
}

CSS Fonts
The CSS color property defines the text color to be used.
The CSS font-family property defines the font to be used.
The CSS font-size property defines the text size to be used.
Example
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

CSS Border

The CSS border property defines a border around an HTML element:


Example
<!DOCTYPE html>
<html>
<head>
29

<style>
p {
border: 1px solid powderblue;
}
</style>
</head>
<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

</body>
</html>

CSS Padding
The CSS padding property defines a padding (space) between the text and the border:
Example
p {
border: 1px solid powderblue;
padding: 30px;
}

CSS Margin
The CSS margin property defines a margin (space) outside the border:
Example
p {
border: 1px solid powderblue;
margin: 50px;
}

The id Attribute
To define a specific style for one special element, add an id attribute to the element:
<p id="p01">I am different</p>
then define a style for the element with the specific id:
Example
#p01 {
color: blue;
}
Note: The id of an element should be unique within a page, so the id selector is used to select
one unique element!
30

The class Attribute


To define a style for special types of elements, add a class attribute to the element:
<p class="error">I am different</p>
then define a style for the elements with the specific class:

Example
<!DOCTYPE html>
<html>
<head>
<style>
p.error {
color: red;
}
</style>
</head>
<body>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p class="error">I am different.</p>
<p>This is a paragraph.</p>
<p class="error">I am different too.</p>

</body>
</html>

RESULT
This is a paragraph.
This is a paragraph.
I am different.
This is a paragraph.
I am different too.

HTML Links
Links are found in nearly all web pages. Links allow users to click their way from page
to page.

HTML Links - Hyperlinks


31

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.

HTML Links - Syntax


In HTML, links are defined with the <a> tag:
<a href="url">link text</a>

Example
<a href="https://www.xyz.com/html/">Visit web site</a>
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 Link Colors


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 {
color: green;
background-color: transparent;
text-decoration: none;
}

a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}
32

a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}

a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style>

HTML Links - The target Attribute


The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:
 _blank - Opens the linked document in a new window or tab
 _self - Opens the linked document in the same window/tab as it was clicked (this is
default)
 _parent - 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.xyz.com/" target="_blank">Visit our Schools!</a>

Tip: If your webpage is locked in a frame, you can use target="_top" to break out of the
frame:

Example
<a href="https://www.w3schools.com/html/" target="_top">HTML5 tutorial!</a>

HTML Links - Image as Link

It is common to use images as links:


33

Example
<a href="default.asp">
<img src="smiley.gif" alt="HTML
tutorial" style="width:42px;height: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).

Link Titles
The title 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.xyz.com/html/" title="Go to HTML section">Visit our
school</a>

HTML Links - Create a Bookmark


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 id 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 to 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 to 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.xyz.com/html/default.asp">HTML</a>
34

HTML Images
Images can improve the design and the appearance of a web page.

Example
<img src="pic_trulli.jpg" alt="Italian Trulli">

HTML Images Syntax


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 src="url">

The alt Attribute


The alt 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 alt attribute should describe the image:

Example
<img src="img_chania.jpg" alt="Flowers in Chania">

If a browser cannot find an image, it will display the value of the alt attribute:

Example
<img src="wrongname.gif" alt="Flowers in Chania">

Note: The alt attribute is required. A web page will not validate correctly without it.

Image Size - Width and Height


You can use the style attribute to specify the width and height of an image.

Example
35

<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">

Alternatively, you can use the width and height attributes:

Example
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

The width and height attributes always defines the width and height of the image in pixels.
Note: Always specify the width and height of an image. If width and height are not
specified, the page might flicker while the image loads.

Width and Height, or Style?


The width, height, and style attributes are valid in HTML5.
However, we suggest using the style attribute. It prevents styles sheets from changing the
size of images:
Example
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">


<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

</body>
</html>

Images in Another Folder


If not specified, the browser expects to find the image in the same folder as the web page.
However, it is common to store images in a sub-folder. You must then include the folder
name in the src attribute:

Example

<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">


36

Images on Another Server


Some web sites store their images on image servers.
Actually, you can access images from any web address in the world:

Example
<img src="https://www.xyz.com/images/green.jpg" alt="xyz.com">

Animated Images
HTML allows animated GIFs:-

Example
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">

Image as a Link
To use an image as a link, put the <img> tag inside the <a> tag:-

Example

<a href="default.asp">
<img src="smiley.gif" alt="HTML
tutorial" style="width:42px;height: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 float property to let the image float to the right or to the left of a text:

Example
<p><img src="smiley.gif" alt="Smiley
face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>

<p><img src="smiley.gif" alt="Smiley


37

face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>

Image Maps
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
<!DOCTYPE html>
<html>
<body>

<h2>Image Maps</h2>
<p>Click on the computer, the phone, or the cup of coffee to go to a new page and
read more about the topic:</p>

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400"


height="379">

<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" alt="Cup of coffee" href="coffee.htm">
</map>

</body>
</html>

Image Maps
Click on the computer, the phone, or the cup of coffee to go to a new page and read
more about the topic:
38

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 <area> tags, that define the clickable areas in the
image-map.

Background Image
To add a background image on an HTML element, use the CSS property background-image:
Example

To add a background image on a web page, specify the background-image property on the
BODY element:

<body style="background-image:url('clouds.jpg')">

<h2>Background Image</h2>

</body>

The <picture> Element


HTML5 introduced the <picture> element to add more flexibility when specifying image
resources.
39

The <picture> element contains a number of <source> elements, each referring to different
image sources. This way the browser can choose the image that best fits the current view and/or
device.
Each <source> element have attributes describing when their image is the most suitable.
The browser will use the first <source> element with matching attribute values, and ignore any
following <source>elements.

Example
Show one picture if the browser window (viewport) is a minimum of 650 pixels, and another
image if not, but larger than 465 pixels.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h2>The picture Element</h2>

<picture>
<source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width: 465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

<p>Resize the browser to see different versions of the picture loading at different viewport
sizes.
The browser looks for the first source element where the media query matches the user's
current viewport width,
and fetches the image specified in the srcset attribute.</p>

<p>The img element is required as the last child tag of the picture declaration block.
The img element is used to provide backward compatibility for browsers that do not support
the picture element, or if none of the source tags matched.
</p>

<p><strong>Note:</strong> The picture element is not supported in IE12 and earlier or


Safari 9.0 and earlier.</p>

</body>
</html>

RESULT

The picture Element


40

Resize the browser to see different versions of the picture loading at different
viewport sizes. The browser looks for the first source element where the media query
matches the user's current viewport width, and fetches the image specified in the
srcset attribute.
The img element is required as the last child tag of the picture declaration block. The
img element is used to provide backward compatibility for browsers that do not
support the picture element, or if none of the source tags matched.
Note: The picture element is not supported in IE12 and earlier or Safari 9.0 and
earlier.
Note: Always specify an <img> element as the last child element of the <picture> element.
The <img>element is used by browsers that do not support the <picture> element, or if
none of the <source> tags matched.

HTML Tables
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}

td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}

tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
41

<h2>HTML Table</h2>

<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>

</body>
</html>
42

RESULT
HTML Table
Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy

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.

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

</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 a Border


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
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>

<h2>Bordered Table</h2>
<p>Use the CSS border property to add a border to the table.</p>

<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>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
44

</tr>
</table>

</body>
</html>

RESULT
Bordered Table
Use the CSS border property to add a border to the table.
Firstname Lastname Age
Jill Smith 50
Eve Jackson 94
John Doe 80

Remember to define borders for both the table and the table cells.

HTML Table - Collapsed Borders


If you want the borders to collapse into one border, add the CSS border-collapse property:
Example
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
Collapsed Borders
If you want the borders to collapse into one border, add the CSS border-collapse
property.
Firstname Lastname Age
Jill Smith 50
Eve Jackson 94
John Doe 80

HTML Table - Adding Cell Padding


Cell padding specifies the space between the cell content and its borders.
45

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
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
}
</style>
</head>
<body>

<h2>Cellpadding</h2>
<p>Cell padding specifies the space between the cell content and its borders.</p>

<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>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>

<p>Try to change the padding to 5px.</p>

</body>
</html>

Result
46

Cellpadding
Cell padding specifies the space between the cell content and its borders.
Firstname Lastname Age

Jill Smith 50

Eve Jackson 94

John Doe 80
Try to change the padding to 5px.

HTML Table - Left-align Headings


By default, table headings are bold and centered.

To left-align the table headings, use the CSS text-align property:

Example
th {
text-align: left;
}

HTML Table - Adding Border Spacing


Border spacing specifies the space between the cells.

To set the border spacing for a table, use the CSS border-spacing property:

Example
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
padding: 5px;
}
table {
border-spacing: 15px;
47

}
</style>
</head>
<body>

<h2>Border Spacing</h2>
<p>Border spacing specifies the space between the cells.</p>

<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>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>

<p>Try to change the border-spacing to 5px.</p>

</body>
</html>

Border Spacing
Border spacing specifies the space between the cells.

Firstname Lastname Age


Jill Smith 50
48

Eve Jackson 94
John Doe 80

Try to change the border-spacing to 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:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>

<h2>Cell that spans two columns</h2>


<p>To make a cell span more than one column, use the colspan attribute.</p>

<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>

</body>
49

</html>

RESULT

Cell that spans two columns


To make a cell span more than one column, use the colspan attribute.

Name Telephone
Bill Gates 55577854 55577855

HTML Table - Cells that Span Many Rows


To make a cell span more than one row, use the rowspan attribute:

Example
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>

<h2>Cell that spans two rows</h2>


<p>To make a cell span more than one row, use the rowspan attribute.</p>

<table style="width:100%">
50

<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>

</body>
</html>

RESULT

Cell that spans two rows


To make a cell span more than one row, use the rowspan attribute.

Name: Bill Gates


55577854
Telephone:
55577855

HTML Table - Adding a Caption


To add a caption to a table, use the <caption> tag:

Example
<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
51

</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>

RESULT

Table Caption
To add a caption to a table, use the caption tag.

Monthly savings
Month Savings
January $100
February $50

Note: The <caption> tag must be inserted immediately after the <table> tag.

A Special Style for One Table


To define a special style for a special table, add an id attribute to the table:

Example
<table id="t01">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
52

Now you can define a special style for this table:


<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
text-align: left;
}
table#t01 {
width: 100%;
background-color: #f1f1c1;
}
</style>
</head>
<body>

<h2>Styling Tables</h2>

<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>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
53

</table>
<br>

<table id="t01">
<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>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>

</body>
</html>
RESULT

Styling Tables

Firstname Lastname Age

Jill Smith 50

Eve Jackson 94

John Doe 80

Firstname Lastname Age


54

Jill Smith 50

Eve Jackson 94 <!DOCTYP


E html>
<html>
John Doe 80 <head>
<style>
table {
width:100%;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
text-align: left;
}
table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color: #fff;
}
table#t01 th {
background-color: black;
color: white;
}
</style>
</head>
<body>

<h2>Styling Tables</h2>

<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
55

<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
<br>

<table id="t01">
<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>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>

</body>
</html>
56

RESULT

Styling Tables

Firstname Lastname Age

Jill Smith 50

Eve Jackson 94

John Doe 80

Firstname Lastname Age

Jill Smith 50

Eve Jackson 94

John Doe 80

HTML Lists
Unordered HTML List
An unordered list starts with the <ul> tag. Each list item starts with the <li> 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>
57

Unordered HTML List - Choose List Item Marker


The CSS list-style-type 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 style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Example - Circle
<ul style="list-style-type:circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Example - Square
<ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
58

Example - None
<ul style="list-style-type:none">
<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 <li> tag.

The list items will be marked with numbers by default:

Example
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Ordered HTML List - The Type Attribute


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
59

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>

Uppercase Letters:
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Lowercase Letters:
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Uppercase Roman Numbers:


<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Lowercase Roman Numbers:


<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
60

HTML Description Lists


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
<!DOCTYPE html>
<html>
<body>

<h2>A Description List</h2>

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

</body>
</html>

RESULT

A Description List
Coffee
- black hot drink
Milk
- white cold drink

Nested HTML Lists


List can be nested (lists inside lists):

Example
<!DOCTYPE html>
<html>
61

<body>

<h2>A Nested List</h2>


<p>List can be nested (lists inside lists):</p>

<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>

</body>
</html>

RESULT

A Nested List
List can be nested (lists inside lists):

 Coffee
 Tea
o Black tea
o Green tea
 Milk

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 start attribute:

Example
<!DOCTYPE html>
<html>
<body>
62

<h2>The start attribute</h2>


<p>By default, an ordered list will start counting from 1. Use the start
attribute to start counting from a specified number:</p>

<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

<ol type="I" start="50">


<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

</body>
</html>

RESULT

The start attribute


By default, an ordered list will start counting from 1. Use the start attribute to start
counting from a specified number:

50. Coffee
51. Tea
52. Milk

L. Coffee
LI. Tea
LII. Milk

Horizontal List with CSS


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:


63

Example
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}

li a:hover {
background-color: #111111;
}
</style>
</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>
64

Navigation Menu
In this example, we use CSS to style the list horizontally, to create a navigation menu:

 Home
 News
 Contact
 About

HTML Block and Inline Elements


Every HTML element has a default display value depending on what type of element it
is. The default display value for most elements is block or 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
<!DOCTYPE html>
<html>
<body>

<div>Hello</div>
<div>World</div>

<p>The DIV element is a block element, and will start on a new line.</p>

</body>
</html>

RESULT
Hello
World

The DIV element is a block element, and will start on a new line.
65

Block level elements in HTML:

<address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset>
<figcaption> <figure> <footer> <form> <h1>-<h6> <header> <hr> <li> <main> <nav>
<noscript> <ol> <output> <p> <pre> <section> <table> <tfoot> <ul> <video>

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
<!DOCTYPE html>
<html>
<body>

<span>Hello</span>
<span>World</span>

<p>The SPAN element is an inline element, and will not start on a new line.</p>

</body>
</html>

Inline elements in HTML:

<a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> <dfn> <em> <i> <img>
<input> <kbd> <label> <map> <object> <q> <samp> <script> <select> <small> <span>
<strong> <sub> <sup> <textarea> <time> <tt> <var>
66

The <div> Element


The <div> element is often used as a container for other HTML elements.

The <div> element has no required attributes, but style, class and id are common.

When used together with CSS, the <div> element can be used to style blocks of content:

Example

The <span> Element


The <span> element is often used as a container for some text.

The <span> element has no required attributes, but style, class and id are common.

When used together with CSS, the <span> element can be used to style parts of the text:

Example
<!DOCTYPE html>
<html>
<body>

<h1>My <span style="color:red">Important</span> Heading</h1>

</body>
</html>

You might also like