What is the basic structure of a HTML page?

easy tutorial to create an html file

[Previous Tutorial]

How to create a HTML file?

Hello my friends,

If you follow our line of tutorial to build a website from scratch, you should already have your first HTML file.
And now we would like to make a whole web page in HTML.

What does a web page look like?

dr duck to teach how to create html file!

I hope you understand something on this schema… It is just a web page structure.
We will see in this tutorial all the HTML elements of this schema.

To start, the color ones are called HTML sections, it like containers.

As you know HTML elements nests each other!
BUT HTML elements can not be nested in any other HTML elements.
There are rules.

So to get a good structure we need to know these rules.

How you can know? Who made this rules?
Good question, I like it!!

The Father of HTML, Sir Tim Berners-Lee, created W3C.

What’s that?
It is an PUBLIC international community which develop Web standards.
THE only web standard in the world!

This W3C community made the rules, the tags, they create HTML version than browsers have to integrate in their engine, and we have to respect in our code.
Everybody is happy!

And if you want to know if your HTML code is correct you can validate it…
Very useful!

I won’t ask you to learn all rules by hearth, they are very logical and you will learn them little by little.
I will add in the HTML element list, on another page, children and parents of the HTML element we already used.

Now, let’s play to the architect!

Let’s start with the different sections

It represents introductory content, like title, subtitle, logo…

This element is there to add information about the content. Author name, contact, link, sources…

In our website:

The article element represents a complete part, article of a website. I mean an article which is not split.
This could be a magazine, newspaper, technical or scholarly article, an essay or report, a blog or other social media post.

We could apply this HTML element in our website like this: (Spoil? :p)

This element represents a section of a content, document or application.
Different section should have the same thematic for a content.

On our website:

As you guessed, the <nav> element represent the main links, mainly menus. There are not necessary just one menu on a website, so you could fine more than one <nav> element.
But not necessary to append <nav> on each link, for example no need to add a <nav> element in footer.

You got the idea:

The aside element should get the content relating of the parent element, and which could be considered separate from that content.
Yep… like a normal sidebar!

Let’s see an example:

Now we have to talk about a legend in HTML world
A container completely generic
The most used of them…
It is not in the overview because it could be anywhere…

Can you add an epic music plz?

<div> tag has no meaning, it is completely neutral.
Exactly, you could create a website with only <div> element in body, it would work!!

But W3C suggest us to use all others sections for many reasons.
One of them is because machines will be able to read it easily, and search engine like Google will be able to understand more easily website.

Ok, now few tags to manipulate text

These elements represent headings for their sections
<h1> is the highest level of heading whereas <h6> the lowest.

It is a paragraph. All is said.

It is a break line. It has no end tag, it is very useful to break a line… in a paragraph.

Let’s build our website:

Quick Exercise:
– In the code below I would like you to add an article in the marked Section.
With a new <header> with a title <h1> and a <div> for the text of the story.
Don’t make up a title or a story… add just random text instead.
– Then test your file in the W3C validator to get a CORRECT HTML page
– Add a header in a footer
– Test your file in the W3C validator to get an ERROR.

Yeah… It missing one…
You are a tiger!

And now we would like to add an image because it is cool, but our website is ugly!
We need to know how to get an image on a server.
We will see this in the next tutorial!!

Thanks for reading,
See you very soon!
I have to fly in space,