|
|
The The |
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:
| What is HTML Semantic | HTML Semantic |
| What is Semantic Elements in HTML | HTML Semantic |
| How to create HTML <section> Element | HTML Semantic |
| How to create HTML <article> Element | HTML Semantic |
| What is 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 |
| Example of HTML <aside> Element | HTML Semantic |
| Example 2 of HTML <aside> Element | HTML Semantic |
Read Full: | HTML Semantic |
Category: | Web Tutorial |
Sub Category: | HTML Semantic |
Uploaded: | 1 year ago |
Uploaded by: | Admin |
Views: | 49 |
Reffered: https://www.w3schools.com/html/html5_semantic_elements.asp