The community is working on translating this tutorial into Portuguese, but it seems that no one has started the translation process for this article yet. If you can help us, then please click "More info".
If you are fluent in Portuguese, then please help us - just point to any untranslated element inside the article and click the translation button to get started. Or have a look at the current translation status for the Portuguese language.
If you see a translation that you think looks wrong, then please consult the original article to make sure and then use the vote button to let us know about it.
Please help us by translating the following metadata for the article/chapter, if they are not already translated.
If you are not satisfied with the translation of a specific metadata item, you may vote it down - when it reaches a certain negative threshold, it will be removed. Please only submit an altered translation of a metadata item if you have good reasons to do so!
The aside tag
The aside element is new to HTML5 and it can be used in two different contexts. Basically, the context of the <aside> element is based on whether or not it inside or outside the article element.
In magazines you often see info-boxes pulled away from the actual content of the article, highlighting something with relevance to the article such as pull-quotes and when this is the scope of your aside element then it has to be placed inside the article element, because it has a relationship to the content of the article.
Content related to the current article, blogpost, etc.
Here is an example of the <aside> element being used inside the <article> element.
<article> <header> <h1>All About Flour<h1> <p class="byline">by Jane Doe</p> </header> <section> <h2>The Two Types of Wheat</h2> <p>There … to rise.</p> <p>Where … with less protein.</p> </section> <aside> If you use organic flour you very often get better bread </aside> </article>
Content related to your page as a whole
The aside element can also be used to mark up content which is relevant to your page as a whole – containing blogrolls, additional navigation, even adds – and when this is the scope of your <aside> element it has to be placed outside of the article section. Here is an example:
<aside> <h3>Foodblogs I like</h3> <a href="http://www.bakerella.com">Bakerella</a> <a href="http://sourdough.com/"> Sourdough.com</a> <a href="http://www.bakingobsession.com">BakingObsession</a> </aside> <article> <header> <h1>All About Flour<h1> <p class="byline">by Jane Doe</p> </header> <section> <h2>The Two Types of Wheat</h2> <p>There … to rise.</p> <p>Where … with less protein.</p> </section> </article>
Whether you use the aside element for the former or the latter use, you need to remember that the aside element is for secondary content regardless of the visual design of this content. This also implies that the aside element should be used for e.g. pullquotes as they are a part of your content - you should not use the blockquote element.
What you have learned
- The aside element can be used within or outside the article element
- When used inside the content of the aside element must be relevant to the article content
- If you can remove the content of the <aside> element and the article content, to which it is relevant, becomes incomplete then you should not be using the <aside> element
- When used outside the article element the content of the aside element must be relevant o your entire web page
- The aside element is a block level element
- You can use both block level elements (such as headings, <h1> - <h6>) and inline elements (such as emphasize, <em>) inside of the <aside> element