Yes I’m glad you spotted that. That’s the whole point of using semantic tags. You get a certain amount of baked in accessibility for little effort. It’s not just for screen readers either.
Semantic tags also enhance keyboard navigation, making it easier for users to navigate the page without using a mouse. This is especially true for old people like us with arthritis and struggle to hold a mouse.
You also get a benefit to SEO as search engines can understand your content more easily.
At some point in a persons life there is a good chance that they won’t be fully able and then accessibility features take on greater importance.
For professional designers accessibility is a priority these days as there are indeed laws and regulations that promote accessibility for all. Adhering to accessibility laws and guidelines ensures that websites are inclusive for all users, including those with disabilities, and is also considered an ethical responsibility. (I copied that last bit from somewhere else :))
Of course for small family sites like yours you can do what you like and no one is going to worry but with a few tweaks in structure you suddenly have something that works much better for all. 
Lots to take in i know:).
In my initial review of your code I mentioned to you that we rarely will set a height on elements that contain fluid content. Its just not a viable method unless it contains perhaps a fixed size image but even then there is no need as the image controls the height anyway. You should let content dictate the height and not your perception of a ‘design look’. If the reason the for the height is to match the height of something else then flex an grid can do that automaticallt when set up correctly without requiring any height dimensions at all.
Again this is a common beginners misunderstanding of the rules of css (there are always rules ;)). A percentage height on block elements refers to the height of the parent assuming that parent has a height defined other than auto. If the parent height is also a percentage then the same rules applies and every parent of that element must have a height defined other than auto all the way back to the root element. If there is no parent with a height that can be resolved then all become height:auto and nothing happens. That’s why height:15% doesn’t work unless all the criteria I just mentioned is in place. Even if it did work then it would blow up the design once the text wrapped to a new line in a responsive site and required more height than 15% or indeed if I increased text size in my browser as mentioned before. In most cases you will never need to use a percentage height barring the following caveats.
Flex and grid will allow the use of percentage heights on flex items because flex and grid have special properties and know how tall an element has to be to match other elements and also that it will allow the element to grow because all the elements in the row will increase so a 100% is never exceeded. However, you still will seldom need that as flex/ does match heights automatically if you set it up from the start.
So to recap (excluding grid and flex) if you need to use a percentage height then all the parents of that element also have to have a height defined other than auto. if a parent has a fixed height (px em etc) then that allows the direct child to have that height available as a percentage. If the parent is a percentage height then an unbroken chain of percentage heights must follow all the way up to the root element. That’s why you will see this rule in older sites.
html,body{
height:100%;
margin:0;
padding;0;
}
That will allow a direct child of the body to utilise a 100% percentage height (full viewport height). (Notice how the default margin are removed because if they were in place then 100% would be taller than the viewport). Once again there is a gotcha in that your page could never grow below the fold because you said height:100% only. Anything that is taller than the viewport will overflow. What you would need is min-height:100% instead. However once you use min-height on that parent you can no longer use height:100% on a child element because min-height does not allow any height to be passed to a child element as its height is really unknown because it is a minimum.
Suffice to say forget about percentage heights and do something else
Because of the other requirements a new unit (actually a whole set of units but I won’t explain all) was developed just a few years ago to tackle these issues. The ‘vh’ unit allows developers to access the viewport height (vh) from whatever (block display) element they choose wherever that element may be. This avoids a lot of the problems mentioned above and you can use min-height:100vh also but remember that if an element is half way down the page and you give it a min-height: of 100vh (full viewport height) then that will stretch the element below the fold and not just to the bottom.
This is a complicated subject but your main take should be to avoid setting any fixed or percentage heights on content that is fluid like text.
