<aside> The forgotten HTML tag </aside>

3 49
Avatar for rxjshi
Written by
3 years ago

So it seems we can use aside to display content that is partially or indirectly related to the intended information (source: https://html.com/tags/aside/)

Fitting scenarios -

  • Covid alert!!!! (Ofcourse what else!)

  • References

  • sidebars

  • additional information

  • website sidebars unrelated to the content

  • ads

A very good answer that supports aside is the best fit to display ads.

Unfitting scenarios -

  • blog posts

  • intended information

(directly related information to the purpose of your application)


Did you notice role="note" in the first image?
In order to make the structure more accessible to user agents that support ARIA as well as ensuring that user agents that don't support HTML5 can also understand the structure, adding the ARIA role="note" as follows or is advised.


Example of the aside tag with an accessible solution (Covid Alert) -
https://codepen.io/rxjskesh/details/PoGXxGb

Browser support (full support) -
https://caniuse.com/?search=aside


Understand how close HTML is to the top, do it right and you won't be fixing bugs in javascript :) keep it simple and direct.









3
$ 0.00
Avatar for rxjshi
Written by
3 years ago

Comments

i have approved this for now, but please write longer articles in the future

$ 0.00
3 years ago

Thanks a lot! I'll keep that in mind! And do you prefer any specific word count range?

$ 0.00
3 years ago

try to keep it above 1500 words and 10000 character

$ 0.00
3 years ago