HTML5 Introduction and it elements

Admin-DM October 11, 2021
it computer guruji

What is HTML5? 

HTML5 is an updated version of the HTML specification that has been around since 1997 and many of its features are already supported in today’s browsers. The changes in HTML5 include a focus on semantic markup like the addition of the <header>, <footer>, <section>, and <article> elements and also the addition of the <canvas> element for displaying advanced interactive graphics and the <video> element for displaying video.

HTML5 markup can be defined in whatever way you want it to be. Uppercase, lowercase, quoted, unquoted, self-closing or not—it’s your choice.

HTML 5 Elements

<header>
<nav>
<section>
<article>
<aside>
<footer>
<figure>
<details> 
<main>
<time>
<audio>
<video>

The <header> element defines a header of your document. It is always visible for the users at the top of the page

<header>
<h1>JavaScript</h1>
<h3>What is JavaScript?</h3>
<p>Today we are going to talk about JavaScript</p>
</header>

The <nav> depicts the space for navigation links on your website.

<nav>
<ul>
<li><a href="https://nielit.gov.in/digital-marketing-course">
Digital Marketing</a></li>
<li><a href="https://nielit.gov.in/certificate-course-on-python">
Python</a></li>
<li><a href="https://nielit.gov.in/ccc-course">
Course on Computer Concept</a></li>
<li><a href="https://nielit.gov.in/certificate-course-in-core-java">
Java</a></li>
</ul>
</nav>

The <section> tags are used to define a separate section within a webpage, with its own content-

<section>
<h1>Section Heading</h1>
<p>The section tag can contain any elements.</p>
<img src="image.png" alt="section example">
</section>

The <article> element can be used to define the article content on your website-

<article>
<h1>Fun Fact</h1>
<p>Fun fact: most of the fun facts on the Internet are not actually fun.</p>
</article>

The <aside> semantic element defines the content which will be set to the side. It is occasionally used for creating sidebars, but can also be used for displaying less important content-

<aside>
  <h4>Lake</h4>
  <p>Oxford lake is a lake in the state.</p>
</aside>

The <footer> element describes the footnote for your website or part of the content-

<footer>
<address>
Postal Address: Laxmi Nagar New Delhi.
</address>
<p>Copyright © 2020 All rights reserved.</p>
</footer>

The <figure> element depicts space for separated content, such as photos, diagrams, etc. To provide a caption for this element, use the <figcaption> tags-

<figure>
<figcaption>Dog</figcaption>
<img src="image.png" alt="The Bread Dog" width="300" height="300">
</figure>

The <details> element defines the details on your website that can either be visible or hidden. To add a summary for this element, use the <summary> element-

<details> 
<summary>Some details</summary> 
<p>Provide more info about the details here.</p>
</details>

The content of the <main> tags is the main content of a page. It can be an article, regular paragraph or anything else-

<main id="content" class="group" role="main">

The <mark> element highlights the text to emphasize its meaning-

<p>The mark tag is <mark>useful</mark> when you need to highlight important information</p>

The <time> element is used to define and display time and date on your web page-

<h2>The premiere show starts at <time>21:00</time> today.</h2>

<audio> Tag:- The <audio> element is used to embed audio content in an HTML document without requiring any additional plug-in like Flash player.

Example-

<! doctype html>
<html>
<head><title>HTML Audio Tag</title>
</head>
<body>
<audio controls>
<source src="audio_file.extention" type="audio/mp3">
<audio>
</body>
</html>

<video> Tag:- The HTML5 <video> element provides a way to embed video in webpages. There are three video formats supported for HTML video tag-
  1. mp4
  2. webM
  3. ogg
Example-

<! doctype html>
<html>
<head><title>HTML Video Tag</title>
</head>
<body>
<video controls>
<source src="video_file.extention" type="video/mp4">
<audio>
</body>
</html>

Post a Comment

0 Comments