Semantic HTML Elements

[00:00:00]
>> The next thing I'd like to talk about are the various parts of the webpage. Now these are probably HTML elements that you're really very familiar with but you may not necessarily know the right context in which to use each of get these elements, and so, therefore, you don't use them at all.

[00:00:15]
So what I'd like to do now is to go through to elements like article, and section, and, div and headings, and proper order of headings, and all of that. Let's talk about that now and then we'll apply that in some code points. All right, so the content sectioning elements, if you take a look at MDN, it will show you these types of elements that are here, and some of these may be used on a regular basis, some of these you may need to be reminded of.

[00:00:44]
So, let me just point out so the very first one there has to do with address, another one of my favorite elements. Address of course, you might think a postal address on a website. That may be part of it, but it's basically any way that you might contact somebody, so it could include social media, email, phone, it may even include geographic coordinates if that's what's relevant.

[00:01:10]
So that is the address element, it can be associated with an article in which case it's the author's contact information, or if it's associated in the footer at the very bottom of the webpage, It is the website's contact information, so you can think about that as well. I'm gonna talk more about article, and section, and div momentarily, more about main momentarily.

[00:01:34]
Header and footer you're probably familiar with of course the head, the top of the document, footer for the bottom. Remember that you can have those for the full web page, you probably are already doing that, the header for the full web page, the footer for the full web page, but you can also have headers or footers for articles as well.

[00:01:56]
Okay, so that's just a few little bit of some of those. Remember that div doesn't mean anything at all, div means nothing some people say well that means it's a division, it is short for division but it doesn't mean anything, it's not a sectioning element, it doesn't, it's not responsible for anything in terms of communicating meaning on the webpage, its whole purpose is to hold classes and IDs.

[00:02:21]
That's it or groups other elements together on a page so we can do things like layouts and other types of tricks. Very useful for CSS styling and JavaScript programming as you already know, and span would be the inline equivalent. So div by default is a block-level element. Span is an inline element.

[00:02:41]
That is the difference between those two. So div should be your element of last resort. In other words, as you think about web pages and communicating meaning of on web pages, you should try to use any other element until you get to, I just need to group these things together to make my Flexbox work, that is the time to use a div.

[00:03:03]
So let's talk about when you might use article section or div specifically. And I always asks people, is it related, or is it syndicated? If it's related content, then we're gonna talk about it as a section. That's a section of the webpage, in other words, this information is kind of related, it's kind of grouped together, maybe it doesn't stand alone, but it is indeed related.

[00:03:26]
An article is syndicated. I can take that piece of information, I can put it anywhere and you would get meaning out of it, so it stands alone. Things like blog posts would be an example of that. Recipes would be an example of that. Many kinds of news articles would be an example of that.

[00:03:45]
You probably want those things associated with their branding, but they could be understood by themselves in isolation. And then div is that last thing, there's no story, nothing's related, you just need a box to group elements that would be the one of your last resort. So that's it.

[00:04:03]
Think about related Syndicated. Main, however, is not the same as all of those elements. So main has to do with a marker on the page, as it says here, the main content area consists of content that's directly related to or expands upon central topic of the document, or the central functionality of the application, there's one per page, you can't have multiple mains, only one per page, and this would be the focus of your page.

[00:04:30]
So your application and your writing in javaScript would be inside of the main area. Maybe you have additional information that goes around it, the header, the footer, maybe you have some advertising that goes on a sidebar or something, but the main focus of the page is what goes in the main element, more on main because it's a really interesting kind of thing.

[00:04:49]
So whatever is inside of that main element, should be unique to this particular document. In other words, it's not stuff we're gonna repeat over and over again. You're gonna have the same navbar on every page, you're gonna have the same logo on every page, same social media contact information, that is not appropriate to the main element.

[00:05:06]
Main is strictly informative, so it's not a sectioning element, it is useful for screen readers and such to know that this is the main focus of the page. So you might have a main in addition to articles or sections, that would be what you would be doing. It's a landmark, is better to use main than the role equals pain for javaScript, you can add an ID attribute to it and then it's the target of a skip navigation link.

[00:05:36]
So if you know that technique where in the upper corner usually upper left corner of the page, you might hide a link that says skip navigation or skip to main content. You can have them skip right to the main element that is the portion of the page makes total sense.

[00:05:54]
And then this last point is what is really interesting to me. So browser read mode functionality looks for the presence of the main element, as well as the heading and content sectioning elements when converting content into Reader View. So if you've made use of Firefox as Reader View, which is available by default, Chrome has it with a flag, it will strip out just like if you're on a news site, for example, it would just show you the news article, strips out all the branding, strips out all the advertising and so forth.

[00:06:23]
Sometimes it will get you around password protection, some of those new sites where they show you you can only see the first five sentences and then you're blocked out. Sometimes that will get you past that so you can read the whole article. So that is another use for main.

[00:06:39]
Any questions on that? Okay, so let's do some more code then.
>> Was a question.
>> Okay.
>> I don't know if you saw it?
>> I did not.
>> Can we use the address tag for street address too?
>> Yes.
>> Or be strictly used for what context is like sites and links?

[00:07:00]
>> Yes, you can use it for your postal address as well. For the address element, that would be just fine, which is might be what you expect.
>> Why is there even a div and a span when HTML is not meant for styling, it's only meant for semantics but these things have no meaning at all?

[00:07:18]
>> Right, because sometimes you need to group your HTML elements together in order to complete your styling. So in other words we're not trying to communicate anything with div or span but for example, in that code pen that I just showed you with the ice cream, I had a description list and an image and I wanted them side by side, the only way to do that is to have a parent for both of those elements, we've marked it up semantically, it's definitely a description list.

[00:07:45]
It's definitely an image, they will stack vertically by default. I need a parent around those so that I can assign that parent like display flex or display grid, and then the additional properties that I need to put those two things side by side. So div in that case is not styling anything for me, it's simply gonna hold a class where I can assign those particular properties to that div.