The aside element is a perfect example of conventional standards being
adopted as part of a specification.
One of the most common elements of websites is, the sidebar.
They're so ubiquitous in fact, that it can seem rather odd if you go to a site and
it doesn't have one.
However, even though they are one of the most common page elements of all time,
until the HTM 5 specification, there really wasn't a semantic element designed
to represent the type of content that you would normally see inside of a sidebar.
So the aside element is designed to represent related content, so
I want to take a closer look at it as well.
Here I am in the HTML5 specification,
I've navigated to the section on the aside element.
And if I look at the description down here at the bottom it says, that is represents
a section of a page, that consists of content that is tangentially related.
To the content around the aside element and
which could be considered separate from that content.
Such sections are often represented as sidebars in printed typography.
The element could be used for typographical effects like pull quotes or
sidebars, for advertising, for groups of nav elements and for
other content that is considered separate from the main content of the page.
There's a note that also mentions that it's not appropriate to use it just for
parentheticals since those are part of the main flow of the document.
So the aside element is a sectional element.
Meaning if it's used in your content,
there's a new section in the document outline where it is found.
And it also represents it as I note here tangentially related content.
Now where it appears is very, very important all right?
Let's explore that by going back to our structure page,
this time found in zero four underscore zero six, and
take a look at where it might benefit us in our own content.
So if I scroll down I see the sections that we created in our last exercise.
And in one of those sections I have a separate heading,
in this case the H4 heading that's giving me the W3C warning.
Let's take a look at this content in its overall context.
To do this I'm going to preview it in a browser.
That's just going to make it a little bit easier to read.
So if I scroll down I can see that we have a section here on document outlines.
So it talks about how document outlines are a fundamental concept of HTML.
Prior to HTML5 how they were generated entirely through the use of headings,
things that we've kind of already talked about.
I'm also talking about how the new outline algorithm exists in HTML5 and
it uses the sectioning elements that we've been covering over the last few exercises.
So, at the very bottom of this there's a warning.
It says at the time of the authoring of this course,
the W3 has posted this warning in regarding the HTML5 outline algorithm,
and it talks about how there are currently no known implementations of it
in graphical browsers or assistive technology.
So they recommend staying with the document outline
generation through heading ranks for the forseeable future.
This is interesting, that is related content and
I would say that it is tangentially related, meaning it's not absolutely
necessary as part of the overall section, but it is related to the content.
It's also information that is eventually probably going to be replaced.
So if browser agents start implementing the outline algorithm,
if screen readers start implementing it, then this warning will probably go away.
So that is a perfect candidate for the use of the aside element.
So going back into my code, what I'm going to do is just above the h4,
I'm going to go ahead and add an aside, and that aside is going to wrap the h4,
the paragraph, and the block quote that all make up that warning.
Notice that I have to close the aside before the section closes.
Now I want to point out something here that's very important about where you
locate these asides.
The aside should be tangentially related to the content of its parent.
So in this case, the aside is inside this individual section.
So that's indicating that this content is related to the section itself.
If it was tangentially related to all the content in the article.
I would want to place it on its own level equal to the H3s.
If I place it outside of the article, then that content would basically be
tangentially related to the entire article.
So where you place the aside matters, and
you want to think about that as you're structuring your page.
So, it's fantastic that we're able to create all these nuanced,
semantic structures with these new HTML5 elements.
However, you want to make sure that you really understand how
these elements are designed to work.
Many people see the aside element, for example, as just being the quotem, unquote
sidebar element when, in fact, as we've seen here, it's a lot more than that.
Remember that where you place the side element indicates which content it
relates to.
So you need to be very careful when and where you use it.