Now did we did add
this special style element,
we can definitely see that there are different kinds
of HTML elements.
The vast majority of available elements is
about outputting content,
which we can see like this text here,
but we also have some elements like style,
which do something which might have in visual impact,
after all this sets some styling.
But of course the style element itself is not visible.
We don't see it here on the screen.
So we could say that this style element
actually adds some meta information to our page.
It adds some information which is important for the browser,
but which is not visible itself to the user.
And because we have that differentiation between actual
visible elements, and content, and meta information,
we also should split our HTML document into two parts
to make that separation between meta data
and content more official.
Because there is an official anatomy
of a valid HTML document,
which we should try to respect as a web developer.
If we have visible content like a h1 tag
with some text inside of it,
we should wrap this kind of content
with a extra body element.
So that then defines the actual page content of our page.
And we should then have a extra head section
next to the body, which will hold extra metadata
for this page.
For example, styles, or also a title,
which we're going to set soon,
which will set the page title,
which will not show up on the page.
But which for example,
would be the title showing up on search engines.
What you see here, that's what's set with the title element
in the head section of an HTML file.
So you should split your HTML elements
into these two main sections, head and body.
And then those two sections should be wrapped
by an HTML element.
So an element named HTML,
and then last but not least at the very top of the file,
you should have this DOCTYPE element,
which looks super weird.
And which is the only kind of element that looks that weird,
which simply tells the browser,
which version of HTML we're using.
Why does this matter?
Because HTML is a language with some history.
It's not a language that was invented yesterday.
Instead, HTML has been around since 1993,
which was when HTML version 1 was released.
And then we had different versions being released
over the different years.
And the most important, big new version that was released
was HTML 5 in 2014.
And that's the version with which we still work
and which will stick around for the future.
But because we have those different versions
and theoretically you could still have a webpage
that was built before 2014,
and that was never updated thereafter,
it is strongly recommended that you do specify
the HTML version you are using in your HTML document,
right at the top with this special line,
and this special, strange looking HTML element,
exclamation mark, DOCTYPE html.
That simply means that we're using HTML version 5,
even though there is no 5 in this element,
but that's what it is.
And that then simply tells the browser that we're using
the latest version of HTML.
And if we would not have that,
we would tell the browser that we don't know
which word we're using, or that we're maybe using
an older version, which then will affect
how the browser sees and parses our page.
So we should add this as well and then have the HTML element
with head and body inside of it.
And you might recall that in the dev tools,
you actually already solved this separation.
There, you already see HTML head and body,
even though we haven't added this in our code.
But the browser kind of adds it automatically
if it's missing, but that's no excuse for us to not add it.
We should always add it.
Also to help other developers
or ourself in a couple of months,
when we come back to this code to quickly see
where our metadata will be defined
and where the actual page content will live.
And therefore now we'll change this.
I'll add this DOCTYPE html element at the top.
And then below that, the HTML element opening and closing.
And then inside of this HTML element,
we add the head element and next to this head element,
the body element.
And then we put metadata,
like this style element into the head section.
So cut this and add this here.
And we put our visual body.
So all the HTML code down there into this body.
And now we got a correctly structured HTML document.
And if we save this and reload,
you see there's some spacing added at the top,
which is some browser default style,
which we get now that we have this official structure.
But other than that, nothing changed.
Still, this is the structure you should use
for every HTML file you're creating
because that is the correct form of defining HTML
and of splitting your metadata and your visual data.
And now, speaking of metadata,
I did mention this title here on this slide.
And I mentioned that this sets the title,
which shows up on search engines, for example.
It also sets the title,
which you see here in your tabs.
At the moment, it just repeats the file name here,
but you might want a different title here,
so that if you have multiple tabs open,
you don't just see index HTML here,
but some title that clearly identifies your website.
And to set this title,
you simply add another HTML element here
inside of this head section, the title element.
Now title sounds a bit like it would set some title,
which you see on the screen, but it doesn't.
For titles, and headings, and headlines
that should be visible,
you should use the h1 element
or one of its sibling elements, h2, h3,
which we're going to see later in the course.
The title element is not visible on the page itself.
Instead, it just sets this title,
which shows up in a tab and in the search engine results.
And here we could say, My Daily Challenge
because we are building a daily challenge website here.
And if we now set this title and save everything,
if we reload, we see no change here on the screen,
but now in the tab, you see this title now.
And if you would have this website on a server
and search engine crawlers would see it,
it's also this title, which would show up
on the search results as a title.
And that's there for another common piece of metadata,
which you often add to your pages.