This post will provide a guide on the “HTML <aside> tag”.
How to Add aside Information in HTML?
The HTML “<aside>” tag specifies components of the document which contain information that is indirectly related to the document’s main content. It may contain a list of topics that are related to the other document’s main content.
Example
For the purpose of using the aside tag in the HTML file, add a div element with the class name “main”. Inside this div:
- Add <h1> tag with style “text-align” property having the “center” value. This tag will display the heading of the web page.
- Then, specify <p> tag for a paragraph.
- The <aside> tag is then added with some content.
- Lastly, add the <p> tags to include the paragraphs.
Below is the HTML code to represent the above description:
<h1 style="text-align: center;">Knowledge is Power</h1>
<p>
Education assists a person in many ways. It helps a person to take better decisions with their knowledge. Facts and information that you can recall or apply are referred to as knowledge.
</p>
<aside>
<h3>Knowledge vs Education</h3>
Knowledge is what you know, and education is how you learn it.
</aside>
<p>
Knowledge is like a glue that
holds information and learning together. We understand a topic better when we have prior knowledge about it. It is very important in the lives of students, especially at school. They will struggle to understand the text if they lack relevant knowledge.
</p>
<p>
Knowledge does more than just help students improve their critical thinking skills: it also makes learning easier. Knowledge is not only cumulative, but it also grows at an exponential rate. Those who have a strong foundation in factual knowledge find it easier to learn more -- the rich get richer.
</p>
</div>
Now, move on to CSS, where several properties are applied to HTML elements.
Style main div
width: 90%;
padding: 1px 30px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 15px;
}
The properties which are applied to the main div in the above code block are explained below:
- “width” property sets the width of the main div to 90%.
- “padding” property is utilized to add space of 1px at the top and bottom and 30px on the left and right of the content.
- “font-family” specifies the font for the div.
- “font-size” sets the size of the font to 15px.
Style aside Element
width: 30%;
padding-left: 15px;
margin-left: 15px;
background-color: lightgray;
border-left: 5px solid gray;
float: right;
font-style: italic;
}
Here:
- “padding-left” property with a value of 15px adds a space of 15px to the left of the content.
- “margin-left” property sets 15px space to the left side of the aside element.
- “background-color” property applies specific color to the background of the aside element.
- “border-left” property adjusts the left border having 5px width, solid line type, and element color.
- “float” property sets the element’s position to the right.
- “font-style” property with the value italic sets the style of the font as italic.
By applying the code mentioned above block, the aside information will display like this:
So, we have successfully learned the HTML <aside> tag with the help of an example.
Conclusion
In HTML, the “<aside>” element is utilized to provide information that is indirectly related to the article or document. Then we apply CSS properties according to our requirements. This post has described the HTML <aside> element with the help of an example.
