Content Sectioning Solution

[00:00:00]
>> So, welcome back, I hope you did well with that exercise for the markup. We have a couple of CodePens here from class. We'll start with Ben's CodePen here, which I've got up in CodePen right here. And he has started with h1, always a good place to start.

[00:00:18]
There's the kaiju cafe we have the navigation that follows right after that. So it's marked up with an unordered list totally awesome, we might consider putting a header around that but other than that looks awesome, then we have about the cafe. We have the definition here of Kaiju as an aside, definitely a possibility for this.

[00:00:40]
It's not really the focus of the webpage, but it's kinda an interesting little thing you could eat at the Kaiju cafe without knowing what a Kaiju was this, so there was that. We have some paragraphs of information, we have our hours and our hours are description list and we've got Sunday closed, perfect.

[00:01:03]
We have our menu and here we've put the name of the food product in this case because your burger. With the price all inside of a DT, definitely a great way to go on that. We've got the series of DDs after it that are the descriptions of those menu items.

[00:01:19]
And it looks like you're missing a closing description list there, no worries. And then down here at the bottom he's Looked up how to mark up a quote really well using figure which is awesome. So we've got a figure, we've got the blockquote inside of it and then we've got the caption for the person who said it.

[00:01:39]
And he's put site around the link to that whole quote, which is almost correct almost so fantastic well done. And then we've got our address here, here's the name of the cafe we've got line breaks separating those particular items
>> The contact information and then down here at the bottom, we have a little disclaimer and small type.

[00:02:03]
So small used to be an element that was no no we were not supposed to use it anymore because in the battle days in the 90s small actually made small text. And that's why we had it, you have CSS for that, but the new meaning of it's small and HTML-5 is that this is the fine print, this is the legalese.

[00:02:22]
This is the terms and conditions. This is, in this case, the disclaimer. So small is a great choice for the bottom of the page here. So well done, Ben, great job. So Tyrone here also shared his code pen, so thank you for that, Tyrone. And if we take a look at this, he's got a header around his h1 and his navigation, which is fantastic.

[00:02:46]
We have our article for the cafe. And he looked up how to use the definition tag here. So Kaiju is the word that's being defined that's why it's got the definition tag here. Since this isn't a paragraph, that paragraph is the actual definition of that term or it's assumed that definition is somewhere inside of that.

[00:03:07]
So that is definitely a good way to do that. So we've got our description list here. So you've got hours, and then you've got all of the individual hours over on the side. Maybe that might be one way of doing it. I like Ben's methodology better but again, it all depends on what you're trying to convey.

[00:03:28]
Then we have our menu and he's done this with H4's and paragraphs. So that is certainly another way to mark this up again depending on what it is that you wanna convey, that is certainly a possible answer as well. I prefer the description list but again that might be my own personal bias, and he said he ran out of time.

[00:03:50]
So, Tyrone, this looks fantastic 15 minutes first pass through, totally awesome, great job. So let me show you what my answer looks like for this, all right, so the way I've marked mine up is like this. So once again, there's your header with the h1 and the nav.

[00:04:09]
It put a name around the whole article, we might have multiple articles on this page. In this case, we only have one, but this is the main focus of the page, so there is that. I put figure around our definition, so here we have our term. And if you give it that ID of kaiju later when you reference that particular word, and I'll just scroll down here.

[00:04:33]
These are all little things that I just don't have time to go through with you individually but I'm just demonstrating for you here. We could always link to it here when if you're wondering what a Kaiju burger is. So, I don't know you're sitting in the kaiju cafe you probably know what it means by that point.

[00:04:47]
But hey, maybe by the time you get down here, you're wondering what this kaiju thing is. You could make a link that would go back up to that definition, which is kind of a cool use of the definition element in that particular case. So, that is the definition as the focus of our figure and then here's our caption to give us the citation for that.

[00:05:08]
And that is the link here and the source, wordsense. So this is just yet another way that you might go about marking up something like this, cuz we're associating the definition with who gave us the definition, all right. We've got a couple paragraphs. We've got a section I did my hours as a description list and we've got, I did my menu as a description list as well in a similar sort of way.

[00:05:39]
And then we have our block quote this is that block quote figure caption thing that I had mentioned to you earlier. So here's our figure We have a block quote that contains the thing that the person said. You can put the citation as an attribute for the block quote, this all gets kinda hairy as you do this kind of reading.

[00:05:58]
The whole citation thing is just mind blowing. That's why I haven't spent a whole lot of time on it. Here is the text that goes with that. We end the block quote, and then the caption, we can say who said it. The person who said the thing does not get the citation according to the MDN and to the W3C.

[00:06:18]
So that is why there is no citation down there in the figure caption. Then we have the bottom of the webpage, we have our contact address down here at the bottom, and we have our disclaimer in small text, okay? So that was how I marked it up. And as I said, there is no one right answer, it all depends on what you're trying to convey.

[00:06:40]
And in some cases here, I am trying to show you some additional ways you can mark things up, hoping that you will go to places like MDN and look up why I did what I did. And read a little bit more about it. Could we have the price as a DD tag potentially?

[00:06:57]
When we get to the styling part of this, I'm gonna show you how you could deal with what I think you wanna do with that. But really the description of that menu item,is probably the DD element, the DT is probably the name and the price of the product