Head & Meta Tags

[00:00:00]
>> So, good news. That's basically all of the HTML knowledge that you're gonna need, To be an intermediate web developer. There's more tags to learn. There's more strategies, there's more opinions to be had, but the bare bones of what you need for HTML is mostly there. The last thing that I'm gonna to show you here is, I've shown you the content part of it, but I'm gonna show you the structuring part of it, which is the head tag and the meta tag.

[00:00:38]
So I've been showing you the visceral, the display part of HTML, but there are some of it that are like meta tags, for example, you can say what's the title of the document, right? So up here, I had this head and meta tags right here on this tab.

[00:00:54]
And I also have this nice little icon there, those kind of tags that say, here's meta information about this website, those get put here in the head tag, right? It's all the information about the document that doesn't necessarily get displayed. So what we're gonna do is I want you to go open your VS Code.

[00:01:17]
And I'm gonna open my VS Code. So I have here just a brand new instance of VS Code. And I'm gonna create a new file. So you can either do File > New, or you can hit Command+N or Ctrl+N. And then I'm gonna hit Save, so you can hit Command+S, Ctrl+S or File > Save As.

[00:01:44]
And I'm just gonna go on my desktop, you can put this wherever you want, make a new folder. And I'm gonna call this my blog, Okay? In my blog, I'm gonna make a new file and I'm gonna call it index.html. Why index? It just a convention that whatever the root of your project is, we just call it index.html.

[00:02:08]
Doesn't have to be, you could call it something else, but the main page is always called index.html, okay? I'm gonna save that. And now I have a, Root file in my project. This is now gonna be the root of your project. So I'm gonna help you kinda get started with your project.

[00:02:42]
So the very first thing in every HTML document is you have to tell the browser this is the flavor of HTML I'm giving you. So you do a angle bracket, an exclamation point, and then you type DOCTYPE in all capital letters. And then here's where you tell what kind of document type it is.

[00:03:04]
You're just gonna say it's just HTML. This lets the browser know, I'm getting HTML 5. I'm getting the latest revision of HTML. And there's a myriad of other types of doc types that you never have to care about, 100% of the time, just put this one. I'm also gonna show you a shortcut and how to generate all this for you so you don't have to remember it, cuz I cannot.

[00:03:33]
I have my notes up here with it on. Okay, the next thing is you're gonna put in just this overarching HTML tag and then you're gonna wanna tell what language it's in. This is useful specifically for Google, so that Google knows that if someone's searching for the English version of this document, give them this one.

[00:03:54]
And this is just a two letter representation of the language. If it was Italian, you'd put it, right? And that way Google Italia would know to index this one instead of the English one. Okay, then here we're gonna have two tags, one is gonna be the head tag, and one is going to be the body tag.

[00:04:22]
So, everything that goes in the head tag doesn't get displayed to the user directly, right? So this is gonna be like, what's the name of the document? How does this handle mobile? What's the character set? The links to my CSS. Other stuff like that. It's kinda like meta stuff that the browser needs to load to make your page display well.

[00:04:50]
So I try to cut this down to the bare minimum of things that you need to get started. We need two meta things. One is here in the head specifically, meta charset="UTF-8". Have you ever heard the term ASCII art before? It's where they'll use letters to make pictures, right?

[00:05:18]
I'm trying to think of an example of that. I don't have any at the moment but you can find them online. A charset, so ASCII is a type of charset. That's the reason I say that. UTF-8 is extended character set that most of us come to rely on day to day.

[00:05:39]
And it's basically the browser, like how do I represent all the characters in this? So if I send a letter B down to the browser, how is it going to interpret that? Or how is it going to represent that? What's the actual zeros and ones that it's gonna use to encode that so that it can display it correctly?

[00:06:02]
UTF-8 is this expanded character set that most of us come to rely on, which includes emojis, for example, right? So if I wanna put directly in here siren emoji, UTF-8 has a representation of that. Whereas if this was ASCII, like this, This would not get encoded correctly, right?

[00:06:27]
Because emojis are not a part of ASCII. In other words, I'm just explaining this to you because someone's inevitably curious about why we put this here, that's why. For everyone else out there that doesn't actually care why we're putting this out, you just always put this and never think about it, which is what I do.

[00:06:50]
Okay, we're gonna put another one here and we're gonna say name="viewport". With the advent of mobile browsers and now we have not only mice that have to interact with webpages, but also touches, like fingers, right? We've had to define new ways of handling web content for mobile users, right?

