HTML5 Tutorial

Basic principles in developing a web designing

The design of your website is more important for conversions than you think. Design is not just
something designers do. Design is marketing. Design is your product and how it works.

Here are 8 effective web design principles you should know and follow.
1. Visual Hierarchy
Visual hierarchy is one of the most important principles behind good web design. It’s the order
in which the human eye perceives what it sees. You should rank elements on your website
based on your business objective. If you don’t have a specific goal, you can’t know what to
prioritize.
2. Divine Proportions
Golden ratio is a magical number 1.618 ( ) that makes all things proportioned to it aesthetically
pleasing. if your layout width is 960px, divide it by 1.618 (=593px). Now you know that the
content area should be 593px and sidebar 367px. If the website height is 760px tall, you can
split it into 470px and 290px chunks (760/1.618=~470)
3. Hick’s Law
Hick’s law says that with every additional choice increases the time required to take a decision.
The more options a user has when using your website, the more difficult it will be to use or
won’t be used at all. So in order to provide a more enjoyable experience, we need to eliminate
choices. To make a better web design, the process of eliminating distracting options has to be
continuous throughout the design process.
4. Fitt’s Law
Fitt’s law stipulates that the time required to move to a target area e.g. click a button is a function
of the distance to the target and the size of the target. In other words, the bigger an object and
the closer it is to us, the easier it is to use it. The size of a button should be proportional to its
expected frequency of use. You can check your stats for which buttons people use the most,
and make popular buttons bigger (easier to hit).
5. Rule of Thirds
The best images follow the rule of thirds: an image should be imagined as divided into nine
equal parts by two equally-spaced horizontal lines and two equally-spaced vertical lines, and
that important compositional elements should be placed along these lines or their intersections.
Using beautiful, big images contributes to design as it is (not withstanding the growth
of Pinterest), following this rule will make them more interesting and thus your website more
appealing.
6. Gestalt Design Laws
Gestalt psychology is a theory of mind and brain. Its principle is that the human eye sees objects
in their entirety before perceiving their individual parts. People always see the whole of your
website first, before they distinguish the header, menu, footer and so on.
1
 HTML5 Tutorial
There are 6 so-called gestalt design laws that allow us to predict how people will perceive
something.

i. Law of Proximity: People group things together that are close together in space.
They become a single perceived object.
ii. Law of Similarity: We group similar things together. This similarity can occur in the
form of shape, color, shading or other qualities.
iii. Law of Closure: We seek completeness. With shapes that aren’t closed, when
parts of a whole picture are missing, our perception fills in the visual gap
iv. Law of Symmetry: The mind perceives objects as being symmetrical and forming
around a center point. It is perceptually pleasing to be able to divide objects into an
even number of symmetrical parts.
v. Law of Common Fate: We tend to perceive objects as lines that move along a
path. We group together of objects that have the same trend of motion and are
therefore on the same path.
vi. Law of Continuity: People have a tendency to perceive a line as continuing its
established direction. In cases where there is an intersection between objects (e.g.
lines), we tend to perceive the two lines as two single uninterrupted entities. Stimuli
remains distinct even with overlap.

7. White space and clean design

White space (also called ‘negative space’) is the portion of a page left “empty”. It’s the space
between graphics, margins, gutters, space between columns, space between lines of type or
visuals. Enough white space makes a website look ‘clean’. While clean design is crucial to
communicating a clear message, it doesn’t just mean less content. Clean design means a
design that makes the best use of the space it is in. To make a clean design, you have to know
how to communicate clearly by using white space wisely.
8. Occam’s Razor
Occam’s razor is a principle urging one to select among competing hypotheses that which
makes the fewest assumptions and thereby offers the simplest explanation of the effect. To put
it in the design context, Occam’s Razor states that the simplest solution is usually best.

Five Golden rules of web designing

1. Design with real content
To make a responsive web design successful, you need to have a good idea of the content
that will be placed on the live site. If you have the content, it will be easy for you to build content
reference wireframes, a method of using basic rectangular blocks to make a layout of your main
templates. With this strategy, you will have a good idea on where to place the navigation, sub-
navigation, footer, and secondary modules on the main body of the page.

2
 HTML5 Tutorial
