Mastering HTML5 Aside Tag

Introduction

In this step-by-step lab, you will learn how to use HTML's <aside> tag. This tag is used to show content that's related to the main content but is not essential to it.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html(("`HTML`")) -.-> html/LayoutandSectioningGroup(["`Layout and Sectioning`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/TextContentandFormattingGroup -.-> html/text_head("`Text and Headings`") html/TextContentandFormattingGroup -.-> html/para_br("`Paragraphs and Line Breaks`") html/TextContentandFormattingGroup -.-> html/lists_desc("`Lists and Descriptions`") html/LayoutandSectioningGroup -.-> html/layout("`Layout Elements`") subgraph Lab Skills html/basic_elems -.-> lab-70703{{"`HTML Content Aside`"}} html/head_elems -.-> lab-70703{{"`HTML Content Aside`"}} html/text_head -.-> lab-70703{{"`HTML Content Aside`"}} html/para_br -.-> lab-70703{{"`HTML Content Aside`"}} html/lists_desc -.-> lab-70703{{"`HTML Content Aside`"}} html/layout -.-> lab-70703{{"`HTML Content Aside`"}} end

Setting up the HTML page

Open your code editor and create a new file called index.html, then add the following basic HTML structure:

<!doctype html>
<html>
  <head>
    <title>HTML Aside Tag Tutorial</title>
  </head>
  <body></body>
</html>

Creating the main content

Inside the <body> tag, let's create some main content. Add the following code:

<h1>Welcome to my blog!</h1>
<p>
  In this article, we'll explore the benefits of using HTML5. HTML5 is a markup
  language used for structuring and presenting content on the World Wide Web.
</p>

Adding the aside content

Now let's add an <aside> tag which will contain some additional information about the main content. Add this code below the paragraph in step 2:

<aside>
  <h2>About this article</h2>
  <p>
    This article was written by John Doe, a web developer who has been working
    in the industry for more than 8 years. He is passionate about web
    development and loves to share his knowledge with others.
  </p>
</aside>

By adding the above code, we have created an <aside> tag that contains some information about the article. This information is related to the main content, but it's not essential to it.

Styling the `<aside>` tag

Now add the following CSS to give some style to the <aside> tag:

<style>
  aside {
    width: 300px;
    margin-left: 30px;
    padding: 10px;
    background-color: #f2f2f2;
    border: 1px solid #ccc;
  }
</style>

By adding this CSS, we have given some style to the <aside> tag. The width is set to 300px, margin is set to 30px, and it has a light gray background with a border.

Adding additional content to the article

Let's add some more content to the article so that we can visualize better how <aside> tags are used. Add the following code below the <aside> tag:

<p>
  HTML5 is an important update to the HTML language. It offers new features and
  functionality, making it easier for developers to create web pages and
  applications. Some of the new features in HTML5 include:
</p>
<ul>
  <li>New semantic tags such as header, footer, article, and section</li>
  <li>Improved support for multimedia with video and audio tags</li>
  <li>Better accessibility with the nav and main tags</li>
</ul>

By adding the above code, we have added some additional content to the main article. It contains an unordered list with some information about HTML5.

Summary

In this step-by-step lab, we learned how to use the HTML <aside> tag to add additional content related to the main content of a webpage. We also learned how to add some style to the tag using CSS. Using the <aside> tag helps search engines and web browsers understand which content is essential and which is not essential.

HTML Content Aside