[AUDIO LOGO] BRAD TRAVERSY: Hey, guys. Welcome to the first video of my web development for absolute beginners series. This entire series is meant for anyone wanting to learn basic web design and web development, and there's absolutely no prerequisites. I'm teaching this course as if I'm talking to someone that's never written a line of HTML before, so don't worry about having any kind of prior web development knowledge. This will be an ongoing course or ongoing series, and each video will focus on a different topic. 

So in this particular video, we're going to be focusing on HTML only. Then we'll move on to CSS and possibly some JavaScript. I also want to show you how to upload a website to the internet. 

All right, so just a couple of things before we begin. So I want to stress that this course and this video, this series is for beginners. If you've been a subscriber for a while, I can almost guarantee that you're going to know everything in this video and in this series-- well, maybe not in this series, but in this video at least. If you've been building websites, then you're going to know the basics. I'm doing a series like this because I don't really feel like I have a place to start on my channel for absolute beginners, people that really don't know anything about web development. 

So hopefully my advanced programmers that have subscribed to me can understand that. And just know that this isn't going to be an ongoing thing for the next 20 videos. It's just this series. Also, there's going to be little to no CSS in this particular video. That's going to be covered most likely in the next video. And just to warn you, HTML without CSS is very, very ugly. We're not focusing on the style at all here. We're focusing on HTML syntax. 

So we will be sticking to HTML5. I don't want to confuse anybody by throwing in standards from HTML4 or XHTML or any other derivative, anything like that. So we're going to stick to HTML5 only. So we will be working with examples. We'll be building a cheat sheet, but we're also going to take a look at some slides along the way. 

Now, you're not going to learn HTML or anything for that matter in 5 or 10 minutes. I've actually seen videos called learn HTML in five minutes, and that's just absolute bullshit. If you're going to be a web developer, you have to be patient, and you have to really enjoy learning because you're going to be learning. Even when you land a good job, you're going to be learning every single day. So try and be patient. Try to follow along. 

I know people can get a little aggravated with videos that are over 25 minutes. But if you're that impatient where you can't watch an hour-long course, then you're probably in the wrong profession. And I don't mean to sound harsh or anything, but I don't want to steer anybody down the wrong path. And I really do mean that wholeheartedly. 

So enough with the preference. Let's go ahead and get started. So what is HTML? It stands for Hyper Text Markup Language. And a lot of people just starting out don't realize that HTML is not a programming language at any level. It's a markup language for creating web pages and documents, HTML documents. One of the key elements of a programming language is logic. So you can have things like conditionals, where you can say, if this is true, then do this. HTML, however, doesn't have any of that. HTML is used to just display and format elements of a web page. That may be a text paragraph, or a heading, a bullet list or an image, or many other things. It's strictly presentational. Just try to remember that. There's no logic. There's no actual programming. 

So an example of a programming language would be JavaScript or PHP or C#. These are intricate languages, and they're responsible for things like connecting to a database for an online store or something like that, user login, dynamic functionality, things like that. Now, with that said, that doesn't make any programming language more important than HTML. In fact, if you're getting into web development, HTML, at least in my opinion, is much more important because HTML is the building block of the web. 

Every single site that you see outputs HTML to the browser no matter what kind of advanced programming it uses on the back end. You can build a website using just HTML and CSS. CSS, of course, is a styling language, and we'll get into that in another video. But you can have just an HTML site without any JavaScript or any PHP or anything like that. It will be purely presentational. You can't have an online store or anything with just HTML, but you can have a basic business website with information about the company and so on. 

Now, it is harder these days to get a job with just HTML and CSS knowledge, but you can do it. There are still companies that are purchasing websites that are strictly presentational. So I don't want to spend too much time on this stuff. So let's move on to what we actually need to get started. 

So to get started building websites, you only really need two things. You need a browser to view the HTML, and you need a text editor to write the HTML. Now, don't worry about what kind of computer you have. If you're on Windows, Mac, or Linux, it doesn't matter as long as you have these two things. Everything that I'm doing in this series and in this video is completely cross-platform. 

So for a browser, it can be whatever you want. I'd highly suggest Google Chrome. It's the fastest, and, in my opinion, it's the best for any web developer. But of course, you can use Firefox or Safari or even Edge. Just please, for god's sakes, don't use Internet Explorer. If you're using something less than Windows 10, please download a different browser. So you can also use any text editor you want. Which one is up to you. You could even use Windows Notepad, but I wouldn't suggest it. You want to use something with line numbers and syntax highlighting, stuff like that. 

I'm going to be using an editor called Sublime Text, which is available for Windows, Mac, and Linux. So feel free to download it. I'm going to show you where and how to download it. I'm using Sublime Text because it's very simple. It's very light. When I'm working with other technologies and languages, I usually use something called Atom or Visual Studio Code, but I think that those are overkill for what we're doing here. So before we move on, let's go ahead and install Sublime Text so that we can start writing HTML. 

All right, guys, so you want to go to www.sublimetext.com to get this program if you want it. If you want to use something else, that's fine. Now, this program is free to try. If you want to keep using it, I'd suggest buying a license. If you use it without a license, it doesn't have any limitations or anything like that. You're just going to get a pop up every once in a while that says you should probably buy a license. So let's go ahead and download this. I'm going to click the big Download button here. 

