HTML Markup for a Simple Website

[00:00:00]
>> All right, we are moving on to the next chapter. Chapter 3, we're going on to our easy design. So, we are going to start here with our beginning CodePen. I'm gonna open that on up in another tab, fork it to your account, get your windows all set and ready to go.

[00:00:17]
So as a reminder, these are the designs that we are going to be putting together. So here's the tablet dimension, the desktop dimension and then down here underneath here is the mobile dimension. Now which one of these should we start with? Three different designs within one code base.

[00:00:35]
Which one do we start with?
>> Mobile.
>> Mobile, why? Because mobile first, it's kind of in the name, right? Mobile first, we start with our mobile design. The original thinking on this was we start with mobile because that is the smallest screen we have to work with.

[00:00:58]
It is the least amount of information. It is only the necessary things should be there on mobile, and then as we get more screen real estate, we can spread out our elements, okay? So mobile first is often the way that we go about doing this. You do it in the UX world in terms of planning your content, planning your images, planning exactly what will be there.

[00:01:18]
In the code world, we do it from the perspective of writing media queries and such, writing our code. Okay, so we're going to start with this mobile design. Now, we have lots of ways that we could start HTML, CSS or JavaScript. Which one are we going to start with?

[00:01:38]
>> HTML.
>> HTML, why?
>> Because without HTML, you've got nothing else.
>> Fairly said, without HTML, you've got nothing else. It is everything on your webpage. You can have a web page that is just HTML. That is not true of CSS, that is not true of JavaScript.

[00:01:56]
You've gotta have some HTML. So the first thing that we do is we mark this up as best we can. We try to fold in our semantics. We try to get things in the right order then we'll go on to style it, makes sense? Fabulous, okay, so we're going to start by marking up the HTML.

[00:02:17]
So we have an opening header. We have an opening image. We have a tour list. We have images and reviews. And we have a footer. And I have a whole bunch of different CodePen links here that you're gonna refer to. One of the things about CodePen as you as you all know, you have a free account.

[00:02:36]
But if you want to include images, you have to pay for your account. No worries, I have paid for the account. So if you use these URLs, you can get the images in your CodePen, okay? So no need to worry about that. And let's go ahead and get started.

[00:02:53]
So if you open up our opening CodePen here, fork it to your account. The first thing that we wanna do here inside of our web page to get started. Anybody have a suggestion for how we can start this? The body element is never shown inside of the CodePen.

[00:03:09]
It is there. It is present. It's understood to be there. So we're past the body element. How might we start our web page?
>> h1.
>> Probably there's an h1 in there somewhere, right? We can also start it with our wrapper, right. So let's start it with a div with a class of wrapper.

[00:03:30]
Always a great way to start a web page. So that is going to put a wrapper around our entire page. Inside of that we're gonna put all of our content. Nothing will show up here on the screen. And there's no CSS at this point. Okay, so we know by looking at our design we have what?

[00:03:54]
What's the next thing on the page?
>> Logo.
>> A logo. So we need to add a logo to the page, right? What would that logo be contained in in terms of HTML?
>> Header.
>> A header element, right? We have a header element. Let's use it, header / header.

[00:04:15]
Inside of that, we are going to put our logo. And that will be, we go back and look at our web page. We do have a URL here for our logo. So let's just copy that URL. Okay, and I think it might actually be in your comments as well here.

[00:04:40]
I could have just referred to that. It's right up here with the alt tag, and the image tag, and everything right here at the top [LAUGH] of your CodePen. There it is, that's what we want. So we can grab that and let's copy that and paste it here into your header.

[00:04:59]
Wow, look at that, we finally have something fun. It's a little bit big, why is it big?
>> That's the size of the image.
>> It could be the size of the image, absolutely, but this is an SVG. So SVGs can take on any size. Where does this one come from?

[00:05:21]
>> The width of the view by default?
>> Yeah, it definitely is, right? Gets honking big, gets honking small. Really ridiculous, right? Where does that style come from?
>> From the image.
>> Right there. Image, the width is 100%. The max width is 100%. It's doing exactly what we told it to do, gosh darn it.

[00:05:45]
Don't you hate it when that happens? Okay, so that's why it's really big. But we are working in our HTML and we are going to ignore it. Okay, we will get around to styling it but we're going to ignore it for now. The next thing that is inside of our image, our thing here.

