HTML5 Tutorial

HTML5 Tutorial
HTML5 is the latest and most enhanced version of HTML. Technically,

HTML is not a programming language, but rather a markup language. In
this tutorial, we will discuss the features of HTML5 and how to use it
in practice.
HTML5 is the next major revision of the HTML standard superseding

HTML 4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for
structuring and presenting content on the World Wide Web.
HTML5 is a cooperation between the World Wide Web Consortium (W3C)

and the Web Hypertext Application Technology Working Group (WHATWG).
The new standard incorporates features like video playback and drag-
and-drop that have been previously dependent on third-party browser
plug-ins such as Adobe Flash, Microsoft Silverlight, and Google
Gears.
Browser Support
The latest versions of Apple Safari, Google Chrome, Mozilla Firefox,
and Opera all support many HTML5 features and Internet Explorer 9.0
will also have support for some HTML5 functionality.
The mobile web browsers that come pre-installed on iPhones, iPads,

and Android phones all have excellent support for HTML5.
New Features
HTML5 introduces a number of new elements and attributes that can
help you in building modern websites. Here is a set of some of the
most prominent features introduced in HTML5.
 New Semantic Elements − These are like <header>, <footer>, and

<section>.
 Forms 2.0 − Improvements to HTML web forms where new attributes have
been introduced for <input> tag.
 Persistent Local Storage − To achieve without resorting to third-party

plugins.
 WebSocket − A next-generation bidirectional communication technology for

web applications.
 Server-Sent Events − HTML5 introduces events which flow from web server
to the web browsers and they are called Server-Sent Events (SSE).
 Canvas − This supports a two-dimensional drawing surface that you can

program with JavaScript.
 Audio & Video − You can embed audio or video on your webpages without
resorting to third-party plugins.
 Geolocation − Now visitors can choose to share their physical location

with your web application.
 Microdata − This lets you create your own vocabularies beyond HTML5 and
extend your web pages with custom semantics.
 Drag and drop − Drag and drop the items from one location to another
location on the same webpage.
HTML5 comes with a lot of flexibility and it supports the following

features −
 An HTML element starts with a opening tag
 An HTML element ends with a closing tag
 A HTML tag starts with a < and ends with a >
 The letters between the < and > are abbreviations
 The element content is everything between the start tag and the end tag
 Some HTML elements are empty
 Empty elements are closed in the start tag
 Make it a habbit to type all your tags in lowercase - it is considered

good practice
The DOCTYPE
DOCTYPEs in older versions of HTML were longer because the HTML
language was SGML based and therefore required a reference to a DTD.
HTML 5 authors would use simple syntax to specify DOCTYPE as follows

−
<!DOCTYPE html>
The above syntax is case-insensitive.
Character Encoding
HTML 5 authors can use simple syntax to specify Character Encoding
as follows −
<meta charset = "UTF-8">
The above syntax is case-insensitive.
The <script> tag

It's common practice to add a type attribute with a value of
"text/javascript" to script elements as follows −
<script type = "text/javascript" src = "scriptfile.js"></script>
HTML 5 removes extra information required and you can use simply
following syntax −
<script type = "text/javascript" src = "scriptfile.js"></script>
HTML 5 removes extra information required and you can use simply
<script src = "scriptfile.js"></script>
The <link> tag

So far you were writing <link> as follows −
<link rel = "stylesheet" type = "text/css" href = "stylefile.css">
HTML 5 removes extra information required and you can simply use the
<link rel = "stylesheet" href = "stylefile.css">
HTML5 Elements
HTML5 elements are marked up using start tags and end tags. Tags are
delimited using angle brackets with the tag name in between.
The difference between start tags and end tags is that the latter
includes a slash before the tag name.
Following is the example of an HTML5 element −
<p>...</p>
HTML5 tag names are case insensitive and may be written in all
uppercase or mixed case, although the most common convention is to
stick with lowercase.
Most of the elements contain some content like <p>...</p> contains a

paragraph. Some elements, however, are forbidden from containing any
content at all and these are known as void elements. For
example, br, hr, link, meta, etc.
HTML5 Attributes
Elements may contain attributes that are used to set various
properties of an element.
Some attributes are defined globally and can be used on any element,
while others are defined for specific elements only. All attributes
have a name and a value and look like as shown below in the example.
Following is the example of an HTML5 attribute which illustrates how

to mark up a div element with an attribute named class using a value
of "example" −
<div class = "example">...</div>
Attributes may only be specified within start tags and must never be
used in end tags.
HTML5 attributes are case insensitive and may be written in all

uppercase or mixed case, although the most common convention is to
stick with lowercase.
HTML5 Document
The following tags have been introduced for better structure –
 section − This tag represents a generic document or application section.

