Team: Semantic HTML

[00:00:00]
>> So we've talked about our images, that's step one. What's step two? Semantic HTML. So if you go to your website. Website, find the website. Go down to the big red button where it says BEGINNING CODEPEN, you will find here all of our people, They're all here, I've given them to you.

[00:00:26]
I've told you, this is Michelle, she's the owner, and we need to include links to Instagram, LinkedIn, and Mastodon. Up here at the top, I've given you the SVG icon URLs that you can use. And I would recommend just putting these inside of image tags, okay? And see if you can figure out how to set up your markup here based on what I just told you.

[00:00:53]
Just worry about the first card, you don't have to worry about the other ones. You ready? Go. Okay, so hopefully your semantic HTML worked out okay. Let's start with the Our Team here at the top of the page. How did you mark that up? Or how would you mark that up?

[00:01:21]
>> Usual header situation.
>> Header, yep, header. Isn't it nice to have all the styles already established? Header and then inside of that, of course is an h1 and a /h1. There we go, all done. Okay, then I'm just gonna mark up this first one here. All of the rest of them are exactly the same idea.

[00:01:50]
So, how did you set these up? What is the first element you put in place?
>> Figure.
>> Figure, yeah. So we're gonna start with figure here. And we're gonna end with /figure. /figure, okay? And so there's our image. And then how did you mark up all of the stuff here inside?

[00:02:19]
The Michelle, Owner, and the links to the various social media. How did you mark that up?
>> I did a figcaption with a span around the first name cuz it looks like there's a little fancy text going on later.
>> Okay. So we have a figcaption around and a /figcaption to end it.

[00:02:39]
And then you're suggesting that these are just spans right here for the name of the person?
>> That's how I did the name. I left the rest of it out of the span.
>> Cool. Well, you were on the right track. Yes, we need to have something around the name but I did an h2, because again, we start with an h1.

[00:02:59]
These are now individual people that are kind of like headings on the page. You would wanna know who all these people are. Maybe learn more about one of these people. So I've done that with an h2. How about owner? How would we mark up the owner
>> With an h3?

[00:03:16]
>> You could go with an h3, but I went with just a plain old paragraph. More as a generic kind of thing. The important part here is the name of the person and the title is less important. Then we have our links to Instagram, LinkedIn, and Mastodon. So the link is gonna go how?

[00:03:39]
>> So is it gonna be an a or an image? Cuz, if it's clickable it should start with, yeah. So it's an a, and then it has its target and href. But you can also have the image source contained as a separate element with inside.
>> Yeah, so you can put in whatever you want here.

[00:04:00]
What order do I have these in? I have Instagram first. So instagram.com is good enough here. We can say target="_blank", okay, /a, right? So those are links to these places. We don't have anything to click on yet, but we have the link. [LAUGH] So we have Instagram, we have LinkedIn, and we have Mastodon.

[00:04:36]
I think that's the right order, yeah. Okay, then inside of each of these we need to put in our SVG. And the way I've done that is just an img src=, and you can copy down the assets that I've given you here. So here's the asset for the SVG, alt="Instagram".

[00:05:09]
And because it has alt text, we don't have to worry about, screen readers will have those Instagram alt text and so forth read off for each of those. So I've got Instagram, I've got LinkedIn. Img src="blah, blah, blah. Alt=, "LinkedIn". Okay, and then the last one is Mastodon.

[00:06:00]
Img src=", there's that link, alt="Mastodon", okay, Great, now, you can, if you've left it just like this for your semantic HTML, that is totally fine what you have here. Because you have the image at the top here, these are each a figure. Your image at the top, your figure caption which contains the name of the person, the owner.

[00:06:41]
And then a series of links. One of the things that I did do here for all of these links, is I put a div with a class of icons around this. The reason why is, and then a /div. So this is gonna go around each icon. So we have a div with a class of icons before each one of these links.

[00:07:10]
And a /div after. And the reason why I did that is because ultimately we have some common styling for all of these icons that we will want to do with our icons class. Also, if you take a look at each icon individually, they have that, in this case it's a green background, and on hover, it's gonna turn blue.

[00:07:48]
We need some way of putting that background color in there because if we just look at what we've got right now, we got icons. They are honking big, [LAUGH] okay? And that is awesome, because all we've done is the HTML, and that's the way they're supposed to look.

[00:08:05]
So we're gonna need some way of giving them that background green color, and the div is gonna provide us that opportunity to give them that. Okay, so this same pattern you're gonna repeat all the way through for the various other managers and so forth. If you only have one link there, then you'll only have one div with a class of icons with the link inside of it.

[00:08:27]
Sometimes you have three of them. Sometimes you have two of them. Okay? So that is how you're gonna continue on with those for the rest of the page