[00:06:02]
So we have, there's our logo. The next thing we have is the men of Magenta Lime, right? So we need to include them on the web page. How should we go about doing that?
>> Could you open a section tag?
>> You could do a section tag, absolutely.

[00:06:23]
This is a section of the page. We know we have an image here, right? So after the header, we're going to have some kind of image, right? Is that enough? Just the image like that? We could put something around it. So somebody has suggested a section. That's one way of doing it.

[00:06:40]
You could use just a generic div. And I'm going to give it a class of banner. What have I forgotten here?
>> Alt text.
>> Alt text, yes, three men of Magenta Lime wearing blindfolds. You could describe it more detail than that if you wish. Here in the drop down, we do have the options here to Format HTML, okay?

[00:07:18]
So that'll help you with your indentation. If you are debugging and looking for problems, there is an option in here to Analyze HTML as well. And it will flag arrows for you. Okay, super helpful. Okay, the next thing that we need to add then is our tour dates.

[00:07:43]
So we see here that we've got our tour dates, right? We have the word tour, and then we have a whole bunch of dates and locations and stuff, right? And, did I give you that text? I did not give you that text. All right, so I did not give you that text.

[00:08:02]
Let us just copy that from the ending CodePen. So if you'll go down here under marking up the HTML, there's a link for the ending CodePen just to save a little bit of time here. Let's go into this HTML and let's copy. We're gonna copy from line eight and we're gonna copy down to line 38.

[00:08:25]
So lines eight to 38 in the finished code pen. And that finished code pen is right here under 3A, marking up the HTML, okay? So just copy that, and we're gonna paste that here into our web page. So your page should look something like this once you've copied and pasted, yeah?

[00:08:51]
All right, let's look at the markup and talk about it. All right, why did I use the main? Why did I use main here? What does main mean?
>> Is it just one of those context tags, like section?
>> Yeah, it's kinda like section, or article, or something else.

[00:09:18]
In this case, main means this is the main focus of the web page, okay? This is the most important thing on the web page. There's no lie here on this web page [LAUGH] so it's gonna be the tour dates. I guess that's the only reason why you're coming to this website is to find out when Magenta Lime is near you, okay?

[00:09:35]
So that's why we use main. Then I used h1 for the tour, right? Why did I use h1?
>> It's the most important section so I guess the most important header
>> Most important section. Most important header, right? We didn't use it anywhere else on the site. So it's fine to use it here under main, okay?

[00:09:59]
And then let's look at the next part. So we have a date, right? We have a location but yet I marked it up with a paragraph with line breaks. Anybody want to think about that? Anybody wanna ask me questions about why I did that?
>> About an address tag.

[00:10:19]
>> An address tag? I'm so glad you said that. Yes, an address tag would be another way to mark this up. However, the address tag is used for two situations only. One is, the author of an article. What is their contact information? Or, what is the contact for the entire website?

[00:10:36]
That is the only time that you use the address tag. Strange but true. So actually, this does not qualify for the address tag. I mean, I thought about this for weeks before I finally left it just like this. I was very obsessed with thinking about how I wanted to do this.

[00:10:52]
So eventually we just went with this paragraph with the line breaks. But I think there are probably better ways to mark this up. And I think that you could probably think of some better approaches to this. But we're gonna go with this for this course, make sense? Good enough for now, okay?

[00:11:08]
>> Can you still, the mockup has different styling on each line of each.
>> It does, doesn't it? The markup has different styling on each line, doesn't it? We're not worried about that just yet. Right now we're just thinking about the markup. What is the markup and how are we going to do it.

[00:11:27]
Okay, then we have a series of alternating images and reviews. And since we're copying from this finished version of the CodePen, let's just continue to do that. So I am at line 39 in the finished CodePen, it's an aside element. And we can go through and let's just copy what's here.

[00:11:51]
This is gonna go all the way through to line 76. So from aside to aside, by the way, here's another thing, another pro tip for CodePen, kind of probably the same thing as VS Code and others. If you start at line 39, notice there's a little caret over here on the side.

