HTML5 tags: What are they and what are their functions?

HTML5 tags are just one feature of web development, but when you’re starting out, it’s one of the most important.

We have created this post that allows you to know what an HTML tag is, as well as its functions. In addition to offering you a list of the most common ones, so that you can access them. Grab your strength, paper and pen and let’s go for it!

HTML5 tags: What are they and what are their functions? — html

What is an HTML5 tag?

First of all, let’s see what an HTML5 tag is.

HTML5 tags work as part of a code that fulfils a simple function. This function is based on helping browsers understand the content contained in each of the tags used.

In addition, it is important to highlight that each label has different attributes that determine how each one works. They all begin with the symbol “<” and end with the opposite symbol, “>”. The name corresponding to the label must be included between these symbols so that the browser can assimilate it properly.

It is also important to know that HTML5 tags are made up of an opening and a closing tags. However, there are tags that do not have the closing version like those used to upload images. Closing tags use the “/” symbol before the tag name.

All HTML5 tags and their functions

With a large number of HTML5 tags available today, it is possible to encompass them in a simpler way. So we have created a list of all the most common HTML5 tags and the function they have. So you can use it as needed.

Initial elements

Among the initial elements, we can find HTML5 tags such as:

<!DOCTYPE html>, which allows browsers to understand that a document is based on HTML5.
<html></html>, which indicates the opening and closing tag of an HTML document. If you want to add any type of elements, they must be within these tags.

Elements for metadata

In the case of metadata elements, it is possible to use the following tags:

<head> </head>, which indicates the metadata regarding a document such as links. This kind of information provided is only visible to browsers.
<title> </title>, the tag that defines the title of a website.
<link>, used to affiliate resources that are external to said document.
<meta>, used to be able to place metadata such as the author of the website or even its description. It is always used for data that does not have a specific label.
<style></style>, works as a means to enter CSS code into the document.

Section Elements

Dividing a page into sections is more than necessary to make them visually attractive and have a structure that browsers understand. That is why we mention the most common versions of labels to create sections within a website:

<body> </body> . Includes all the content that you want to display within the web page.
<nav> </nav> . Defines the content that will be located within the navigation section of the page.
<main> </main> . It allows you to choose the main content that a document has, being unique.
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> . They allow you to create a structure for the content of a web page. They are essential to comply with the correct organization of said content.
<section> </section> . Indicates the section of an HTML document.
<article> </article> . Includes the content of a page that is independent.
<aside> </aside> . All the extra content of a web page is included in these tags, as it has little relevance, but coincides with the web.
<footer> </footer> . Includes the content that will go in the footer.
<header> </header> . Defines the top or header of a website. Mostly there is the logo and name of the website, as well as the menu.

Semantic or structural elements

<a> </a>. It helps in creating hyperlinks within the HTML document.
<strong></strong> . With this tag you can define the importance of one or more words, helping to maintain better SEO. Since it defines them as more important.
<small> </small> . When you need to leave a comment within the content, then this type of tag is used. Although it does not influence a user’s understanding of the document, it provides relevant information.
<cite> </cite> . This tag defines the title of a work.
<sub> </sub> and <sup> </sup> . If you want to define a subscript, use <sub>. While superscripts are defined with the <sup> tag.
<mark> </mark> . If you want to highlight text within the website, this is the functional tag.
<span> </span>. It is used in combination with attributes such as “class” or “id”, allowing a series of characteristics to be defined in them.
<br>. Any line break within a web page requires this tag.

Elements for creating tables

If you want to better organize the content of a web page, tables are always a good option. So we have collected the most relevant HTML5 tags for creating tables on a web page.

<table> </table> . If you want to create a table for your web page, then you need to use these tags and enclose the rest of the necessary tags inside them.
<caption> </caption> . Indicate the title of the table on your website.
<colgroup> </colgroup> . If you want to group a series of columns, this label is used.
<tbody> </tbody> . HTML5 tags to indicate the data that corresponds to the table.
<thead> </thead> . Defines the rows of a table, is responsible for categorizing the columns that make it up.
<tfoot> </tfoot> . Defines which row blocks are in charge of describing all the labels that make up the columns.
<tr> </tr> . Defines the entire row of cells that a table has.
<td> </td> . Label that defines a specific cell in a table.
<th> </th> . It has the function of defining what will be the header that a specific cell has.

Form elements

Web pages seek to interact with traffic constantly, so they need HTML5 tags to formulate forms. In this case, we present the most common options to implement them on a website.

<form> </form> This is the opening and closing tag that includes a form for a website. All tags that define said form must be enclosed between these two tags.
<fieldset> </fieldset> . This option is used to define a set of elements that a web form has. It is best to identify the tags that may be contained within it.
<legend> </legend> . Tag that is responsible for defining the title corresponding to the <fieldset> tag.
<label> </label> . Label that defines the title of a control that makes up the form.
<input> Thanks to this tag, users have an introduction to the form and it turns out to be one of the most essential.
<button> </button> . Defines any button on a web form.
<select> </select> . Label that allows selection between a series of options found in said form.
<option> </option> . This tag is linked to the previous one and allows you to define the options that will be within the <select> field.
<textarea> </textarea> . In this case, it defines a field for the user to enter text with a maximum amount of content specified by the developer.

Multimedia elements

Given the growing need to have a greater amount of multimedia content within web pages, these HTML5 tags will help you. Each of them allows you to implement a type of multimedia element to a website, functioning in a different way.

<audio> . It contains all the music and sound of a web page.
<embed> . Encloses external applications that can mostly include a player.
<source> . It is responsible for defining the source for audio and video tags.
<track> . Includes the tracks for the audio and video tags respectively.
<video> . This tag includes a video or movie.

HTML5 tags are quite broad and include functions that will allow the browser to understand the content of a website.

In addition, they define their behaviour and help you create an efficient website. Now that you know all these options, you can use them and modify your website so that it has the design you need.