HTML5 Tags
Software Developer
Introduction to HTML5 Tags:-
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.
Tags of HTML5:-
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.
- Semantic Elements: Few examples for these elements are; <main>, <summary>, <time> etc.
- Non Semantic Elements: Examples here are; <div>, <span> etc.
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.
- Structural Tags:-
Below are the types of structural tags with examples:
- Article: This is a tag that is mostly used similar to a head tag. Majorly used in forms, blogs, news story and all as examples.
Code:
<html>
<article> <h3>The first one </h3></article>
<body>
<h2>Welcome Back</h22>
</body>
</html>
Output:
- Aside: Something similar to our normal tags, which would relate the content to the surrounding contents, like a sidebar in the article. And this tag would only make sense when using an IE version above 8.
- Details: This tag is used to provide some additional data to the user. This can be an interactive platform that can hide or show the details. We can get to see the usage of this tab under the summary tag.
- Header: This tag is related to the header part and contains title information. It has to have both the start and end tags.
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:
- hgroup: This tag is used in describing a group of headers. Let’s look at the example.
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:
- Footer: This tag is that, which is to be placed at the end of the page. It deals with something like copyright, history-related information or data. Let us see a small example below.
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:
- nav: This tag is for providing a section of all the links for navigation.
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:
- Section: As the name already denotes, this tag defines the part of the code like the body, header, footer, etc. Here, both the start and end tags are necessary. Let us see a small example below:
Code:
<html>
<section>
<h1> Welcome </h1>
<h4> See you soon </h4>
<p>Thank You.</p>
</section>
</html>
Output:
- Summary: This tag is used in parallel with the details tab. Under the details tag, we have this summary tag to summarize the concepts. Example below:
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.
Software40
DevOps47
Frontend Development24
Backend Development20
Server Administration17
Linux Administration26
Data Center24
Sentry24
Terraform23
Ansible83
Docker70
Penetration Testing16
Kubernetes21
NGINX20
JenkinsX17
Allen ScottAllen Scott
Jhone Buttler
Subscribe to get latest updates