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