visually hidden layout & text in div choice
Hey, i was recently looking at something Andy bell did in a site example and i've got a few questions, i'd appreciate any help with understanding this ๐
- In the code below he uses an h1 for the page title but visually hides it, then has another section with the same title which is the one he styles and adds color to etc. Why do people opt to do this sort of thing/layout?
- What is the benefit of putting text between
div tags? Is it something people do when working with visually hidden elements or a different thing perhaps?
5 Replies
the h1 is just for SEO stuff, but don't know if it is still a good practice
and the benefit of putting text in a div is that it displays text with absolutely no semantic meaning at all
if you notice, it has an
aria-hidden="true" attribute
that will just hide the element from assistive technologies
for example, a screen reader will read the title and may use a different intonation for it, or announce that that's the title of the page
the styled fluffy is just ignored
couldn't you do it all in the h1? yes, but the h1 has styles of it's own that may need overridding, like margins and stuff
and using a span would be a better element to use, instead of divs with text
just to clarify:
an h1 is very important to give meaning to the page, but i don't know if it is still a good idea to hide it visuallydo you mind me asking what seo means?
ah i see now, i appreciate all of that. What just really confused me was why the h1 was hidden ๐
seo is search engine optimization
the annoying thingy that gets you visits on your website
Hm Iโve heard of that, what does it do?
you will
its like a pest, that's always looming above you
a dark cloud that never goes away, because you rely on it for your services