So once that's done, we can go ahead and open it. It's just going to be a simple installer for Windows. And of course, you can grab this for Mac or Linux. So let's go through this. Default location is fine. I'm going to choose to add it to the Explorer context menu. What that'll do is it'll allow us to right click on an HTML file and say Open with Sublime Text. So we definitely want that checked. And then we're just going to install. 

So it should be all set. Let's click Finish. And now we should be able to open it up. I'm just going to search for it down here in my search bar if it opens. And let's just see right here, sublime Text 3. There's also Sublime Text 2, but 3 obviously is the newer version. All right, so this is what a text editor looks like. I'm not going to go through all the features. I just want to strictly focus on HTML syntax. 

So now that we have our editor installed, we can go ahead, and we can start to create our HTML file. So one great thing about HTML is we don't need any kind of special server or hosting company to write and test HTML. You can simply create a file right on your computer. You can give it a .html extension, and you can open it up with your browser. Now, when your site is ready to deploy to the internet, you will need to buy a domain name. You'll need a hosting package, and then you'll need to upload everything to your web host. 

And I'll get into that in a later video. But for now, we can build our site or build our cheat sheet locally without that stuff. So to create an HTML file, it has to have an html extension. You can call it whatever you want. You just have to end it with .html. This will allow it to be displayed correctly in a web browser. 

Now, one thing to remember is that your home page should always be called index.html. If you go to a domain like, let's say, www.something.com, and you upload a file called index.html, that's the file that's going to show on that root domain. If you upload a file, let's say, about.html, that's going to show when you go to something.com/about.html. So the index file will always be the root file or the home page, unless, of course, you're messing with server settings and you change it. But by default, that's the behavior. It's going to look at index.html. 

All right, guys, so we're going to go ahead and create our first html file. Now, I'm going to put this in a folder. So I'm going to create a folder. And I'm going to call this htmlcheatsheet. And then inside that folder, let's create a new file by going to New Text Document. And we're going to call this index.html. And we'll just say yes, we want to change the file extension. And notice that mine has a Chrome icon by default because Chrome is my default browser. And that's what opens up the HTML files. Yours may be different. 

Now, if you're using Windows, you may have an issue where you don't see the .html. If you're not seeing that, what you want to do is you want to go to View, Options, Change Folder and Search Options. And you want to go to View. And then down here, you want to uncheck "hide extensions for known file types." You want to make sure that's unchecked. And then click Apply. And then you're going to see the extension. And it may say something like index.html.txt. Just make sure you get rid of the .txt. I'm sure most of you know that, but just in case there's people that don't. 

All right, so what we want to do now is we want to open this with Sublime Text. So we can actually just right-click and say Open with Sublime Text. Let me just bring it over. It opened up on a different screen. And that's going to open it up. You can see up in the tab it says index.html. Now, another thing you could have done is you could just go to File, Open, and you could find that on your computer, that HTML file and open it. 

So now that we have that open, what I'm going to do is just type in Hello World here, just text, no tags or anything yet. And you want to make sure you save it. So you can either go to File, Save, or you can just hit Control-S, which is what I would suggest. It's much quicker. And then it saves. Now what we want to do is open it up. So let's go ahead, and let's open it up with Chrome. And that's the default. So all I have to do is double-click. And then that's going to open it up in the Chrome browser. And you can see it says Hello World. 

All right, so even if we put just text in here with no HTML tags at all, it's still going to show the text in the browser. Now what I'm going to do is just snap this to the edge here. And then we're just going to open up Sublime Text on this side. I'm going to make Sublime a little bit bigger than the browser for now just so we can see everything, all the code. 

And I just want to talk a little bit about HTML tags. So an HTML tag is the basic building block of any web page. Different tags format the way that information and text is displayed. So element names are surrounded in angle brackets or greater than and less than. Symbols and tags usually come in pairs. One is a start tag. One is an end tag. If we look over here, we have the start tag, the end tag, and then we have content in between. 

In this example here, we have About Us as the content or the text. And it's surrounded in H1 tags, which stands for heading 1. And I'm going to get into the specific tags later on. Here's another example with a paragraph tag. And we just have the text, "This is a paragraph." Now, notice with the br tag here, there's no opening and closing. It's just one tag. This is called a self-closing tag. And these are basically tags that don't have any content within them. 

Notice that the slash is actually after the element. So we have br slash. It's after. And this is an HTML style. So we don't really need to do this in HTML5. You can if you want, but you can just use just simply br. And br is a line break tag. So it's just basically going to push it down a line. And there's no reason to have any content like this inside of a line break. So that's why it's considered a self-closing tag. 

All right, now there's a very specific structure to an HTML document. So this is a quick diagram I just want to look at. You'll see that we have everything is surrounded in HTML tags. We have the start and ending tag. Inside that, we have a head area, and we have a body area. Now, the head has nothing to do with the output that's in the browser. The head has things like the page title. It has things like links to CSS files and JavaScript files that you want to use, metadata such as the description and keywords, things like that. 

The description and keywords are actually used by search engines like Google so that it knows some more information about what's actually on the web page. And then in the body, we have the actual markup that's going to display in the browser-- so headings, text, images, things like that. 

Now, this is an example of a very simple web page. Notice that we have the HTML tags, the head, the body. We also have this thing at the top. This is a DOCTYPE, and it's not technically an HTML tag. It's just a declaration. And it should always be the first thing on the web page. And what this does is it tells the browser what type of HTML this is actually written in. Now this is the standard DOCTYPE for HTML5. Let's take a look at some of the other ones. 

