Content Sectioning

[00:00:00]
>> In our website, we are in chapter 3, which is hearts of the webpage. And we just went through the slides here on the page, and so now we are at part 1, the content sectioning demo. So let's open up that beginning code pen. And let's take a look at what's going on here here, all right.

[00:00:22]
So first of all, since I don't have any other use for the JavaScript box, down here in the JavaScript box is one long comment, which has all of those elements and you can refer to these as we think about what elements we should be putting where on our page, okay?

[00:00:36]
So that is down there in the JavaScript box. We have some basic CSS styling, just so we don't have to look at Times New Roman. And now we are ready to mark up this page. So let us go through this. So the first thing I always recommend people to do is they start doing their markup, is to take a look at this and do a quick read through.

[00:00:59]
And you can for the most part, probably skim it. So we can see here we have my Iceland website, probably a title of the website, we have something that kind of looks like a Navbar, that's probably what that is. This is probably a subheading, about Iceland, right? Then we have some information, blah blah blah, we have some facts.

[00:01:21]
Kinda looks like Keys and properties are keys and values, doesn't it? Then we have some additional information, Geography, Geology and Climate. I will look at that, these are spelled out in separate sections. We have Geography, and then we have Geology, and then we have Climate. That might tell you something about headings and that they're ordering their.

[00:01:45]
And then we have some information about where this information came from, and then we have information about this weird person Jen Kramer who might have compiled this information, and we also have C also list, here's some other things we might think about, and here's some other information about this being a demo for front end masters.

[00:02:09]
And here's their contact information down here at the bottom. So a good way to start doing this is just start by thinking about the kind of content that we have and let's play some really big elements here on the page. Shall we? Okay. So my Iceland website what element might we assign that?

[00:02:30]
>> H1.
>> That's probably the H1 isn't it? Okay. Right? Straightforward enough, what is the home about in contact?
>> Nav?
>> Probably a Navbar. So, as I tell people, that starts with Nav, it ends with slash Nav but it's an unordered list of links and so another hill I will die on is that it should be marked up as an unordered list.

[00:03:05]
I know the trend is not to do that but I am going to do it. One of the great things about Navbar is I could do an entire course here on Navbars and Navbar styling. When you have this semantic markup, you have all kinds of interesting elements that you can grab on to for styling your Navbar.

[00:03:24]
So a lot of people were like well it's just extra markup but I'm here to tell you you can make use of that extra markup as you style, so it's a good thing to have. So we have these allies. Okay, so there that is. Now what are these two things together H1 and the Navbar?

[00:03:51]
What might that be?
>> Header?
>> It's probably some kind of header for the webpage right? So we can put in I head around this. Okay, so that's the first section of our webpage. We have the name of the site, and we have the navigation bar. Now we go down here underneath of this, and we have a article here looks like right, some kind of information about Iceland.

[00:04:24]
And then we have all these facts and we have background and geography and geology and climate, so it looks like some kind of article, right? This is information that could potentially stand alone. So we'll mark it up as such, it is an article. It starts about there at about Iceland.

[00:04:47]
And as we scroll down the page. Geology, Climate that we have this information here about where the information came from, we have information about who compiled it we also have related links. Okay, so potentially our article is ending here right? Because this part down here at the bottom where it has the address and the links that are down here in the bottom for social media, what might that be?

[00:05:20]
>> Footer?
>> This might be a footer, right? This might be a web page footer. Okay? And so let's think a little bit more about the detail here inside of this footer. We have this contact information here. How might we mark that up?
>> An address element.
>> This might be an address element here, right?

[00:05:55]
So make this a little bit bigger. So this might be an address element. This is contact information for Frontend Masters. Now, This brings to mind another element, that is a perfect place to use this particular element. The BR element line breaks, one of the most misunderstood elements that are out there in HTML.

[00:06:24]
So, currently the way the page is displaying, is like these, its just fronting master yellow c60z63sweet3625, its all in one line, right? And no mater what country you are in, postal addresses have some kind of fixed formating. When the formating content is critical addresses are a great example, a poem is another really good example of that.

