Column & Cover: Semantic HTML

[00:00:00]
>> Okay, so how did you do with the semantic HTML? hopefully everybody did okay because you know there's like 130 HTML elements that are out there and you might know 10 of them if you're lucky. So this might be a place where you're gonna learn a whole lot of things that you didn't know about HTML.

[00:00:19]
So the first thing that I'm going to do here in my CodePen is I'm actually going to hide the whole web page as much as I can, because it doesn't matter how this looks, we are concentrating on the the semantic HTML. And it doesn't matter what the CSS looks like, because we are concentrating on the semantic HTML.

[00:00:39]
We are communicating what it is we want this page to say. So for the people here in the room, tell me a little bit about what kind of elements did you use in putting together your semantic HTML, yes.
>> I'll take the easy one. So I put instant coffee facts inside of a header and I put that inside of an H1.

[00:01:00]
>> Great.
>> And then to get the instant with the fancy text, I put that inside of a span.
>> Awesome, yes, just like we did with the style guide, so we have a header for our web page. The header is introducing a title here for this web page in case it's Instant Coffee Facts for whatever reason.

[00:01:21]
Other semantic elements that you used here in your page, anybody?
>> I used just what you mentioned just there and then h2 for the header of the coffee instantly, coffee convenience title of the article, and then all I used paragraphs.
>> And then, some paragraphs. Okay, so a little bit about this.

[00:01:43]
So, first of all, one of the things that you want to be sure when you're working with HTML for accessibility reasons is, quote, don't skip heading levels. You've probably heard this before, don't skip heading levels, what does that mean? Anybody know what that means, don't skip levels? You've never heard of that, that was just great, yes.

[00:02:04]
>> So don't skip heading levels so that would be like the header and then having like article and then h1 h2, because for people who use things like screen readers.
>> Right
>> That will kind of tell them what part of the website they're hearing or reading.
>> Correct, so yeah, we wanna be sure that we're using these semantic elements in order for the page to be summarized correctly for screen readers and so forth.

[00:02:29]
But specifically, when you hear don't skip headings, this means that we're gonna have an h1, we're gonna have an h2, we're gonna have an h3. That kind of thing, we're not going to go from h1 to h4, for example, because we like the size of the h4 better, or the styling for the h4 better.

[00:02:47]
What did we actually do to address that issue? We know semantically it has to be an h2, but we want it to look like an h4, how would we do that?
>> CSS
>> We do it with CSS, right? In our base styling, remember when we put together our base styling here?

[00:03:07]
We came up with classes. So if I want my h1 to look like an h3, what could I do? I can use my h3 class, and apply it to my h1 element. Make sense? I'll say it again, so if I will have an h1, semantically, that's what is required.

[00:03:33]
But it wanted to visually look like my h3. I use my h1 element h1, and then I have a class which equals my h3. So it pulls in the h3 styling, overriding whatever I had for the element h1, because classes beat elements, right, make sense? That's why we did this here in our base styling.

[00:04:00]
Okay, little tips like that all right so yes
>> So what we're accomplishing by that is having all of the h1, h2s layout in a logical order
>> Correct
>> And then that is consumed by screen readers
>> Correct
>> That makes sense
>> And Google, yes, because headings are super important for search engine optimization too.

[00:04:23]
If you want a machine to understand the structure of this page, you have to write it so a machine will understand it. And that is done through HTML, that's why HTML is important, that's why we use semantic HTML. I will die on this hill [LAUGH] okay? So we start with our h1 there for the page, and then I have this set up as an article.

[00:04:46]
I didn't use div, I didn't use section, I use article, why did I use article?
>> It's correct semantically
>> Presumably it's correct semantically, but what else, why is it correct semantically?
>> Let someone using a screen reader know that what they're about to consume is likely something made up of multiple paragraphs.

[00:05:13]
>> It might be something longer, yeah, anything else?
>> Okay, so articles specifically is something that might be syndicated. If we had no other context for this chunk of text, could we still read it and get value out of it? Yes, it has a title, it has some blah blah, right?

[00:05:37]
That could stand alone as its own separate piece of text. That is the definition of an article. We could put it in an RSS feed, we could syndicate it out to other websites, make sense? So that is why we choose article, sections are just related information. Div has no semantic meaning to it whatsoever, okay?

[00:05:57]
Okay div is just, we need to apply a class somewhere on this page. Section is the stuff is related, article is it can be syndicated. So the question I always ask related or syndicated, related or syndicated, related or syndicated? Make sense? You said a section for related stuff.

[00:06:18]
>> Section for related, article for syndicated, okay? So then obviously after that we got our h2 and then we have a bunch of paragraphs blah. Then down here towards the bottom we have our image, which I might have given you. Did I give you the image? Yeah, there isn't anything you need to do here with the image, it's just there.

[00:06:44]
And then we have a footer, the footer is a footer of the article. Notice it's not a footer for the webpage. What is the difference between a footer for a webpage and a footer for an article? First of all, did you know that you could have a footer for a web page and a footer for an article, probably not, right?

[00:07:05]
Okay, so an article can potentially have its own header or it can have its own footer depending on how you set it up. Think about a new site, you might have a header that would have the title and the authors and the dateline and all the rest of that stuff.

[00:07:20]
The footer could be used for references for that article. In this case, we're referring to where this content came from, which is from Wikipedia. So this is specific to the article, therefore this is a footer inside of our article. This is not a footer for the webpage, which has copyright information and lower navigation and all the other things, right?

[00:07:40]
So, there's a difference between footer for the webpage and footer for your article. In this particular case, in our footer, we have a paragraph of information here, and this is from the article, it was called Instant Coffee. We include a citation, which is from Wikipedia, and we state who created the picture, which is a link back to the pixel site to give him proper credit for his picture, make sense?

[00:08:12]
Any questions on the semantic HTML?
>> I'm not familiar with target.
>> Okay, so Target has to do with how this link is going to open. If we don't include target when you click the link it'll open in the same window that you're in. Target equals underscore blank, the underscore needs to be there means that it will open in a new window or a new tab So it has to start with an underscore.

[00:08:40]
If you just have target equals quote blank, without the underscore, you're opening it in a tab with the name of blank. Which means that if somebody went through here and clicked both of these links, you would wind up with one tab, it would open the first link and then that same tab would open the second link.

[00:08:57]
When you use underscore blank, it will have two separate tabs with the two separate pieces of information