So as I said, this is HTML5. If you were using HTML 4.0 or 4.01, it would have to be a DOCTYPE like this. And you start getting into different types, whether it's strict or transitional. And it can get very complicated. Same thing with XHTML. I'm not going to get into that, because I don't want to confuse you guys. We're going to just stick with HTML5. Just know that other DOCTYPEs are a lot more complicated. 

All right, guys, so we're going to get started on the structure of our HTML document. So I made this bigger so there's no doubt that you guys can see this. I'm going to get rid of the Hello World here. And like I said, the first thing we want to put in here is the DOCTYPE. So we want to put an angle bracket, or a less than, and then an exclamation. And then we just want the word DOCTYPE, usually in all caps, and then html, and then the closing bracket. So this is the official DOCTYPE for HTML5. 

After that, we want to put in our HTML tags. That's going to wrap everything. Now, notice in Sublime, when I put the angle bracket and then as soon as I hit the backslash-- or I'm sorry, the forward slash, it actually gives us the ending tag automatically so we don't have to type it out. Another thing we can do is, let's say, for the head tag here, we can just put the text "head" and click tab. And it'll give us both the beginning and the end tag. So just a helpful shortcut in Sublime and most text editors at that. 

So in addition to the head, we need the body. So let's go ahead and put the body tags in. now in the head, all I want is the title. So let's go ahead and do that. And we'll say HTML-- I can't spell-- Cheat Sheet. Save that. And then over here, I'm going to reload. And notice there's nothing in the actual browser here because we have nothing in the body. But if you look at the tab, you'll see it says HTML Cheat Sheet. So whatever we put in the title here is going to show in this tab. 

Now, a lot of times when you're building websites, you're going to want to see the exact source code that's running in the browser. And for that, we can do a Control-U. And this is going to show us the exact HTML that's being parsed. Now, what we're doing here is building just a static HTML site. So it's going to look exactly like this. But when you're using languages like, let's say, PHP, where you have dynamic programming, that's kind of generating the HTML for you from variables and things like that, this is very helpful because you can see the exact HTML that's being parsed. And you can't see it in your actual code. 

All right, so another thing that is very helpful in Chrome and other browsers is the developer tools. So if we hit F12, we get this little console down here. And there's different things here. There's the JavaScript console. There's networking so you can see what pages are loading and so on. There's a lot of advanced stuff here. But for now, we're just going to look at the Elements tab, which just shows the HTML. We don't have anything in the body, but if we did, we could hover over things, and it'll actually give it a highlight up here, which is very helpful. And you can even edit stuff down here, which I might get into later. 

It's not going to stick if you edit down here, but it will until the page is refreshed. So let's go back to our body over here. And we're going to start to look at some tags. So we're going to start with headings. Now, before we go into tags, I just want to mention comments. So with HTML, you can have these comments with the less than exclamation and then two hyphens. And then let's give this a comment. We'll just say this is where our headings are going to go. And then we want to end the comment with double hyphen and then greater than. Now, this is not going to be parsed by the browser. If I save this and reload, you're not going to see it show up here, because it's a comment. It's treated as-- it's just for the developer to see. 

Now, when it comes to headings, there's six different tags we can use. We have H1 through H6. So let's go ahead and put an H1 in here. And I'm just going to say Heading One and save. And let's reload. And notice that it gives it a bigger text. So the browser by default has some core styling in it. And an H1 is going to make the text bigger. It's also going to add some padding around the edges so that the next piece of content will be pushed down a little. 

So that's an H1. And that's the biggest heading there is. So let's take a look at an H2. So we'll say Heading Two. Let's save that. And you'll see that it's a little smaller. And notice the padding in between the two. All right, so what I'll do now is just copy this. And let's do 3, 4, 5, 6. So this will be an H3, 4, 5, and 6. This will be 3, 4, 5, and 6. And then I'm just going to change these as well. 

I want you guys to have this to look back on if you need it. Whoops. two, three, four, five, and six. So let's go ahead and save and reload the browser. And you'll see the different sizes of the headings. Now, you can change the sizes of these texts through CSS, which we're going to get into probably in the next video of the series, where we can change the font, we can change the size, whatever you'd like. You could even make all of these headings the same size through CSS. 

So the next thing we're going to look at are paragraphs. So let's put a comment here. We'll say paragraph. And a paragraph is just p. It's just a p tag. Now, I'm going to give you a little hint. In Sublime, if you ever want to generate dummy text, which is just kind of just sample text to use for development, you can actually just type in "lorem," the word "lorem," and then tab. And that's going to give you some lorem ipsum. 

Now, if you wanted a certain amount of words, like, let's say we wanted 10 words, you could say "lorem10," tab. Whoops. I guess you can't do that in Sublime. I actually haven't used Sublime in a while. I usually use Atom or Visual Studio Code, and you can do that there. I'm not sure why it doesn't work here. But anyways, we'll just generate some text. And we'll save that. 

And a paragraph, just like the headings, has some default styling. So for one, it has a display block, which means it's a block-level element. So if we were to take another paragraph and go ahead and paste that in and reload, you'll see that it's automatically on a new line. It also has some margin. It has, I believe, one E-M of margin, or one em. And em is a measurement in CSS, just like pixels, except it's used for more responsive stuff. 

