New Feature In HTML 5 With Examples?

HTML 5 Come With More Interesting Feature.HTML 5 New Feature Help to Increase Search Indexing On Search Engines Like Google and Yahoo.

Rajdeep Singh
Rajdeep Singh

3 min read

Table of contents

HTML 5 Come With Many New Features. Use The HTML 5 New Feature You Build Great Experience Website For User, Increase Monthly users, and 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

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

Syntax:

<header> </header>

copy success
<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>

copy success

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

Syntax:

<nav> </nav>

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

copy success

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>

copy success
<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>

copy success

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>

copy success
<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>

copy success

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>

copy success
<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>

copy success

Section

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

section {
  display: block;
}

copy success

Syntax:

<section> </section>

copy success
<section>
       <h2> Section </h2>
       <p> paragraph</p>
</section>

copy success

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>

copy success
<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>

copy success

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>

copy success
<canvas id="myCanvas"></canvas>

copy success

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>

copy success
<figure>
        <img src="https://source.unsplash.com/random" alt="unsplash image" />
        
        <figcaption>
           <p>@Copyright By unsplash image </p>
        </figcaption>

</figure>

copy success

Progress:

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

Syntax:

<progress></progress>

copy success
<progress value="25" max="100"></progress>
<progress value="50" max="100"></progress>
<progress value="75" max="100"></progress>

copy success

Video

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

Syntax:

<video> </videos>

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

copy success