In this module, we will explore the new features and improvements introduced in HTML5. HTML5 is the latest version of the HTML standard and offers several enhancements over its predecessor, HTML4.

Semantic Elements

HTML5 introduces new semantic elements that provide better structure and meaning to web pages. Some examples of semantic elements include:

- <header>: defines the header section of a document or section
- <nav>: defines a section of navigation links
- <main>: defines the main content section of a document
- <section>: defines a self-contained section of related content
- <article>: defines an independent piece of content
- <aside>: defines a section of content that is related to the surrounding content
- <footer>: defines the footer section of a document or section

Example:


<header>
  <h1>Header</h1>
</header>
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
<main>
  <h1>Main Content</h1>
  <p>This is the main content section.</p>
</main>
<footer>
  <p>Footer</p>
</footer>


Multimedia Elements

HTML5 introduces new multimedia elements that make it easy to add audio and video content to web pages. Some examples of multimedia elements include:

- <audio>: defines an audio element
- <video>: defines a video element

Example:


<audio controls>
  <source src="audio.mp3" type="audio/mp3">
  Your browser does not support the audio element.
</audio>
<video controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video element.
</video>


Canvas and SVG

HTML5 introduces the <canvas> element, which allows for dynamic graphics and animations. Additionally, HTML5 improves support for SVG (Scalable Vector Graphics).

Example:


<canvas id="canvas" width="400" height="200"></canvas>
<script>
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "red";
  ctx.fillRect(10, 10, 50, 50);
</script>


Offline Storage

HTML5 introduces offline storage, which allows web applications to store data locally on the client-side.

Example:


<script>
  localStorage.setItem("name", "John");
  console.log(localStorage.getItem("name"));
</script>


Web Workers

HTML5 introduces web workers, which allow for running scripts in the background.

Example:


<script>
  var worker = new Worker("worker.js");
  worker.onmessage = function(event) {
    console.log(event.data);
  };
  worker.postMessage("Hello, worker!");
</script>


Conclusion

In this module, we have covered the new features and improvements introduced in HTML5. By mastering these features, you will be able to create more powerful and interactive web applications. Remember to use these HTML5 features correctly to ensure your web pages are user-friendly and functional.