So if we hit F12 and look at the developer tools-- I'm just going to make this a little bigger-- and we look down in Elements, now you can see we can hover over everything, and it'll show us it up top. And if we look at the paragraph here, and I just click on it, over here, you'll actually see any CSS or any styling that is associated with this particular paragraph or whatever tag we're hovering over. 

And when you see this user agent stylesheet, this is the default browser styling. So you can see a paragraph is displayed as a block. So it's block level. And then it actually has some default margin. Now, I'm not going to talk about margin and padding and stuff too much in this video, because this is strictly HTML. Margin and padding is CSS. So this is going to be very little to no CSS in this video. But just know that margin is spacing around the element. 

And you'll see that this before and after is actually the top and bottom. So that's why you see this space right here. It's actually one em, or one E-M, which is a measurement in CSS. So we do have margin on the top and bottom by default. And then 0 pixels on the start and end, which is the left and right of the paragraph. And it even gives us a little diagram here. You'll see we have the paragraph. And if you look up in the body, it shows it highlighted. Padding, which there isn't any, border, and then the margin. And you'll actually see the margin highlighted up above. So this is really helpful. Again, I couldn't imagine doing web development without the Chrome tools. 

Now, tags can either be inline or block level elements. So inline tags-- or inline elements do not start a new line when you use them. They take only the necessary width they need. Block level elements, however, start a new line, and they take the full width of that line. So if this is confusing, don't worry about it. I will give you some examples. Block level elements include tags like div, headings H1 through H6, paragraphs, form. Inline elements include spans, images, links. And I'm going to go over all this stuff in a little bit. But just know that some tags are block level, some are inline. 

So let's go into our paragraph here. And I'm going to add some other tags here. And these are all going to be inline. They're not going to make us start a new line when we use them. So let's take a look at strong. So strong is basically you want to surround something and say that this text should be strong in some way. Now, by default, it's going to be bold. So if we save this, and I reload, you'll see that the text we surrounded the strong tags with is actually going to be bold by default. 

But that doesn't necessarily mean that it has to be bold. You can grab onto this from within your CSS, and you can change the font size, you can make it italic, whatever you want to do. Just know that it's a semantic tag for making the text stick out. And this will usually replace the old bold tags, which are not semantic at all and not recommended anymore. 

Same thing with em. So em is for emphasize. So let's surround this text right here with em. And we'll save and reload. And again, by default, it's going to be-- oops, let me put a space there. By default, it's going to be italic. So you'll see right here. But again, you can grab on to this in CSS. And you can change it to whatever style you want. It just basically means that this part of the document should be emphasized, or this text should be emphasized. 

All right, so now let's take a look at links. So what I'm going to do is I'll go-- let's go to the second paragraph here. And let's say we want to wrap this text in a link to go to either another page on our site or an external website. So a link is actually an "a" tag. So let's say "a." We're going to give it an attribute. And I'm going to talk about attributes in a second. But let's surround this text here. 

And then if I save that and reload, notice over here, we now have this text as a link. Now, the href attribute is going to be the location that we want this link to open. And this could be either local. It could be, let's say, if we had an about.html page on our site. Or it could be external. So if we want to put http, we'll say google.com. And if I save that, we go over here, and we click on that link, it's going to open google.com. 

Now, notice it opens it on the same page. Usually, when you have an external website, you don't want the user to just leave your site like that. So what you could do is you could add another attribute called target. And one of the values for this is _blank. And that's going to open up a new tab with this site. So if we save, reload, and click this, notice that Google opens on a new tab. And we still have our site right here. So it stops the user from having to leave your site. 

And you usually only want to use target blank if it's an external site. If you're going to another page on your website, you don't want that to happen. You don't want all these tabs opening up when you're just navigating the site. 

So all HTML tags can have something called an attribute or multiple attributes. And what they do is they provide more information about a certain element, for instance, the href provided in the link, what we just did. We created an "a" tag with an href. And what the href does is, as you saw, is it opens up-- or it directs it to a certain location, a certain website link. We also provided the target attribute, which is not required, but it still allowed us to make it so that the link opened in another tab. 

Now, attributes are always placed at the start tag, and they're always formatted as key value pairs. The actual attribute itself, such as href or target, as we saw, that's the key. And then whatever the value is. So we have the attribute name or the attribute key and then the value. Now, the value is always going to be in quotes. You can use double quotes or single quotes. I would suggest double quotes because that's usually what's used. That's the most popular. 

All right, guys, so let's get back to our HTML. So we're going to go below the paragraphs that we just created. And now I'm going to show you something called a list. So there's basically two kinds of lists. There's an unordered list and an ordered list. So let's start with an unordered list, which is a ul tag. So in the ul, we need to have list items. A list is basically like a bullet point list. So each list item is going to have an li tag. And then in here, we can put whatever we want. Let's just put the text "List Item 1." 

And then I'm just going to copy this. And we'll go ahead, and we'll put four of them in. So we'll say List Item 1, 2, 3, 4. And it doesn't matter what you put inside here. But let's go ahead and save that and reload. And notice that we have bullet points now for our list items. It also adds some default padding. Notice that this is pushed over by default. And if we go ahead and open up our Chrome tools. Actually, let's make it a little bigger. There we go. 

So over here, let's hover over ul. And you'll see that there's actually some default styling from user agent stylesheet, which is basically just the browser default. So it's displayed as a block. It has a list style type of disc, which you can change within the CSS if you want to have a different kind of bullet point. It adds some margin. Actually, yeah, it adds margin before and after, 1 em. And then it also adds 40 pixels of padding on the start, which is the left. So it pushes it over 40 pixels. 

