Difference between revisions of "HTML 5"

From wikieduonline
Jump to navigation Jump to search
 
(29 intermediate revisions by the same user not shown)
Line 50: Line 50:
 
'''<u>Sectioning content</u>:''' Defines the scope of headings, content, navigation, and footers.
 
'''<u>Sectioning content</u>:''' Defines the scope of headings, content, navigation, and footers.
 
*Elements:''' <article>, <aside>, <nav>, <section>'''
 
*Elements:''' <article>, <aside>, <nav>, <section>'''
 +
 +
==Header, nav & footer==
 +
===The <header> Element===
 +
In '''HTML4,''' we would define a header like this:
 +
<pre><div id="header"></pre>
 +
 +
In '''HTML5''', a simple '''<header>''' tag is used, instead.
 +
 +
The <header> element is appropriate for use inside the body tag.
 +
<pre><!DOCTYPE html>
 +
<html>
 +
  <head></head>
 +
  <body>
 +
      <header>
 +
        <h1> Most important heading </h1>
 +
        <h3> Less important heading </h3>
 +
      </header>
 +
  </body>
 +
</html></pre>
 +
 +
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.
 +
<pre><footer>…</footer></pre>
 +
 +
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:
 +
<pre><nav>
 +
  <ul>
 +
      <li><a href="#">Home</a></li>
 +
      <li><a href="#">Services</a></li>
 +
      <li><a href="#">About us</a></li>
 +
  </ul>
 +
</nav></pre>
 +
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.
 +
<pre><article>
 +
  <h1>The article title</h1>
 +
  <p>Contents of the article element </p>
 +
</article></pre>
 +
 +
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.
 +
<pre><article>
 +
  <h1>Welcome</h1>
 +
  <section>
 +
      <h1>Heading</h1>
 +
      <p>content or image</p>
 +
  </section>
 +
</article></pre>
 +
 +
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.
 +
<pre><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></pre>
 +
 +
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:
 +
<pre><audio src="audio.mp3" controls>
 +
  Audio element not supported by your browser
 +
</audio></pre>
 +
 +
The second way uses the '''<source>''' element inside the '''<audio>''' element:
 +
<pre><audio controls>
 +
  <source src="audio.mp3" type="audio/mpeg">
 +
  <source src="audio.ogg" type="audio/ogg">
 +
</audio></pre>
 +
 +
===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.
 +
 +
<pre><audio controls autoplay>
 +
    <source src="http://www.xxxxx.com/uploads/audio.mp3" type="audio/mpeg">
 +
    Audio element not supported by your browser.
 +
</audio></pre>
 +
 +
'''loop'''
 +
This attribute is used to have the audio replay every time it is finished.
 +
 +
<pre><audio controls autoplay loop></pre>
 +
 +
Currently, there are three supported file formats for the <audio> element: MP3, WAV, and OGG.
 +
 +
==The Video Element==
 +
The video element is similar to the audio element.
 +
You can specify the video source URL using an attribute in a video element, or using source elements inside the video element:
 +
 +
<pre><video controls>
 +
  <source src="video.mp4" type="video/mp4">
 +
  <source src="video.ogg" type="video/ogg">
 +
  Video is not supported by your browser
 +
</video></pre>
 +
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.
 +
 +
===Attributes of <video>===
 +
Another aspect shared by both the audio and the video elements is that each has controls, autoplay and loop attributes.
 +
 +
<pre><video controls autoplay loop>
 +
  <source src="video.mp4" type="video/mp4">
 +
  <source src="video.ogg" type="video/ogg">
 +
  Video is not supported by your browser
 +
</video></pre>
 +
Currently, there are three supported video formats for the <video> element: MP4, WebM, and OGG
 +
 +
==Progress Element==
 +
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.
 +
 +
<u>Progress Element Attributes</u>
 +
'''Value''': Specifies how much of the task has been completed.
 +
'''Max''': Specifies how much work the task requires in total.
 +
 +
Example:
 +
 +
<pre>Status: <progress min="0" max="100" value="35">
 +
</progress></pre>
 +
 +
==Web Storage API==
 +
===HTML5 Web Storage===
 +
With HTML5 web storage, websites can store data on a user's local computer.
 +
Before HTML5, we had to use '''JavaScript cookies''' to achieve this functionality.
 +
 +
<u>The Advantages of Web Storage</u>
 +
*- More secure
 +
*- Faster
 +
*- Stores a larger amount of data
 +
*- Stored data is not sent with every server request
 +
 +
Local storage is per domain. All pages from one domain can store and access the same data.
 +
 +
===Types of Web Storage Objects===
 +
There are two types of web storage objects:
 +
*- '''sessionStorage()''': Session Storage is destroyed once the user closes the browser
 +
*- '''localStorage()''': Local Storage stores data with no expiration date
 +
 +