[00:06:55]
The BR element is absolutely appropriate. If you're putting in the BR just to make things show up on one line or single spacing, then that's not the right reason to use it. You got to be using CSS to do that. But here we need to communicate the meaning that front end masters has a postal address in the United States and this is the way we format it.

[00:07:15]
So in this case we will use BR. So I'm gonna put it after the name of the company, after their street, after their suite, after the city state. After the email, which you're welcome to mark up as a link if you wish. After their Twitter, maybe not after their Facebook, all of that is going to be our address.

[00:07:42]
And when we're done there, it should look more like an address, right? A little bit more like an address down at the bottom of the page, make sense? Okay. All right, so let's go back up to the top of our article again About Iceland, what would that be?

[00:08:06]
>> H2?
>> Probably an H2, right? Only there's some controversy about it multiple H1's on a page Google will tell you that you can have more than one H1 on the page, because Google is used to consuming really crappy HTL. [LAUGH], okay? But that doesn't mean that we should do it for that particular reason.

[00:08:26]
So generally speaking people put one H1 per page which would mean that this must be our H2. We never want to skip levels, do not use your headings for sizing the text that is why you have CSS. So CSS can make that whatever size you want. But H2 is what we want to convey semantically.

[00:08:48]
Okay. Then we have probably what amounts to a paragraph of information, blah, blah, about Iceland. And I have a note here don't forget the superscript. Yeah, square kilometers. So there is a element for this too. Sup, Because KM2 is very different than KM squared yes? Yes, so again that's a meeting you're trying to convey and so exponents in this case those are great things for using with superscripts.

[00:09:24]
There's also I'm sure you're shocked to know and SUB, right? For subscript in which case that will go down. Useful for chemical formulas and such. Okay, but in this case we want superscript for this one. All right, then we go on to our Iceland facts. What is this?

[00:09:48]
How should we mark this up?
>> That's it. Derrick M, deal.
>> Could be a deal? Yeah. What is the purpose of Iceland facts here we're reading along, we go about Iceland, we learn about Iceland. Then we have these facts that sort of appear here, they're kind of related but and then we go on to the Etymology here.

[00:10:11]
Is that necessarily what you would expect to be reading as we go down the page, as an article?
>> Either an H2 or an H3 as a new content header.
>> It could certainly be an H3 for the content header, sure. It could probably be a deal, right?

[00:10:34]
Description list for this whole thing. And, as you can pretty much guess, we're gonna have DT's right? Around coordinates, and we'll have a DD around the actual coordinates, right? And I'm not going to put all of these and just to in the interest of time. So you have a bunch of those for the anthem the capital and largest sitting in the official language, but that whole unit of content.

[00:11:04]
Is that a thing that belongs right there on the page?
>> Someone suggested sidebar.
>> It is kind of a sidebar, isn't it? Functionally speaking, it's a kind of sidebar. And so the appropriate element here would be a side, okay? So aside is used when the information is tangentially related to what's going on here on the page, but it is not the focus of the page and it doesn't have to be read in a certain order, so, pretty much the definition of a sidebar.

[00:11:43]
We could lose this aside and still have a perfect meaning and understanding of this whole webpage, so that is what the aside is for. Functionally often we style these sidebars, but we don't have to do that. They could be styled right here in line with the rest of the article, depending on what we did, right?

[00:12:01]
Okay. So then we'll go on to etymology. Is this more of the article probably. Yeah? So this is probably another H3. Okay, then we have our description of the etymology. Then we have this interesting type of thing. We have a Geography, Geology and Climate, followed by geography. How might we mark those two things up?,
>> Sounds like they want a list of the sections beneath that.

[00:12:35]
So does that all become a giant list?
>> It kind of does sound like a kind of that sort of thing. I'm not sure I would mark it up as a list, but I would definitely do something like this is an H3, right? So we're gonna go into a whole big thing where these things might be related Geography, Geology and Climate, and then Geography, you would wind up being an H4, right?

