29
loading...
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?
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
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.
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>
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 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;
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.
ex:
Hello World
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