Dark mode button container

What is the semantic HTML element as the container of a switch button for dark mode? Can we use the <header> element? If not, is it OK to use it directly under <body> ?

image

If the button is in the header and there are other header components inside the same container then the header element would be fine.

If the button is the only thing in there then I’m not sure a header element would be the most semantic.

The button could be on its own and doesn’t have to have a parent and could be a direct child of the body (assuming the button is type=‘button’.

IIRC it was invalid in html4 to have inline elements as a direct child of the body but html5 is ok with it. I generally dislike inline elements being direct children of the body and will usually place a div around them but that’s just me being ‘old school’.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.