Scribd
Upload
4 views29 pages

html5

HTML5 is the latest version of HTML, officially published in 2012, which incorporates features from previous versions and introduces new tools for web developers. Its goals include supporting existing web pages, reducing reliance on external plugins, and improving semantic definitions of page elements. Key features of HTML5 include built-in audio and video support, enhanced form controls, and new semantic elements like <article>, <section>, and <nav>.

Uploaded by

Nilesh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views29 pages

html5

HTML5 is the latest version of HTML, officially published in 2012, which incorporates features from previous versions and introduces new tools for web developers. Its goals include supporting existing web pages, reducing reliance on external plugins, and improving semantic definitions of page elements. Key features of HTML5 include built-in audio and video support, enhanced form controls, and new semantic elements like <article>, <section>, and <nav>.

Uploaded by

Nilesh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 29

Introduction to

HTML5
History of HTML

1991 HTML first published

1995 HTML 2.0


After HTML 4.01 was released, focus shifted to
XHTML and its stricter standards.
1997 HTML 3.2

1999 HTML 4.01 XHTML 2.0 had even stricter standards than 1.0,
rejecting web pages that did not comply. It fell
2000 XHTML 1.0 out of favor gradually and was abandoned
completely in 2009.
2002
-200 HTML5 is much more tolerant and can handle
XHTML 2.0
9 markup from all the prior versions.

Though HTML5 was published officially in 2012, it has


2012 HTML5 been in development since 2004.
What is HTML5?
• HTML5 is the newest version of HTML, only recently gaining
partial support by the makers of web browsers.
• It incorporates all features from earlier versions of HTML,
including the stricter XHTML.
• It adds a diverse set of new tools for the web developer to use.
Goals of HTML5
• Support all existing web pages. With HTML5, there is no requirement to
go back and revise older websites.
• Reduce the need for external plugins and scripts to show website content.
• Improve the semantic definition (i.e. meaning and purpose) of page
elements.
• Make the rendering of web content universal and independent of the
device being used.
• Handle web documents errors in a better and more consistent fashion.
Other New Features in HTML5
■ Built-in audio and video support (without plugins)
■ Enhanced form controls and attributes
■ The Canvas (a way to draw directly on a web page)
■ Drag and Drop functionality
■ Support for CSS3 (the newer and more powerful version
of CSS)
■ More advanced features for web developers, such as
data storage and offline applications.
First Look at HTML5
Remember the DOCTYPE declaration from XHTML?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

In HTML5, there is just one possible DOCTYPE declaration and it is simpler:

<!DOCTYPE html>

Just 15 characters!

The DOCTYPE tells the browser which type and version of document to expect. This
should be the last time the DOCTYPE is ever changed. From now on, all future
versions of HTML will use this same simplified declaration.
The <html> Element
This is what the <html> element looked like in XHTML:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"


lang="en">

Again, HTML5 simplifies this line:

<html lang="en">

The lang attribute in the <html> element declares which language the page content
is in. Though not strictly required, it should always be specified, as it can assist
search engines and screen readers.

Each of the world’s major languages has a two-character code, e.g. Spanish = "es", French =
"fr", German = "de", Chinese = "zh", Arabic = "ar".
The <head> Section
Here is a typical XHTML <head> section:
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>My First XHTML Page</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

And the HTML5 version:

<head>
<meta charset="utf-8">
<title>My First HTML5 Page</title>
<link rel="stylesheet" href="style.css">
</head>

Notice the simplified character set declaration, the shorter CSS stylesheet link text,
and the removal of the trailing slashes for these two lines.
Basic HTML5 Web Page
Putting the prior sections together, and now adding the <body> section and closing
tags, we have our first complete web page in HTML5:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My First HTML5 Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>HTML5 is fun!</p>
</body>
</html>

Let's open this page in a web browser to see how it looks…


HTML
Header Figure
Navigation
Section
Article
Footer
Image, Video, Quote, Table,
Article etc…
Aside Footer

Article
Footer

Legend
Footer
Semantic Elements in HTML5
• A semantic element clearly describes its meaning to both the browser and the developer.
• Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.
• Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its content.

<article>
<aside>
<figcaption>
<figure>
<footer>
<header>
<nav>
<section>
<details>
<summary>
<main>
<mark>
Semantic Elements in HTML5
HTML <section> Element
• The <section> element defines a section in a document.
• "A section is a thematic grouping of content, typically with a heading."
• A web page could normally be split into sections for introduction, content, and contact
information.
<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>
Semantic Elements in HTML5
HTML <article> Element
• The <article> element specifies independent, self-contained content.
• An article should make sense on its own, and it should be possible to distribute it
independently from the rest of the web site.
• Examples of where an <article> element can be used:
• Forum post
• Blog post
• Newspaper article
<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser
today!</p>
</article>
<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since
January, 2018.</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>
Semantic Elements in HTML5
HTML <header> Element
• The <header> element represents a container for introductory content or a set of
navigational links.
• A <header> element typically contains:
• one or more heading elements (<h1> - <h6>)
• logo or icon
• authorship information
• You can have several <header> elements in one HTML document. However, <header> cannot
be placed within a <footer>, <address> or another <header> element.
<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>
Semantic Elements in HTML5
HTML <footer> Element
• The <footer> element defines a footer for a document or section.
• A <footer> element typically contains:
• authorship information
• copyright information
• contact information
• sitemap
• back to top links
• related documents
• You can have several <footer> elements in one document.
<footer>
<p>Author: Hege Refsnes</p>
<p><a href="mailto:hege@example.com">hege@example.com</a></p>
</footer>
Semantic Elements in HTML5
HTML <nav> Element
• The <nav> element 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.
• Browsers, such as screen readers for disabled users, can use this element to determine
whether to omit the initial rendering of this content.
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
Semantic Elements in HTML5
HTML <aside> Element
• The <aside> element defines some content aside from the content it is placed in (like a
sidebar).
• The <aside> content should be indirectly related to the surrounding content.

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot
was amazing! I had a great summer together with my family!</p>