[00:12:13]
If you collapse that. You can just highlight that little bit right there and not have to worry about where you're scrolling down to, okay? Copy that and then we can come over here to our code and we'll paste it in and it will have copied everything for you.

[00:12:32]
Your page should look really wacky now. There's an image and then it says just wow and then whoo, we got stars, okay? That's cool. We're just really not worried about how it looks at the moment. Let's go through the markup for this, okay? So we started with an aside.

[00:12:56]
Why did I use aside here on line 51? Aside is being used as something that is related to the main content but is in support of the main content?
>> Correct, it's in support of the main content. So pictures of the concert and people saying, this was the most amazing thing I ever saw.

[00:13:15]
That is definitely in support of the tour dates, isn't it? So that's why we picked an aside here. Okay, then the next thing we have a div with a class of image group and if you fold that up here you'll see that that winds up being a container.

[00:13:32]
See we have three of these. Okay, so there's three of these image group containers. Any time I use a div, there's no semantic value to it whatsoever. It is a grouping element. So we're just trying to group some things together here on the page. It will ultimately be used for styling purposes or layout purposes.

[00:13:56]
That is the reason that that div exist. Okay, so inside of that, We have an image, right, with alt text. And then after that, here's one that's probably new to a lot of you. We have a figure. So the purpose of a figure is it's going to associate basically something, whatever that something happens to be, in this case it happens to be a block quote, we'll talk about that in a moment, and it associates it with a caption.

[00:14:30]
So you can use this with a photo where you want to have text underneath, that is the most common way we do it. We say figure, inside of the figure, there's an image. There's a figure caption right? Here's my picture underneath it says, picture of a camel [LAUGH] right, or whatever it says.

[00:14:49]
Here we've taken this one level more. This is a great way to think about how to markup a quote that somebody said. In this case, we have a blockquote, right? This person said, just wow. They probably also said, what is it, four stars? Four stars. We're just displaying it graphically.

[00:15:11]
Those images are part of that quote. So we have, there's our four stars. Each image is one of those, right? Each of those has a class of star. Now there's one other notable thing about this. Have you taken a look at the alt text for those stars? What did I do here with the alt text for the stars?

[00:15:33]
>> Star star star? [INAUDIBLE]
>> Those are classes. Yeah, Andrew.
>> Put it on the first image only.
>> I put it only on the first image. See there it says four star rating. And for all of the other images, it just says alt quote quote. In other words, an empty image, right?

[00:15:55]
Why did I do that instead of star star star star?
>> Someone who is using alt text doesn't need to see that four times.
>> Exactly, this is a better user experience. If you're listening to the web page. To hear it say four start rating is gonna give you a better user experience than just wow, star, star, star, star.

[00:16:18]
Nobody wants to hear that. Nobody, right? So instead we'll just put the alt text on the first one and we'll let the other three be decorative. Okay, so that's what's going on there. So that all goes inside of our blockquote just like that. Then we have our figure caption.

[00:16:35]
Figure caption has the fig caption tag. And inside of that, you'll see I have one called cite. Guess what cite does?
>> It makes a citation,
>> It's a citation. Yeah, who said it? Who's the person that said the thing? So the blockquote gives you the quote itself.

[00:16:57]
The citation gives us who said it. And we associate those two things together with figcaption inside of the figure, make sense? Okay, so this is probably some of the most semantic markup that you would have for something like this, using a figure this way All right, and so then we have that a couple of times.

[00:17:21]
So basically what we have is in the end, we have a picture. In this case like here this picture with a quote associated with that picture. Okay, and then the last thing we need to do is add a footer. So let's copy that footer. In our final state, this is lines 77 to 80.

[00:17:46]
We can just copy that and paste that into our design. So there it is. And that is exactly what you would expect it is. It is just a contact link in a copyright statement. So that's always our first step. Anytime you're doing this professionally, anytime you're working on a new webpage, the very first thing that you ought to do is work on your HTML for that page.

[00:18:13]
And in parallel, you can work on sort of that basic styling just like we just did. We did a little separate webpage, we're never actually gonna publish that and make it live. But it sets up our base styling for the site. Put those two things together and you get what you get.

[00:18:28]
It's not the right thing, but we're a lot closer than we would be if we were looking at ugly HTML, right? Okay, so that is where you wanna start from.