It can be used together with h1-h6 to indicate the document structure.
 article − This tag represents an independent piece of content of a

document, such as a blog entry or newspaper article.
 aside − This tag represents a piece of content that is only slightly

related to the rest of the page.
 header − This tag represents the header of a section.

 footer − This tag represents a footer for a section and can contain
information about the author, copyright information, et cetera.
 nav − This tag represents a section of the document intended for

navigation.
 dialog − This tag can be used to mark up a conversation.
 figure − This tag can be used to associate a caption together with some
embedded content, such as a graphic or video
The markup for an HTML 5 document would look like the following −
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>...</title>
</head>
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
</html>
Basic HTML5 Document.
This HTML5 example starts with a DOCTYPE followed by an html element. The html element has
a lang attribute that specifies the language of the document. Inside the html element there
is a head element followed by a body element. The head element contains information about
the HTML document. The body element contains the main content of the HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example document</title>
</head>
<body>
<p>This is some text.</p>
<p>This is more text.</p>
</body>
</html>
Text
P element <p>...</p>
The p element represents a paragraph. It has a start and an end tag.
BR Element <br>
The br element represents a line break. It does not have an end tag,
it only has a start tag.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<p>Name<br>Address<br>City & State<br>Zip code</p>
<p>This is some sample text inside of the p element.</p>
</body>
</html>
H1 thru H6 Elements <h1>...</h1>
The h1 thru h6 elements represent headings. There are 6 levels of

heading elements with h1 representing the highest rank and h6 the
lowest. These elements have start and end tags.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>This is a heading</h1>
<p>Name<br>Address<br>City & State<br>Zip code</p>
</body>
</html>
Heading element example.
The h1 element is used has a heading for the whole page

and h2 elements are used as headings for subsections.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>Examples</h1>
<h2>First Paragraph</h2>
<h2>Second Paragraph</h2>
</body>
</html>
CSS (Cascading Style Sheets) example.
This example demonstrates how to center the h1 heading element and

how to set its color to red. The style is applied by using
a style attribute in the h1element. This is not the only way to
apply styles. There are other methods that have some definite
advantages.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1 style="text-align:center; color:red">Examples</h1>
<h2>First Paragraph</h2>
<h2>Second Paragraph</h2>
</body>
</html>
Images and Hyperlinks
IMG Element <img>
The img element represents an image. It does not have an end tag, it
only has a start tag. The source image URL is specified by using
the src attribute.
<body>
<h1>This is an image.</h1>
<img src="ball.png" alt="red ball" height="168" width="100">
</body>
A Element <a>
The a element, or anchor element, represents a hyperlink. It has a

start and an end tag. The href attribute is used to specify the URL
of the web page that it is linking to. The text that is located
between the start and end tags will be displayed in the browser.
<a href="http://www.littlewebhut.com">Little Web Hut</a>
Anchor element enclosed inside a P element
This example encloses an a element inside of a p element. Additional text is added before
and after the a element.
<p>Go to
<a href="http://www.littlewebhut.com">Little Web Hut</a>
today.</p>
IMG element added inside of an Anchor element
An img element is added between the start and end a tags. This allows the user to be taken
to the specified URL when the image is clicked.
<body>
<h1>This is an image.</h1>
<p>Click on image
<a href="http://www.littlewebhut.com">
<img src="ball.png" alt="red ball" height="168" width="100">
</a>
</p>
</body>
Example:
Audio and Video

Audio Element <audio>
Audio can be added to a web page by using the audio element. The audio element has a start
and an end tag. In this example, two source URLs are specified by using
two source elements. The text that comes after the second source element will be displayed
in browsers that do not support the audioelement.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<audio controls>
<source src="bell_audio.mp3" type="audio/mpeg">
<source src="bell_audio.ogg" type="audio/ogg">
Audio element not supported by your browser.
</audio>
</body>
</html>
Video Element <video>
Video can be added to a web page by using the video element. The video element has a start
and an end tag. In this example, two source URLs are specified by using
two source elements. The text that comes after the second source element will be displayed
in browsers that do not support the videoelement.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<video controls>
<source src="bell_video.mp4" type="video/mp4">
<source src="bell_video.ogg" type="video/ogg">
Video element not supported by your browser.
</video>
</body>
</html>
New Semantic Elements
New Semantic Elements <article> <aside> <footer> <header>
<main> <nav> <section>
The following is the HTML code for a sample web page that uses semantic elements that are
new to HTML5.
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>...</title>
</head>
<body>
<header role = "banner">
<h1>HTML5 Document Structure Example</h1>
<p>This page should be tried in safari, chrome or

Mozila.</p>
</header>
<nav>
<ul>
<li><a href = "https://www.tutorialspoint.com/html">HTML

Tutorial</a></li>
<li><a href = "https://www.tutorialspoint.com/css">CSS

