What does the <aside> tag do in HTML?

Asked

Viewed 5,452 times

-1

I would like to know the function of the tag <aside> and find out if there is any similarity to the tag <nav>, because in the code I’m making I changed aside for nav and there were no changes.

2 answers

3

aside is a semantic tag introduced in HTML5. That is, it aims to better describe the meaning of its content, both for browsers, and for programmers.

In the case of tag aside (reference):

The HTML element represents a section of a page that consists of content that is tangentially related to the content of its surroundings, which could be considered separate from the content. These sections are often represented as sidebars.

The image below illustrates where the tag aside should be used in HTML documents:

Uso da tag aside

So if the content that is inside your tag aside is not lateralized on your page, most likely you should not use it.

Already the tag nav is used to indicate a navigation element. It usually encompasses a set of links. In the image above the tag nav is used below the header of the page, place widely used to house navigation menus.

When you trade aside for nav, you are no longer indicating to the browser that the content in question is a side content and go on to indicate that such content is a browsing content. That is, change is semantics (meaning) and not visual.

0

What is the element ?

The HTML element represents a section of a page that consists of content that is tangentially related to the content of its surroundings, which could be considered separate from the content.

These sections are often represented as sidebars. They often contain side explanations, such as the definition of a glossary; loosely related content, such as warnings; the author’s biography; or, in web applications, profile information or related blog links.

Example of use

<p>My family and I visited The Epcot center this summer.</p>

<aside>
  <h4>Epcot Center</h4>
  <p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>

Compatibility

inserir a descrição da imagem aqui

link from where I took images and reference

Browser other questions tagged

You are not signed in. Login or sign up in order to post.