HTML5: What is it and its key features

HTML5
Name: Amir khanzada
ID : 6268

What is HTML5?
HTML5 is the new standard for HTML.
The previous version of HTML was – HTML 4.01, came in 1999.
HTML5 is designed to deliver almost everything you want to do online
without requiring additional plugins. It does everything from
animation to apps, music to movies, and can also be used to build
complicated applications that run in your browser.
HTML5 is also cross-platform (it does not care whether you are using
a tablet or a smartphone, a notebook, notebook or a Smart TV).

Differences Between HTML4 and
HTML5

Top 5 Benefits of Using HTML5
 Built-In Video/Audio Playback
 Offline Caching
 Cleaner Code
 Browser Cross-Compatibility
 Mobile Optimization

Built-In Video/Audio Playback
In previous HTML versions, webmasters were forced to use third-party
programs, such as Adobe Flash Player, QuickTime or Silverlight, in order
to play video and video. This was a messy, archaic method for web-
based media playback that often resulted in errors. HTML5 has solved
this problem with its full support for video and audio.
Here's an example of HTML5 video playback code:
<video poster="movie.jpg" controls>
<source src=”movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the <code>video</code> element.
</video>
Notice how there are two files in the above code? This allows browsers
to choose the one that's compatible. If a visitor's web browser doesn't
support .ogg format, it will move on to the next file listed (.mp4).

HTML5 also offers offline caching, meaning visitors
can load certain elements on a webpage without an
active internet connection – assuming they've visited
the site in the past. If a visitor's internet connection
happens to go down, he or she can still load core
elements of the site.
With HTML5, webmasters can define which files
visitors' browsers save. Offline caching is something
that's entirely new with HTML5.
Offline Cache

Don't you hate looking at a long sheet of messy
HTML code? Trying to make even basic changes to a
website built with bad code can be a nightmare.
HTML5 is designed to offer cleaner code that's not
only easier for developers, but also optimized for
improved search engine readability. And when
search engine are able to 'understand' the content of
a website more easily, it usually translates into
higher search rankings.
Cleaner Code

A fourth benefit of HTML5 is the simple fact that its
cross-compatible with all of the major web browsers,
including Firefox, Internet Explorer, Chrome, Safari
and Opera. This doesn't necessarily mean that all of
these browsers will support every new element
introduced in HTML5, but they will be able to read
the doctype at the very least.
Browser Cross-Compatibility

If you still need another reason to use HTML5, here's
one: it's optimized for the creation of mobile
websites and applications. Responsive websites are
easily built using HTML5, offering full functionality
across all types of devices. Without the need for
horizontal scrolling, mobile internet users can
browse websites more efficiently.
Adobe has since discontinued support for their
mobile Flash Player, paving the way for HTML5 to
handle interactive tasks on mobile devices.
Mobile Optimization

Browser Support for HTML5
HTML5 is not yet an official standard, and no
browsers have full HTML5 support.
But all major browsers (Safari, Chrome, Firefox,
Opera, Internet Explorer) continue to add new
HTML5 features to their latest versions.

The HTML5 <!DOCTYPE>
In HTML5 there is only one <!doctype>
declaration, and it is very simple:
<!DOCTYPE html>

Minimum HTML5 Document
Below is a simple HTML5 document, with the minimum of required
tags:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
Content of the document......
</body>
</html>

Removed Elements
The following HTML 4.01 elements are removed from HTML5:
• <acronym>
• <applet>
• <basefont>
• <big>
• <center>
• <dir>
• <font>
• <frame>
• <frameset>
• <noframes>
• <strike>
• <tt>

HTML5 Video
Many modern websites show videos. HTML5
provides a standard for showing them.

Video Formats and Browser
Support
Browser MP4 WebM Ogg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox
NO
Update: Firefox 21
running on
Windows 7,
Windows 8,
Windows Vista, and
Android now
supports MP4
YES YES
Safari YES NO NO
Opera NO YES YES

HTML5 Audio
HTML5 provides a standard for playing audio
files.

Audio Formats and Browser
Support
Browser MP3 Wav Ogg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox
NO
Update: Firefox 21
running on
Windows 7,
Windows 8,
Windows Vista, and
Android now
supports MP3
YES YES
Safari YES YES NO
Opera NO YES YES

HTML5 Input Types
HTML5 has several new input types for forms. These new features allow better input
control and validation.
• color
• Date
• datetime
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url
• week

HTML5 Semantic Elements
• 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 <img> - Clearly defines its
content.

HTML5 Semantic Elements
• HTML5 offers new semantic elements to clearly
define different parts of a web page:
• <header>
• <nav>
• <section>
• <article>
• <aside>
• <figure>
• <footer>

HTML5: What is it and its key features

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à HTML5: What is it and its key features

Similaire à HTML5: What is it and its key features (20)

Dernier

Dernier (20)

HTML5: What is it and its key features