And of course, you can overwrite this from within your CSS if you want to change that. You can also remove the bullet points. You can do whatever you want as far as styling. But we're not getting into that just yet. 

So that is an unordered list. Now, we also have an ordered list, which is an ol tag. So what I'll do is just copy this, and I'm just going to change it to an ol instead of a ul. We'll save that. Reload. And notice that the ordered list now gets rid of the bullet points and replaces it with the numbers. So it'll automatically add numbers to your list. 

Now, unordered lists are usually what's used for website navigation. When you see a nav bar up at the top, that's usually just an unordered list. It's just styled so that the elements float to the right. They're displayed in line, and it has some really nice background colors and things like that. But as far as the HTML goes, it's usually just a simple list. 

So next thing we're going to look at are tables. So let's put a comment here, and we'll just say table. So it's going to be a table tag. And there's quite a few tags that go into building a table. So we have table. And then we have a head, an area for the heading, and then an area for the table body. So we say thead. And then we're going to have tbody. 

Now, in the heading is where we're going to put the row that has the-- if we're going to have a name, email, and age column. So these will be the headings of each column. So we're going to put a tr. Tr is table row. And then each heading is going to have a th tag. So this will be, let's say, name. We'll put another one. This will be email, and let's say age. So these are the headings. 

Now, if I save this and reload, this is what it's going to look like by default. Now, I'm going to do something here because I don't want you guys to have to keep looking at the bottom of the screen. So what I'm going to do is just put in a div right here with a style attribute. You don't have to do this. I just want to move this stuff down. I'm just going to put a margin top of 500 pixels. And that's just going to make it so that I can put this-- so you guys can look in the middle now, not at the bottom. All right, so back to our table. 

We have our thead with our table row and our headings. Now we want another tr. And this time, we're not going to use th, because these aren't headings anymore. This is actual data. So we're going to use td. So let's say we want a name. I'll just put my name. And then we'll put another td with an email. We'll just say brad@something.com. And then we'll put age. I'll put 35. Save that, reload. And now we have some data inside of our table. 

And you're most likely going to have more than one row. So what I'll do is copy that. Oops. Paste it in two times. And let's just change the name up here. We'll say John Doe. And we'll say 45. And then let's change this. We'll say Sarah Williams. And we'll make her 25. So we'll reload, and now we have a couple names. 

And again, this is going to look very ugly because we don't have any CSS whatsoever. It's just HTML markup. And this is what a default table looks like. Now, the way that we build HTML websites has changed along the way, along the past few years. We used to use tables to actually create website layouts. For instance, you'd have a sidebar and then a main area and then another sidebar. And that could actually be a table with a couple columns. That is not recommended anymore. You don't want to use tables for anything for your layout. You want to use tables for tabular data only. 

So if you have a list of customers with their names and info like this, that's fine to use a table. But do not use it for your layout. You want to use CSS for your website layout. That's very 1999ish to use tables for layouts. And there's little rules like that. They're not enforced by the browser per se or by the technology, but there's a right and a wrong way to do things. 

And I'm a big advocate for doing things differently and everyone not being the same, but some things are just wrong. And using tables for layout is wrong. 

So now we're going to move on to forms, which you see a lot of on the internet. Now, the important thing to know about forms is that with HTML, we can create the actual look of the form, but we can't add functionality to the form with HTML. For instance, a login form, you can build the actual look of the form with HTML. But to actually make it function, you need to have something like PHP or some other programming language with dynamic functionality. 

So we're only covering the look of the form. So we're going to put in a form tag. Now, usually with a form, you'll see an attribute called action. And that's going to basically submit the form to a certain page, for instance a PHP page. So let's say it was going to go to a file called process.php on our server. And maybe that would be a newsletter form or a register form, something like that. 

You'll also see method. And method is usually going to be post for a form, this meaning that we're making a post request to the server. And posts are used to do things like add data to a database, stuff like that. It's pretty secure as opposed to get, which is going to submit it. And with a get request, you'll actually see the data filled in the URL, and it's not very safe. But it's fine for things like search, things where you're not actually adding data or something to a server. 

But that's a lot more advanced, so we're not going to get into that now. I will leave this here, but just know that this has to do with more advanced server-side programming. 

So in our form, let's go ahead and let's add a label. So we're going to have a couple inputs. We're going to put a label for, let's say, First Name. And then under that, let's put an input tag. So an input is going to have an attribute called type because there's a lot of different inputs. This is actually going to be a text input, which is probably the most common. 

And then the name attribute has to do with, again, server-side programming. If we were submitting this to a PHP file, this name attribute is how we would grab the value of this form that's submitted. So it's not going to make any difference to us what we put here. But I'm just going to put first-name. So let's go ahead and save that and reload. And this is what we get. 

Now, this is awfully close to the table. So what I'm going to do is put a line break here. Usually to separate things like this, we would use CSS. But I'm not getting into CSS yet. So let's just put a line break. That's going to push it down a little bit. We also have an hr tag, which I haven't talked about yet, which is a horizontal rule. And that gives us kind of a line in our browser-- in our page. So if I reload, you'll see we now have a line that goes across the page. I'm just going to put another br under it as well. So it just separates-- allows us to separate things. 

