DEV Community


Posted on


HTML Tags: the main tags to create your HTML page

In this article, we'll look at some of the most important tags that HTML uses in its structure. For a start it is important to understand that HTML is a hypertext markup language, and its main function is to mark and define the structure of a web page. Learn more about HTML in this article. For this tutorial, we will use HTML5, the latest version of HTML, as the basis.

Therefore, in this article you will find:

What are HTML tags?
Basic structure of an HTML document
HTML Comment Tags
Structural HTML Tags
A content HTML tags
Style and Script Tags
Create your page in HTML
O que são tags HTML?

What are HTML tags?

Tags are used to inform the browser of the structure of the website. In other words: when writing code in HTML, the tags will be interpreted by the browser, thus producing the structure and visual content of the page.

The main characteristic of the tags is that they are always inside the chevron signs ("greater than" and "less than" sign), ie: < >.

HTML tags are divided into two types: those that need closing and those that don't. Tags that need closing have the syntax , whereas those that do not need closing have a structure.

Furthermore, the same tag can receive one or more attributes, which will have a value that modifies its structure or functionality.


Attributes are used to customize tags, modifying their structure or functionality. Likewise, attributes are used to assign a class or id to an element.

Most tags have their own attributes. However, there are some generic attributes that can be used in most HTML tags, let's study them:

class=”…“ – Assigns a class to the element (a class can be used for one or more elements);
id=”…“ – Assigns an id to the element (an id must be unique, ie assigned to a single element);
style=”…” – Allows you to include CSS elements (styles) inside the tag;
lang=”…” – Defines the main language of the element;
title=”…” – Defines the title of the element;
alt=”…” – Defines an alternative text and, therefore, is often used in images, it helps in SEO practices;
hidden – Hides the element;
align=”…” – Allows you to define the alignment pattern of this element, such as: right, center, left and justify;
width=”…” – Defines a width for the element;
height=”…” – Defines a height for the element.
These are the main attributes, but there are several others that should be studied and can be used in your code.

Basic structure of an HTML document

An HTML document receives some tags that form its basic structure. In HTML5, the default document receives the following structure:

<!DOCTYPE html>

Page Title

First, let's now understand what each of these tags is for:

<!DOCTYPE html> – The !DOCTYPE tag tells the browser the version of HTML being used in the document. For example: in HTML5, just include !DOCTYPE html, and then the browser will already know that it is a document in the HTML5 version;
– This tag is the basic element of the HTML structure. As such, it will contain all the elements of your document. Every HTML document must start and end with this tag;

– This tag delimits the header of the document. It does not have any visible value, but it is capable of transmitting to the browser several very useful and essential information for a good presentation of your HTML document;
– This tag defines the title of your page, the name that will appear in your tab, window or tab. For this reason, the >title> tag is of great importance for SEO;
– This tag allows inserting metadata to your document, in the case above, the information charset=”UTF-8″, which guarantees the code's compatibility with the Latin American standard characters;
– Finally, the tag that represents the body of the document. In summary, it is in this tag that all visible elements of your website must be inserted.
Now that we know the HTML tags that form the basic structure of a page, we can now study the various tags that will include the document.

HTML Comment Tags

Within a document, we often need to make comments, to facilitate development. With this, the code is more organized and we can leave important notes for possible changes, or just to guide the code. This way, in the comments tag (which is opened with <!– and closed with –> ), all elements included within it will be just comments, that is, they will not be visible in the browser.


Hello World

<!-- here is my paragraph-->
As a final result in the browser, we will have:

Hello World

Note that all content in the comment tags will not appear, being restricted only to those reading your HTML code. Practice using comments in your code, this is a good practice and highly recommended within the development world.

Structural HTML Tags

The tags below are used in HTML5 documents, and have a structural function in your code. Therefore, these tags are of great importance in the semantic issue of your page, knowing how to use them can adapt your code for a better visualization by the browser and the user, in addition to providing an optimization for the SEO processes.

– These tags define a header. Therefore, all content that is inside it is part of a header, which can be

Top comments (0)