HTML5 Features

Web languages need regular upgrades in order to stay current and solve new problems faced by web developers. HTML5 is the latest version of HTML. Below are some HTML5 features you will encounter in interviews.

1. Video Element:

The <video> element allows easy streaming of video content from a website.

<video width="450px" height="350px" controls>
  <source src="video-url.mp4" type="video/mp4">
</video>

2. Figure Element:

The <figure> element is used to display visual content such as images or code snippets.

<figure class="gallery-item">
  <img src="image-1.png">
</figure>
<figure class="gallery-item">
  <img src="image-2.png">
</figure>

3. Section Element:

<section> elements help organize webpage content into thematic groups.

<section class="contact-form">
  <h2>Contact Us</h2>
  <form>
    <!-- Form elements here -->
  </form>
</section>

4. Nav Element:

The <nav> element is used for website navigation, linking to other pages on the site.

<nav>
  <p><a href="login.html">Log In</a></p>
  <p><a href="signup.html">Sign Up</a></p>
  <p><a href="contact.html">Contact Us</a></p>
</nav>

5. Header Element:

<header> element groups introductory elements on a website, like logos and navigation.

<header>
  <img src="company-logo.png">
  <nav>
    <p><a href="login.html">Log In</a></p>
    <p><a href="signup.html">Sign Up</a></p>
    <p><a href="contact.html">Contact Us</a></p>
  </nav>
</header>

6. Footer Element:

The <footer> element is usually found at the bottom of a webpage and contains information like copyright details and social media links.

<footer>
  <p>&copy; Acme Granola Corporation 2016<p>
  <div class="social">
    <a href="#"><img src="instagram-icon.png"></a>
    <a href="#"><img src="facebook-icon.png"></a>
    <a href="#"><img src="twitter-icon.png"></a>
  </div>
</footer>

7. Audio Element:

Similar to the <video> element, <audio> allows you to embed audio content in your webpage.

<audio controls>
  <source src="audio-file.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

8. Progress Element:

The <progress> element represents the completion progress of a task, such as downloading a file or uploading data.

<progress value="70" max="100"></progress>

9. Meter Element:

<meter> element represents a scalar measurement within a known range, for example, disk usage, the relevance of a query result, etc.

<meter value="6" min="0" max="10">6 out of 10</meter>

10. Article Element:

The <article> element represents a self-contained composition in a document, page, application, or site.

<article>
  <h2>Article Title</h2>
  <p>Article content goes here...</p>
</article>