So let's create another field here in our form. Let's do a last name. So what I'll do is copy this, and let's just change this to Last Name. Actually, you know what? Usually what I do here is use camel case. So we'll go like this instead of the hyphen. Camel case is basically starting it with a lowercase, and then every other word, every word after that is going to be uppercase. So now we have a first name and a last name. If I reload, you'll see it down here. 

Now, labels and inputs are both inline. That's why they're on the same line here. And they only take up the amount of width that that element takes up. Usually, you'll have form fields on separate lines. So what I'm going to do is wrap them in a div because, remember, divs are block level elements. So that'll actually put it on the next line. So let's do that. And then we'll put a div here, wrap that around both the label and the input 

So now if we reload, now they're on separate lines. They're still pretty close together. Like I said, we would use CSS to add some padding there. But I'm just going to put a line break in between the two. All right, so let's look at some of the other types of field. Now, you may want an email. So let's put a line break there. So for email, you could, of course, use text. I'll just change this. 

You could use text, but with HTML5, we now have a type that we can use called email. And that will actually add a little bit of validation without having to add any JavaScript or anything. If we try to submit our form and it's not a valid email address, and we have the type of email, it's going to give us a little error that pops up. So you want to use type email when you're dealing with an email address. 

So let's copy that. And let's put, let's say, Message. So what I want to do here is I want to use a text area, which is kind of a bigger text input. So for that, we don't actually use an input tag. There's an actual text area tag. So we'll go like that. And usually, your text area, if you're submitting to a server side file, you'll have a name. So we'll call it message. 

We'll save that, reload, and now we have a text area. And you can actually make it bigger and smaller with this little control here. Another field that you'll see quite a bit is a select list. So for that, I'm just going to copy this div. So let's say this is-- I don't know, we'll just say Gender, I guess. So let's say we want a select list to choose either male or female. 

So we'll put a select. We'll give it a name of gender. Now, each select is going to have-- it's going to have a couple options. So that'll be the option tag. And then usually, you'll have a value associated with each option. So let's say male. And then the actual text to be displayed will go in here like that. All right, so let's save that-- I mean, copy that. 

And just to be politically correct, we'll go ahead and do an other. So this will be female, and this will be other. All right, so if we save that and reload, now we have a little select list with male, female, other for gender. 

All right, now, we have a couple other field types that I want to show you. But I'm just going to paste these in because they're kind of running out of time here. So I'm going to go right into this div, and I'm going to paste in a couple more. So this is actually a number type. So we're putting an age here with the type of number. And it has a name. And then I also added a value here because we can also add a predefined value to our inputs. 

And then we also have the type of date. So this is actually a date selector. And these are HTML5. So these are both HTML5 standards. So let's save that and reload. And now you'll see we have a number. And it actually has these arrows where we can switch. We can make the number go up and down. And then the date, you'll see we have this date selector. 

Now, like I said, we can have a value. We can put a value to anything we want here. Now, before HTML5, if you wanted to have-- for instance, we'll put a value here, and we'll just say-- let's say we want it to say "Enter first name." And reload. Usually, before HTML5, we would have to do this, and we'd use JavaScript to make it so that when we clicked in here, this would go away. And that was a real pain in the ass. 

So with HTML5, they actually added a placeholder that we could use here. So we'll say placeholder equals "Enter first name." And now you'll see that it's grayed out. And if I click in here, we can actually replace it. So that made things a lot easier. So the last thing we would need for the form is an input button. 

So let's go down to the bottom here. And what I'm going to do is put in an input. And we're going to say type submit. And we'll give it a name of submit. And it's also going to need a value, which is going to be the actual text of the button, which will be Submit. So we'll reload, and now we have a Submit button. It's going to actually get submitted to process.php because that's what we put in the action of the form. But that doesn't actually exist. 

Now, we can also have buttons outside of forms. So let's go under the form. I'm just going to put a comment here. And there's a button tag. So we'll put a button tag here, and we'll just say Click Me. Now, this isn't going to do anything. If we reload, it's going to show the button, but it's not going to do anything, because in order to hook up a button to actually do something, you need to use JavaScript. So what you would do is you would add an event like click equals and then you have some function, but we're not going to get into that. That's something for another video. 

We're just focusing on HTML here. And as you can see, HTML doesn't really do much as far as functionality and dynamic. That's why it's not a programming language. It's a markup language. It's just used to display stuff on the screen. And then you use other languages like JavaScript to make it dynamic. 

All right, so the next thing I want to look at are images, so the image tag. So for images we're going to use an img tag. And this is actually a self-closing tag. We don't need to do slash image or anything like that. You can see it doesn't even-- Sublime Text doesn't even do it for us automatically. Now, an image tag by itself means nothing because it doesn't know what image to load. So let's go ahead and grab an image. I'm just going to search for sample image. We'll grab this bird here. 

Whoops, didn't mean to do that. We'll just save it. And I'm going to save it into-- where is this? I think it's on my desktop. Yep, HTML Cheat Sheet. And let's save it as just sample.jpg. And then what we'll do is go to our image, and we'll say source, source attribute. And we're going to set this to the name of the image, which is sample.jpg. And then we'll go back to our HTML, reload, and now we have the image. 

Now, the reason it knows where to look is because this is actually in the same folder as our index.html. So we don't have to put any folder names or anything here. So what I'm going to do is open up our folder. And you can see that it's in the same file. It's in the same directory. So usually, when you build websites, you'll have a folder called images or img or something like that, and then you'll have your images inside there. Now, if I reload, it's not going to show the image because it's looking in the root here. But it's really in the images folder. 

