⬅ Previous Next ➡

16. HTML5 Introduction

HTML5 Introduction
  • What is HTML5?: It is the latest and most advanced version of HyperText Markup Language. It was designed to deliver almost everything you want to do online without needing extra software like "Flash" players.
  • Key Goals of HTML5:
    • To be easier to read for both humans and computers.
    • To provide better multimedia support (audio and video).
    • To improve web application capabilities with new APIs.
    • To ensure cross-platform compatibility (working on phones, tablets, and PCs).
  • New Features in HTML5:
    • Semantic Elements: Tags like <header>, <footer>, and <article> that clearly describe their purpose.
    • Multimedia Tags: Built-in support for <audio> and <video> without external plugins.
    • Graphics: New tags like <canvas> for 2D drawing and SVG for vector graphics.
    • New Form Attributes: Types like color, date, and email with built-in validation.
    • Local Storage: Allows websites to store data on the user's computer (similar to cookies but better).
  • The HTML5 Declaration:
    • In older versions (HTML4), the declaration was very long and complicated.
    • In HTML5, it is simplified to just: <!DOCTYPE html>.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML5 Example Page</title>
</head>

<body>

  <!-- HTML5 Semantic Header -->
  <header>
    <h1>Welcome to HTML5</h1>
    <nav>
      <a href="#home">Home</a> |
      <a href="#about">About</a> |
      <a href="#media">Media</a> |
      <a href="#contact">Contact</a>
    </nav>
  </header>

  <!-- HTML5 Main Content Area -->
  <main>

    <!-- Section Example -->
    <section id="home">
      <h2>HTML5 Basics</h2>
      <p>HTML5 is the latest version of HTML used to create modern web pages.</p>
    </section>

    <!-- Article Example -->
    <article id="about">
      <h2>Semantic Tags</h2>
      <p>HTML5 introduced semantic tags like <b>header</b>, <b>nav</b>, <b>section</b>, <b>article</b>, <b>aside</b>, <b>main</b>, and <b>footer</b>.</p>
    </article>

    <!-- Aside Example -->
    <aside>
      <h3>Quick Note</h3>
      <p>Semantic tags make code easier to read and better for SEO.</p>
    </aside>

    <!-- Multimedia Example (Audio + Video) -->
    <section id="media">
      <h2>HTML5 Multimedia</h2>

      <h3>Video Example</h3>
      <video width="320" height="240" controls>
        <source src="movie.mp4" type="video/mp4">
        Your browser does not support the video tag.
      </video>

      <h3>Audio Example</h3>
      <audio controls>
        <source src="audio.mp3" type="audio/mpeg">
        Your browser does not support the audio tag.
      </audio>
    </section>

    <!-- HTML5 Form Features Example -->
    <section id="contact">
      <h2>HTML5 Form Inputs</h2>

      <form action="/submit" method="POST">
        <label>Email:</label><br>
        <input type="email" name="email" required placeholder="Enter email">
        <br><br>

        <label>Date:</label><br>
        <input type="date" name="date">
        <br><br>

        <label>Number:</label><br>
        <input type="number" name="qty" min="1" max="10">
        <br><br>

        <label>Range:</label><br>
        <input type="range" name="rating" min="1" max="10">
        <br><br>

        <input type="submit" value="Submit">
      </form>
    </section>

  </main>

  <!-- HTML5 Footer -->
  <footer>
    <p>Built using HTML5 semantic tags and multimedia features.</p>
  </footer>

</body>
</html>
⬅ Previous Next ➡