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?
<h1 class="visually-hidden">HTML, CSS and a sprinkling of Javascript.</h1>

<div aria-hidden="true">
<div class="header__display-text">HTML, CSS</div>
<div>and a sprinkling of</div>
<div class="header__display-text">Javascript</div>
</div>
<h1 class="visually-hidden">HTML, CSS and a sprinkling of Javascript.</h1>

<div aria-hidden="true">
<div class="header__display-text">HTML, CSS</div>
<div>and a sprinkling of</div>
<div class="header__display-text">Javascript</div>
</div>
5 Replies
แผ”ฯฯ‰ฯ‚
แผ”ฯฯ‰ฯ‚โ€ข13mo ago
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 visually
snxxwyy
snxxwyyโ€ข13mo ago
do 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 ๐Ÿ˜…
แผ”ฯฯ‰ฯ‚
แผ”ฯฯ‰ฯ‚โ€ข13mo ago
seo is search engine optimization the annoying thingy that gets you visits on your website
snxxwyy
snxxwyyโ€ข13mo ago
Hm Iโ€™ve heard of that, what does it do?
แผ”ฯฯ‰ฯ‚
แผ”ฯฯ‰ฯ‚โ€ข13mo ago
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
Want results from more Discord servers?
Add your server