Tutorial</a></li>
<li><a href =
"https://www.tutorialspoint.com/javascript">
JavaScript Tutorial</a></li>
</ul>
</nav>
<article>
<section>
<p>Once article can have multiple sections</p>
</section>
</article>
<aside>
<p>This is aside part of the web page</p>
</aside>
<footer>
<p>Created by <a href =

"https://tutorialspoint.com/">Tutorials Point</a></p>
</footer>
</body>
</html>
Example2:
<!DOCTYPE html>
<html lang="en">
<head>
<title>News</title>
</head>
<body>
<header>
<h1>News</h1>
<p>Local and National News</p>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="archive.html">Archives</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
<main>
<section>
<h2>Local News</h2>
<article>
<header>
<h3>Fire fighters rescue man from building</h3>
<p>(author, date)</p>
</header>
<p>This is the story text. This is the story

text.</p>

text.</p>
</article>
<article>
<header>
<h3>New Library to be built</h3>
</header>

text.</p>

text.</p>
</article>
</section>
<section>
<h2>National News</h2>
<article>
<header>
<h3>Snow storm is making travel difficult</h3>
</header>

text.</p>

text.</p>
</article>
<article>
<header>
<h3>Thousands are without power</h3>
</header>

text.</p>

text.</p>
</article>
</section>
</main>
<aside>
<h2>Be a news reporter</h2>
<p>If you see news happening - Send us a Text.</p>
</aside>
<footer>
<p>Footer Information</p>
</footer>
</body>
</html>

HTML5 Tutorial

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

HTML5 Tutorial

Загружено:

Авторское право:

Доступные форматы

HTML5 Tutorial

HTML5 is the latest and most enhanced version of HTML. Technically,

HTML5 is the next major revision of the HTML standard superseding

HTML5 is a cooperation between the World Wide Web Consortium (W3C)

The mobile web browsers that come pre-installed on iPhones, iPads,

 New Semantic Elements − These are like <header>, <footer>, and

 Persistent Local Storage − To achieve without resorting to third-party

 WebSocket − A next-generation bidirectional communication technology for

 Canvas − This supports a two-dimensional drawing surface that you can

 Geolocation − Now visitors can choose to share their physical location

HTML5 comes with a lot of flexibility and it supports the following

 An HTML element starts with a opening tag

 An HTML element ends with a closing tag

 A HTML tag starts with a < and ends with a >

 The letters between the < and > are abbreviations

 Some HTML elements are empty

 Empty elements are closed in the start tag

 Make it a habbit to type all your tags in lowercase - it is considered

HTML 5 authors would use simple syntax to specify DOCTYPE as follows

<meta charset = "UTF-8">

The above syntax is case-insensitive.

The <script> tag

<script type = "text/javascript" src = "scriptfile.js"></script>

<script type = "text/javascript" src = "scriptfile.js"></script>

<script src = "scriptfile.js"></script>

The <link> tag

<link rel = "stylesheet" type = "text/css" href = "stylefile.css">

<link rel = "stylesheet" href = "stylefile.css">

Following is the example of an HTML5 element −

Most of the elements contain some content like <p>...</p> contains a

Following is the example of an HTML5 attribute which illustrates how

<div class = "example">...</div>

HTML5 attributes are case insensitive and may be written in all

 section − This tag represents a generic document or application section.

 article − This tag represents an independent piece of content of a

 aside − This tag represents a piece of content that is only slightly

 header − This tag represents the header of a section.

 nav − This tag represents a section of the document intended for

 dialog − This tag can be used to mark up a conversation.

<meta charset = "utf-8">

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

<p>This is more text.</p>

The p element represents a paragraph. It has a start and an end tag.

<p>Name<br>Address<br>City & State<br>Zip code</p>

<p>This is some sample text inside of the p element.</p>

H1 thru H6 Elements <h1>...</h1>

The h1 thru h6 elements represent headings. There are 6 levels of

<p>Name<br>Address<br>City & State<br>Zip code</p>

<p>This is some sample text inside of the p element.</p>

Heading element example.

The h1 element is used has a heading for the whole page

<p>This is some sample text inside of the p element.</p>

<p>This is some sample text inside of the p element.</p>

CSS (Cascading Style Sheets) example.

This example demonstrates how to center the h1 heading element and

<h1 style="text-align:center; color:red">Examples</h1>

<p>This is some sample text inside of the p element.</p>

<p>This is some sample text inside of the p element.</p>

Images and Hyperlinks

IMG Element <img>

<img src="ball.png" alt="red ball" height="168" width="100">

The a element, or anchor element, represents a hyperlink. It has a

<a href="http://www.littlewebhut.com">Little Web Hut</a>

Anchor element enclosed inside a P element