HomeBlogGhost CMSLinuxManga and Anime
New Feature In HTML 5 With Examples?

New Feature In HTML 5 With Examples?

Published By
3 min read
Rajdeep Singh
html

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

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

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

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

Syntax:

<nav> </nav>
<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> 
    <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>

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

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>

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> paragraph</p>
</section>

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

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>
<canvas id="myCanvas"></canvas>

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>
        <img src="https://source.unsplash.com/random" alt="unsplash image" />
        
        <figcaption>
           <p>@Copyright By unsplash image </p>
        </figcaption>
 
</figure>

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>

Video

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

Syntax:

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