How to create HTML <aside> Element

The <aside> element defines some content aside from the content it is placed in (like a sidebar).

The <aside> content should be indirectly related to the surrounding content.

Example of HTML <aside> Element

Display some content aside from the content it is placed in:

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>
<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>
<aside> <h4>Epcot Center</h4> <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>
</body>
</html>

Output should be:

Example 2 of HTML <aside> Element

Use CSS to style the <aside> element:

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
<style>
aside { width: 30%; padding-left: 15px; margin-left: 15px; float: right; font-style: italic; background-color: lightgray;
}
</style>
</head>
<body>
<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>
<aside>
<p>The Epcot center is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>
<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>
<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>
</body>
</html>

Output should be:

HTML Semantic	HTML Semantic
Semantic Elements in HTML	HTML Semantic
How to create HTML <section> Element	HTML Semantic
How to create HTML <article> Element	HTML Semantic
Nesting <article> in <section> or Vice Versa	HTML Semantic
How to create HTML <header> Element	HTML Semantic
How to create HTML <footer> Element	HTML Semantic
How to create HTML <nav> Element	HTML Semantic
How to create HTML <aside> Element	HTML Semantic
How to create HTML <figure> and <figcaption> Elements	HTML Semantic
Why Semantic Elements?	HTML Semantic

Single Articles

Example of HTML <aside> Element	HTML Semantic
Example 2 of HTML <aside> Element	HTML Semantic

Category :	Web Tutorial
Sub Category :	HTML Semantic
Uploaded by :	Admin

Read Article

https://horje.com/learn/1434/reference