HTML5 <aside> tag with Example

html5

← PrevNext →

Tools you can use

The HTML5 <aside> tag shows contents separately next to the main content, such as a paragraph, at either the right side or the left side. The contents inside the <aside> tag, usually has contents that are related to the main content. You can actually add a few extra lines to explain briefly, what’s inside the main content.

For example,

HTML-5 (Hypertext Markup Language, version 5), is a language used to design website and applications. It is the fifth version of HTML, which came with many new features and elements for better graphics, page structure etc.

The content at the right side in the above example, is inside the aside element.

The Code
<html>
<head>
    <title>HTML5 aside Tag Example</title>
</head>
<body>
    <h3>The content at the right side is inside the aside element!</h3>
    <article>
        <aside style="float:right;width:30%;border-top:solid 5px #555;background-color:#f6f6f6;margin:0 0 0 10px;padding:0 10px;">
            <p>The new vesion has many new features.</p>
        </aside>
        <p style="width:70%;margin:0;padding:5px;">
            HTML-5 (Hypertext Markup Language, version 5), is a language used to design website and applications. It is the fifth version of HTML, which came with many new features and elements for better graphics, page structure etc.
        </p>
    </article>
</body>
</html>
Try it

Browser Support:
Chrome 39.0 - Yes | Firefox 34.0 - Yes | Internet Explorer 10 - Yes | Safari - Yes

While reading an article on a website recently, I came across a section on the page, which had highlighted details from a portion of the paragraph. At first, I thought it might be a <div> element positioned separately from the main paragraph. However, when I inspected (out of curiosity) I found an element, I honestly was not aware. It was an HTML5 <aside> tag.

I have started using this tag on my blog posts and it really looks nice.I can now add a few extra lines and place it a little aside from the main paragraph.

More than just the looks, it adds meaning to the page. When used inside an <article> tag, the contents inside the <aside> tag is directly related to the article’s content. However, you can use the <aside> element for secondary content (a separate content). For example,

<html>
<head>
    <title>Using HTML5 aside tag for Secondary Content</title>
</head>
<body>
    <h3>The example here uses two aside tags. One on the right and the other is on the left!</h3>
    <article>
        <aside style="float: right; width: 20%;font: 15px Calibri;margin: 0 10px;">
            The example here focuses mainly on how to extract the values from the Range slider (the element)
        </aside>
        <p>
            I am not using any code behind procedure or an API for data submission; the example here focuses mainly on how to extract the values from the Range slider (the element), show the values in a label and update the browser URL with the values, using only JavaScript.
        </p>
    </article>

    <aside style="float: left; width: 50%; font: 20px Calibri;font-weight: bold;">
        Using aside for secondary content!     	
    </aside>
</body>
</html>
Try it

Difference between <aside> and <div> element

There’s not much difference between the two elements, <div> and <aside>. You can use both the elements to show contents. However, both the elemnets have different meanings. The <div> or division shows a section of a web page. Every division can have different contents or details. The <aside> shows contents that are related to the contents of another element or the web page.

Styling aside Element with CSS

You can style the <aside> element using in-line styling (see the above example) or using CSS. For example,

<style>
    aside {
        float: right;
        margin: 10px;
        width: 30%;
        clear: both;
    }
</style>

Now, I don’t have to bother about positioning or styling every <aside> element individually on my web page.

Browser Support:
Chrome 39.0 - Yes | Firefox 34.0 - Yes | Internet Explorer 10 - Yes | Safari - Yes

← PreviousNext →