Search code examples
htmlsemantic-markup

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:

  • Is the aside element not a sidebar?

  • In HTML5, can we use semantic and div tags?

  • When there are no semantic tags to use, is a div tag acceptable in HTML5 (this may be the same question as above)?

  • Can the semantic main element have other semantic tags embedded within, such as table, section, article and aside, but not limited to?


Solution

  • 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.