So what we would have to do is change the location here to go to images/sample.jpg. And we reload, and now it's back. All right, now, with images, you should also use an alt attribute. And basically what this does is if it can't find the image, it's going to display whatever text is here. So let's just say "My Sample Image." 

Now, if I save and reload, we're not going to see any difference. But if for some reason it can't find the image-- let's just change the name and save and reload-- now you'll see that it'll display the text. So you see you have a way to show what this image is even if it doesn't load or it can't find it. Let's just change that back. 

Now, there's also a width and height attribute you can use in HTML. Usually, I would suggest using CSS to do this stuff, but it is available. So let's say we wanted this to be, let's say, 200 pixels, and reload, it'll change it to 200 pixels. Notice that images are also inline. That's why it's not on a new line. So what I'm going to do here is just put a line break. Oh, we have to put another. Oh, I put it below the image. 

And notice that the height is set to auto. So the height is auto. So the image still looks good. But if you wanted to change the height up, you could do that as well. So let's say change it to 50 and reload. And it'll distort it, but it will change it to what you set it to. But I'm just going to keep the height-- I'm just going to get rid of the height so it's auto. 

Now, if you wanted to, you could wrap a link around the image. So let's put an "a" here. And then you could actually point to the location of the image. So we'll just grab this, put that in the href, and reload. And now if I click on the image, it's going to open it up in the browser. Browsers don't just open up html files. They can open up other types, such as an image. 

So we're almost done with the basic HTML tags, and I want to move on to HTML5 semantic tags. But the last thing I want to show you is quotations. OK, so we have different quotation elements we can use. Let's say quotations. And those are blockquote, abbreviate, and cite. So let's start with blockquote. And this is usually used just for that, for some kind of quote. 

So let's put in a blockquote tag. And this takes an attribute called cite. And this is going to be from where the quote comes from. Let's say it comes from traversymedia.com. And we'll just put some sample text in here. I'll say lorem tab, and we'll save that. And you'll see that it does add a little bit of styling. It gives it some padding and pushes it to the middle a little bit. 

It's not going to show the actual site. If we look at the source code it will. So if we go down right here, you'll see it does show it here. And you can style this however you want from within CSS. We also have the abbr tag, or abbreviation tag. So let's say we have a paragraph here. 

And we'll say, "The WWW is awesome." All right, now, this, we all know stands for World Wide Web. So what I'm going to do is just wrap this in an abbr tag. And we're going to give it a title, and we'll say World Wide Web. So it's used for abbreviations. So let's go ahead and save that, reload. And now notice that it has an underline. And if we go-- when we hover it, it'll show us the full title. 

We also have a cite tag, C-I-T-E. So let's put another paragraph here, and let's say "HTML crash course by Brad Traversy." OK, and then we'll just wrap "HTML crash course" in a cite tag. We'll save that, reload. And it gives us this italic style here. 

And it's semantic to let the browser know that this is something that's being cited. So those are the basic HTML tags and elements. Now what I want to do is talk a little bit about HTML5 semantic tags. So the HTML5 semantic tags clearly describe their meaning to both the browser and the developer. So if we look over here, these are the tags that were added. And this is a diagram of what you would use these for. You use them to lay out your website. 

So we have header, which obviously would be the header. You'd usually have your logo, things like that, your social media links. Then we have the nav tag, which would be your nav bar. Section, section would describe the copy text or something like that on your home page or whatever. And then if you have a blog, you could have an article tag around each post in the blog. Aside has to do with, like, sidebar content. And then you have the footer, which is going to be your copyright or your privacy policy links, things like that. So HTML5 created these tags to structure your document even further. 

All right, guys, so what we're going to do is we're going to create a new HTML page. And we're going to use these HTML5 semantic tags to map out our page. So let's go to, let's see, htmlcheatsheet folder. We have our index page, but I'm going to create a new text document. And I'm going to call this blog-- yeah, blog.html. So we'll say that this is a blog post, a blog page, or a news page, something like that. 

So let's open that up with Sublime Text. Just bring that over. And just like with the index page, we need to have our DOCTYPE, our html, head tags, things like that. Now, with Sublime Text, there's actually a shortcut we can do, and that's to do html, tab. And it'll give us kind of a default structure. So just a nice little shortcut. 

Now, in the title, let's just say-- we'll just say "My Blog." We're going to add some other stuff in the head in a little bit as well. But let's go ahead and start with our HTML5 semantic tags. So first thing we're going to do is have a header. And in the header, we're just going to have an h1. And we'll just say "My Website." Again, this is going to look very ugly because we're not using CSS. But just structurally, you want to have your header at the top. 

Then what we'll do is have a section. So this would be, like, the main area of the page. So if this were an About page, we could have a couple paragraphs about the company or whatever. This is a blog page. So what we're going to do is we're going to have some article tags. And then in each article will be each blog post. So let's go ahead and put an h3 here. That would be the title. We'll just say "Blog Post One." 

And then a tag that I haven't showed you yet is the small tag. And small is usually used for create dates, things like that, just like subcontent. So let's just say "Posted by Brad on July 17." So let's save that and take a look real quick. So we're going to go up here in our browser, and we're going to just change index.html to blog.html. 

