Album Solution

[00:00:00]
>> So I hope you did well with that markup exercise. And let's take a look at your markup and see what you got. So we talked about it a little bit before we started. Let's start up here at the top with the new album stuff. So, in my markup, I put a section around that, this is a section of the web page.

[00:00:21]
I gave it a class of album, and then there's the H2, new album, the H1, it was all a dream. And then you can put in your link to order now. And of course, you can give it that class of button primary, which already exists, we know that that's how that button is gonna be styled.

[00:00:38]
You may have used a div instead of a section, that's probably just fine. For accessibility purposes, section really doesn't have a whole lot of impact on web pages at this point, but semantically, it may be a little bit better. All right, then we have our table. So let's talk about that, I wrapped a section around our table, and then we start with the table element, right?

[00:01:01]
So table starts at the beginning, ends all the way down at the end. And now I will ask the question, how many of you added a caption to your table? How many of you have ever even heard of a caption? Great, so caption is really important. Anytime you use a table, you need to tell people particularly as this in the accessibility world, what is this table that they're about to look at?

[00:01:28]
So to this I've added the caption element, the HTML and the correct way to write it must be the first child of table. So in other words, table Followed immediately by caption. And the title here is, It Was All A Dream playlist. That was just, it's a playlist for the album.

[00:01:49]
The album name is It Was All A Dream, so there we go, okay? We can eventually hide that. We'll go through that when we get to the CSS, but you'll want to add that to your table if you don't have it, and I gave you a reference there to look at MDN.

[00:02:04]
Okay, next up, we have our track, our song, and our time. How did you mark that up? We put a row around it, right TR, and then for each individual element, what did you use?
>> th.
>> th, anybody used td? Nobody will admit it? Okay, so th stands for what?

[00:02:27]
>> Table header.
>> Table header. So this is the headers for our columns, track, song, and time, so we'll use that here for those headers. And then the rest of it is pretty straightforward cuz it's the same thing over and over again, right? We're gonna have each row gets a tr, and then each of the elements in that row get a td, td/td, right?

[00:02:49]
One casino of tricks, 201, and so on and so forth all the way down the page. And it goes on forever [LAUGH], and then it ends. Sound good? Everybody cool? All right.