DEV Community

Cover image for Pure HTML CSS Tabs
Imia Hazel
Imia Hazel

Posted on


Pure HTML CSS Tabs

HTML tabs are perfect for web applications. Different subjects can easily be displayed with tabs ui design. You will love these simple and well designed tabs.


Tabs layout is enhanced with Google material icons. These are CSS only tabs and are compatible with modern browsers.


These Pure HTML CSS tabs are responsive. You will observe a behaviour of accordion tabs on small displays.

Responsive CSS Tabs


  • HTML
  • CSS


  • Material Icons Support
  • Responsive CSS Tabs
  • Modern Design
  • Clean Code



Your feedback will help us to improve these tabs.

Top comments (5)

sidcraftscode profile image
Siddharth Chaudhary

@inhuofficial I don't think these are accesible any feedback

grahamthedev profile image
GrahamTheDev • Edited

No they aren't, it is impossible to make fully accessible tabs without JS as you need to update certain WAI-ARIA properties I am afraid.

However I only do my accessibility rants when someone says they are accessible (which Imia hasn't).

It might be something I write an article on as there are a reasonable number of things to consider.

As this is @imiahazel first post I will not go full on "angry accessibility man"...I will on your next post though Imia πŸ˜‹πŸ˜‰.

For now, here is an example of accessible tabs from W3 that shows all the keyboard controls expected and WAI-ARIA properties to label it for a screen reader.

Only thing I will say is don't use these tabs as they are in production as they will end up excluding some people.

p.s. This being summoned for accessibility stuff is quite funny!

Still gets a ❀ and πŸ¦„ from me as the CSS is nice and first articles should always be encouraged, I hope to see more from you Imia (and my accessibility rants are for fun and to help if you ever end up getting one from me in the comments, don't let me put you off! 🀣)!

imiahazel profile image
Imia Hazel

Thanks @inhuofficial for your valuable comments.

Yes, these tabs are not accessible. We will keep this point in mind and will try to update tabs if possible.

Again thanks for your time, valuable comments and straight suggestions.

I found lot of encouragement from these comments. Love to all Dev community.

sidcraftscode profile image
Siddharth Chaudhary


imiahazel profile image
Imia Hazel

Yes, these are not accessible.
Thanks Siddharth for your time and comments.

Super Useful CSS Resources

A collection of 70 hand-picked, web-based tools which are actually useful.
Each will generate pure CSS without the need for JS or any external libraries.