===Working with Values===
 +
The syntax for web storage for both local and session storage is very simple and similar.
 +
The data is stored as key/value pairs.
 +
 +
'''Storing a Value:'''
 +
<pre>localStorage.setItem("key1", "value1");</pre>
 +
 +
'''Getting a Value:'''
 +
<pre>//this will print the value
 +
alert(localStorage.getItem("key1")); </pre>
 +
 +
'''Removing a Value:'''
 +
<pre>localStorage.removeItem("key1");</pre>
 +
 +
'''Removing All Values:'''
 +
<pre>localStorage.clear();</pre>
 +
 +
The same syntax applies to the session storage, with one difference: Instead of localStorage, sessionStorage is used.
 +
 +
==Geolocation API==
 +
In HTML5, the Geolocation API is used to obtain the user's geographical location.
 +
Since this can compromise user privacy, the option is not available unless the user approves it.
 +
 +
===Using HTML Geolocation===
 +
The Geolocation API’s main method is getCurrentPosition, which retrieves the current geographic location of the user's device.
 +
  navigator.geolocation.getCurrentPosition();
 +
 +
Parameters:
 +
 +
*'''showLocation (mandatory)''': Defines the callback method that retrieves location information.
 +
*'''ErrorHandler(optional)''': Defines the callback method that is invoked when an error occurs in processing the asynchronous call.
 +
*'''Options (optional)''': Defines a set of options for retrieving the location information.
 +
 +
===Presenting Data===
 +
User location can be presented in two ways: '''Geodetic''' and '''Civic'''.
 +
 +
*1. The '''geodetic''' way to describe position refers directly to '''latitude''' and '''longitude.'''
 +
*2. The '''civic''' representation of location data is presented in a format that is more easily read and understood(usual address).
 +
 +
The getCurrentPosition() method returns an object if it is successful. The latitude, longitude, and accuracy properties are always returned.
 +
 +
==Drag&Drop API==
 +
===Making Elements Draggable===
 +
The drag and drop feature lets you "grab" an object and drag it to a different location.
 +
To make an element draggable, just set the draggable attribute to true: <code><img draggable="true" /></code>
 +
 +
Example:
 +
 +
<pre>
 +
<!DOCTYPE HTML>
 +
<html>
 +
  <head>
 +
  <script>
 +
function allowDrop(ev) {
 +
    ev.preventDefault();
 +
}
 +
 +
function drag(ev) {
 +
    ev.dataTransfer.setData("text", ev.target.id);
 +
}
 +
 +
function drop(ev) {
 +
    ev.preventDefault();
 +
    var data = ev.dataTransfer.getData("text");
 +
    ev.target.appendChild(document.getElementById(data));
 +
}
 +
  </script>
 +
  </head>
 +
<body>
 +
 +
  <div id="box" ondrop="drop(event)"
 +
  ondragover="allowDrop(event)"
 +
  style="border:1px solid black;
 +
  width:200px; height:200px"></div>
 +
 +
  <img id="image" src="sample.jpg" draggable="true"
 +
  ondragstart="drag(event)" width="150" height="50" alt="" />
 +
 +
</body>
 +
</html></pre>
 +
 +
'''What to Drag'''
 +
 +
When the element is dragged, the ondragstart attribute calls a function, '''drag(event)''', which specifies what data is to be dragged.
 +
The '''dataTransfer.setData()''' method sets the data type and the value of the dragged data:
 +
 +
<pre>function drag(ev) {
 +
    ev.dataTransfer.setData("text", ev.target.id);
 +
}
 +
</pre>
 +
 +
In our example, the data type is "text" and the value is the ID of the draggable element ("image").
 +
 +
'''Where to Drop'''
 +
 +
The '''ondragover''' event specifies where the dragged data can be dropped. By default, data and elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element.
 +
This is done by calling the '''event.preventDefault()''' method for the '''ondragover''' event.
 +
 +
