Software Developer
We all recognize the same old abbreviation of HTML, that's a hypertext markup language. So, html5 is the cutting-edge and new version of HTML. Once a product is evolved; manifestly, there would be many versions of HTML with many new developments along with the manner. So, html5 has new attributes and behaviors. This html5 tag isn't always a programming language anymore, however, it's miles a mark-up language. Now, what's a mark-up language? Defining factors attributes using tags in a file is a mark-up language. Now, let’s get into detail approximately how we will define tags and create an internet page.
A tag is a specification for displaying content. Generally, there would be a start and end tag. Also, few tags do not require an end tag, like <be>, which means breaking of the line, which displays the data next to that tag from the next line. Here, let’s see some of the new elements in HTML5.
In HTML5, we can generally divide the tags into two categories.
The tags discussed below are those which are newly introduced exclusively in HTML5 versions. They are different types of tags that all can be categorized.
Below are the types of structural tags with examples:
Code:
<html>
<article> <h3>The first one </h3></article>
<body>
<h2>Welcome Back</h22>
</body>
</html>
Output:
Code:
<html>
<header>
<h1>Happy Hours</h1>
<nav>
<p><a href="#">Morning</a> | <a href="#">Afternoon</a> | <a href="#">Evening</a></p>
</nav>
</header>
</html>
Output:
Code:
<html>
<body>
<hgroup>
<h1>Let’s check size of this h1 </h1>
<h2> Let’s check size of this h2 </h2>
<h3> Let’s check size of this h3</h3>
<h4> Let’s check size of this h4</h4>
<h5> Let’s check size of this h5</h5>
</hgroup>
</body>
</html>
Output:
Code:
<html>
<body>
<footer>
<nav>
<p><a href="#">Copy Rights</a> | <a href="#">Come back soon</a></p>
</nav>
<p>Please subsribe for more learning content</p>
</footer>
</body>
</html>
Output:
Code:
<html>
<body>
<nav>
<ul>
<li><a href="https://www.educba.com/">EDUCBA Home</a></li>
<li><a href="https://www.educba.com/about-us/">About EDUCBA</a></li>
<li><a href="https://www.educba.com/courses/">Courses in EDUCBA</a></li>
</ul>
</nav>
</body>
</html>
Output:
Code:
<html>
<section>
<h1> Welcome </h1>
<h4> See you soon </h4>
<p>Thank You.</p>
</section>
</html>
Output:
Code:
<html>
<body>
<details>
<summary>How is this Summary tag defined?</summary>
<p>By clicking the arrow beside the Summary question I got displayed</p>
</details>
<p> The data after the display tag is displayed like this.</p>
</body>
</html>
Output:
Now expanding the summary tag data, we get the below.