Structuring with HTML Tags

[00:00:00]
>> Kevin Powell: So if we come here, I said we're gonna do the navigation first. One thing that I do like to do so we can just do a header at the top of the page. And I'll talk more about this a little bit later when we start doing some styling.

[00:00:13]
But on the header that's at the top of my page, I always give this a class of either site-header or primary-header, or something like that, just to distinguish it. In this project I don't necessarily know if we'll have multiple headers or not, but header is one of those types of elements that could be used in different places.

[00:00:30]
So just having a class on there could be useful. So I'm gonna go with site-header, if you like primary-header, come up with a name that makes sense, just to say it's the one that's at the top of your page. In there, we can have a nav. Once again, I like having a class on that one too, because nav is another element that you can reuse in different places.

[00:00:49]
And I'm gonna call this one [LAUGH] just for fun, primary-header. And so I have a site-header, ooh, sorry, not primary-header, primary-nav, or navigation even. I am someone who, let's just make this a bit bigger for everybody. You'll see I have site-header and then primary-navigation [LAUGH] class names are very vibe based as well, as long as it distinguishes what it is.

[00:01:13]
If you have multiple navs, you might have a primary one, you might have a table of contents, you might have a bread crumbs and things. As long as the names distinguish what they're doing well, I think it's fine. And site-header, site-navigation could work as well, but this is just the naming convention I've got used to over the years, so I stick with it.

[00:01:30]
In here, we can come in with a <ul>, <li>, and an <a href ="">, and we'll just close that off so we have that. And I can bring that in with actually, this is the home page, so I could just do a forward slash, and then it would just bring me to the root of the project.

[00:01:49]
And I forgot my logo, we'll bring that in in a second, but we'll do Discover. Then the next one over, let's just go look sorry, we have the mushroom guide and then the FAQ. So I can just copy that, paste it a couple of times, Discover, Mushroom Guide and the FAQ.

[00:02:11]
And because these two don't exist yet, I am just gonna put those as placeholder links for now. Bu some people like putting what the page will eventually be or where the link will eventually go. You can do that if you want, I just like being able to poke on round on stuff, even if the page isn't done.

[00:02:27]
So, for now, I'm gonna use some placeholders right there. And as I mentioned, I also forgot to bring in the logo. So outside of my navigation, I will bring in an image here. And my image will just go to my assets, and in my assets, I think it's just, is it logo?

[00:02:46]
Nope. What did I call it? fungi-finders.svg, and because it is an image, we do have an alt here. I'm of the mind most of the time that logos don't necessarily need to have an alt, you can leave it blank. Just because images that are decorational can have blank alts on them.

[00:03:06]
You do wanna have an alt, and we'll talk more about this, I think, a little bit later, cuz you always have to have an alt attribute on an image for it to be valid. But if you leave it blank, it's just declaring that it's a decorational one. I wouldn't put fungi-finders logo in this case, if you are gonna put some.

[00:03:22]
And I think in this case, it does make sense to have, so we could put Fungi Finders just like that, cuz that's the text that's in the image anyway. So it's describing what it's doing.
>> Kevin Powell: So there are a few other things that we might need in here along the way.

[00:03:38]
So if you have other bits that you did, don't change yours necessarily to match what I have here. I'm gonna be using it a little bit to talk about later on when we start actually making the layout come together. So if you had something to help with layout purposes, that's awesome.

[00:03:51]
But just having the image, the nav, and everything else in there's fantastic. One thing I noticed as I was doing this is my indentation is really big cuz this is the default indentation from VS Code, but it also means Prettier is not working for me. So if I go back to here and I hit Save, my formatting is not getting changed.

[00:04:08]
And I said that prettier might need to have, if you've just installed it, you've never used it, I can see Prettier down here, that's actually there. It looks like it's working, but it's not actually doing anything. So if that's the case you want to go into your Settings.

[00:04:21]
If you go all the way down to the bottom, you can get into your Settings right there, or, as I said, I use the shortcut for everything. So the shortcut is just a Ctrl back tick or if you're on Mac, it'd be command back tick. When you're in there, you can just look up formatting or format maybe, and you'll see Default Formatter is the default for it is none.

[00:04:38]
So when I'm in there I can go through and I can actually just choose Prettier from the list there. And I also want Format On Paste on and Format On Save on just cuz it makes my life easier. And with all of that done in there, if I hit Save now, it formats everything for me.

[00:04:54]
Prettier does default to having two spaces instead of four for the tabs. So if that's not something you like, I think that is one thing that you can actually adjust. But Prettier is an opinionated formatter, so it does have some things that you can do in the settings to modify.

[00:05:09]
But there's a lot of opinions that are baked into it that you just sort of have to live with. And you can also get configuration files and do a lot more with Prettier, but we're just going to ride with the defaults for what we're doing today. As far as this next section down here, there's a lot of different ways you might have written your HTML here, and they're probably right.

[00:05:29]
I'm gonna do a section, but if you don't have a section, if you did a div, it probably doesn't matter. One thing people don't know about sections is they're basically divs. They have semantic meaning to them, but the main reason we use things like nav and other pieces or nav or header or footer, a side, article is they actually become landmark regions, which we'll talk about a little bit later.

[00:05:54]
Sections are considered a landmark region, but they only get that extra power to them if you add an area attribute in here, which we'll see a little bit later on. But if you just use a section like this, it's more for yourself. I often do this just cuz I find it easier to have sections than just divs everywhere, but if you're using a div, you're probably okay.

[00:06:14]
In there, when I'm doing this, I often just write my HTML first, and then I copy paste the text in, I find it's a little bit easier. And in this case, we can just copy paste three paragraphs, it's nothing too complicated. Again, Ctrl or Cmd + Click into your text, copy it.

[00:06:33]
We can paste that it in and remove unusual line terminations, yes please. We shouldn't get that too often, I think I did a one place that would have that, oops. The other thing, I have word wrap off, as you can notice. I think I'm on a different keyboard again today, so I might not remember which key it is, but if you do an Alt + Z, it should toggle.

[00:07:01]
Oops, not that one, there it is, you can Alt + Z will toggle your Word Wrap, on and off. I don't know what that is on a Mac, I do apologize. For when you're doing it, I just often have it off cuz I find it's a lot easier to look at it.

[00:07:13]
But when you save you can see Prettier is also making a few changes there, just cuz it's limiting the total line length of things. Just cuz often code, if you have really long lines of code, it can be really hard to read them. So Prettier by default limits line lengths, even if it's just text like we have today.

[00:07:28]
But this actually makes it easier to also come in and change the text if ever you need to cuz the paragraph tags are on separate lines.
>> Speaker 1: What do you think about using the main tag for that portion of the page?
>> Kevin Powell: A main tag would be a good idea to have.

[00:07:43]
If I were going to do the main, or actually we're gonna have a main so we can do that now. Where I'd bring a main in and then have the main closing down here. And having the section in there, just cuz if I look at the design, let's make that a bit bigger.

[00:07:58]
The generally header all the way at the top, footer all the way down at the bottom, and everything else here I would have as part of the main content around there. Yeah, definitely a good call, thank you. We're talking about landmark regions and I didn't have my main in there.

[00:08:13]
So if you had, again, other divs, other things in here, maybe to hold the content, that's awesome, we're gonna need those eventually. So you could have come in with some wrappers or some containers, I'm gonna save that for a little bit of a later lesson. If you already have them in place, leave them in place, you don't have to match it exactly like I have now.

[00:08:30]
I just wanted to have something on the page. So when I look at it we have something there and then we start adding some CSS, at least we can see that we're having some sort of impact on what we're doing.