2. Design “in-browser”
Minimize the use of flat visuals and Photoshop comps because they look too good and looks
like a work of art. The key here is to design the site in the channel in which the site will be
displayed and present it in the browser. Don’t forget to demonstrate the site on how it looks on
different devices. Mainly, this reduces the development time of building the site. For instance,
if you have 15 Photoshop comps and you are displaying it in three different devices like laptop,
tablet and mobile, and you need to alter one design element, take link navigation for example.
This could take you 45 pages to change one design element. Surely, this won’t be a good idea
for you. But when designing “in-browser”, it will be simple to make updates across all your
pages.
3. Develop a pattern library
Pattern library is becoming an important output for responsive web design. It works by defining
each of the common UX patterns used throughout your site, exposing notes and code snippets.
Breaking the site into patterns makes it easy to find those bits of markup because all the
elements that are on the site are on one place. In addition, with the use of pattern library, it
makes device testing convenient because everything is on one page.
4. Make it universally usable
Along with the numerous smartphones and tablets with different screen sizes and input types,
there are also tons of possible circumstances of how a user could be using your website. To
make sure that your design works pretty well in different situations you need to design it
universally. Here are some important considerations when designing a responsive website:
A. Design with a slightly oversized hit areas to have an enjoyable desktop experience
while keeping a simple and mobile friendly experience.
B. Ensure a good jump links, drop-down, and the off-canvas method.
C. Surfaces any major Call-to-actions near the top of the screens, wit supporting content
beneath.
5. Keep performance in mind
When designing a website it is always keep in mind to give a good user experience. When we
say good user experience, it means the users doesn’t need to wait for a long period of time for
the site to load, or going crazy navigating their way through your website. Bad user experience
usually end up hurting your website and your lead generation. But websites with good
performance will more likely give enjoyable user experience. When designing a website, keep
in mind of the following:
A. Make information easy to find
B. Offer easy navigation (follow the 3-click rule, it should not take more than 3 clicks for
the audience to get into the right information.
C. Speak directly to your target audience

3
 HTML5 Tutorial
D. Avoid confusing layouts

Designing navigation bar

The navigation bar is the most important design element on a website. Not only does it guide
your users to pages beyond the homepage, but it’s also the singular tool to give users a sense
of orientation. With this in mind, it’s important to adhere to time-tested design and usability
conventions. Doing so will give your users a comfortable and easy reference point to fully
engage with your content.
Start with content
Most websites start backward, meaning a designer will suggest navigation items before
determining all the content possibilities. This isn’t entirely unusual, often the content isn’t ready
before the design process begins. It is suggested that “Content precedes design. Design in the
absence of content is not design, it’s decoration.”
It’s important to properly analyze and organize all your content into a logical and highly usable
structure before even considering design choices. Once you accomplish this, only add
complexity if absolutely necessary for your users.
Don't overwhelm
The main role of a navigation bar is to provide your user with a choice. Overwhelming a site
visitor with too many options impedes his ability to quickly make a choice. A navigation bar with
five to seven channel items is sufficient organization for most websites. Plus, it fits nicely in the
width of most website designs. Once you reach eight navigation options, you severely limit
readability and usability due to width constraints.
Keep it simple
Use precise and recognizable words in the navigation bar. Refrain from long phrases that
consume screen real estate by limiting each navigation item to 12 characters or less. Also,
don’t use words that an average user wouldn’t completely understand. People are used to
conventions; therefore, err on the side of familiarity. For example, use “Contact Us,” not “Get
in Touch” or “Let’s Talk.” Finally, leave out unnecessary words that don’t add anything to the
navigation item. Instead of “In the News,” consider simply “News.”
Actions on the right.
Because people read from left to right, they naturally expect action links on the right-hand side
of the navigation bar because moving right suggests moving forward. Use the left side for more
informational links. The exception is the “Home” link, which as a backward action, should be
furthest left.
Avoid Flash, for the most part.
While Flash is generally frowned upon by usability experts, it presents aesthetic possibility.
Flash’s biggest problem is that it typically is not implemented in a way accessible to screen
readers and mobile devices. And while you don’t want to implement the actual navigation with

4
 HTML5 Tutorial
Flash, you can get away with embellishing an HTML/CSS Navigation Bar with Flash to add
visual interest and retain usability.

Page design
Page design should be followed these steps
1. Put your thoughts on paper first
Design is about solving problems and those problems can't be resolved through gradients or
shadows but through a good layout and a clear hierarchy. Think about the content, the layout
and the functionality before starting to drop shadows.
2. Start sketching a top level framework
First thing we do is come-up with a top level framework that solves all the design problems. If
we approach our design from this perspective we will have a clear understanding of what our
layout needs will be when designing sections beyond the homepage.
3. Choose your typography
It would recommend not using more than two different typefaces in a website but it really
depends on its nature you could use more or less. Overall choose a font that is easy to read
for long amount of text and be more playful with titles and call to actions. Don't be afraid of
using big fonts and overall be playful and consistent when using typography.
4. Select your color theme
In terms of colors it is recommended using a limited set of colors and tones for the general user
interface. It's important to apply those consistently across the pages depending on the
element's functionality.
5. Divide the layout
Each section in your site needs to tell a story. It needs a reason and a final outcome for the
user. The layout needs to help the content highlighting what are the most important pieces in
that story. Think about the most simple layout you can imagine for a simple purpose and start
adding components that are necessary.
6. Rethink the established
As designers we shape the way users browse the internet, it's up to us to decide how many
steps a simple action will take and how efficient our site will be. Design patterns and
conventions are there because they work but sometimes they are there because no one spent
enough time evaluating them or rethinking them. It's important to rethink the established
interactive patterns on any component and to see how we can improve them.
7. Treat every component as if it could be presented to a design contest
Each component needs to be designed, as it could stand alone as the best component ever.
Sometimes designers leave some parts of a site last on their to-do list and show little respect
to them at the end.
5
 HTML5 Tutorial

Home Page Layout

A good place to start when planning the layout of your homepage is to think about the key
information and content you want presented on the homepage. This might include:
 Your logo
 One or multiple images or a video
 Your main heading (H1)
 Some introductory text
 Call to action buttons, phone number and/or prompts to buy online

Design Concept
A design concept is the idea behind a design. It’s how you plan on solving the design problem
in front of you. It’s the underlying logic, thinking, and reasoning for how you’ll design a website.
Your concept will lead to your choices in color and type. It’ll choose your aesthetic and
determine your grid. Every design decision you make will fall back on your concept for direction.
Your design concept becomes the framework for all your design decisions.
We can think of design concepts in two ways.

 Verbal – the verbal parts of your concept might be words you use to describe the site.
For example, your design concept might be one of sophisticated elegance. Verbal
concepts tend toward the abstract. They’re focused on the message your design is to
communicate.
 Visual – the visual parts of your concept might be a specific image or color scheme. It
might be an idea to use circles prominently. Visual concepts tend to be a little more
concrete. They should come from the verbal part of your concept. Visual concepts are
focused more on the how of conveying your message.
Generally verbal concepts come before visual concepts as the visual is really about how you’ll
communicate the verbal, though it likely depends on the individual and how you think best.

Brief History of Internet

The Internet is a worldwide system of interconnected computer networks that use the TCP/IP
set of network protocols to reach billions of users. The Internet began as a U.S Department of
Defense network to link scientists and university professors around the world.
The conceptual foundation for creation of the Internet was largely created by three individuals
and a research conference, each of which changed the way we thought about technology by
accurately predicting its future:
 Vannevar Bush wrote the first visionary description of the potential uses for information
technology with his description of the "memex" automated library system.
 Norbert Wiener invented the field of Cybernetics, inspiring future researchers to focus
on the use of technology to extend human capabilities.

6
 HTML5 Tutorial
 The 1956 Dartmouth Artificial Intelligence conference crystallized the concept that
technology was improving at an exponential rate, and provided the first serious
consideration of the consequences.
 Marshall McLuhan made the idea of a global village interconnected by an electronic
nervous system part of our popular culture.
In 1957, the Soviet Union launched the first satellite, Sputnik I, triggering US President Dwight
Eisenhower to create the ARPA (Advanced Research Projects Agency) agency to regain the
technological lead in the arms race. ARPA appointed J.C.R. Licklider to head the new IPTO
(Information Processing Techniques Office) organization with a mandate to further the research
of the SAGE (Security Algorithms Group of Experts) program and help protect the US against
a space-based nuclear attack. Licklider evangelized within the IPTO about the potential
benefits of a country-wide communications network, influencing his successors to
hire Lawrence Roberts to implement his vision.
Roberts led development of the network, based on the new idea of packet switching invented
by Paul Baran at RAND (Research and development), and a few years later by Donald
Davies at the UK National Physical Laboratory. A special computer called an Interface
Message Processor was developed to realize the design, and the ARPANET (Advanced
Research Projects Agency Network) went live in early October, 1969. The first communications
were between Leonard Kleinrock's research center at the University of California at Los
Angeles, and Douglas Engelbart's center at the Stanford Research Institute.
The first networking protocol used on the ARPANET was the Network Control Program. In
1983, it was replaced with the TCP/IP (Transmission Control Protocol/Internet Protocol)
protocol invented Wby Robert Kahn, Vinton Cerf, and others, which quickly became the most
widely used network protocol in the world.
In 1990, the ARPANET was retired and transferred to the NSFNET (National Science
Foundation Network). The NSFNET was soon connected to the CSNET (Computer Science
Network), which linked Universities around North America, and then to the EUnet (European
Unix Network), which connected research facilities in Europe. Thanks in part to the NSF's
(National Science Foundation) enlightened management, and fueled by the popularity of
the web, the use of the Internet exploded after 1990, causing the US Government to transfer
management to independent organizations starting in 1995.

World Wide Web

The World Wide Web (abbreviated WWW or the Web) is an information space where
documents and other web resources are identified by Uniform Resource Locators (URLs),
interlinked by hypertext links, and can be accessed via the Internet. English scientist Tim
Berners-Lee invented the World Wide Web in 1989. He wrote the first web browser computer
program in 1990 while employed at CERN in Switzerland. The Web browser was released
outside of CERN in 1991, first to other research institutions starting in January 1991 and to the
general public on the Internet in August 1991.

7
 HTML5 Tutorial

Web Standards
Web standards are the formal, non-proprietary standards and other
technical specifications that define and describe aspects of the World Wide Web. In recent
years, the term has been more frequently associated with the trend of endorsing a set of
standardized best practices for building web sites, and a philosophy of web design and
development that includes those methods.
Web standards include many interdependent standards and specifications, some of which
govern aspects of the Internet, not just the World Wide Web. Even when not web-focused, such
standards directly or indirectly affect the development and administration of web site and web
services. Considerations include the interoperability, accessibility and usability of web pages
and web sites.
Web standards, in the broader sense, consist of the following:
 Recommendations published by the World Wide Web Consortium (W3C)
 "Living Standard" made by the Web Hypertext Application Technology Working
Group (WHATWG)
 Request for Comments (RFC) documents published by the Internet Engineering Task
Force
 Standards published by the International Organization for Standardization (ISO)
 Standards published by Ecma International (formerly ECMA)
 The Unicode Standard and various Unicode Technical Reports (UTRs) published by
the Unicode Consortium
 Name and number registries maintained by the Internet Assigned Numbers
Authority (IANA)
Web standards are not fixed sets of rules, but are a constantly evolving set of finalized technical
specifications of web technologies. Web standards are developed by standards organizations-
groups of interested and often competing parties chartered with the task of standardization-not
technologies developed and declared to be a standard by a single individual or company. It is
crucial to distinguish those specifications that are under development from the ones that
already reached the final development status (in case of W3C specifications, the highest
maturity level).

Audience requirement
You will probably initially target your website toward the same clients you have always
approached, but you may also want to consider widening your potential audience.
Whatever your audience, you need to consider their preferences and requirements when
designing and developing your site. For example, your audience may be mainly people using
older computing equipment or software, or they may only have modem (not broadband) access
to the Web, or they may include people with poor vision or some other physical limitation (so
you need to consider accessibility factors).

8
 HTML5 Tutorial

Introduction to HTML5
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>PageTitle</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
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 <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
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
Web Browsers
The purpose of a web browser (Chrome, IE, Firefox, Safari) is to read HTML documents and
display them.
9
 HTML5 Tutorial
The browser does not display the HTML tags, but uses them to determine how to display the
document:
HTML Page Structure
Below is a visualization of an HTML page structure:

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 HTML is:
<!DOCTYPE html>
HTML Versions
Since the early days of the web, there have been many versions of HTML:

10
 HTML5 Tutorial
Version Year
HTML 1991
HTML 2.0 1998
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML 5 2014
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 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 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>
The first two letters specify the language (en). If there is a dialect, use two more letters (US).

11
 HTML5 Tutorial
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>
The href Attribute

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

Example
<a href="http://www.google.com">This is a link</a>
Size Attributes
HTML images are defined with the <img> tag. The filename of the source (src), and the size
of the image (width and height) are all provided as attributes:
Example
<img src="image.jpg" width="104" height="142">
The image size is specified in pixels: width="104" means 104 screen 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 blind person, can "hear" the element.
Example
<img src="image.jpg" alt="img" width="104" height="142">
Use Lowercase Attributes
The HTML5 standard does not require lowercase attribute names. The title attribute can be
written with uppercase or lowercase like Title and/or TITLE. We recommends lowercase in
HTML, and demands lowercase for stricter document types like XHTML.
Quote Attribute Values
The HTML5 standard does not require quotes around attribute values. The href attribute,
demonstrated above, can be written as:
Example
<a href=http://www.google.com>

12
 HTML5 Tutorial
Sometimes it is necessary to use quotes. This example will not display the title attribute
correctly, because it contains a space:
Example
<p title=About HTML5>
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:
Example
<p title='John "ShotGun" Nelson'>
Or
<p title="John 'ShotGun' Nelson">
HTML Headings
Headings are defined with the <h1> to <h6> tags.
Example
<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>
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:
How to View HTML Source
To find out, right-click in the page and select "View Page Source" (in Chrome) or "View Source"
(in IE), or similar in another browser. This will open a window containing the HTML code of the
page.

HTML Paragraphs
HTML Paragraphs
The HTML <p> element defines a paragraph:

13
 HTML5 Tutorial
Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</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 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>

Cascading Style Sheets (CSS):

CSS describes how HTML elements are to be displayed on screen, paper, or in other media. It
saves a lot of work. It can control the layout of multiple web pages all at once. External
stylesheets are stored in CSS files.
CSS Syntax

 The selector points to the HTML element you want to style.

 The declaration block contains one or more declarations separated by semicolons.
 Each declaration includes a CSS property name and a value, separated by a colon.
 A CSS declaration always ends with a semicolon, and declaration blocks are surrounded
by curly braces.
In the following example all <p> elements will be center-aligned, with a red text color:
p {
color: red;
14
 HTML5 Tutorial
text-align: center;
}
CSS Selectors
CSS selectors are used to "find" (or select) HTML elements based on their element name, id,
class, attribute, and more.
The element Selector
The element selector selects elements based on the element name.
You can select all <p> elements on a page like this (in this case, all <p> elements will be center-
aligned, with a red text color):
p {
text-align: center;
color: red;
}
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>

The id Selector
The id selector uses the id attribute of an HTML element to select a specific element.
The id of an element should be unique within a page, so the id selector is used to select one
unique element!
To select an element with a specific id, write a hash (#) character, followed by the id of the
element.
The style rule below will be applied to the HTML element with id="para1":
#para1 {
text-align: center;
15
 HTML5 Tutorial
color: red;
}
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
The class Selector
The class selector selects elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the name of
the class.
In the example below, all HTML elements with class="center" will be red and center-aligned:
.center {
text-align: center;
color: red;
}
Example 1:
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
</body>
</html>

16
 HTML5 Tutorial
Example 2:
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
</style>
</head>
<body>

<h1 class="center">This heading will not be affected</h1>

<p class="center">This paragraph will be red and center-
aligned.</p>
</body>
</html>
Three Ways to Insert CSS
There are three ways of inserting a style sheet:
 External style sheet
 Internal style sheet
 Inline style
External Style Sheet
With an external style sheet, you can change the look of an entire website by changing just one
file!
Each page must include a reference to the external style sheet file inside the <link> element.
The <link> element goes inside the <head> section:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

17
 HTML5 Tutorial
An external style sheet can be written in any text editor. The file should not contain any html
tags. The style sheet file must be saved with a .css extension.
Here is how the "mystyle.css" looks:
body {
background-color: lightblue;
}

h1 {
color: navy;
margin-left: 20px;
}
Internal Style Sheet
An internal style sheet may be used if one single page has a unique style.
Internal styles are defined within the <style> element, inside the <head> section of an HTML
page:
<head>
<style>
body {
background-color: linen;
}

h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>

Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
18
 HTML5 Tutorial
</body>
</html>

Inline Styles
An inline style may be used to apply a unique style for a single element.
To use inline styles, add the style attribute to the relevant element. The style attribute can
contain any CSS property.
The example below shows how to change the color and the left margin of a <h1> element:
<h1 style="color:blue;margin-left:30px;">This is a heading</h1>
Example:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;margin-left:30px;">This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS Colors
Colors in CSS are most often specified by:
 a valid color name - like "red"
 an RGB value - like "rgb(255, 0, 0)"
 a HEX value - like "#ff0000"

HTML Styles
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(Cascading Style Sheets) 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>
19
 HTML5 Tutorial
<p>This is a paragraph.</p>
</body>
</html>
HTML Background Image
The background-image property specifies an image to use as the background of an HTML
element.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("bgdesert.jpg");
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This text is not easy to read on this background image.</p>
</body>
</html>

HTML Text Color

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:
<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
20
 HTML5 Tutorial
</body>
</html>
HTML Text Size
The font-size property defines the text size for an HTML element:
Example:
<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
</body>
</html>
HTML Text Alignment
The text-align property defines the horizontal text alignment for an HTML element:
Example:
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
</body>
</html>

CSS Text Properties

color Sets the color of text
text-align Specifies the horizontal alignment of text
text-decoration Specifies the decoration added to text
text-transform Controls the capitalization of text
text-indent Specifies the indentation of the first line in a text-block
letter-spacing Increases or decreases the space between characters in a text
line-height Sets the line height
word-spacing Increases or decreases the space between words in a text
text-shadow Specifies the shadow effect added to text
color Example:
body {
color: blue;
21
 HTML5 Tutorial
}
h1 {
color: green;
}
text-align Example:
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
text-decoration Example:
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
text-transform Example:
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
text-indent Example:
p {
text-indent: 50px;
}
letter-spacing Example:
h1 {
letter-spacing: 3px;
}
h2 {
letter-spacing: -3px;
}

22
 HTML5 Tutorial
line-height Example:
p.small {
line-height: 0.8;
}
p.big {
line-height: 1.8;
}
word-spacing Example:
h1 {
word-spacing: 10px;
}
h2 {
word-spacing: -5px;
}
text-shadow Example:
h1 {
text-shadow: 3px 2px red;
}

HTML 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
<del> Defines deleted text
<mark> Defines marked/highlighted text
Example:
<!DOCTYPE html>
<html>
<body>
<p><b>This text is bold.</b></p>
<strong>This text is strong</strong>
<i>This text is italic</i>
<em>This text is emphasized</em>
<h2>HTML <small>Small</small> Formatting</h2>
<h2>HTML <mark>Marked</mark> Formatting</h2>
<p>My favorite color is <del>blue</del> red.</p>
<p>My favorite <ins>color</ins> is red.</p>
<p>This is _subscripted text.</p>
<p>This is ^{superscripted} text.</p>
</body></html>
23
 HTML5 Tutorial

HTML Quotation and Citation Elements

Tag Description
<abbr> Defines an abbreviation or acronym
<address> Defines contact information for the author/owner of a document
<bdo> Defines the text direction
<blockquote> Defines a section that is quoted from another source
<cite> Defines the title of a work
<q> Defines a short inline quotation

Example:
<!DOCTYPE html>
<html>
<body>
<p>WWF's goal is to: <q>Build a future where people live in
harmony with nature.</q></p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>
<p>The <abbr title="World Health Organization">WHO</abbr> was
founded in 1948.</p>
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
<bdo dir="rtl">This text will be written from right to
left</bdo>
</body>
</html>
HTML Comments
You can add comments to your HTML source by using the following syntax:
<!-- Write your comments here -->

HTML Images
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:
24
 HTML5 Tutorial
Syntax:
<img src="url" alt="some_text" style="width:width;height:height;">
Example:
<!DOCTYPE html>
<html>
<body>
<p>If a browser cannot find an image, it will display the
alternate text:</p>
<img src="wrongname.gif" alt="HTML5 Icon"
style="width:128px;height:128px;">
</body>

HTML Images
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:
Syntax:
<img src="url" alt="some_text" style="width:width;height:height;">
Example:
<!DOCTYPE html>
<html>
<body>
<p>If a browser cannot find an image, it will display the
alternate text:</p>
<img src="wrongname.gif" alt="HTML5 Icon"
style="width:128px;height:128px;">
</body>
</html>

HTML Links
HTML links are hyperlinks. You can click on a link and jump to another document.
Syntax
<a href="url">link text</a>
Example:
<!DOCTYPE html>
<html>
<body>

<p><a href="https://www.w3schools.com/html/">Visit our HTML

tutorial</a></p>
<p><a href="html_images.asp">HTML Images</a> is a link to a page
on this website.</p>

25
 HTML5 Tutorial
</body>
</html>

Link Colors
You can change the default colors, by using styles:
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style>
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:
<!DOCTYPE html>
<html>
<body>
<a href="https://www.w3schools.com/html/" target="_blank">Visit
our HTML tutorial!</a>
26
 HTML5 Tutorial
<p>If you set the target attribute to "_blank", the link will
open in a new browser window or tab.</p>
</body>
</html>
Image as Link
<!DOCTYPE html>
<html>
<body>
<p>The image is a link. You can click on it.</p>
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial"
style="width:42px;height:42px;border:0">
</a>
<p>We have added "border:0" to prevent IE9 (and earlier) from
displaying a border around the image.</p>
</body>
</html>
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.
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:
<a href="html_demo.html#C4">Jump to Chapter 4</a>

Defining an HTML Table

An HTML table is defined with the <table> tag.
Tag Description
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption

Example:
<!DOCTYPE html>
<html>
<head>
</head>
27
 HTML5 Tutorial
<body>

<table>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
</body>
</html>

<tr> tag Attribute Description

colspan To make a cell span many columns
rowspan To make a cell span many rows
Example:
<!DOCTYPE html>
<html>
<head>
</head>
<body>

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

<table >
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>
<h2>Cell that spans two rows:</h2>
<table>
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
28
 HTML5 Tutorial
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>

</body>
</html>

CSS attribute Description

border Define a border
border-collapse To collapse cell borders
padding To add padding to cells
text-align To align cell text
border-spacing To set the spacing between cells
Example:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
padding: 5px;
border-collapse: collapse;
}
}
table {
border-spacing: 15px;
}
th, td {
padding: 5px;
}
th {
text-align: left;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>

29
 HTML5 Tutorial
<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>

HTML Lists
Unordered HTML List
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. 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:
<!DOCTYPE html>
<html>
<body>
<h2>Unordered List with Disc Bullets</h2>
<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>

30
 HTML5 Tutorial
Ordered HTML List
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. 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

Example:
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Numbers</h2>
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>

HTML Description Lists

The <dl> tag defines the description list, the <dt> tag defines the term (name), and
the <dd> tag describes each term:
<!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>

Horizontal Lists
<!DOCTYPE html>
<html>
31
 HTML5 Tutorial
<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>

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. The
<div> element is a block-level element.
Examples of block-level elements:
32
 HTML5 Tutorial

 <div>
 <h1> - <h6>
 <p>
 <form>

The <div> Element

The <div> element is often used as a container for other HTML elements. The <div> element
has no required attributes, but both style and class are common. When used together with
CSS, the <div> element can be used to style blocks of content:
Example:
<!DOCTYPE html>
<html>
<body>
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most
populous city in the United Kingdom, with a metropolitan area of
over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major
settlement for two millennia, its history going back to its
founding by the Romans, who named it Londinium.</p>
</div>
</body>
</html>

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.

Examples of inline elements:

 <span>
 <a>
 <img>

The <span> Element

The <span> element is often used as a container for some text. The <span> element has no
required attributes, but both style and class are common. When used together with CSS, the
<span> element can be used to style parts of the text:
Example:
<!DOCTYPE html>
<html>
33
 HTML5 Tutorial
<body>
<p>My mother has <span style="color:blue">blue</span> eyes.</p>
</body>
</html>

The class Attribute

The HTML class attribute makes it possible to define equal styles for elements with the same
class name.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div.cities {
background-color: black;
color: white;
margin: 20px 0 20px 0;
padding: 20px;
}
</style>
</head>

<body>

<div class="cities">
<h2>London</h2>
<p>London is the capital of England. It is the most populous
city in the United Kingdom, with a metropolitan area of over 13
million inhabitants.</p>
<p>Standing on the River Thames, London has been a major
settlement for two millennia, its history going back to its
founding by the Romans, who named it Londinium.</p>
</div>

<div class="cities">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
<p>Situated on the Seine River, it is at the heart of the Île-
de-France region, also known as the région parisienne.</p>
<p>Within its metropolitan area is one of the largest population
centers in Europe, with over 12 million inhabitants.</p>
</div>

<div class="cities">
<h2>Tokyo</h2>

34
 HTML5 Tutorial
<p>Tokyo is the capital of Japan, the center of the Greater
Tokyo Area, and the most populous metropolitan area in the
world.</p>
<p>It is the seat of the Japanese government and the Imperial
Palace, and the home of the Japanese Imperial Family.</p>
<p>The Tokyo prefecture is part of the world's most populous
metropolitan area with 38 million people and the world's largest
urban economy.</p>
</div>

</body>
</html>

Using the class Attribute on Inline Elements

Example:
<!DOCTYPE html>
<html>
<head>
<style>
span.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>
</body>
</html>

HTML Iframes
An iframe is used to display a web page within a web page.
Iframe Syntax
An HTML iframe is defined with the <iframe> tag:
<iframe src="URL"></iframe>

Iframe - Target for a Link

An iframe can be used as the target frame for a link. The target attribute of the link must refer
to the name attribute of the iframe:
Example:
<!DOCTYPE html>
<html>
35
 HTML5 Tutorial
<body>
<iframe height="300px" width="100%" src="demo_iframe.htm"
name="iframe_a"></iframe>
<p><a href="https://www.google.com" target="iframe_a">
W3Schools.com</a></p>
<p>When the target of a link matches the name of an iframe, the
link will open in the iframe.</p>
</body>
</html
Iframe - Set Height and Width & Remove the Border
Use the height and width attributes to specify the size of the iframe. The attribute values are
specified in pixels by default, but they can also be in percent (like "80%").
By default, an iframe has a border around it. To remove the border, add the style attribute and
use the CSS border property:
Example:
<!DOCTYPE html>
<html>
<body>
<iframe src="demo_iframe.htm" height="200" width="300"
style="border:none;"> </iframe>
</body>
</html>
Example: you can also change the size, style and color of the iframe's border.
<!DOCTYPE html>
<html>
<body>
<iframe src="demo_iframe.htm" style="border:2px solid
grey;"></iframe>
</body>
</html>
Iframe - Target for a Link
An iframe can be used as the target frame for a link. The target attribute of the link must refer
to the name attribute of the iframe:
Example:
<!DOCTYPE html>
<html>
<body>
<iframe height="300px" width="100%" src="demo_iframe.htm"
name="iframe_a"></iframe>
<p><a href="https://www.w3schools.com"
target="iframe_a">W3Schools.com</a></p>
<p>When the target of a link matches the name of an iframe, the
link will open in the iframe.</p>

36
 HTML5 Tutorial
</body>
</html>

HTML File Paths

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:
Example:
<!DOCTYPE html>
<html>
<body>
<h2>Using a Full URL File Path</h2>
<img src="https://www.w3schools.com/images/picture.jpg"
alt="Mountain" style="width:300px">
</body>
</html>
Relative File Paths
A relative file path points to a file relative to the current page.
Example:
The file path points to a file in the images folder located at the root of the current web:
<img src="/images/picture.jpg" alt="Mountain">

The file path points to a file in the images folder located in the current folder:
<img src="images/picture.jpg" alt="Mountain">
The file path points to a file in the images folder located in the folder one level above the current
folder:
<img src="../images/picture.jpg" alt="Mountain">

HTML head Elements

Tag Description
<head> Defines information about the document
<title> Defines the title of a document
<base> Defines a default address or a default target for all links on a page
<link> Defines the relationship between a document and an external
resource
37
 HTML5 Tutorial
<meta> Defines metadata about an HTML document
<script> Defines a client-side script
<style> Defines style information for a document

The HTML <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 Web tutorials">

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 http-equiv="refresh" content="30">

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, initial-scale=1.0">
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.

HTML Responsive Web Design

Responsive Web Design makes your web page look good on all devices (desktops, tablets,
and phones).

38
 HTML5 Tutorial
Responsive Web Design is about using CSS and HTML to resize, hide, shrink, enlarge, or
move the content to make it look good on any screen:

Example:
<!DOCTYPE html>
<html lang="en-us">
<head>
<style>
.city {
float: left;
margin: 10px;
padding: 10px;
max-width: 300px;
height: 300px;
border: 1px solid black;
}
</style>
</head>
<body>

<h1>Responsive Web Design Demo</h1>

<h2>Resize this responsive page!</h2>

<div class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
<p>It is the most populous city in the United Kingdom, with a
metropolitan area of over 13 million inhabitants.</p>
</div>

<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
<p>The Paris area is one of the largest population centers in
Europe, with more than 12 million inhabitants.</p>
</div>

<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
<p>It is the center of the Greater Tokyo Area, and the most
populous metropolitan area in the world.</p>
</div>

<div class="city">
<h2>New York</h2>

39
 HTML5 Tutorial
<p>The City of New York is the most populous city in the
United States.</p>
<p>New York is an important center for international diplomacy
and has been described as the cultural and financial capital of
the world.</p>
</div>

</body>
</html>

HTML Computer Code Elements

HTML <kbd> For Keyboard Input
The HTML <kbd> element represents user input, like keyboard input or voice commands. Text
surrounded by <kbd> tags is typically displayed in the browser's default monospace font:
<!DOCTYPE html>
<html>
<body>
<p>The kbd element represents user input:</p>
<p>Save the document by pressing <kbd>Ctrl + S</kbd></p>
</body>
</html>
HTML <samp> For Program Output
The HTML <samp> element represents output from a program or computing system. Text
surrounded by <samp> tags is typically displayed in the browser's default monospace font:
<!DOCTYPE html>
<html>
<body>
<p>The samp element represents output from a program or
computing system:</p>
<p>If you input wrong value, the program will return
<samp>Error!</samp></p>
</body>
</html>

HTML <code> For Computer Code

The HTML <code> element defines a fragment of computer code. Text surrounded by <code>
tags is typically displayed in the browser's default monospace font:
!DOCTYPE html>
<html>
<body>
<p>Programming code example:</p>
<code>
x = 5;
40
 HTML5 Tutorial
y = 6;
z = x + y;
</code>
</body>
</html>
HTML <var> For Variables
The HTML <var> element defines a variable. The variable could be a variable in a
mathematical expression or a variable in programming context:
<!DOCTYPE html>
<html>
<body>
<p>Einstein wrote: <var>E</var> = <var>mc</var>².</p>
</body>
</html>

HTML Uniform Resource Locators (URL)

A URL is another word for a web address. A URL can be composed of words (yahoo.com), or
an Internet Protocol (IP) address (192.68.20.50). Most people enter the name when surfing,
because names are easier to remember than numbers.
Web browsers request pages from web servers by using a URL. A Uniform Resource Locator
(URL) is used to address a document (or other data) on the web. A web address,
like https://www.w3schools.com/html/default.asp follows these syntax rules:
scheme://prefix.domain:port/path/filename
Explanation:
 scheme - defines the type of Internet service (most common is http or https)
 prefix - defines a domain prefix (default for http is www)
 domain - defines the Internet domain name (like w3schools.com)
 port - defines the port number at the host (default for http is 80)
 path - defines a path at the server (If omitted: the root directory of the site)
 filename - defines the name of a document or resource
Common URL Schemes
The table below lists some common schemes:
Scheme Short for Used for
http HyperText Transfer Protocol Common web pages. Not
encrypted
https Secure HyperText Transfer Protocol Secure web pages. Encrypted
ftp File Transfer Protocol Downloading or uploading files
file A file on your computer

41
 HTML5 Tutorial
URL Encoding
URLs can only be sent over the Internet using the ASCII character-set. If a URL contains
characters outside the ASCII set, the URL has to be converted.
URL encoding converts non-ASCII characters into a format that can be transmitted over the
Internet.
URL encoding replaces non-ASCII characters with a "%" followed by hexadecimal digits.
URLs cannot contain spaces. URL encoding normally replaces a space with a plus (+) sign, or
%20.

FORM FIELDS
These fields can be added to your forms:
 Text field
 Password field
 Text area
 Check box
 Radio button
 Drop-down menu
 Submit button
 Reset button
 Image button

TEXT FIELD
Text fields are one line areas that allow the user to input text.
SETTINGS:

HTML EXPLANATION EXAMPLE

text One line text field

size= Characters shown.
maxlength= Max characters allowed.
name= Name of the field.
value= Initial value in the field.
align= Alignment of the field.
tabindex= Tab order of the field.

The tabindex setting defines in which order the different fields should be activated when the
visitor clicks the tab key.
EXAMPLE:
<html>
<head>
42
 HTML5 Tutorial
<title>My Page</title>
</head>
<body>
<form name="myform">
<br><br>
<input type="text" size="25" value="Enter your name here!">
<br><br>
</form>
</body>
</html>

PASSWORD FIELD
Password fields are similar to text fields. The difference is that what is entered into a password
field shows up as dots on the screen. This is, of course, to prevent others from reading the
password on the screen.
EXAMPLE:
<html>
<head>
<title>My Page</title>
</head>
<body>
<form name="myform">
Enter Password : <input type="password" size="25">
<br><br>
</form>
</body>
</html>

TEXT AREA
Text areas are text fields that can span several lines. Unlike most other form fields, text areas
are not defined with an <input> tag.Instead you enter a <textarea> tag where you want the text
area to start and a closing </textarea> tag where you want the area to end. Everything written
between these tags will be presented in the text area box.
SETTINGS:

HTML EXPLANATION EXAMPLE

textarea Text area - several lines

rows= Rows in the field.
cols= Columns in the field.
name= Name of the field.
tabindex= Tab order of the field.

43
 HTML5 Tutorial

wrap=
off Turns off linebreaking
virtual Shows linebreaking, but
sends text as entered.
physical Inserts linebreaks when
needed and even sends it.

The tabindex setting defines in which order the different fields should be activated when the
visitor clicks the tab key.
The wrap options are the trickiest part of text areas.
If you turn wrap off the text is handled as one long sequence of text without linebreaks.
If you set it to virtual the text appears on your page as if it recognized linebreaks - but when
the form is submitted the linebreaks are turned off.
If you set it to physical the text is submitted exactly as it appears on the screen - linebreaks
included.
EXAMPLE:

<html>
<head>
<title>My Page</title>
</head>
<body>
<form name="myform">
This is outside the area<br><br>
<textarea cols="40" rows="5" name="myname">
Now we are inside the area - which is nice.
</textarea>
<br><br>
And now we are outside the area again.
</form>
</body>
</html>

CHECK BOX
Check boxes are used when you want to let the visitor select one or more options from a set of
alternatives.
SETTINGS:

44
 HTML5 Tutorial
HTML EXPLANATION EXAMPLE

checkbox Choose one or more options

name= Name of the field.
value= Value that is submitted if checked.
align= Alignment of the field.
tabindex= Tab order of the field.
checked Default check this field.

The name setting adds an internal name to the field so the program that handles the form can
identify the fields.
The value setting defines what will be submitted if checked.
The align setting defines how the field is aligned.
Valid entries are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE,
ABSMIDDLE, ABSBOTTOM.
The alignments are explained in the image section. You can learn about the different
alignments here.
The tabindex setting defines in which order the different fields should be activated when the
visitor clicks the tab key.

EXAMPLE:
<html>
<head>
<title>My Page</title>
</head>
<body>
<form name="myform">
<input type="checkbox" name="option1" value="Milk"> Milk<br>
<input type="checkbox" name="option2" value="Butter" checked>
Butter<br>
<input type="checkbox" name="option3" value="Cheese"> Cheese<br>
<br>
</form>
</body>
</html>
And the resulting output from it:

Milk
Butter
Cheese

45
 HTML5 Tutorial

RADIO BUTTON
Radio buttons are used when you want to let the visitor select one - and just one - option from
a set of alternatives

SETTINGS:

HTML EXPLANATION EXAMPLE

radio Choose one - and only one - option

name= Name of the group.
value= Value that is submitted if checked.
align= Alignment of the field.
tabindex= Tab order of the field.
checked Default check this field.

EXAMPLE:
<html>
<head>
<title>My Page</title>
</head>
<body>
<form name="myform">
<input type="radio" name="group1" value="Milk"> Milk<br>
<input type="radio" name="group1" value="Butter" checked> Butter<br>
<input type="radio" name="group1" value="Cheese"> Cheese
<hr>
<input type="radio" name="group2" value=" Cake "> Water<br>
<input type="radio" name="group2" value=" Cookies "> Beer<br>
<input type="radio" name="group2" value=" Bread " checked> Wine<br>
</form>
</body>
</html>
And the resulting output:

46
 HTML5 Tutorial

Milk
Butter
Cheese

Cake
Cookies
Bread

DROP DOWN MENU

Drop-down menus are probably the most flexible objects you can add to your forms.Depending
on your settings, drop-down menus can serve the same purpose as radio buttons (one selection
only) or check boxes (multiple selections allowed).
SETTINGS:

HTML EXPLANATION EXAMPLE

select Drop-down menu

name= Name of the field.
size= Visible items in list.
multiple= Allows multiple choices if yes.

option Individual items in the menu.

selected Default select the item.
value= Value to send if selected.

Drop-down menus combine <select> and <option>.Both tags have an opening and a closing
tag.
Syntax:

<select>
<option>Milk</option>
<option>Coffee</option>
<option>Tea</option>
</select>

47
 HTML5 Tutorial
The <select> tag defines the menu.
The name setting adds an internal name to the field so the program that handles the form can
identify the fields.
The size option defines how many items should be visible at a time. Default is one item.
The multiple setting will allow for multiple selections if present.
The <option> tag defines the single items in the menu.
The value setting defines what will be submitted if the item is selected. This is not always the
same as what it says in the menu. If our field was defined this way:

<option value="ID">Idaho</option>

then, in the menu it would say "Idaho" but when the form was submitted the abbreviated "ID"
would actually be sent.
You can force an item to be default selected by adding the selected option: <option selected>
EXAMPLE:
<html>
<head>
<title>My Page</title>
</head>
<body>
<form name="myform">
<select name="mydropdown">
<option value="Milk">Fresh Milk</option>
<option value="Cheese">Old Cheese</option>
<option value="Bread">Hot Bread</option>
</select>
</form>
</body>
</html>
And the resulting output from it:

The <button> Element

The <button> element defines a clickable button:
EXAMPLE:

48
 HTML5 Tutorial
<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="alert('Hello World!')">Click
Me!</button>
</body>
</html>

SUBMIT BUTTON
When a visitor clicks a submit button, the form is sent to the address specified in the action
setting of the <form> tag.
SETTINGS:

HTML EXPLANATION EXAMPLE

submit Submit button

name= Name of the button.
value= Text written on the button.
align= Alignment of the button.
tabindex= Tab order of the button.

EXAMPLE:
<html>
<head>
<title>My Page</title>
</head>
<body>
<form name="myform" action="http://www.mydomain.com/myformhandler.cgi"
method="POST">
<br><br>
<input type="text" size="25" value="Enter your name here!">
<br><input type="submit" value="Send me your name!"><br>
</form>
</body>
</html>
And the resulting output from it:

49
 HTML5 Tutorial

Enter your name here!

Send me your name!

RESET BUTTON
When a visitor clicks a reset button, the entries are reset to the default values

SETTINGS:

HTML EXPLANATION EXAMPLE

reset Reset button

name= Name of the button.
value= Text written on the button.
align= Alignment of the button.
tabindex= Tab order of the button.

EXAMPLE:
<html>
<head>
<title>My Page</title>
</head>
<body>
<form name="myform"
action="http://www.mydomain.com/myformhandler.cgi" method="POST">
<div align="center">
<br><br>
<input type="text" size="25" value="Enter your name here!">
<br><input type="submit" value="Send me your name!"> <input
type="reset" value="Reset!"><br>
</div>
</form>
</body>
</html>
And the resulting output from it:

50
 HTML5 Tutorial

IMAGE BUTTON
Image buttons have the same effect as submit buttons. When a visitor clicks an image button
the form is sent to the address specified in the action setting of the <form> tag.
SETTINGS:

HTML EXPLANATION EXAMPLE

image Submit button

name= Name of the image.
src= Url of the image.
align= Alignment of the image.
border= Border width around the image.
width= Width of the image.
height= Height of the image.
vspace= Spacing over and under image.
hspace= Spacing left and right of image.
tabindex= Tab order of the image.

EXAMPLE:
<html>
<head>
<title>My Page</title>
</head>
<body>
<form name="myform"
action="http://www.mydomain.com/myformhandler.cgi" method="POST">
<div align="center">
<br><br>
<input type="text" size="25" value="Enter your name here!">
<br><input type="image" src="rainbow.gif" name="image" width="60"
height="60"><br>
</div>
</form>
</body>
</html>
And the resulting output from it:

51
 HTML5 Tutorial

The Action Attribute

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 .
Example:
<form action="/action_page.php">
The Method Attribute
The method attribute specifies the HTTP method (GET or POST) to be used when submitting
the form data:
When GET is used, the submitted form data will be visible in the page address field. The POST
method does not display the submitted form data in the page address field.
Example:
<form action="/action_page.php" method="get">
Or
<form action="/action_page.php" method="post">
The Name Attribute
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.
Grouping Form Data with <fieldset>
The <fieldset> element is used to group related data in a form.
The <legend> element defines a caption for the <fieldset> element.
Example:
<!DOCTYPE html>
<html>
<body>

52
 HTML5 Tutorial
<form action="/action_page.php" method="POST">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</fieldset>
</form>

</body>
</html>
HTML5 Form Elements
HTML5 added the following form elements:
 <datalist>
 <keygen>
 <output>

<datalist> Element
The <datalist> 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 list attribute of the
<input> element, must refer to the id attribute of the <datalist> element.
Example:
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
<p><b>Note:</b> The datalist tag is not supported in Safari or IE9
(and earlier).</p>
53
 HTML5 Tutorial
</body>
</html>

<keygen> Element
The purpose of the <keygen> element is to provide a secure way to authenticate users. The
<keygen> element specifies a key-pair generator field in a form. When the form is submitted,
two keys are generated, one private and one public. The private key is stored locally, and the
public key is sent to the server. The public key could be used to generate a client certificate to
authenticate the user in the future.
Example:
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
Username: <input type="text" name="user">
<br><br>
Encryption: <keygen name="security">
<br><br>
<input type="submit">
</form>
</body>
</html>

<output> Element
The <output> element represents the result of a calculation.
Example:
<!DOCTYPE html>
<html>
<body>

<form action="/action_page.php"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>

54
 HTML5 Tutorial
<p><strong>Note:</strong> The output element is not supported in Edge
12 or Internet Explorer and earlier versions.</p>
</body>
</html>

HTML5 Input Types

HTML5 added several new input types:

 color
 date
 datetime-local
 email
 month
 number
 range
 search
 tel
 time
 url
 week

Input Type Color

The <input type="color"> is used for input fields that should contain a color.
Example :
<!DOCTYPE html>
<html>
<body>
<h1>Show a color picker:</h1>
<form action="/action_page.php">
Select your favorite color: <input type="color" name="favcolor"
value="#ff0000"><br><br>
<input type="submit">
</form>
<p><b>Note:</b> type="color" is not supported in Internet Explorer 11
or Safari 9.1 (or earlier).</p>
</body>
</html>

Input Type Date

The <input type="date"> is used for input fields that should contain a date.
Example 1:
<!DOCTYPE html>
55
 HTML5 Tutorial
<html>
<body>
<p>
Depending on browser support:<br>
A date picker can pop-up when you enter the input field.
</p>
<form name=”f1”>
Birthday:
<input type="date" id=”dt” name="bday">
</form>
<p><strong>Note:</strong> type="date" is not supported in Firefox, or
Internet Explorer 11 and earlier versions.</p>
</body>
</html>

Example 2:
<!DOCTYPE html>
<html>
<body>
<form name=”f1”>
Enter a date before 1980-01-01:<br>
<input type="date" id=”dt1” name="bday" max="1979-12-31"><br><br>
Enter a date after 2000-01-01:<br>
<input type="date" id= “dt2” name="bday" min="2000-01-02"><br><br>
<input type="submit">
</form>
<p><strong>Note:</strong> type="date" is not supported in Firefox, or
Internet Explorer 11 and earlier versions.</p>
</body>
</html>

Input Type Datetime-local

The <input type="datetime-local"> specifies a date and time input field, with no time zone.
Example:
<!DOCTYPE html>
<html>
<body>
<p>
Depending on browser support:<br>
A date picker can pop-up when you enter the input field.
</p>
<form>
Birthday (date and time):
56
 HTML5 Tutorial
<input type="datetime-local" id=”dt” name="bdaytime">
</form>
<p><strong>Note:</strong> type="datetime-local" is not supported in
Firefox, or Internet Explorer 12 and earlier versions.</p>
</body>
</html>

Input Type Email

The <input type="email"> is used for input fields that should contain an e-mail address.
Example:
<!DOCTYPE html>
<html>
<body>
<form>
E-mail:
<input type="email" id=”em” name="email">
</form>
<p>
<b>Note:</b>type="email" is not supported in IE9 and earlier.</p>
</body>
</html>
Input Type Month
The <input type="month"> allows the user to select a month and year.
Example:
<!DOCTYPE html>
<html>
<body>
<p>
Depending on browser support:<br>
A date picker can pop-up when you enter the input field.
</p>
<form>
Birthday (month and year):
<input type="month" id=”month” name="bdaymonth">
</form>
<p><strong>Note:</strong> type="month" is not supported in Firefox,
or Internet Explorer 11 and earlier versions.</p>
</body>
</html>

Input Type Number

57
 HTML5 Tutorial
The <input type="number"> defines a numeric input field. You can also set restrictions on
what numbers are accepted.
Example:
<!DOCTYPE html>
<html>
<body>
<p>Numeric restrictions will apply in the input field:</p>
<form>
Quantity (between 1 and 5):
<input type="number" id=”num” name="quantity" min="1" max="5">
</form>
<p><b>Note:</b> type="number" is not supported in IE9 and
earlier.</p>
</body>
</html>
Input Restrictions
Here is a list of some common input restrictions

Attribute Description
disabled Specifies that an input field should be disabled
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

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:
<!DOCTYPE html>
<html>
<body>
<p>
Depending on browser support:<br>

58
 HTML5 Tutorial
The input type "range" can be displayed as a slider control.
</p>
<form>
Points:
<input type="range" name="points" min="0" max="10">
<input type="submit">
</form>
<p>
<b>Note:</b>
type="range" is not supported in Internet Explorer 9 and earlier
versions.
</p>
</body>
</html>

Input Type Search

The <input type="search"> is used for search fields (a search field behaves like a regular text
field).
Example:
<!DOCTYPE html>
<html>
<body>
<form>
Search Google:
<input type="search" id=”sr” name="googlesearch">
<input type="submit">
</form>
</body>
</html>

Input Type Time

The <input type="time"> allows the user to select a time (no time zone).
Example:
<!DOCTYPE html>
<html>
<body>

<p>
Depending on browser support:<br>
A time picker might pop-up when you enter the input field.
</p>
<form>
59
 HTML5 Tutorial
Select a time:
<input type="time" name="usr_time">
<input type="submit">
</form>
<p><strong>Note:</strong> type="time" is not supported in Firefox, or
Internet Explorer 12 and earlier versions.</p>
</body>
</html>

Input Type Week

The <input type="week"> allows the user to select a week and year.
Example:
<!DOCTYPE html>
<html>
<body>
<p>
Depending on browser support:<br>
A date picker can pop-up when you enter the input field.
</p>
<form>
Select a week:
<input type="week" name="year_week">
<input type="submit">
</form>
<p><strong>Note:</strong> type="week" is not supported in Firefox, or
Internet Explorer 11 and earlier versions.</p>
</body>
</html>

HTML5 Input Attributes

Attribute Description
disabled Specifies that an input field should be disabled
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

60
 HTML5 Tutorial
value Specifies the default value for an input field
autocomplete Specifies whether a form or input field should have autocomplete on or off
form Specifies one or more forms an <input> element belongs to
multiple specifies that the user is allowed to enter more than one value in
the <input> element

Disabled Example:
<!DOCTYPE html>
<html>
<body>
<form>
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname" disabled><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

max & min Example:

<!DOCTYPE html>
<html>
<body>
<p>
Depending on browser support:<br>
The input type "range" can be displayed as a slider control.
</p>
<form>
Points:
<input type="range" name="points" min="0" max="10">
<input type="submit">
</form>
<p>
<b>Note:</b>
type="range" is not supported in Internet Explorer 9 and earlier
versions.
</p>
</body>
</html>
maxlenght Example:

<!DOCTYPE html>
<html>
<body>
61
 HTML5 Tutorial
<form>
Username: <input type="text" name="usrname" maxlength="10"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

pattern Example
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
Password: <input type="password" name="pw" pattern="(?=.*\d)(?=.*[a-
z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one
uppercase and lowercase letter, and at least 8 or more characters">
<input type="submit">
</form>
</body>
</html>

readonly Example:
<!DOCTYPE html>
<html>
<body>
<form>
Email: <input type="text" name="email"><br>
Country: <input type="text" name="country" value="Norway"
readonly><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
required Example:
<!DOCTYPE html>
<html>
<body>
<form>
Username: <input type="text" name="usrname" required>
<input type="submit">
</form>
<p><strong>Note:</strong> The required attribute of the input tag is
not supported in Internet Explorer 9 and earlier versions, or in
Safari.</p>
</body>
62
 HTML5 Tutorial
</html>

Size Example:
<!DOCTYPE html>
<html>
<body>
<form>
Email: <input type="text" name="email" size="35"><br>
PIN: <input type="text" name="pin" maxlength="4" size="4"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

step Example:
<!DOCTYPE html>
<html>
<body>
<form>
<input type="number" name="points" step="3">
<input type="submit">
</form>
<p><strong>Note:</strong> The step attribute of the input tag is not
supported in Internet Explorer 9 and earlier versions.</p>
</body>
</html>
value Example:
<!DOCTYPE html>
<html>
<body>
<form>
First name: <input type="text" name="fname" value="John"><br>
Last name: <input type="text" name="lname" value="Doe"><br>
<input type="submit" value="Submit form">
</form>
</body>
</html>
autocomplete Example:
<!DOCTYPE html>
<html>
<body>
<form>
First name:<input type="text" name="fname"><br>
63
 HTML5 Tutorial
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>
<p>Fill in and submit the form, then reload the page to see how
autocomplete works.</p>
<p>Notice that autocomplete is "on" for the form, but "off" for the
e-mail field.</p>
</body>
</html>

form Example:
<!DOCTYPE html>
<html>
<body>
<form>
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
</form>
<p>The "Last name" field below is outside the form element, but still
part of the form.</p>
Last name: <input type="text" name="lname" form="form1">
</body>
</html>

Multiple Example:
<!DOCTYPE html>
<html>
<body>
<form>
Select images: <input type="file" name="img" multiple>
<input type="submit">
</form>
<p>Try selecting more than one file when browsing for files.</p>
<p><strong>Note:</strong> The multiple attribute of the input tag is
not supported in Internet Explorer 9 and earlier versions.</p>
</body>
</html>

HTML5 Semantic Elements

A semantic element clearly describes its meaning to both the browser and the developer.

HTML5 offers new semantic elements to define different parts of a web page:
64
 HTML5 Tutorial

 <article>
 <aside>
 <details>
 <figcaption>
 <figure>
 <header>
 <footer>
 <main>
 <mark>
 <nav>
 <section>
 <summary>

<article> Element
The <article> tag specifies independent, self-contained content.

Example:
<!DOCTYPE html>
<html>
<body>
<article>
<h1>Google Chrome</h1>
<p>Google Chrome is a free, open-source web browser developed by
Google, released in 2008.</p>
</article>

<p><strong>Note:</strong> The article tag is not supported in

Internet Explorer 8 and earlier versions.</p>
</body>
</html>

<aside> Element
The <aside> tag defines some content aside from the content it is placed in.

Example:
<!DOCTYPE html>
<html>
<body>
<p>My family and I visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>
<p><strong>Note:</strong> The aside tag is not supported in Internet

65
 HTML5 Tutorial
Explorer 8 and earlier versions.</p>
</body>
</html>

<details> Element

The <details> tag specifies additional details that the user can view or hide on demand.

Example:
<!DOCTYPE html>
<html>
<body>
<details>
<summary>Copyright 1999-2014.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of
the company Refsnes Data.</p>
</details>
<p><b>Note:</b> The details tag is not supported in Internet
Explorer.</p>
</body>
</html>

<figcaption> and <figure> Element

The purpose of a figure caption is to add a visual explanation to an image. In HTML5, an image
and a caption can be grouped together in a <figure> element:

Example:
<!DOCTYPE html>
<html>
<body>
<p>The Pulpit Rock is a massive cliff 604 metres (1982 feet) above
Lysefjorden, opposite the Kjerag plateau, in Forsand, Ryfylke,
Norway. The top of the cliff is approximately 25 by 25 metres (82 by
82 feet) square and almost flat, and is a famous tourist attraction
in Norway.</p>
<figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304"
height="228">
<figcaption>Fig.1 - The Pulpit Rock, Norway.</figcaption>
</figure>
</body>
</html>

<header> Element
66
 HTML5 Tutorial
The <header> element specifies a header for a document or section. The <header> element
should be used as a container for introductory content. You can have several <header>
elements in one document.
Example:
<!DOCTYPE html>
<html>
<body>
<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation of our planet's natural
environment, and build a future in which humans live in harmony with
nature.</p>
</article>
</body>
</html>

<footer> Element

The <footer> element specifies a footer for a document or section. A <footer> element should
contain information about its containing element.
Example:
<!DOCTYPE html>
<html>
<body>
<footer>
<p>Posted by: Hege Refsnes</p>
<p>Contact information: <a href="mailto:[email protected]">
[email protected]</a>.</p>
</footer>
</body>
</html>

<main> Element

The <main> tag specifies the main content of a document. The content inside the <main>
element should be unique to the document. It should not contain any content that is repeated
across documents such as sidebars, navigation links, copyright information, site logos, and
search forms.
Example:
<!DOCTYPE html>
<html>
<body>
<main>
67
 HTML5 Tutorial
<h1>Web Browsers</h1>
<p>Google Chrome, Firefox, and Internet Explorer are the most used
browsers today.</p>
<article>
<h1>Google Chrome</h1>
<p>Google Chrome is a free, open-source web browser developed by
Google, released in 2008.</p>
</article>
<article>
<h1>Internet Explorer</h1>
<p>Internet Explorer is a free web browser from Microsoft,
released in 1995.</p>
</article>
<article>
<h1>Mozilla Firefox</h1>
<p>Firefox is a free, open-source web browser from Mozilla,
released in 2004.</p>
</article>
</main>
<p><strong>Note:</strong> The main tag is not supported in Internet
Explorer 11 and earlier versions.</p>
</body>
</html>

<mark> Element

The <mark> tag defines marked text. Use the <mark> tag if you want to highlight parts of your
text.
Example:
<!DOCTYPE html>
<html>
<body>
<p>Do not forget to buy <mark>milk</mark> today.</p>
<p><strong>Note:</strong> The mark tag is not supported in Internet
Explorer 8 and earlier versions.</p>
</body>
</html>

<nav> Element

The <nav> tag defines a set of navigation links. Notice that NOT all links of a document should
be inside a <nav> element. The <nav> element is intended only for major block of navigation
links.

Example:
<!DOCTYPE html>
68
 HTML5 Tutorial
<html>
<body>
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
<p><strong>Note:</strong> The nav tag is not supported in Internet
Explorer 8 and earlier versions.</p>
</body>
</html>

<section> Element

he <section> tag defines sections in a document, such as chapters, headers, footers, or any
other sections of the document.

Example:
<!DOCTYPE html>
<html>
<body>
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an international
organization working on issues regarding the conservation, research
and restoration of the environment, formerly named the World Wildlife
Fund. WWF was founded in 1961.</p>
</section>
<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF. The well-known panda
logo of WWF originated from a panda named Chi Chi that was
transferred from the Beijing Zoo to the London Zoo in the same year
of the establishment of WWF.</p>
</section>
<p><strong>Note:</strong> The section tag is not supported in
Internet Explorer 8 and earlier versions.</p>
</body>
</html>

<summary> Element

The <summary> tag defines a visible heading for the <details> element. The heading can be
clicked to view/hide the details.
Example:
69
 HTML5 Tutorial
<!DOCTYPE html>
<html>
<body>
<details>
<summary>Copyright 1999-2014.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of
the company Refsnes Data.</p>
</details>
<p><b>Note:</b> The summary element is not supported in Edge/Internet
Explorer.</p>
</body>
</html>

HTML5 Canvas

The HTML <canvas> element is used to draw graphics, on the fly, via JavaScript. The
<canvas> element is only a container for graphics. You must use JavaScript to actually draw
the graphics. Canvas has several methods for drawing paths, boxes, circles, text, and adding
images.

Example:

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px
solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas></body></html>
HTML5 Video

To show a video in HTML, use the <video> element:

The controls attribute adds video controls, like play, pause, and volume. It is a good idea to
always include width and height attributes. If height and width are not set, the page might
flicker while the video loads.

The <source> element allows you to specify alternative video files which the browser may
choose from. The browser will use the first recognized format.

The text between the <video> and </video> tags will only be displayed in browsers that do
not support the <video> element.

Example:
<!DOCTYPE html>
70
 HTML5 Tutorial
<html>
<body>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
The HTML <audio> Element

To play an audio file in HTML, use the <audio> element:

The controls attribute adds audio controls, like play, pause, and volume.

The <source> element allows you to specify alternative audio files which the browser may
choose from. The browser will use the first recognized format.

The text between the <audio> and </audio> tags will only be displayed in browsers that do
not support the <audio> element.

Example:
<!DOCTYPE html>
<html>
<body>
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio></body></html>

71