Photo by Jackson Sophat on Unsplash

A Complete Guide to HTML5: Mastering all the tags and features (HTML Course: Part III)

In the previous lessons, we covered the basics of HTML and some of the common elements used to create web pages. In this lesson, we’ll take a comprehensive look at all the tags present in HTML5 that can be used to create web pages.

Semantic Tags

HTML5 introduced a set of new semantic tags that provide more meaning to the content on a web page. These tags include <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>. These tags provide a clear structure to the web page and help search engines understand the content on the page.

<header>
  <h1>Header</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>
<main>
  <section>
    <h2>Section</h2>
    <article>
      <p>Article</p>
    </article>
  </section>
  <aside>
    <p>Aside</p>
  </aside>
</main>
<footer>
  <p>Footer</p>
</footer>

Code Output

Media Tags

HTML5 introduced a set of tags that can be used to embed media like audio, video and canvas. These tags include <audio>, <video>, <source>, <track>, <canvas>

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

Code Output (Nothing appears as the audio and video url/path entered do not exist, If you’ll enter the correct file location on your pc then the video shall appear!!!)

Forms

HTML5 forms introduced a set of new input types like search, url, email, tel, date, time, month, week, datetime, datetime-local, color, range, search, number.

<form>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required><br>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required><br>
  <input type="submit" value="Submit">
</form>

Code Output

Other Tags

Other tags present in HTML5 are <time>, <mark>, <output>, <progress>, <meter>, <details>, <summary>, <figure>, <figcaption>, <template>.

It’s important to note that there are many more HTML tags available, and it’s essential to use them correctly to create a logical, accessible and semantic web page. This is just a brief overview of the tags available in HTML5, and it’s important to consult the official documentation for more information.

I’ll repeat this through the lesson, if you don’t get anything read twice because HTML is an extremely is to understand language… Anyways if still think you’re not understanding comment below and I’ll (only if it’s legit) reply

Link to Next Lesson