HTML 5
HTML5 is a markup language used for structuring and presenting content on the World Wide Web.
Contents
New in HTML5
Forms
- - The Web Forms 2.0 specification allows the creation of more powerful forms and more compelling user experiences.
- - Date pickers, color pickers, and numeric stepper controls have been added.
- - Input field types now include email, search, and URL.
- - PUT and DELETE form methods are now supported.
Integrated API (Application Programming Interfaces)
- - Drag and Drop
- - Audio and Video
- - Offline Web Applications
- - History
- - Local Storage
- - Geolocation
- - Web Messaging
Content Models
The List of Content Models
In HTML, elements typically belonged in either the block level or inline content model. HTML5 introduces seven main content models.
- - Metadata
- - Embedded
- - Interactive
- - Heading
- - Phrasing
- - Flow
- - Sectioning
Content Models
Metadata: Content that sets up the presentation or behavior of the rest of the content. These elements are found in the head of the document.
- Elements: <base>, <link>, <meta>, <noscript>, <script>, <style>, <title>
Embedded: Content that imports other resources into the document.
- Elements: <audio>, <video>, <canvas>, <iframe>, <img>, <math>, <object>, <svg>
Interactive: Content specifically intended for user interaction.
- Elements: <a>, <audio>, <video>, <button>, <details>, <embed>, <iframe>, <img>, <input>, <label>, <object>, <select>, <textarea>
Heading: Defines a section header.
- Elements: <h1, <h2, <h3, <h4, <h5, <h6, <hgroup>
Phrasing: This model has a number of inline-level elements in common with HTML4.
- Elements: <img>, <span, <strong, <label>, br />, <small, <sub, and more.
Flow content: Contains the majority of HTML5 elements that would be included in the normal flow of the document.
Sectioning content: Defines the scope of headings, content, navigation, and footers.
- Elements: <article>, <aside>, <nav>, <section>
The <header> Element
In HTML4, we would define a header like this:
<div id="header">
In HTML5, a simple <header> tag is used, instead.
The <header> element is appropriate for use inside the body tag.
<!DOCTYPE html>
<html>
<head></head>
<body>
<header>
<h1> Most important heading </h1>
<h3> Less important heading </h3>
</header>
</body>
</html>
Note that the <header> is completely different from the <head> tag.
The footer element is also widely used. Generally, we refer to a section located at the very bottom of the web page as the footer.
<footer>…</footer>
The following information is usually provided between these tags:
- - Contact Information
- - Privacy Policy
- - Social Media Icons
- - Terms of Service
- - Copyright Information
- - Sitemap and Related Documents
This tag represents a section of a page that links to other pages or to certain sections within the page. This would be a section with navigation links.
Here is an example of a major block of navigation links:
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About us</a></li>
</ul>
</nav>
Not all of the links in a document should be inside a <nav> element. The <nav> element is intended only for major blocks of navigation links. Typically, the <footer> element often has a list of links that don't need to be in a <nav> element.
article, section & aside
The <article> Element
The article is a self-contained, independent piece of content that can be used and distributed separately from the rest of the page or site. This could be a forum post, a magazine or newspaper article, a blog entry, a comment, an interactive widget or gadget, or any other independent piece of content.
The <article> element replaces the <div element that was widely used in HTML4, along with an id or class.
<article> <h1>The article title</h1> <p>Contents of the article element </p> </article>
When an <article> element is nested, the inner element represents an article related to the outer element. For example, blog post comments can be <article> elements nested in the <article> representing the blog post.
The <section> Element
<section> is a logical container of the page or article. Sections can be used to divide up content within an article. For example, a homepage could have a section for introducing the company, another for news items, and still another for contact information.
Each <section>should be identified, typically by including a heading (h1-h6 element) as a child of the <section> element.
<article>
<h1>Welcome</h1>
<section>
<h1>Heading</h1>
<p>content or image</p>
</section>
</article>
If it makes sense to separately syndicate the content of a <section> element, use an <article> element instead.
The <aside> Element
<aside> is secondary or tangential content which could be considered separate from but indirectly related to the main content. This type of content is often represented in sidebars. When an <aside> tag is used within an <article> tag, the content of the <aside> should be specifically related to that article.
<article>
<h1> Gifts for everyone </h1>
<p> This website will be the best place for choosing gifts </p>
<aside>
<p> Gifts will be delivered to you within 24 hours </p>
</aside>
</article>
When an <aside> tag is used outside of an <article> tag, its content should be related to the surrounding content.
The Audio Element
Audio on the Web
The HTML5 <audio> element specifies a standard for embedding audio in a web page.
There are two different ways to specify the audio source file's URL. The first uses the source attribute:
<audio src="audio.mp3" controls> Audio element not supported by your browser </audio>
The second way uses the <source> element inside the <audio> element:
<audio controls> <source src="audio.mp3" type="audio/mpeg"> <source src="audio.ogg" type="audio/ogg"> </audio>
Attributes of <audio>
controls Specifies that audio controls should be displayed (such as a play/pause button, etc.)
autoplay When this attribute is defined, audio starts playing as soon as it is ready, without asking for the visitor's permission.
<audio controls autoplay>
<source src="http://www.xxxxx.com/uploads/audio.mp3" type="audio/mpeg">
Audio element not supported by your browser.
</audio>
loop This attribute is used to have the audio replay every time it is finished.
<audio controls autoplay loop>
Advertising:
