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