[00:07:17]
When the browser was invented, it was invented for computers with wide screens and big browsers and things like that. But if you pull up in a website on an iPhone, it's very narrow, right? So we have to tell it how to handle narrow viewports. So you have to say content="width =, ops, inside of this width=device-width, and initial-scale=1.0".

[00:07:51]
This specific character line, if you expect people to use your website on mobile, this becomes pretty important. This is telling the browser of like, guess what browser, I'm gonna handle all of my own mobile stuff myself, do not try and handle mobile for me. Because otherwise, it's gonna to zoom way out and try and fit a desktop-sized web page onto your users' very thin screen and it's gonna look terrible.

[00:08:18]
So that's what this means. Basically, you can just copy and paste these two lines into anything that you're starting, these will just kind of help you get started correctly. Okay, last one, the title is, one, the title is gonna be shown in Google if someone googles for your website, right, the actual name of the website that gets shown on search page results.

[00:08:47]
And it's what gets shown here, right? The complete intro to Web Dev v3, right? So let's move this next to Firefox, there we go. So it's this thing that gets shown here, like Head and Meta Tags, all the stuff that gets shown there in the tab. That's what is put here.

[00:09:05]
So I'm gonna call it My Super Cool Blog. Okay, and then here all your dope web content goes here. That's a comment, if you remember. This is like the bare bone skeleton of a webpage. You're gonna put lots of other things into your HTML, but this is the shell to get started with.

[00:09:50]
Now, I don't expect any of you to memorize this. In fact, I implore you, do not memorize this. I'm gonna show you a fun little VS Code trick to just generate this. So I'm just gonna delete all this. So the first thing to know is that you have to be in HTML mode.

[00:10:08]
So if I look here in the bottom right, it says HTML here, that's how I know I'm in the correct mode. If it's not, you click on it, you can find it in here, HTML, and just set it to HTML, like that. Now that I'm in HTML mode, I can put html:5, and hit Tab.

[00:10:29]
Generates that for me automatically. Very cool, right? It gives you one more line here, this is a specific thing about how to deal with Edge, cuz Microsoft Edge, right, has a bunch of weird stuff about it that I really don't wanna get into and I also don't remember specifically.

[00:10:54]
You can delete the line if you want to, you can leave it, it doesn't matter. It's relatively unimportant now because Edge has finished its migration to Chromium. That means nothing to you, doesn't matter. So you can go ahead and drop that. And there you go. That is a bare bones HTML document.

[00:11:23]
Question so far? Makes sense? So if you open this page in a web browser, in fact, let's just do it, for funsies. What do you expect to see? I put this in my desktop, right, yeah. So all I did is I just said Command+O or you can hit File > Open, right?

[00:11:44]
And I'm gonna open this, what do I expect to see in my browser? Nothing, right? Except it says My Super Cool Blog up here, right? But that's because this is just the bare bones skeleton of a document, doesn't actually have anything to show. And some people find that's confusing, it's like, where did these tags go, right?

[00:12:07]
The browser's reading them, it's understanding them, and then it's applying them, but there's nothing to show to a user here, right? So that's what's happening to it. So again, everything that goes in head doesn't get directly displayed, all that needs to go in body. Head is just meta information.

[00:12:27]
Okay, good, feeling good? Okay. So, Let's make a anchor tag here a href=, and we're gonna send it to about.html. And I'm gonna make an About page, like that. And then I'm gonna make a new document, so I'm gonna hit Command+N here or you can just hit File > New, right, New File, And then I'm gonna save this in the same directory as my blog, and I'm gonna call it about.html.

[00:13:11]
Okay, I now have an about.html, I'm gonna put HTML5, same thing here, and I'm gonna say My About Page. Put an H1 here and say this is about me, and then I'll put another a tag here, href="index.html". Go home or something like that, right? So now what I've done is I've made two HTML documents, an index page, a home page, if you will, and an about page, right?

[00:13:56]
So if I go back over here to my page, you can see now I have a very tiny little About to link up there, and if I click on that, it takes me to my other page, my about.html. If I click Go home, it takes me back, right, back and forth.

[00:14:11]
So that's how you just navigate around a project, right? Does that makes sense? So, That's how you have multiple pages in a project. So just open folder here, There we go. So now I can see both my files in here. And if yours is not showing that, if you click here on the file explorer, you can just say File > Open Folder and just navigate to Blog here and click Open.

[00:15:06]
This will open your Blog folder in your VS Code.