After describing which are the three languages of the Front-End and what are the composition of the html language, in this tutorial we will enter into details on what are the foundations of the markup language: the elements.

In an HTML page all the elements are characterized by tag (literally "labels").

These are markers that highlight the role that we want to assign to content.

For example if we indicate a title with

for us the words in that title are the main theme of the page, beyond the way they are displayed.

a html tag

A tag is a keyword of the language enclosed in angle brackets (<>). Examples of tags are

,

and

, that we have already met in the previous lesson.

HTML tags are not "case sensitive", which means that write the

oris exactly the same thing. In any case, the custom is to write the tags in lowercase.

Many elements in HTML are used for describing page sections, areas, or content. For exampledescribes the content of the entire page,

contains a title and

denotes a paragraph in the text.

Therefore an HTML element is almost always a container and its content is delimited by the opening tag (eg.

) and the closing tag (eg. ).

The HTML pages are then formed by composition of containers (nested) one inside the other.

The structure that emerges is a tree, where the branches are all tags containers and the ends are composed of texts, images, or other elements such as input boxes. As you will see in the following HTML tutorials all these elements are not final containers and do not require any closing tag.

The tree that is created in a typical HTML page remembers the way the document is displayed in the browser's memory, that is the DOM (Document Object Model), of which the

is the root node.

Often to emphasize the nesting of an element in another is good practice to indent the code, move the content from the beginning of the line leaving spaces (or tabs). In practice opening and closing the tags are located at the same level, while the content is moved to the right of a tab, this makes the text easy to read which is essential during the process of debugging

the attributes of the HTML elements

An element can have one or more attributes, which serve to better specify the function or the type of the element, to store data or to enrich the content of meaning.

A tag with attributes is written with this tipical sintax: 



Essentially attributes are key-value pairs separated by the character = (equal);

the values are typically enclosed in " " double quotes but you can also use single quotes ' '.

inline and block elements,

HTML tags may represent objects (such as images) or serve to divide the page into areas (like the 'div' or 'section'). There are several types of tags and knowing them becomes critical to use the correct tag in the right place and to apply later on CSS rules.

The main types of display in which the elements are divided are:

Block: Elements that make up a block around him. they are not part of a text and as a result they send to a new line, such as paragraphs, divs or section. They are generally container elements in the DOM tree

Inline: These are elements that do not start a new paragraph and can be integrated into the text, such as links, images, or the span.