HTML 5 Come With Many New Feature. Use The HTML 5 New Feature You Build Great Experience Website For User, Increase Monthly users, And Also Increase the Web Speed.

HTML 5 Enables More Interactive Websites by Embedding Audio, Video, And Graphics on the Web Page.

HTML 5  Elements Help  Search Engine  Crawler To Understand Web layout  and  Index Your Site Properly.

The Purpose of HTML 5 is Primarily to Make Web Development very Easier.

New Feature Elements:

  • header
  • nav
  • main
  • article
  • aside
  • section
  • footer
  • canvas
  • figure
  • Progress

Header:

The header element Define Website Header Structure in this Element. You Define Nav Elements, Brand Logo, and Search Bar in Header Element.

Syntax:

<header> </header>
Header Example


<header>
  <img src="BrandLogo.png">
  <nav>
      <a href="login.html">Home</a>
      <a href="about.html">About</a>
      <a href="contact.html">Contact Us</a>
  </nav>
</header>
Header Elements

Nav Elements Use To Add Navigation On Website. Help Navigation You Easily Go To One Page To other Page.

Syntax:

<nav> </nav>
Nav Example.
<nav>
      <a href="login.html">Home</a>
      <a href="about.html">About</a>
      <a href="contact.html">Contact Us</a>
</nav>

Main:

The main tag contains the main content of the page. You Do Not Add More than one main tag on web pages.

Syntax:

<main> </main>
Main Tag Example.

<main> 
    <article> 
        <section class="card">
            <h2> Post Heading 1</h2>
            <p> paragraph </p>
        </section>
        <section class="card">
            <h2> Post  Heading 2</h2>
            <p> paragraph </p>
        </section>
    </article>
</main>
Main Tag Example.

Article:

Inside Article, We Define Article Structure Card, heading, and Paragraph. Article Tag Also Help To Index Our Article In Google Search.

Syntax:

<article> </article>
Article Tag Example.

<article> 
        <section class="card">
            <h2> Post Heading 1</h2>
            <p> paragraph </p>
        </section>
        
        <section class="card">
            <h2> Post  Heading 2</h2>
            <p> paragraph </p>
        </section>
</article>
HTML Article Example.

Aside:

The <aside> Tag Define a Sidebar On Web page. The<aside> element does not render anything special in a browser. You  use CSS to style the element.

Syntax:

<aside> </aside>
<html>
<head>
<style>
aside {
  width: 30%;
  padding-left: 15px;
  margin-left: 15px;
  float: right;
  background-color: red;
  color:white
}
</style>
</head>
<body>
    <article> 
            <section class="card">
                <h2> Post Heading 1</h2>
                <p> paragraph </p>
            </section>
            <section class="card">
                <h2> Post  Heading 2</h2>
                <p> paragraph </p>
            </section>
    </article>
    <aside>
   		 <p> sidebar is Here</p>
    </aside>

</body>
</html>
aside bar Example.

Section:

The <section> tag defines a section in a document. Section Element Contain Some Default CSS.

section {
  display: block;
}

Syntax:

<section> </section>
 <section>
        <h2> Section </h2>
        <p> paragrap</p>
 </section>
html Section Example.

The footer element Help To Define footer page On a website. It can contain copyright information, links to social media, and additional site navigation items.

Syntax:

<footer> </footer>
Footer Tag Example.
<footer>
        <a href="#"> <p>&copy; By Rajdeep Singh<p> </a>
        <div class="social">
          <a href="/">Home</a>
          <a href="https://facebook.com/officialrajdeepsingh">Facebook</a>
          <a href="http://officialrajdeepsingh.dev/">Website</a>
        </div>
      </footer>
Footer Example


Canvas:

canvas is newly introduced in HTML5. It is used to draw the images, and create SVG. It can be used for visual images, rendering graphs, web game graphics.Canvas Element use With JavaScript. You Write Text In Open And Close Element Never Be Show In Browser.

Syntax:

<canvas></canvas>
html Canvas Syntax.

<canvas id="myCanvas"></canvas>
HTML Canvas Syntax.

Figure:

The <figure> element identifies self-contained content. The <figure> element is often nested within an  element to add a caption to the content identified by the  tags.

Syntax:

<figure> </figure>
figure HTML example

<figure>
            <img src="https://source.unsplash.com/random" alt="Unplash Image" />
          <figcaption>
               <p>@Copyright By Unplash Image </p>
          </figcaption>
</figure>
Figure Example

Progress:

The Progress Element Show Progress bar On Your Website. The Progress Element can be used with the conjunction of JavaScript.

Syntax:

 <progress></progress>
 <progress value="25" max="100"></progress>
 <progress value="50" max="100"></progress>
 <progress value="75" max="100"></progress>
Progress Elements Example In HTML.

Video:

The video element allows you to easily stream video and Play On Your website.

Syntax:

<video> </videos>

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

Contact me