-1-
-2-
- 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
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
- 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
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:
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 Editors
Write HTML Using Notepad or TextEdit
HTML Basic Examples
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>.
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</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:
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
HTML Paragraphs
HTML paragraphs are defined with the <p> tag:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is another paragraph.</p>
HTML Links
HTML links are defined with the <a> tag:
<a href="https://www.w3schools.com">This is a link</a>
HTML Images
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width,
and height are
provided as attributes:
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
HTML Buttons
HTML buttons are defined with the <button> tag:
<button>Click me</button>
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):
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
HTML Elements
HTML Elements
An HTML element usually consists of a start tag
and an 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>
|
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):
HTML Is Not Case Sensitive
HTML tags are not case sensitive: <P> means the same as
<p>.
The HTML5 standard does not require lowercase tags, but W3C recommends lowercase
in HTML, and demandslowercase for stricter document types like
XHTML.
HTML Attributes
Attributes provide additional information about HTML elements.
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"
The href Attribute
HTML links are defined with the <a> tag. The link address
is specified in the href attribute:
<a href="https://www.w3schools.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:
<img src="img_girl.jpg">
The width and height Attributes
HTML images also have width and height attributes, which
specifies the width and height of the image:
<img src="img_girl.jpg" 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.
The alt Attribute
The alt attribute
specifies an alternative text to be used, if an image cannot be displayed.
The value of the alt 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">
Example
See what
happens if we try to display an image that does not exist:
<img src="img_typo.jpg" alt="Girl with a
jacket">
The style Attribute
The style attribute
is used to specify the styling of an element, like color, font, size etc.
Example
<p style="color:red">This
is a paragraph.</p>
The lang Attribute
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>
<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).
The title Attribute
Here, a title 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:
Example
<p title="I'm a tooltip">
This is a paragraph.
</p>
This is 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.
W3C 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 href attribute,
demonstrated above, can be written without quotes:
Bad
<a href=https://www.w3schools.com>
Good
<a href="https://www.w3schools.com">
Example
<p title=About W3Schools>
Single or Double Quotes?
Double quotes around attribute values are the most common in HTML,
but single quotes can also be used.
In some situations, when the attribute value itself contains
double quotes, it is necessary to use single quotes:
<p title='John "ShotGun" Nelson'>
Or vice versa:
<p title="John 'ShotGun' Nelson">
HTML Attributes
Below is an alphabetical list of some attributes often used in
HTML, which you will learn more about in this tutorial:
Attribute
|
Description
|
alt
|
Specifies an alternative text for an image,
when the image cannot be displayed
|
disabled
|
Specifies that an input element should be
disabled
|
href
|
Specifies the URL (web address) for a link
|
id
|
Specifies a unique id for an element
|
src
|
Specifies the URL (web address) for an image
|
style
|
Specifies an inline CSS style for an element
|
title
|
Specifies extra information about an element
(displayed as a tool tip)
|
HTML Headings
Heading 1
Heading
2
Heading
3
Heading
4
Heading
5
Heading
6
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>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Headings Are Important
Search engines use the headings to index the structure and content
of your web pages.
Users often skim a page by its headings. It is important to use
headings to show the document structure.
<h1> headings
should be used for main headings, followed by <h2> headings, then the
less important <h3>, and so
on.
Note: Use HTML headings for headings only. Don't use headings to
make text BIG or bold.
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:
Example
<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>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
The HTML <head> Element
The HTML <head> element is a container for metadata. HTML metadata is data
about the HTML document. Metadata is not displayed.
The <head> element
is placed between the <html> tag and the <body> tag:
Example
<!DOCTYPE html>
<html>
<head>
<title>My First HTML</title>
<meta charset="UTF-8">
</head>
<html>
<head>
<title>My First HTML</title>
<meta charset="UTF-8">
</head>
How to View HTML Source?
Have you ever seen a Web page and wondered "Hey! How did they
do that?"
View HTML Source Code:
Right-click in an HTML page and select "View Page
Source" (in Chrome) or "View Source" (in Edge), or similar in
other browsers. This will open a window containing the HTML source code of the
page.
Inspect an HTML Element:
Right-click on an element (or a blank area), and choose
"Inspect" or "Inspect Element" to see what elements are
made up of (you will see both the HTML and the CSS). You can also edit the HTML
or CSS on-the-fly in the Elements or Styles panel that opens.
Tag
|
Description
|
Defines the root of an HTML document
|
|
Defines the document's body
|
|
A container for all the head elements (title,
scripts, styles, meta information, and more)
|
|
Defines HTML headings
|
|
Defines a thematic change in the content
|
HTML Paragraphs
HTML Paragraphs
The HTML <p> element defines a paragraph:
Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is another paragraph.</p>
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:
Example
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
HTML Line Breaks
The HTML <br> element defines a line break.
Use <br> if
you want a line break (a new line) without starting a new paragraph:
Example
<p>This is<br>a paragraph<br>with line breaks.</p>
The Poem Problem
This poem will display on a single line:
Example
<p>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</p>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</p>
The HTML <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:
Example
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>
Tag
|
Description
|
Defines a paragraph
|
|
Inserts a single line break
|
|
Defines pre-formatted text
|
HTML Styles
Background Color
The CSS background-color 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 is a heading</h1>
<p>This is a paragraph.</p>
</body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
Text Color
The CSS color property defines the text color for an HTML element:
Example
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
<p style="color:red;">This is a paragraph.</p>
Fonts
The CSS 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>
<p style="font-family:courier;">This is a paragraph.</p>
Text Size
The CSS 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>
<p style="font-size:160%;">This is a paragraph.</p>
Text Alignment
The CSS 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>
<p style="text-align:center;">Centered paragraph.</p>
- Use the style attribute for styling HTML
elements
- Use background-color for
background color
- Use color for text colors
- Use font-family for text
fonts
- Use font-size for text sizes
- Use text-align for text alignment
HTML Text Formatting
HTML Formatting Elements
In the previous chapter, you learned about the
HTML style attribute.
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>
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/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
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
|
Defines bold text
|
|
Defines emphasized text
|
|
Defines italic text
|
|
Defines smaller text
|
|
Defines important text
|
|
Defines subscripted text
|
|
Defines superscripted text
|
|
Defines inserted text
|
|
Defines deleted text
|
|
Defines marked/highlighted text
|
HTML Quotation and Citation Elements
Tag
|
Description
|
Defines an abbreviation or acronym
|
|
Defines contact information for the
author/owner of a document
|
|
Defines the text direction
|
|
Defines a section that is quoted from another
source
|
|
Defines the title of a work
|
|
Defines a short inline quotation
|
HTML Comments
<!-- Write your comments here -->
Comments are also great for debugging HTML,
because you can comment out HTML lines of code, one at a time, to search for
errors:
Example
<!-- Do not display this image at the moment
<img border="0" src="pic_trulli.jpg" alt="Trulli">
-->
<img border="0" src="pic_trulli.jpg" alt="Trulli">
-->
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:
Color Name
|
Color
|
Shades
|
Mix
|
|
Background Color
You can set the background color for HTML
elements
Example
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>
<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.
Example
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
<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>
<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:
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>
<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 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)
RED
255
GREEN
99
BLUE
71
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)
rgb(180, 180, 180)
rgb(240, 240, 240)
rgb(255, 255, 255)
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
#ee82ee
#ffa500
#6a5acd
Shades of gray are often defined using equal
values for all the 3 light sources:
Example
#000000
#3c3c3c
#787878
#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%)
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%)
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
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)
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)
-3-
-4-