In this article, I’ll show you the overall structure of an HTML page. Now that you know HTML syntax, it’s time to start using it.

Declaration of DOCTYPE

All HTML documents begin with a DOCTYPE tag. This tells the web browser that the file is an HTML page. A DOCTYPE tag looks like this:

Reading: How to create a website on html with steps

Oh! I almost forgot to tell you: you should follow me. If you can’t write and test your code, check out this article first.

So, open your code editor and create a new file called structure.html. When that’s all done, enter the code snippet from above. Note that DOCTYPE is all uppercase, while html is all lowercase (a bit counterintuitive).

The DOCTYPE tag is not a normal HTML tag – it is an exception. Normally you are not allowed to ! at the beginning of the opening day. The DOCTYPE has no closing tag (but neither do other HTML elements).

The element

We need to wrap all of our code in an Element to tell the browser that what’s inside is our HTML (wait what? didn’t we just do that? Idk, the internet is weird). We’re going to put code inside the HTML tag, so we need to give it a closing tag as well. Using my last post on HTML syntax, try to guess what our code should look like now…

See also: How To Make a Music YouTube Channel

Did you get it right? If yes, great! If not, don’t worry – you’ll get used to HTML after a while. Next, let’s look at what goes inside the element.

The element

Within the element are two elements: the and the . The comes first. It contains code, so a closing tag is required. Try to guess what our code will look like if we add the element:

But What exactly is the element and what goes inside? The element essentially stores data about the HTML page and links to resources (CSS, JavaScript, icons, etc.). Nothing inside the is actually displayed on the page. Some data about the page that it can store is the title of the page. This will appear as the tab name in your browser. Now try adding a title tag to your . Try how it will look like (you can add any title):

We’ll talk about other things you can put in much later, as some of them are quite complex and none of them are essential.

The element

Let’s take a break while you preview your code (read this article if you don’t know how). What? I tricked you? That’s right – because there is nothing. But what about all the stuff we programmed? I mean there’s nothing to see. The DOCTYPE, and tags are invisible. The tag contains all of the visible content, including all of your HTML elements and tags. Try adding the tag under the and see if you got it right:

In my next tutorial, I’ll cover all the different types of HTML tags and what they do, but for the purposes of this demo, include the following Add content so your HTML looks something like this:

I’m actually visible!

See also: How to start a book blog

Code The Web is really, really great.

Don’t worry I’ll talk about what the HTML inside it means in the next article.

Now save your file and open it in your browser (or reload it if you already have it open ). Now you will see that there is content there! Most of the time, the part of the code that you will be doing with the most is in your . The is really only used for setting up and linking files.

Conclusion

So, now you have built the skeleton of an HTML document!

I’m actually visible!

Code The web is real , really great.

In my next article I will talk all about programming your actual website ( the bit in the tags) and about the main types of HTML tags and what they do. If you liked this article, don’t forget to share it and subscribe to the newsletter.If you need help or have something to say, let me know in the comments.

See also: Salesforce Tutorial: Learn To Create Your Own Salesforce App

.