Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
The first and possibly the easiest thing we can do to improve the accessibility of our sites is to make sure to use semantic HTML5 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 to choose the right ones in any situation.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
[SOUND] The first and
0:04
possibly the easiest thing we can
do to improve the accessibility of
0:05
our sites is make sure to use
semantic HTML 5 tags in our markup.
0:10
HTML isn't regarded as a particularly
difficult language to learn, but
0:15
it takes real dedication to familiarize
yourself with all the options.
0:19
Knowing what tags are available
is the first step towards being
0:24
able to choose the right
ones in any situation to
0:28
accurately communicate the relationships
between different elements.
0:31
The term div soup is used to
describe what it looks like
0:35
when web developers use the div element
to contain too much of their content.
0:40
The div element itself
has no inherent meaning.
0:45
It is simply a container, and there's
often a more specific semantic choice.
0:48
In this video, we're going to take
a simple project made up of div soup and
0:53
make it more semantic and accessible.
0:58
The project files
associated with this video
1:00
include a simple website with some basic
markup related accessibility issues.
1:03
Let's tackle them one at a time.
1:08
Notice the two div elements
here with classes of header and
1:10
footer, respectively.
1:14
This is fairly common practice, but
1:17
did you know there are actually
specific elements you can use?
1:19
Let's replace those div elements
with a header and footer element.
1:24
Anytime you go back and change markup like
this, you'll need to remember to change
1:37
any styles that may have
been rendered ineffective.
1:41
In this case, I'll simply remove
the period from my header and
1:45
footer classes since I'm now
using header and footer elements.
1:49
Pretty easy though, right?
1:53
Let's try swapping out something else.
1:55
Taking a look at inside
our new header elements,
1:57
there is an unordered list
with a few list items.
2:00
And it's enclosed within
a div of a class of nav.
2:03
This might convey meaning to
someone reading our code,
2:08
we've even styled the list a little
bit to look like navigation.
2:11
But it might not be clear
to all of our users.
2:16
Worse, anyone using a keyboard to navigate
2:19
now has to tab through a menu every
single time they encounter a new page.
2:22
Better to replace this with an element
that more accurately describes what we're
2:28
trying to build.
2:31
The great thing about using the nav
element instead is that it allows many
2:33
assistive technology to recognize
the element as navigation.
2:37
And allow users to skip pass
it rather than hearing and
2:41
tabbing through the same menus over and
over again.
2:43
If you noticed a little hesitation as I
tried to figure out which was the correct
2:56
div to change, you're starting to
understand another pitfall of div soup.
3:00
It's confusing.
3:05
Using semantic HTML tags will not only
make our website more accessible to users,
3:07
it will also make our code much
more expressive and easy to read.
3:13
Let's talk about a few more elements that
you'll find useful as you're building
3:18
accessible websites.
3:21
There's a lot going on in
my imaginary blog page.
3:23
I have a few posts, a sidebar asking
people to subscribe to my newsletter, and
3:27
a button that will supposedly
let people do just that.
3:32
If we take a look at the markup though,
3:35
it's clear that we've still got
a whole lot of div soup on our hands.
3:37
Let's start with the main content area.
3:42
The main element should contain content
that is related to the primary topic or
3:44
purpose of that particular page or
application.
3:49
And not anything that gets repeated
across several different views.
3:52
This is the meat and potatoes of the page.
3:56
This page is mostly about listing posts.
3:59
So it makes sense that those posts
should be inside the main element.
4:02
if you're following along, be sure that
you're changing the correct closing div.
4:13
It can get really confusing
when you've got so
4:18
many div elements all in one document.
4:20
Each of these individual posts could
theoretically be published somewhere else.
4:23
They each have a title and
their own self-contained content.
4:28
This makes them good candidates to be
contained within article elements.
4:32
Content within such elements
is self-contained and
4:36
designed to be distributable.
4:39
This could be a blog post,
as in this example.
4:41
Or it could be a news article or
a forum post.
4:44
The sidebar div is the last little section
of this page that we haven't really
5:00
dealt with yet.
5:05
It's giving us a chance to sign up for
this clearly awesome newsletter.
5:06
First, we'll switch that
pesky div to an aside,
5:10
which is used to contain stuff that's
tangential to the main content.
5:14
So when we go to refresh the page it
looks like we've gotten something wrong.
5:21
Our navigation is no longer styled.
5:26
Recall that when you change the markup
you use, you may also need to change
5:29
the selectors in your styles to maintain
the look and feel of your site.
5:33
If we switch back to our style sheet,
We'll
5:38
notice that I never changed
the nav class to a nav element.
5:43
Removing those periods should
get us back to our navigation.
5:51
Great, lastly,
let's take a look at our sign-up button.
5:56
It looks good, but unfortunately some of
our users might not feel the same way.
6:00
A button is meant to be interacted with,
right?
6:05
So it should be made from an element
that can be interacted with.
6:08
Let's take a look at the code.
6:12
Our button is actually a div that
we've styled to look like a button.
6:15
If you're already familiar with the button
element, this might seem odd to you.
6:20
Afterall, if there's an element
that is the thing you want,
6:24
when I style some element to
look like the thing you want,
6:28
but this happens more
than you might think.
6:32
Often the thought is, well,
it's pretty hard to style buttons,
6:35
I'll just make this div look like one,
it's a win-win.
6:39
Unfortunately, it's not a win for
our users,
6:42
because it can result in some
unexpected functionality.
6:44
As a general rule,
6:48
it's best to use the button element if
you want a button as part of your UI.
6:49
Notice that this is the first time
that a change in our markup has caused
6:59
a visual change on the page.
7:04
This is simply because we've switched
from using a block level element
7:06
to an inline element.
7:10
Once you've got your markup clean and
7:12
semantic, you can use CSS to get
the placement and styling that you want.
7:14
Great job.
7:20
This markup is looking so much better.
7:22
I don't mean to imply that divs
are always bad by any stretch.
7:24
They have their place,
just as nearly every other element does.
7:28
It's just that developers tend to
overuse them when marking up websites.
7:34
If you need to group elements together and
7:38
there's really no reason to use a more
specific element, go ahead and use a div.
7:40
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up