HTML is a standard markup language. It helps in creating web pages and web applications. It helps web developers to organize, format, and display a web page’s content. HTML5, its latest version, offers several modifications and new features over the previous version.
What is HTML5?
As the name suggests, HTML5 is the 5th version of HTML (Hypertext Markup Language). It is an upgraded version of HTML4.01. HTML5 comes with a variety of new and advanced features that make the life of developers more flexible.
The following are the top features of HTML5 that make it a popular language for website development.:
Nav Tag
The <nav> tag helps in defining a set of navigation links. It helps create a section of a website that contains navigation links (within the current document or to another document). A few examples of navigation links are the table of contents and indexes.
<!DOCTYPE html>
<html>
<body>
<h1>Example of HTML nav Tag</h1>
<h2>Online Programming Courses</h2>
<nav>
<a href=”#”>HTML</a> |
<a href=”#”>CSS</a> |
<a href=”#”>JavaScript</a> |
<ahref=”#”>Python</a>
</nav>
</body>
</html>
Audio & Video Tags
With Audio and Video tags, developers can embed videos or audio into their websites. For styling the video tag, developers can use CSS and CSS3.
<!DOCTYPE html>
<html>
<body>
<video width=”400px” height=”300px” controls>
<source src=” movie.mp4 ” type=”video/mp4″>
</video>
</body>
</html>
Header
The <header> element in HTML5 contains introductory content. It can include a set of introductory or navigational support on a website. Typically, the header element contains heading elements, logo or icons, a search form, author’s information, etc.
<!DOCTYPE html>
<html>
<body>
<h1>Noorahmad Noor</h1>
<h3> Find courses that are the best for your career </h3>
<header>
<a href= “https://www.noorahmad.net/product/html-training-course/”>
HTML</a> |
<a href= “https://www.noorahmad.net/product/css-training-course/”>
CSS</a> |
<a href= “https://www.noorahmad.net/product/javascript-training-course/”>
JavaScript</a> |
<a href= “https://www.noorahmad.net/blog-grid/”>
Blog</a> |
</header>
</body>
</html>
Footer
The <footer> tag defines the footer of a document or a section. Typically, the footer contains information related to the author, copyright, contact information, sitemap, related documents, back to top links, etc. There can be more than one footer element in one document.
<!DOCTYPE html>
<html>
<body>
<footer>
<p>Posted by: Noorahmad Noor</p>
<p>Contact information: <a href=”mailto:info@noorahmad.net”>
info@noorahmad.net</a>.</p>
</footer>
</body>
</html>
Figure and Figure Caption
These elements help users to insert an image with its caption. The figure caption tag is used to add a description for the image.
<!DOCTYPE html>
<html>
<body>
<figure>
<img src=”MyPicture.Jpg”
alt=”My PIcture”>
<figcaption>Start of the Day</figcaption>
</figure>
</body>
</html>
Canvas Tag
The canvas tag in HTML5 helps users draw graphics or images on the fly using JavaScript. We can use it for drawing paths, boxes, circles, adding images, etc. The canvas tag has two attributes: width and height for setting the width and height of the canvas.
<!DOCTYPE html>
<html>
<body>
<canvas id=”MyCanvas” width=”400″ height=”100″ style=”border:2px solid;”>
</canvas>
</body>
</html>
Progress Tag
The progress tag helps users check the progress of a task during the execution. Users will need to define the dynamically changing values of the progress bar with the scripts (JavaScript).
<!DOCTYPE html>
<html>
<body>
<span>Application Loading:</span>
<progress value=”55″ max=”100″></progress>
</body>
</html>
Section Tag
The <section> element defines specific sections and subsections in the document.
<!DOCTYPE html>
<html>
<body>
<section>
<h1>Section 1</h1>
<p>Section 1 content</p>
</section>
<section>
<h1>Section 2</h1>
<p>Section 2 content</p>
</section>
</body>
</html>
