Creating The Structure of Our Webpage in HTML - How To Create a website in HTML and CSS #6

Hello everyone!

Today's post marks lesson number #6 in this how to create a website with HTML and CSS tutorial. In this tutorial we will be exploring HTML and how to create the basic structure of the website we will be building.

You can read the previous lessons below:

1. Introductory To The Course
2. Creating Your First Webpage
3. Working With Web Developing Coding Editors
4. Introductory To HTML
5. Designing a Wireframe For Our Website

You can watch the video version of this lesson below:

Now that we have a visual idea of what we want our website to look like, let's go ahead and get started with building the structure in HTML.

Before we get started it's worth mentioning that, right now, HTML is changing a lot. New elements have been added over the last few years and currently HTML5 has brought a lot to the table. As we build out our webpage, we would use the latest elements supported, so that your website is modern and up-to-date.

Now, since that's out of the way, let's get back to coding on our website. The very first thing that you must add to your website is a document type, or doc type for short. We type it out as follows.

This doc type must be inserted at the top of your webpage before anything else. All this really does is basically tell the browser that this page is an HTML document.

Next up, let's create another HTML element called well ... HTML. This tag is going to contain all of our HTML that we have on our page. So we need to take our existing H1 element and wrap it inside the HTML element.

Notice how there is a little bit of indent for our H1 element. This is called nesting and it's used to help us to tell what elements are nested within each other.

You will start to see how useful this is once we start to add more code to our webpage.

Next up, I'm going to add what's called a head element to our webpage. Our head tag will contain elements that add structure to our webpage but are generally not visible on the webpage itself.

This is also called meta information.

After a head tag, I'm going to add a body tag as well. The body tag will contain the vast majority of your website's content. I'm also going to grab our H1 once again and nest it inside our body element, as well as our HTML element.

Alright, now let's create a title for our website. Our title is meta information, so it goes inside the head element. We can use the title element to declare the name of our website. I'm going to go ahead and type just a random name here for now.

Our website's title will appear at the top of our browser or tab that you have open.

The last thing we're going to do in this lesson is add the character set for our webpage. We also insert this inside our head tag.

Here is the code that we are going to need. You don't need to really memorize this code or anything, but what this code does is help our web browser process and format our HTML webpage.

Now let's save our webpage and see how it looks. You can also hit Control-C on Windows to save the document quickly. As we can see, our website's title is shown at the top.

And that's pretty much all the visible changes that we have made so far...

In the next lesson, we will be adding more structure to our webpage with content containers.