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 
<div class="headerdisplay-text">HTML, CSS</div>
<div>and a sprinkling of</div>
<div class="headerdisplay-text">Javascript</div>
</div>
```
- 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
divtags? Is it something people do when working with visually hidden elements or a different thing perhaps?
```html
<h1 class="visually-hidden">HTML, CSS and a sprinkling of Javascript.</h1>
<div class="headerdisplay-text">HTML, CSS</div>
<div>and a sprinkling of</div>
<div class="headerdisplay-text">Javascript</div>
</div>
```