HTML 5

From wikieduonline
Jump to navigation Jump to search

HTML5 is a markup language used for structuring and presenting content on the World Wide Web.

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>

Header, nav & footer

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

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

The <nav> Element

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.sololearn.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: