HTML and CSS tips #5 "How the button element can help you markup the hamburger button"

github logo Updated on ・1 min read

When you have to markup the hamburger button you should use the button element with type="button". Also you should add text inside of the button element that screen readers could read and voice it.

Don't do it

<div class="hamburger">
  <div class="hamburger__text"></div>
</div>

<!-- or -->

<span class="hamburger">
  <span class="hamburger__text"></span>
</span>

You can use it instead

<button class="hamburger" type="button">
  <span class="hamburger__text">to open menu</span>
</button>

P.S: If you'd like to read more tips, articles or other content from me, go to my LinkedIn profile 👉 https://www.linkedin.com/in/melnik909/

twitter logo DISCUSS
Classic DEV Post from Jun 23

Being a Female Programmer: How is it For You?

This probably depends on where we live and work, but personally, I have not experienced anything negative for being a female programmer in my few years of career.

Stas Melnikov profile image
I write training materials for designers, developers, managers and publish it on my LinkedIn profile