HTML5 Semantic Tags

[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