That's what it's going to look like. And by default, the small tags will actually make the text smaller. So let's put the actual post, which we'll put inside of a paragraph. So I'm going to type lorem, tab. It gives us some sample content. And then, usually, on your main blog page, you'll have more than one article. What I'm going to do is I'm going to give this a class of post. So each article will have a class of post. And then let's just copy this, and we'll just paste in a couple more. This one will be "Blog Post Two" and "Blog Post Three." 

So if we save that, reload, now we have a couple blog posts. You may also have a link at the bottom of each one that goes to the full post. So let's just put-- we'll put an "a" tag, and it will go to something like post.html or something like that. And then we'll say "Read More." And then let's just copy that and put one here and here. 

And since a paragraph is a block level element, it's going to go on to the next line. Even though an "a" tag is inline, since the one before it is a block level, it's going to push it to the next line. Now, you may want to have some kind of sidebar on your page with, let's say, the blog post categories. So what we'll do is go outside of the section, and we're going to put an aside or aside, whatever you want to call it. 

And then in here, let's say these are categories. So we'll put an h3. We'll say Categories. And let's put a ul with some li's with some links. So let's say this-- we'll just put these two to go to a number sign, which basically just means the same page we're on. It's not going to go anywhere. So we'll say Category 1. We'll copy that, and we'll say Category 2 and 3. 

And we'll save it, reload, and now we have our categories. Now, usually, you'd use CSS to probably float these to the side rather than have them down here. But that's something we'll get into later. All right, now, usually, when you have some kind of navigation, you want to use the HTML5 nav tags. So what we would do is just surround the ul in the nav. And we can grab on to this within the CSS and style it if we want. 

And then, finally, we're just going to have the footer. So let's go outside of the aside and put in a footer tag. And we're just going to put a paragraph. We'll say Copyright. Now, within HTML, you also have these entities you can use or symbols. And there's different codes for each one. So for a copyright, we can do ampersand copy semicolon. And that'll give us a copyright symbol. We'll say 2017, and we'll just say "My Website." OK. We'll save it, reload, and now we have "Copyright 2017, My Website" as our footer. 

Now, sometimes, you may have more than one header and footer, so it's a good idea to give these an ID or a class. So in this case, I'm going to give it an ID of just "main-header." And same thing with the footer down here, we'll give that an ID of "main-footer." Because some people might actually use, for instance, the title of a blog post, the title and the date and stuff. They might wrap that inside of a header. It doesn't necessarily mean it has to be your main website header. 

Now, I really don't want to get into CSS in this video, but I will add just a couple simple styles to the header. Now, when you're adding CSS, usually, you want to put it in an external file. But you can put it up in the head area inside of a style tag. And you can let it know that this is going to be CSS. This is not required, the type. You don't have to have this. But Sublime actually puts it by default. And then in here, let's say we want to grab on to the ID of main-header. So an ID is represented with a number sign. 

So we'll say ID main-header. I'm not going over this thoroughly, because we will do this in the next video. But for the main header, let's say we want to align the text to the center. Let's say we want to add a background color of black. Since the background is black, let's change the text color, which is just going to be color, and we'll change that to white. And then I'm just going to add a little bit of padding around everything. So we'll say 10 pixels. 

So I'll save that, reload. And now we have a little website header. If we want to grab on to the footer, remember we gave it an ID of main-footer. And all I'm going to do with that is just text align to the center. And we'll just make the font size a little bigger. And don't worry about learning these styles yet. We're going to go over all of this in the next video. So let's save it, reload, and now our footer is centered. 

And the last thing I'm going to go over is the meta tags that you can use in your head area. So when Google indexes your website or your web pages, it's going to look at the description, and it's going to look at your keywords, things like that. So let's go right under the title here. And let's put in a meta tag. 

Now, meta tags are going to have a name attribute. So we're going to say this is the description of our page. And then it's going to have a content attribute, which will be the actual content. So let's just say "Awesome blog by Traversy Media." So that's our description. 

And then we can also add keywords. So that will be another meta tag with the name of keywords. It's going to have content. And the content is going to be a comma-separated list. So we'll say web design blog, web dev blog. You might put your company name, stuff like that. 

And if we save that, there's not going to be any difference from here. If we look at the source code, Control-U, you'll see that now that stuff is added here. And Google will actually look at that stuff when it scans your website. So the last thing I want to do is just link the two pages together, our cheat sheet and the blog area. So what I'll do is put a link in the blog page. Let's see. We'll go right under the header here. And we'll just put-- let's put an "a" tag. And that's going to go to index.html. 

And let's just say "Go to index." All right, so if we reload, we have this "Go to index." If I click that, that'll bring us here. Now, let's go to index.html. And we'll go to the very top, right under the body. And let's put an "a" tag. And we'll say go to blog.html. And the text will say "Go to blog." And then let's just put an hr underneath. OK, reload. And now we can switch back and forth to our pages. And that's how navigation is put together. 

All right, guys, so I think we're going to stop here. All this markup will be in the description. I'll have a link to download the zip file. Hopefully you learned something from this and you enjoyed it. Like I said at the beginning of the video, if you're a subscriber of mine, you probably already know all this stuff. If you watched the whole thing, that's awesome. Thanks for that. And that's it. Please subscribe if you like this. I do much more advanced stuff. So you'll learn much more. And leave it a like if you liked it. If you didn't like it, go ahead and leave it a dislike, and I will see you in the next video.