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

Note:

The HTML5 content models are designed to make the markup structure more meaningful for both the browser and the web designer

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>

, ...

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

<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

<article>
    <h1>Welcome</h1>
    <section>
        <h1>Heading</h1>
        <p>content or image</p>
    </section>
</article>

<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>

There are two different ways to specify the audio source file's URL. The first uses the source attribute:

<audio src="http://www.sololearn.com/uploads/audio.mp3" controls>
    Audio element not supported by your browser
</audio>

Another way of specifying audio URL

<audio controls>
    <source src="http://www.sololearn.com/uploads/audio.mp3" type="audio/mpeg">
    <source src="http://www.sololearn.com/uploads/audio.ogg" type="audio/ogg">
</audio>

controls

Specifies that audio controls should be displayed (such as a play/pause button, etc.)

<audio controls>
    <source src="http://www.sololearn.com/uploads/audio.mp3" type="audio/mpeg">
    Audio element not supported by your browser. 
</audio>

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>
    <source src="http://www.sololearn.com/uploads/audio.mp3" type="audio/mpeg">
    Audio element not supported by your browser. 
</audio>

We can specify the video source URL using an attribute in a video element, or using source elements inside the video element

<video controls>
   <source src="http://www.sololearn.com/uploads/video.mp4" type="video/mp4">
   <source src="http://www.sololearn.com/uploads/video.ogg" type="video/ogg">
   Video is not supported by your browser
</video>

Note:

Another aspect that the audio and video elements have in common is that the major browsers do not all support the same file types. If the browser does not support the first video type, it will try the next one.

Another aspect shared by both the audio and the video elements is that each has controls, autoplay and loop attributes

<video controls autoplay loop>
   <source src="http://www.sololearn.com/uploads/video.mp4" type="video/mp4">
   <source src="http://www.sololearn.com/uploads/video.ogg" type="video/ogg">
   Video is not supported by your browser
</video>

In this example, the video will replay after it finishes playing Note:

Currently, there are three supported video formats for the <video> element: MP4, WebM, and OGG

The

<progress>

element provides the ability to create progress bars on the web. The progress element can be used within headings, paragraphs, or anywhere else in the body

Status: <progress min="0" max="100" value="35"> 
</progress>

Note:

Use the <progress> tag in conjunction with JavaScript to dynamically display a task's progress