How To Create The Basic Structure of a Webpage in HTML

The following video will show you the basic syntax of a webpage in HTML.

Grab the full course off Udemy by clicking here.

It’s now time to talk about the very basics of HTML and the syntax of HTML. What I have here is a sample HTML document. At the very top here, we have what is called a DOCTYPE.

This DOCTYPE element basically tells the browser that we are working within an HTML document and every document needs to have this at the very top. Make sure you do not put a space before this command and keep it at the top there of every HTML document you create. Next, we have an html tag, and this is the start of the tag, and you’ll notice that we these little arrows and then at the bottom we have a little slash that signifies the closing of the tag.

All these tags here are nested within the html tag. I’m going to indent them a little bit so we can read it, but we can see here that when I click on the html tags, it selects the closing tag at the bottom and everything in between is going to be inside that tag.

Next, we have the head tag and we can see here that the head tag is nested inside the html tag, but also we have a title tag that is nested inside the head tag.

This title tag is actually going to change the title of our document and you’ll see this if you open up a tab or if you launch a website. I’m going to save this up here and then open up this webpage. You’ll see here at the very top, where the tabs are, you’ll see that the text that you write there will show there. When I change it to About Me, it changed this tab up here to About Me.

This is also where search engines will also display the title of your webpage as well when you’re looking up searches in Google Search or something similar. This whole title tag, again, I’m going to actually indent it, not delete it, because it is inside the head element. So give a little indent, makes it little bit more easier to read.

Next up, we have our body tag and then inside our body tag we have an h1 and a paragraph element. I’m going to select these, hit tab to give them an indent so we know that they’re inside our body tag and the body is going to be the whole webpage of our website.

If I open up a webpage here, the body element is going to be everything we can see here on my webpage, from the very top here all the way to the bottom. This is all the content within our body tag. Everything in here is actually nested within the body tag. It’s all the visual aspects of a webpage and if we open up our web document here, we can see that all the white background is our body element as well.

Going back to our HTML document, we have our h1, which is a level one headline, which basically a very large chunk of text. We have some text inside our h1 element, and then below that we have a paragraph tag and some text within our paragraph tag.

What we can do is, we can change the text within our paragraph element and our h1 element. I’m going to go ahead and do that right now. I’m going to change the text we have here and I’m going to put something along the lines of About Me.

If we save our document and then refresh our page, we can see here that there is an about me title and it changed accordingly.

The h1 is basically the title of your webpage, think something like your website’s name or the main focus on your webpage. We can also create different levels of headline elements. I’m going to go ahead and create an h2, which is slightly different than an h1, and you can kind of guess what this might do. The h2 element creates a second level headline that is slightly smaller or has less emphasis than the h1. I’m going to write that out, save it, refresh the page.

You can see our text is now given that h2 level element. Pretty simple. Now, what I’m going to do is I’m going to add some more elements to my page that are basically structural elements.

They’re going to kind of help you organize your content on your webpage. I’m going to kind of talk about them and discuss them as we add them to our website. The first thing I’m going to add is what’s called a header. A header is nested inside the body tag and it’s basically the content at the top of a website.

I’m going to showcase that in just a second here. If you bring up my blog, we can see here that the very top in this kind of green background, this is what’s normally referred to as the header.

It has the main information of the website, maybe like a name or logo, and has something what’s called a navigation. Navigation kind of helps direct the user towards important pages on the website. You can see here on mine, I have an About page, I have a Blog page, I have a Books, a Courses page and all kinds of different things here, but the header basically stores important information on a website. All right. The next thing I’m going to talk about is what’s called a footer.

The footer is basically the opposite of a header. It’s the section of our website, but it’s kind of at the bottom of our website. Again, if I open up my blog here as an example, we scroll to the very bottom.

All this content right here is what’s commonly referred to as the footer. And again, it’s the same thing as the header, but it’s a section where we can display links and a navigation with less emphasis than what we would like to have for our header.

It’s generally found at the bottom of a website. This is pretty much what your standard HTML document is going to kind of look like. There’s a few other different elements you can add and you’ll kind of see them here and there, but these are the main ones that you need to focus on. Most HTML documents will contain an html tag, a head tag, a body tag, a header section, and a footer and that’s pretty much it.

If you can understand this, then you’re well on your way to understanding the syntax and structure of HTML.

Leave a Reply

Your email address will not be published. Required fields are marked *