CODEWITHSUNDEEP
htmlsemantic-markup
James Parker
James Parker

Reputation: 127

HTML 5 semantic tags

I have read about some of the semantic elements on W3C, WHATWG, and MDN, but I still a little unclear on somethings. I also went to this article, on Sidebar and Aside are different!.

I have a few basic questions, or confirm that I am understanding what I have read:

Upvotes: 1

Views: 808

Answers (2)

Alohci
Alohci

Reputation: 82986

This has always caused great confusion. This is the original specification's author - Ian Hickson - on the subject in 2009 (his responses are in bold, to comments made by Tab Atkins Jr):

  1. <aside> is similarly badly named. The name itself and the description of it as "sidebar" content apparently leads almost everyone astray into thinking it's for the ubiquitous website sidebar.

It is.

An informal survey showed that at least 3 people in that chat (me included) immediately tried to misuse <aside> in precisely this way when we first heard of it, and when I discussed the issue with another friend mid-chat his response was roughly "what's confusing about them? footer is for site footer and aside is for side panels".

That is a correct interpretation.

Upvotes: 2

IvanS95
IvanS95

Reputation: 5732

Keep in mind that semantic tags are just a way to keep the code more human readable and to standardize pages.

This is because before most users would define just divs and then a class describing its role like nav, footer, header, etc.

For your first question; no, an aside element does not represent a "sidebar" per se. It just represents content that is related to the main content, but it's not part of the main topic of the page. You could use it to wrap the contents of a sidebar (which is in itself a UI component), but you can use it for other things as well.

From the HTML5 specification:

The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.

The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page.

For your second question.

Yes, in HTML5 you can use divs or semantic tags whenever you like, but it is encouraged that you use semantics whenever possible; if there's no other tag you can use to define part of the document, then use a div without problems. You can use them interchangeably, at the end, most of them like main, section, footer, etc. are just divs with a different name to make it easier to read.

Upvotes: 2

Related Questions