HTML: <aside> tag
In this series of learning HTML, we will teach you how to use HTML aside tag with proper syntax and lots of examples. Let’s start on the HTML aside tag.
Description of HTML aside tag
The HTML “aside” tag is used to define a section of content that is related to the main content of the page but not directly part of it. The “aside” tag is typically used for content such as sidebars, supplementary information, or related links.
Here is an example of how to use the “aside” tag in HTML:
<article>
<h2>Article Title</h2>
<p>Article content goes here...</p>
<aside>
<h3>Related Links</h3>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</aside>
</article>
In the example above, the “aside” tag is used to contain a list of related links that are associated with the main content of the article. The “aside” section is visually distinguished from the main content of the page, typically by being displayed in a sidebar or in a separate column.
The “aside” tag can also be used in other contexts, such as in a blog post to provide additional information about the author or in a product page to display reviews or ratings. The “aside” tag is a useful tool for organizing and presenting related content in a clear and logical way.
Syntax of HTMLaside tag
The HTML <aside>
tag is used to define content that is not directly related to the main content of a web page, but rather tangentially related or supplementary to it. The syntax of the <aside>
tag is as follows:
<aside>
<!-- content goes here -->
</aside>
Here, the opening tag <aside>
is used to indicate the start of the aside content, and the closing tag </aside>
is used to indicate the end of the aside content. The content that goes within the tags should be related to the main content, but not necessary for its understanding.
Example:
<article>
<h1>Article Title</h1>
<p>Article content goes here.</p>
<aside>
<h2>Related Links</h2>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</aside>
</article>
In this example, the <aside>
element contains a list of related links that are not directly part of the main article content, but rather provide supplementary information for the reader. The aside element is placed within the <article>
element to show its association with the main content.
Global Attributes
The <aside>
tag in HTML is used to define content that is tangentially related to the main content of a web page. It is typically used for content that is not essential to the main content but provides additional information or context.
The <aside>
tag can be used to group together related content such as sidebars, callouts, or infoboxes, which can be positioned alongside the main content of a page. The content inside an <aside>
element can be either text, images, or other HTML elements.
One of the global attributes that can be used with the <aside>
tag is the class
attribute, which allows you to specify one or more CSS classes to apply to the <aside>
element. This can be useful for styling the <aside>
element or for targeting it with JavaScript.
Another global attribute that can be used with the <aside>
tag is the id
attribute, which allows you to give the <aside>
element a unique identifier that can be used to target it with CSS or JavaScript.
Additionally, the <aside>
tag can also use other global attributes such as style
, title
, aria-*
attributes, data-*
attributes, and role
. These attributes can be used to add styling, provide additional information, or define the purpose and role of the <aside>
element.
Event Attributes
In HTML, event attributes are used to attach JavaScript functions to events that occur on HTML elements. The <aside>
tag in HTML supports a number of event attributes, which can be used to trigger JavaScript functions in response to various events that occur on the <aside>
element.
Here are some of the event attributes that can be used with the <aside>
tag:
onclick
: This event attribute is triggered when the user clicks on the<aside>
element. You can use it to attach a JavaScript function that will run when the<aside>
element is clicked.onmouseover
: This event attribute is triggered when the user moves their mouse over the<aside>
element. You can use it to attach a JavaScript function that will run when the user hovers over the<aside>
element.onmouseout
: This event attribute is triggered when the user moves their mouse out of the<aside>
element. You can use it to attach a JavaScript function that will run when the user stops hovering over the<aside>
element.onkeydown
: This event attribute is triggered when the user presses a key while the<aside>
element has focus. You can use it to attach a JavaScript function that will run when the user types a key while the<aside>
element is selected.onkeyup
: This event attribute is triggered when the user releases a key while the<aside>
element has focus. You can use it to attach a JavaScript function that will run when the user releases a key while the<aside>
element is selected.onload
: This event attribute is triggered when the<aside>
element and its contents have finished loading. You can use it to attach a JavaScript function that will run when the<aside>
element has finished loading.
These are just a few examples of the event attributes that can be used with the <aside>
tag. By using event attributes, you can add interactivity to your web pages and make them more engaging for users.
Other Attributes
In HTML, there are a number of attributes that are specific to certain elements and cannot be used on any element. The <aside>
tag in HTML supports some of these non-global and non-event attributes, which are specific to the <aside>
element.
Here are some of the non-global and non-event attributes that can be used with the <aside>
tag:
align
: This attribute specifies the horizontal alignment of the<aside>
element. However, this attribute has been deprecated and is no longer recommended for use in modern HTML.download
: This attribute indicates that the<aside>
element contains a downloadable resource. It specifies the name of the file that will be downloaded when the user clicks on the<aside>
element.media
: This attribute specifies the media type for which the<aside>
element is intended. This can be useful for styling the<aside>
element differently for different media types, such as print or screen.title
: This attribute specifies a title for the<aside>
element, which can be used to provide additional information or context about the content within the<aside>
element.type
: This attribute specifies the type of content within the<aside>
element. This can be used to indicate whether the content is text, an image, or some other type of media.
These are just a few examples of the non-global and non-event attributes that can be used with the <aside>
tag. By using these attributes, you can add additional information and context to your <aside>
elements and customize their appearance and behavior.
Notes on HTML aside tag
Here are some important notes to keep in mind when using the <aside>
tag in HTML:
- The
<aside>
tag should be used to contain content that is tangentially related to the main content of a web page. This might include sidebars, callouts, or infoboxes that provide additional information or context. - The
<aside>
tag can be positioned alongside the main content of a page using CSS. You can use thefloat
property to position the<aside>
element to the left or right of the main content, or you can use theposition
property to position it in a specific location on the page. - The content within an
<aside>
element should be related to the main content of the page, but it should not be essential to the understanding of that content. The main content of the page should be able to stand alone without the<aside>
content. - The
<aside>
tag can be used in combination with other HTML tags such as<article>
,<section>
, and<main>
to create a structured and semantically meaningful web page. - When using the
<aside>
tag, it is important to ensure that the content within the<aside>
element is accessible to all users, including those using screen readers or other assistive technologies. This means using descriptive and meaningful text for any links or images within the<aside>
content.
Overall, the <aside>
tag is a useful tool for creating well-structured web pages that provide additional information and context for users. By using this tag effectively, you can create more engaging and informative web content that is accessible to a wide range of users.
Browser Compatibility
The HTML aside tag has essential support with the following browsers:
- Chrome
- Internet Explorer (IE)
- Opera
- Safari (WebKit)
- Firefox (Gecko)
- Android
- Firefox Mobile (Gecko)
- Edge Mobile
- Opera Mobile
- Safari Mobile
Examples of HTMLaside tag
We will discuss the <aside> tag below, exploring examples of how to use the <aside> tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.
HTML 4.01 Transitional Document
You can not use the <aside> tag in HTML 4.01 Transitional.
Here is an example of how the <aside>
tag could be used in an HTML 4.01 Transitional document:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>My Web Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
#main {
float: left;
width: 60%;
}
#aside {
float: right;
width: 30%;
margin-left: 10%;
background-color: #f2f2f2;
padding: 10px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="header">
<h1>My Web Page</h1>
</div>
<div id="main">
<div id="article">
<h2>Article Title</h2>
<p>Here is some main content for the article.</p>
<p>It can be several paragraphs long.</p>
<div id="article-footer">
<p>Published on <span class="date">March 16, 2023</span></p>
</div>
</div>
</div>
<div id="aside">
<div id="author-info">
<h2>About the Author</h2>
<img src="author.jpg" alt="Author Photo">
<p><strong>Name:</strong> Jane Doe</p>
<p><strong>Occupation:</strong> Writer</p>
<p><strong>Interests:</strong> Reading, hiking, and cooking</p>
</div>
<div id="related-links">
<h2>Related Links</h2>
<ul>
<li><a href="#">Related Article 1</a></li>
<li><a href="#">Related Article 2</a></li>
<li><a href="#">Related Article 3</a></li>
</ul>
</div>
</div>
<div id="footer">
<p>© 2023 My Web Page</p>
</div>
</body>
</html>
In this example, the <aside>
tag is used to contain information about the author of the article and related links. The CSS styles position the <aside>
element to the right of the main content and give it a background color and padding for better readability. The <div>
tags are used to structure the HTML, since HTML 4.01 Transitional does not have semantic tags like HTML5.
Overall, the <aside>
tag is used effectively to provide additional context and information for the main content of the page, without distracting from that content.
XHTML 1.0 Transitional Document
Here is an example of how the <aside>
tag could be used in an XHTML 1.0 Transitional document:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Web Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
#main {
float: left;
width: 60%;
}
#aside {
float: right;
width: 30%;
margin-left: 10%;
background-color: #f2f2f2;
padding: 10px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="header">
<h1>My Web Page</h1>
</div>
<div id="main">
<div id="article">
<h2>Article Title</h2>
<p>Here is some main content for the article.</p>
<p>It can be several paragraphs long.</p>
<div id="article-footer">
<p>Published on <span class="date">March 16, 2023</span></p>
</div>
</div>
</div>
<div id="aside">
<div id="author-info">
<h2>About the Author</h2>
<img src="author.jpg" alt="Author Photo" />
<p><strong>Name:</strong> Jane Doe</p>
<p><strong>Occupation:</strong> Writer</p>
<p><strong>Interests:</strong> Reading, hiking, and cooking</p>
</div>
<div id="related-links">
<h2>Related Links</h2>
<ul>
<li><a href="#">Related Article 1</a></li>
<li><a href="#">Related Article 2</a></li>
<li><a href="#">Related Article 3</a></li>
</ul>
</div>
</div>
<div id="footer">
<p>© 2023 My Web Page</p>
</div>
</body>
</html>
In this example, the <aside>
tag is used in the same way as in the HTML examples, to contain information about the author of the article and related links. The only difference is that the XHTML document is written in XML syntax, which requires all elements to be properly closed with a forward slash, like <img />
instead of <img>
. The XHTML document also requires a document type declaration and a namespace declaration in the <html>
tag.
As with the HTML examples, the <aside>
tag is used effectively to provide additional context and information for the main content of the page.
XHTML 1.0 Strict Document
You can not use the <aside> tag in XHTML 1.0 Strict.
Here is an example of how the <aside>
tag could be used in an XHTML 1.0 Strict document:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Web Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
#main {
float: left;
width: 60%;
}
#aside {
float: right;
width: 30%;
margin-left: 10%;
background-color: #f2f2f2;
padding: 10px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="header">
<h1>My Web Page</h1>
</div>
<div id="main">
<div id="article">
<h2>Article Title</h2>
<p>Here is some main content for the article.</p>
<p>It can be several paragraphs long.</p>
<div id="article-footer">
<p>Published on <span class="date">March 16, 2023</span></p>
</div>
</div>
</div>
<div id="aside">
<div id="author-info">
<h2>About the Author</h2>
<img src="author.jpg" alt="Author Photo" />
<p><strong>Name:</strong> Jane Doe</p>
<p><strong>Occupation:</strong> Writer</p>
<p><strong>Interests:</strong> Reading, hiking, and cooking</p>
</div>
<div id="related-links">
<h2>Related Links</h2>
<ul>
<li><a href="#">Related Article 1</a></li>
<li><a href="#">Related Article 2</a></li>
<li><a href="#">Related Article 3</a></li>
</ul>
</div>
</div>
<div id="footer">
<p>© 2023 My Web Page</p>
</div>
</body>
</html>
In this example, the <aside>
tag is used in the same way as in the previous examples, to contain information about the author of the article and related links. However, since this is an XHTML 1.0 Strict document, there are some differences in the syntax and rules. For example, XHTML 1.0 Strict does not allow the use of the align
attribute, which is deprecated in HTML 4.01. Instead, the float
property is used in CSS to position the <aside>
element.
As with the previous examples, the <aside>
tag is used effectively to provide additional context and information for the main content of the page.
XHTML 1.1 Document
You can not use the <aside> tag in XHTML 1.1.
Here’s an example of how the <aside>
tag could be used in an XHTML 1.1 document:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Web Page</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<style type="text/css">
#main {
float: left;
width: 60%;
}
#aside {
float: right;
width: 30%;
margin-left: 10%;
background-color: #f2f2f2;
padding: 10px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="header">
<h1>My Web Page</h1>
</div>
<div id="main">
<div id="article">
<h2>Article Title</h2>
<p>Here is some main content for the article.</p>
<p>It can be several paragraphs long.</p>
<div id="article-footer">
<p>Published on <span class="date">March 16, 2023</span></p>
</div>
</div>
</div>
<div id="aside">
<div id="author-info">
<h2>About the Author</h2>
<img src="author.jpg" alt="Author Photo" />
<p><strong>Name:</strong> Jane Doe</p>
<p><strong>Occupation:</strong> Writer</p>
<p><strong>Interests:</strong> Reading, hiking, and cooking</p>
</div>
<div id="related-links">
<h2>Related Links</h2>
<ul>
<li><a href="#">Related Article 1</a></li>
<li><a href="#">Related Article 2</a></li>
<li><a href="#">Related Article 3</a></li>
</ul>
</div>
</div>
<div id="footer">
<p>© 2023 My Web Page</p>
</div>
</body>
</html>
In this example, the <aside>
tag is used in the same way as in the previous examples, to contain information about the author of the article and related links. However, since this is an XHTML 1.1 document, there are some differences in the syntax and rules. For example, the meta
tag has an additional attribute, content-type
, which specifies the MIME type of the document.
As with the previous examples, the <aside>
tag is used effectively to provide additional context and information for the main content of the page.