[MUSIC]

[SOUND] The first and

possibly the easiest thing we can do to improve the accessibility of

our sites is make sure to use semantic HTML 5 tags in our markup.

HTML isn't regarded as a particularly difficult language to learn, but

it takes real dedication to familiarize yourself with all the options.

Knowing what tags are available is the first step towards being

able to choose the right ones in any situation to

accurately communicate the relationships between different elements.

The term div soup is used to describe what it looks like

when web developers use the div element to contain too much of their content.

The div element itself has no inherent meaning.

It is simply a container, and there's often a more specific semantic choice.

In this video, we're going to take a simple project made up of div soup and

make it more semantic and accessible.

The project files associated with this video

include a simple website with some basic markup related accessibility issues.

Let's tackle them one at a time.

Notice the two div elements here with classes of header and

footer, respectively.

This is fairly common practice, but

did you know there are actually specific elements you can use?

Let's replace those div elements with a header and footer element.

Anytime you go back and change markup like this, you'll need to remember to change

any styles that may have been rendered ineffective.

In this case, I'll simply remove the period from my header and

footer classes since I'm now using header and footer elements.

Pretty easy though, right?

Let's try swapping out something else.

Taking a look at inside our new header elements,

there is an unordered list with a few list items.

And it's enclosed within a div of a class of nav.

This might convey meaning to someone reading our code,

we've even styled the list a little bit to look like navigation.

But it might not be clear to all of our users.

Worse, anyone using a keyboard to navigate

now has to tab through a menu every single time they encounter a new page.

Better to replace this with an element that more accurately describes what we're

trying to build.

The great thing about using the nav element instead is that it allows many

assistive technology to recognize the element as navigation.

And allow users to skip pass it rather than hearing and

tabbing through the same menus over and over again.

If you noticed a little hesitation as I tried to figure out which was the correct

div to change, you're starting to understand another pitfall of div soup.

It's confusing.

Using semantic HTML tags will not only make our website more accessible to users,

it will also make our code much more expressive and easy to read.

Let's talk about a few more elements that you'll find useful as you're building

accessible websites.

There's a lot going on in my imaginary blog page.

I have a few posts, a sidebar asking people to subscribe to my newsletter, and

a button that will supposedly let people do just that.

If we take a look at the markup though,

it's clear that we've still got a whole lot of div soup on our hands.

Let's start with the main content area.

The main element should contain content that is related to the primary topic or

purpose of that particular page or application.

And not anything that gets repeated across several different views.

This is the meat and potatoes of the page.

This page is mostly about listing posts.

So it makes sense that those posts should be inside the main element.

if you're following along, be sure that you're changing the correct closing div.

It can get really confusing when you've got so

many div elements all in one document.

Each of these individual posts could theoretically be published somewhere else.

They each have a title and their own self-contained content.

This makes them good candidates to be contained within article elements.

Content within such elements is self-contained and

designed to be distributable.

This could be a blog post, as in this example.

Or it could be a news article or a forum post.

The sidebar div is the last little section of this page that we haven't really

dealt with yet.

It's giving us a chance to sign up for this clearly awesome newsletter.

First, we'll switch that pesky div to an aside,

which is used to contain stuff that's tangential to the main content.

So when we go to refresh the page it looks like we've gotten something wrong.

Our navigation is no longer styled.

Recall that when you change the markup you use, you may also need to change

the selectors in your styles to maintain the look and feel of your site.

If we switch back to our style sheet, We'll

notice that I never changed the nav class to a nav element.

Removing those periods should get us back to our navigation.

Great, lastly, let's take a look at our sign-up button.

It looks good, but unfortunately some of our users might not feel the same way.

A button is meant to be interacted with, right?

So it should be made from an element that can be interacted with.

Let's take a look at the code.

Our button is actually a div that we've styled to look like a button.

If you're already familiar with the button element, this might seem odd to you.

Afterall, if there's an element that is the thing you want,

when I style some element to look like the thing you want,

but this happens more than you might think.

Often the thought is, well, it's pretty hard to style buttons,

I'll just make this div look like one, it's a win-win.

Unfortunately, it's not a win for our users,

because it can result in some unexpected functionality.

As a general rule,

it's best to use the button element if you want a button as part of your UI.

Notice that this is the first time that a change in our markup has caused

a visual change on the page.

This is simply because we've switched from using a block level element

to an inline element.

Once you've got your markup clean and

semantic, you can use CSS to get the placement and styling that you want.

Great job.

This markup is looking so much better.

I don't mean to imply that divs are always bad by any stretch.

They have their place, just as nearly every other element does.

It's just that developers tend to overuse them when marking up websites.

If you need to group elements together and

there's really no reason to use a more specific element, go ahead and use a div.