[00:13:02]
Because this is a subsection of that H3. And depending on you might even put a section around this. I could go either way on that. It just sort of depends on your philosophy I guess. I used to teach academically if I had a student who did this I wouldn't mark them off.

[00:13:22]
So if you wanted to do that and say this is all related, remember related or syndicated this is just related it's not syndicated you could put a section around that whole thing Okay, so there's our geography blah blah, we have geology, what would this be?
>> H4.
>> H4 Okay, and then we have climate, that's an H4.

[00:13:59]
Great. Okay, let's come back to, under geology we have this image that is here Okay, so we have our image There it is. It's a geyser. There's a sense here that there's a caption that goes underneath of it.
>> Anybody is this a good way? Should we just leave it like this?

[00:14:27]
Is there a better way to mark this up? And if there's a better way to mark it up, does anybody have a suggestion?
>> There's that fig caption people were using earlier.
>> Yeah, maybe that fig caption thing, maybe it's a figure right? Okay. Basically anytime you have an image and texts that are related to each other, you can make use of the figure tag, okay?

[00:14:52]
So text that goes underneath the image they're related to each other. And I want you to know, before I put the code in, I want you to note the treatment of the alt text. When we have a caption with it, one of the things we tend to do as developers is we just say I have a caption great that's the alt text done.

[00:15:10]
But that is probably not the best way to go about doing this, so the caption says this is the erupting geyser in this valley the oldest known geyser in the world. The alt text says the photo features blue sky with clouds and a rocky landscape with a geyser erupting straight into the air in the middle.

[00:15:29]
So the alt text should contain the information that you as sighted users would get just by looking at that picture all that stuff is kind of obvious to you, you probably don't even like think those words. The caption gives you additional information about where this geyser is located.

[00:15:47]
So for our non sighted friends, what we wanna do then is we want to provide alt texts that will give the information that the sighted user would take from that picture, is that helpful? That's how you would go about thinking about those two things they're different. Okay. So, we'll put figure around this.

[00:16:11]
Just like that, that groups those two things together. The figure element is really versatile, someone started to do something earlier where they had a quote instead of an image, that is a legit thing to do with figures as well. I love it that somebody was doing that. But this is the most common way to make use of the figure element, we have figure, the image, and then we have the fig caption.

[00:16:34]
And fig caption, if you wish if you had more to say here you could put in multiple paragraphs, or any other markup that you want inside of that fig caption element if you have a really really long caption that goes on forever like sometimes you see in research papers.

[00:16:53]
>> Can we see how that turned out?
>> Yeah. How did that turn out, so this is just our raw unstyled html, okay? So by default your figure will be indented slightly off the edge of the page. It puts a little bit of I forgot whether it's margin or padding, what are those two are on the edge of the figure, okay?

[00:17:16]
Obviously you can change that with CSS. Okay, so then going on here, for figure and so forth. And then down here at the bottom we have our citation, and we have this information is compiled by and we also have a C also. So maybe it's appropriate to put all of this inside of a footer.

[00:17:45]
So this is the article footer, as opposed to the footer for the webpage. Okay? So that footer element would go all the way around all of our citations, the compiled by and the C also, C also is probably just a paragraph., Actually as I look at that maybe that's actually a list, right?

[00:18:14]
C also here's a list of links, URL/UL, and some LI's. Okay. This information here compiled by, might be my contact information
>> So address?
>> Address. Notice that I don't include the words compiled by inside of the address tag, the reason why is that address should be strictly a contact information compiled by as not contact information, so that's why we leave it outside of it we can separate these by line breaks.

[00:19:10]
Or if you wanted to do something else you could do that also probably, but something like that. Okay, I think I've got most everything here in place. So you see that now I've got my web page completely sectioned. I'm very clear on what it is that I'm trying to communicate.

[00:19:31]
I have headings that make sense, we start at the top, they get smaller in number to help people navigate this webpage. We've got footers for the article, we've got footers for the web page, we've got a header for the web page, and we're ready to get out to go forward and put CSS styling in place.