<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions,
international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>
Semantic Elements in HTML5
HTML <details> Tag
• The <details> tag specifies additional details that the user can open and close on demand.
• The <details> tag is often used to create an interactive widget that the user can open and
close. By default, the widget is closed. When open, it expands, and displays the content
within.
• Any sort of content can be put inside the <details> tag.
• The <summary> tag is used in conjuction with <details> to specify a visible heading for the
details.
<details>
<summary>Epcot Center</summary>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions,
international pavilions, award-winning fireworks and seasonal special events.</p>
</details>
Semantic Elements in HTML5
HTML <summary> Tag
• The <summary> tag defines a visible heading for the <details> element. The heading can be
clicked to view/hide the details.
• The <summary> element should be the first child element of the <details> element.

<details>
<summary>Epcot Center</summary>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions,
international pavilions, award-winning fireworks and seasonal special events.</p>
</details>
Semantic Elements in HTML5
HTML <main> Tag
• 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.
• There must not be more than one <main> element in a document. The <main> element must
NOT be a descendant of an <article>, <aside>, <footer>, <header>, or <nav> element.
<main>
<h1>Most Popular Browsers </h1>
<p>Chrome, Firefox, and Edge are the most used browsers today. </p>
<article>
<h2>Google Chrome </h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular
web browser today! </p>
</article>
<article>
<h2>Microsoft Edge </h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet
Explorer.</p>
</article>
</main>
Semantic Elements in HTML5
HTML <mark> Tag
• The <mark> tag defines text that should be marked or highlighted.

<p>Do not forget to buy <mark>milk</mark> today.</p>


Semantic Elements in HTML5
HTML <figure> and <figcaption> Elements
• The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code
listings, etc.
• The <figcaption> tag defines a caption for a <figure> element. The <figcaption> element can
be placed as the first or as the last child of a <figure> element.
• The <img> element defines the actual image/illustration.

<figure>
<img src="pic_trulli.jpg" alt="Trulli">
<figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>
Semantic Elements in HTML5
The HTML <video> Element
• 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.
• To start a video automatically, use the autoplay attribute
• Add muted after autoplay to let your video start playing automatically (but muted)

<video width="320" height="240“controls autoplay muted>


<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Semantic Elements in HTML5
The HTML <audio> Element
• The HTML <audio> element is used to play an audio file on a web page.
• 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.
• Add muted after autoplay to let your audio file start playing automatically (but muted)

<audio controls autoplay muted>


<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
HTML5 Form Controls
<input type="datetime" />
• A date and time (year, month, day, hour, minute, second, fractions of a second) encoded
according to ISO 8601 with the time zone set to UTC.

<input type="date" />


• A date (year, month, day) encoded according to ISO 8601.

<input type="month" />


• A date consisting of a year and a month encoded according to ISO 8601.

<input type="week" />


• A date consisting of a year and a week number encoded according to ISO 8601.

<input type="time" />


• A time (hour, minute, seconds, fractional seconds) encoded according to ISO 8601.
HTML5 Form Controls
<input type="number" />
• It accepts only numerical value. The step attribute specifies the precision, defaulting to 1.

<input type="range" />


• The range type is used for input fields that should contain a value from a range of numbers.

<input type="email" />


• It accepts only email value. This type is used for input fields that should contain an e-mail
address. If you try to submit a simple text, it forces to enter only email address in
email@example.com format.

<input type="url" />


• It accepts only URL value. This type is used for input fields that should contain a URL address.
If you try to submit a simple text, it forces to enter only URL address either in
http://www.example.com format or in http://example.com format.
HTML5 Form Controls
The placeholder attribute
HTML5 introduced a new attribute called placeholder. This attribute on <input> and <textarea>
elements provide a hint to the user of what can be entered in the field. The placeholder text
must not contain carriage returns or line-feeds.
<input type = "text" name = "search" placeholder = "search the web"/>

The autofocus attribute


This is a simple one-step pattern, easily programmed in JavaScript at the time of document load,
automatically focus one particular form field.
<input type = "text" name = "search" autofocus/>

The required attribute


Now you do not need to have JavaScript for client-side validations like empty text box would
never be submitted because HTML5 introduced a new attribute called required which would be
used as follows and would insist to have a value −
<input type = "text" name = "search" required/>
HTML5 Canvas Element
• The HTML <canvas> element is used to draw graphics on a web page.
• The <canvas> element is only a container for graphics. You must use JavaScript to actually
draw the graphics.
• A canvas is a rectangular area on an HTML page. By default, a canvas has no border and no
content.

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">


</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
</script>
HTML5 Svg Element
• What is SVG?
SVG stands for Scalable Vector Graphics
SVG is used to define graphics for the Web
SVG is a W3C recommendation
• SVG defines vector-based graphics in XML format.
• The HTML <svg> element is a container for SVG graphics.

<svg width="100" height="100">


<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy