Cards: Semantic HTML

[00:00:00]
>> All of the screenshots are here inside of the web page as usual. I've given you the hover states, how the buttons are supposed to look on hover, and so forth. Then the last part here, thinking about the right semantic markup for this page, there may be more than one answer.

[00:00:19]
So give some thought to that semantic markup and think about why you choose the answer that you choose. And the second part that I say here is that layouts are all about parents and children. So consider the impact of grouping semantic elements and surrounding them by dibs. So how is that gonna change the parent-child relationship?

[00:00:38]
We've seen that over and over through many of these examples today. But this really comes into play here on these cards where we're moving a lot of elements around on the page. So if we open this on up to our starting cards here, you'll see that as usual we have our base styles in place and I've given you all of the text here at the top.

[00:01:02]
So if you don't have time to mark up all these, the markup is all the same. Our Coffee is the title of the web page. And then we have the title of Coffee, the image, some blah blah, and this order now. Think about how you're going to mark that up semantically.

[00:01:22]
All right, so the first step is always semantic HTML. Let us go ahead and walk through exactly how we put that together. Andrew, how am I putting together my heading here at the top of the page?
>> You're putting our coffee in a header.
>> Header.
>> And also in an h1.

[00:01:39]
>> And in an h1.
>> And our trusty fancy text span on coffee.
>> And the fancy text on coffee, span class=fancy-text. /span. Oops, /h1. /header. Cool, there we go. Okay, now we move onto each one of these particular items here. There were a couple of ways that you might pick to mark this up.

[00:02:17]
How might you think you'd mark this up?
>> I'm throwing everything in a card from before coffee till after order now.
>> Yeah, it's definitely a card. Yeah, absolutely, definitely a card. So there's a couple of ways that you could do this. You could think of these as figures maybe.

[00:02:33]
I tend to not think of them as figures because this is really about ordering the coffee. There's an action there at the end. But we still need to show some kind of relationship between all of this content. So if you marked it up as a figure, I'm not that mad at you.

[00:02:49]
But the way I wound up doing it was this. I said a section with a class of card container. So this section is gonna go around the entire, all of the cards. So from the beginning all the way down to the end. And then for each individual card we are going to give this an article, because it feels like you could syndicate this.

[00:03:18]
This is a whole bunch of different kinds of coffee that it may be out there that's why I chose article, but again you could probably choose figure, or something else. Or I'll go with a class card [COUGH] and that article will end after the order now button. Okay, and as with most cards, the markup is exactly the same, the content changes.

[00:03:45]
All right, so coffee, what level of heading should coffee be?
>> H2.
>> An h2, cuz we have an h1 already Then we have our image. We'll probably wanna put a div around it. In case we wanna do magic with it later, so div with a class of card hyphen image, and a slash div after the card.

[00:04:16]
Then we have a description, what would be the markup for this?
>> P.
>> Probably just a paragraph, yeah, just a paragraph. And then comes the controversial part. What are we going to do with this order now?
>> Could be a button or link.
>> There could be a button or a link is it a button or is it a link that is the ultimate question.

[00:04:45]
And the way you answer that is what happens when you click on the button. So and there's two ways that this could be handled in real programming situations. The button could be executing some kind of script and magic is happening and all kinds of other stuff. Or we could be clicking a link that is gonna parse some stuff across the URL and do whatever, right?

[00:05:07]
So it's one of those two solutions. If when you click the button, there's a whole bunch of JavaScript that's executing, you'll use the HTML button, button. If you are clicking this and it's actually a link that is going to go do something, then you use the link a href.

[00:05:25]
There is a difference between buttons and links. The totally wrong answer is it's a div. Divs are not how we handle buttons. There it's either gonna be a link or it's going to be a button tag. So in my case, I marked mine up with a, I put a paragraph, and then inside of that, I put an a href='' # ''class="button".

[00:05:55]
Order Now /a /p, okay? So by the time you're done, it should look like this. You should have coffee smashed up against the edge of the page. There's your image, stretched all the way across. There's your paragraph. There's your order now down there with the default link styling, okay?

[00:06:20]
So you're gonna repeat that markup for all of the rest of the cards as we go on down the page. Probably depends on which is easiest to implement from the programming perspective.