''Do the Drop'''
 +
 +
When the dragged data is dropped, a drop event occurs.
 +
In the example above, the ondrop attribute calls a function, '''drop(event)''':
 +
 +
<pre>function drop(ev) {
 +
    ev.preventDefault();
 +
    var data = ev.dataTransfer.getData("text");
 +
    ev.target.appendChild(document.getElementById(data));
 +
}
 +
</pre>
 +
 +
The '''preventDefault()''' method prevents the browser's default handling of the data (default is open as a link on the drop).
 +
The dragged data can be accessed with the '''dataTransfer.getData()''' method. This method will return any data that was set to the same type in the setData() method.
 +
The dragged data is the ID of the dragged element ("image").
 +
 +
In the end, the dragged element is appended into the drop element, using the '''appendChild()''' function.
 +
 +
Basic knowledge of JavaScript is required to understand and use the API.
 +
 +
==See also==
 +
*[[HTML]]

Latest revision as of 07:26, 28 April 2020

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

New in HTML5[edit]

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[edit]

The List of Content Models[edit]

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[edit]

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[edit]

The <header> Element[edit]

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[edit]

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[edit]

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[edit]

The <article> Element[edit]

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[edit]

<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[edit]

<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[edit]

Audio on the Web[edit]

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>[edit]

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>

Currently, there are three supported file formats for the <audio> element: MP3, WAV, and OGG.

The Video Element[edit]

The video element is similar to the audio element. You 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="video.mp4" type="video/mp4">
   <source src="video.ogg" type="video/ogg">
   Video is not supported by your browser
</video>

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.

Attributes of <video>[edit]

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="video.mp4" type="video/mp4">
   <source src="video.ogg" type="video/ogg">
   Video is not supported by your browser
</video>

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

Progress Element[edit]

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.

Progress Element Attributes Value: Specifies how much of the task has been completed. Max: Specifies how much work the task requires in total.

Example: 

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

Web Storage API[edit]

HTML5 Web Storage[edit]

With HTML5 web storage, websites can store data on a user's local computer. Before HTML5, we had to use JavaScript cookies to achieve this functionality.

The Advantages of Web Storage

  • - More secure
  • - Faster
  • - Stores a larger amount of data
  • - Stored data is not sent with every server request

Local storage is per domain. All pages from one domain can store and access the same data.

Types of Web Storage Objects[edit]

There are two types of web storage objects:

  • - sessionStorage(): Session Storage is destroyed once the user closes the browser
  • - localStorage(): Local Storage stores data with no expiration date

Working with Values[edit]

The syntax for web storage for both local and session storage is very simple and similar. The data is stored as key/value pairs.

Storing a Value: 

localStorage.setItem("key1", "value1");

Getting a Value: 

//this will print the value
alert(localStorage.getItem("key1"));

Removing a Value: 

localStorage.removeItem("key1");

Removing All Values: 

localStorage.clear();

The same syntax applies to the session storage, with one difference: Instead of localStorage, sessionStorage is used.

Geolocation API[edit]

In HTML5, the Geolocation API is used to obtain the user's geographical location. Since this can compromise user privacy, the option is not available unless the user approves it.

Using HTML Geolocation[edit]

The Geolocation API’s main method is getCurrentPosition, which retrieves the current geographic location of the user's device. 

 navigator.geolocation.getCurrentPosition();

Parameters:

  • showLocation (mandatory): Defines the callback method that retrieves location information.
  • ErrorHandler(optional): Defines the callback method that is invoked when an error occurs in processing the asynchronous call.
  • Options (optional): Defines a set of options for retrieving the location information.

Presenting Data[edit]

User location can be presented in two ways: Geodetic and Civic.

  • 1. The geodetic way to describe position refers directly to latitude and longitude.
  • 2. The civic representation of location data is presented in a format that is more easily read and understood(usual address).

The getCurrentPosition() method returns an object if it is successful. The latitude, longitude, and accuracy properties are always returned.

Drag&Drop API[edit]

Making Elements Draggable[edit]

The drag and drop feature lets you "grab" an object and drag it to a different location. To make an element draggable, just set the draggable attribute to true: <img draggable="true" />

Example: 

<!DOCTYPE HTML>
<html>
   <head>
   <script>
function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
   </script>
   </head>
<body>

   <div id="box" ondrop="drop(event)"
   ondragover="allowDrop(event)"
   style="border:1px solid black; 
   width:200px; height:200px"></div>

   <img id="image" src="sample.jpg" draggable="true"
   ondragstart="drag(event)" width="150" height="50" alt="" />

</body>
</html>

What to Drag

When the element is dragged, the ondragstart attribute calls a function, drag(event), which specifies what data is to be dragged. The dataTransfer.setData() method sets the data type and the value of the dragged data: 

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

In our example, the data type is "text" and the value is the ID of the draggable element ("image").

Where to Drop

The ondragover event specifies where the dragged data can be dropped. By default, data and elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element. This is done by calling the event.preventDefault() method for the ondragover event.

Do the Drop'

When the dragged data is dropped, a drop event occurs. In the example above, the ondrop attribute calls a function, drop(event): 

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}

The preventDefault() method prevents the browser's default handling of the data (default is open as a link on the drop). The dragged data can be accessed with the dataTransfer.getData() method. This method will return any data that was set to the same type in the setData() method. The dragged data is the ID of the dragged element ("image").

In the end, the dragged element is appended into the drop element, using the appendChild() function.

Basic knowledge of JavaScript is required to understand and use the API.

See also[edit]

Retrieved from "https://www.wikieduonline.com/index.php?title=HTML_5&oldid=19865"

Advertising: