Organizing HTML

[00:00:00]
>> So let's hop into organizing HTML, section 5 here under HTML. And we're gonna talk about how we organize HTML. So far I've just been showing you tags, and how individual tags maybe a few that are nested inside of each other. But now let's build bigger things, right?

[00:00:19]
You can see on this course website, we have this central content area, and we have these different sections and headers, right? How do you build components, right, tags of tags of tags, right? So that's what this section is all about, it's how do I organize bigger pieces of HTML.

[00:00:38]
So let's say that you're making a social media type website and you're gonna make a news feed, how would you organize that? Well, let's take a look at this. Let's say you have the username here and then you have when it was posted. And an image, maybe that's their.

[00:00:56]
What kind of image they posted or maybe it's their profile picture or something like that. And then we have like the text here, like a dog having an existential crisis, for example. So that would come out looking something like this, right? The user name posted 15 minutes ago, their profile picture, and whatever their tweet is or whatever their bark, maybe it's a dog social network So I've organized that to something like this.

[00:01:29]
And I put an h3 here, that's just like a stylistic choice, right? Is that a header? Is it not a header? Some people probably say it's not a header, so you'd make that a p instead. This is kind of your choice, right? At this point is just kind of how you feel about it.

[00:01:44]
We'll stick with h3 though. And yeah, that is how I would organize it. But a div to encapsulate all of it, right? Think of it as like that cardboard box that keeps everything together, right? This is one whole post, right? And then we'll look at here with the classes in just a second, but you kinda keep every like thing together.

[00:02:10]
So again, kind of touchy-feely, kind of organizationally. But imagine you're moving into a new house and there's cupboards everywhere. What's the correct place that you're supposed to put all of your utensils? Well, it probably should go in a drawer, probably should go in the kitchen, but which drawer?

[00:02:29]
There's not a correct answer to that. It's just kind of how you choose to organize things. And that's the point I'm trying to drive home for you here, it's not a preferential after a certain point, right? You don't wanna put your utensils in the bathroom, that doesn't make any sense, so you probably wouldn't.

[00:02:43]
You'd wanna put them in the kitchen. Where you choose to put them in the kitchen makes the most sense to you. Same thing with HTML. So we kept all the light things together with a div. Its container like a copper box, we talked about that. And typically we'll put everything together, kind of in an encapsulating div just to make sure that it's kind of logically divided off by itself.

[00:03:10]
You also could have put this in what's called an article like this article. What's the difference between a div and an article? Functionally, nothing. There's actually no functional difference between a div and an article. Everywhere that you could use a div you could use a article, and vice versa.

[00:03:32]
So why would you use an article versus a div? An article is just a more specific thing. It's kind of a bit of documentation, here's an entire article that sits off by itself. An article is just like a bit of information. It's not as much as an article in a website, it could be a little tweet, right?

[00:03:48]
A tweet could be considered an article. It's just like a unit of information, right? So in this particular case, I would say article might be a better one. It's like a cardboard box that has a label on it, that says this type of box, and that's all it is.

[00:04:09]
There's also section, right? That's another one. Section is the same thing, whatever you'd call it a section. So if I was designing a house in HTML, I'd say a kitchen is a section, a bathroom is a section, a bedroom is a section, right? It's a larger macro unit of a website.

[00:04:28]
Could you use a div there? Absolutely. Do most websites just use divs there? Usually, but there are some of these more specific semantic kind of styles of tags. And it's just like a labeling system for you to kind of keep track of everything. So we'll leave in here a div cuz I would say most websites here probably would call it a div, just because most developers are lazy and they call everything a div.

[00:04:54]
But I just wanted to kinda get you used to some of these newer semantic style HTML tags. So that bears mentioning as well, divs are just older. Divs have always been around in HTML. Articles, and sections, and some of those other things have only been around since HTML 5, which is like 2012.

[00:05:14]
I don't know if it's 2012, it's within the past 15 years. Whereas, HTML is much older than that Okay. So let's look at the exact same thing, but this time I added classes. Is this a bit a lot clearer, like what everything is supposed to be? This is a social post, this is their username, this is the posted date, this is the profile picture, and this is the text, right?

[00:05:54]
I would argue this is like a million times more clear in terms of the code instead of this. This, you have to look at it, and scrutinize, and kinda looking at it from all the link, it's like okay, what did they mean here? What are they trying to do?

[00:06:07]
Whereas if I come look at this, everything is labeled, right? It's like having one of those label guns when you're moving, it's like you can put a label on everything so you know exactly what it is, where it goes, where it came from. So that's why I wanted to show you classes as a methodology of documentation for yourself.

[00:06:25]
I now get everything here of what it's supposed to do. Does it make sense? What I'm trying to do right now is I'm trying to teach you to write code, not just to write code the first time, so that when you come back later and try to maintain it, that it's way easier.

[00:06:40]
Cuz you write code once and you maintain it forever. So optimize for the forever part and not for the writing part of it. And you can see everything here looks exactly the same, this code is just much easier for you, the coder, to read later. Now, we'll eventually use classes to do styling and stuff like that, but that's just part of why you use classes.

[00:07:05]
It's also as a method of labeling things that you're doing. Okay. So let's say we wanna make a full feed of one of these, right? So I'd have some sort of like social feed class, right? And now, I can have a bunch of these social posts, right? So I have sassy_pants here.

[00:07:34]
And then I have TailCurious here, right? And so I can have a bunch of these different posts next to each other. And I reuse all of the same structure, right? It's like, again, if you're building your house, if you come up with one blueprint, you can reuse that blueprint over and over again.

[00:07:53]
So all of these social post each one has a username, each one has a posted date, each one has their own text, so on and so forth. Does that makes sense? That kind of defining it once, we are able to use it over and over again. We're defining these reusable components for ourselves to use later.

[00:08:14]
And you can see it comes out, so I have this post and this post. It's all Luna, [LAUGH] at the end of the day, but, And I mean, this is all if you look at Twitter, or Facebook, or Pinterest, or some of those things, they're doing exactly this, right?

[00:08:35]
They're defining a set of HTML and they're just reusing it over and over again. Cuz every tweet structurally looks the same, right? They just have different content inside of them, and they're just reusing the same structures and classes over and over again. And then notice that I grouped all of those together into one div of a social feed, right?

[00:09:00]
Cuz I'm grouping I'm using a larger box to encapsulate the smaller boxes. Cuz you're trying to store all the like things together. All right. So, let's say we wanted to make some sort of like nav bar, right? You've been on lots of websites, this website has a nav bar, right, this little thing affixed to the top.

[00:09:31]
I'm sure you can imagine a nav, right? So nav there's another one of these kind of, this could be called a div for sure, right? But a nav is like a more specific thing that says, this is specifically for navigation, right, so that a user can get around my website.

[00:09:46]
And then it has an unordered list of links, right? So the first one will take you home, the second one will take you to the Newsfeed, and the third one will take you to the About page, and the fourth one will take you to the Contact page. And this is all grouped together in a ul, which is inside of a nav.

[00:10:05]
And then you end up with something like this, right, Home page, NewsFeed. And then we'll use CSS to make it into a neat-looking navigation. Does that makes sense? Cool. So again, it's obviously not styled, we'll get to the styling part of it later. The thing that I want you to focus on is the content of being the links that go different places.

[00:10:33]
Another question someone might ask is, what does slash mean here? If you put slash here, if I click on this Home link, it'll take me to whatever the root of the domain is. So in this particular case, it'll be to btholt.github.io, which is a totally different website. It actually just has like videos from me, right?

[00:10:55]
But that's unrelated to this website. And then if I go to NewsFeed, /newsfeed, this is going to go to btholt.github.io/news. So that means go all the way back to the domain and then start the domain from there. Does that make sense? So that's what that leading slash means.

[00:11:16]
It means go all the way back to the root domain, and I wanna go relative to that root domain. As opposed to if I put https://www.google.com. By putting, this is called the protocol here, I've now delineated that I actually want to go to a whole new website, a different domain, right?

[00:11:44]
And then just to make this a little bit different, if I put Home here, notice that there's no slash here. It will be relative to where I am right now. So it's gonna try and go to the domain/this/lesson/html. And it's gonna replace organizing html with home, which is nothing at the moment, so you're gonna get a 404 page, right?

[00:12:08]
But it's relative to wherever you are, it's the last slash here. So to try to go to /home instead of /organizing-html, that's called the relative link. Cool. Okay, we didn't give nav a class, you totally can. Home-nav or, Header-nav or something like that. In general though you don't have too many navs there, so it's descriptive unto itself, again, totally up to you.

[00:13:00]
I chose to do this with a ul and li. In general, if I have a list of things and they're the same things, right, so like a list of links, or a list of blog posts, or a list of favorite pets, right, I'll usually use an unordered list to show that.

[00:13:17]
You don't have to, this could just be divs inside of divs. Totally valid as well, totally up to you. If HTML feels kinda like loosey goosey, it's cuz it's super loosey goosey. It's just kind of like whatever you make sense to you. You get to have a lot of preference here, it's another way of saying it.

[00:13:41]
There's no magic way to name classes. So none of these classes have any special meaning, right? I could have called them literally anything. It's just something that makes sense to you. The only thing being is that they have to be, one, they're not case-sensitive. So if I put like nav-list, I don't know, we're putting random capital letters.

[00:14:09]
It's case insensitive, so it doesn't matter. So just always do lowercase. That's kind of like what people do is they just always use lowercase. And then obviously if I have nav space list, that's two different classes, not one class,so you have to use the dash. You can use underscores but everyone uses dashes And naming things is hard.

[00:14:42]
Don't worry, that's just true for everybody. So, Yeah, Mark?
>> Why do we not need the file extension HTML in the path?
>> So notice here like I have organizing-html and it's not .html like that, right? Would that work? It would. Interesting, good for you. I was not expecting that to work.

[00:15:09]
Why don't you need the HTML? Sometimes you do, it depends on whatever your web server is doing, right? So in this particular case, I have a toolkit called Next.js, which don't worry at all about that, but that's what I'm using to generate this entire course website. And so the URLs, the links here, right, whatever the address is, which another word for that is URL.

[00:15:38]
The URLs that it generates don't have .html at the end. So therefore you don't have to use them, apparently it works both ways, but in my case, it doesn't need them. In other cases, you will need that .html because, it's just referring directly to the file on disk or something like that, it'll actually expect that .html to be there.

[00:16:00]
So it's a little unspecific, I'm sorry, it's kind of a hard question to answer. It just depends on whatever your server is, whatever is giving the HTML file to the client at the end. Whether expects the .html or it does not, right? I guess a good example that is the address of a house, right, when do you put North in an address, or when do you put avenue in an address or not?

[00:16:26]
The answer is you put in whatever you have to, to get it delivered to the end person. Whatever the postmaster recognizes, that's what you're gonna put in there. Same thing here, whatever your postmaster, whatever your server expects, that's what you're gonna put in there. And it can be arbitrary to whatever the postmaster expects or whatever your server that you're using.

[00:16:45]
Whether that's PHP, or Ruby on Rails, or just an Nginx, or any one of those technologies expects. And I can't really be any more specific than that, it really just depends on, you have to take another course to figure out which one for whatever server you're using is.