HTML <aside> Aside Tag
Tags: learnhtml
Published: 2021-02-13 06:59:22

---
title: HTML <aside> Aside Tag
published: true
date: 2021-02-10 11:53:06 UTC
tags: LearnHTML
canonical_url: https://sharepointanchor.com/learn-html/html-aside-tag/
---

In [HTML](https://sharepointanchor.com/category/learn-html/ "HTML"), the **<aside> Aside tag** represents a portion of a document with additional information related to the content. It is one of the **new sectioning element in [HTML](https://sharepointanchor.com/category/learn-html/ "HTML") 5**.

The aside content should be indirectly related to the surrounding content. This tag can be used for **glossary definitions** , **author biography** , **author profile** , etc.

Note: The **<aside> element is not a sidebar**. The **sidebar** is just a **visual element** , and the <aside> tag doesn’t systematically look like a sidebar. So don’t confuse with aside tag with the sidebar.

Content in aside is a **stand-alone** , **non-essential** part of the web page, and if you delete it, the **main content will not be affected**. For Example, the following information is written inside the aside element such as **endnotes** , **comments** , **lists of terms** , **a collection of links** , etc.

<svg aria-hidden="true" focusable="false" data-icon="clock" width="20" height="20" fill="none" stroke="currentColor" style="display:inline-block;vertical-align:-0.1em" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>Estimated reading time: 4 minutes

## Syntax:

The aside tag always comes in pairs. The content is written between the **opening <aside> tag** and **closing </aside>**.

## Sample of the HTML <aside> tag:

```

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industrys</p>
    <aside>
      <h4>Lorem ipsum</h4>
      <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
    </aside>
  </body>
</html>

```

## Result:

![](https://eadn-wc04-3430828.nxedge.io/cdn/wp-content/uploads/2021/02/Result-7.png)<figcaption>Result</figcaption>

## <aside> Tag VS <div> Tag:

Both of these tags have the same behavior. The **<div>** tag **creates a section** in the web page, but the **<aside>** element contains only the **content related to the main web page**.

## Styling Methods for <aside> Tag:

The **<[aside](https://www.w3.org/html/wiki/Elements/aside)>** tag supports the **global attributes** and the **event attributes**. You can use the following properties to style an [HTML](https://sharepointanchor.com/category/learn-html/ "HTML") aside tag.

### Properties to style the visual weight/emphasis/size of the text in <aside> tag:

- **[CSS](https://sharepointanchor.com/category/learn-css/ "CSS") font-style** – This CSS property helps to set the font style of the text such as normal, italic, oblique, initial, inherit.
- **CSS font-family** – This CSS property specifies a prioritized list of one or more font family names or generic family names for the selected element.
- **CSS font-size** – This CSS property will help to set the size of the font.
- **CSS font-weight** – This CSS property used to define whether the font should be bold or thick.
- **CSS text-transform** – This CSS property will control the text case and capitalization.
- **CSS test-decoration** – This CSS property specifies the decoration added to text such as **text-decoration-line** , **text-decoration-color** , **text-decoration- style**.

### Styles to coloring the text in <aside> Tag:

- **CSS color** – This CSS property will specify the color of the text content and decorations.
- **CSS background-color** – This CSS property helps to set the background color of an element. 

### Text layout styles for <aside> Tag:

- **CSS text-indent** – This CSS property is used to specify the indentation of the first line in a text block.
- **CSS text-overflow ** – This CSS property helps to describe how overflowed content that is not displayed should be signaled to the user.
- **CSS white-space** – This CSS property describes how white-space inside an element is handled.
- **CSS word-break**  – This CSS property decides where the lines should be broken.

### Other Properties for <aside> Tag:

- **CSS text-shadow**  – This CSS property helps to add the shadow to text.
- **CSS text-align-last**  – This CSS property will set the alignment of the last line of the text.
- **CSS line-height** – This CSS property defines the height of a line.
- **CSS letter-spacing** – This CSS property helps to decide the spaces between letters/characters in a text.
- **CSS word-spacing** – This CSS property specifies the spacing between every word.

## Browser Support:

![](https://eadn-wc04-3430828.nxedge.io/cdn/wp-content/uploads/2021/02/Browser-Support-3.png)<figcaption>Browser Support</figcaption>

### Related Articles:

- **[HTML <abbr> Abbreviation Tag](https://sharepointanchor.com/learn-html/html-abbreviation-tag/)**
- **[HTML <address> Address Tag](https://sharepointanchor.com/learn-html/html-address-tag/)**
- **[HTML <acronym> Acronym Tag](https://sharepointanchor.com/learn-html/html-acronym-tag/)**
- **[HTML <a> Anchor Tag](https://sharepointanchor.com/learn-html/html-anchor-tag/)**

The post [HTML <code><aside></code> Aside Tag](https://sharepointanchor.com/learn-html/html-aside-tag/) appeared first on [Share Point Anchor](https://sharepointanchor.com).