Let's take a quick break
from our CSS learnings here
and let's have a look at our website again
from an HTML point of view.
At the moment, we have a structure like this
on our full week HTML page.
We have the body element which holds the h1 element
and our ordered list with the list items,
so our challenges basically.
As you learned throughout this course,
HTML is all about the semantics in the end.
We know that the body
contains the actual content of our website.
The h1 element holds the main heading,
and the ordered list holds our list items,
so related information.
This has semantical meaning already.
It provides information about what's inside this element,
but the bigger a website gets,
and typically websites these days are quite huge,
the more information you might need.
Information not only related to the actual element here,
but to the position or to the area of this element
on our website.
So we could add more structure to this website.
And I said, we could.
It's not a must to do that.
You learned this throughout this course.
The browser is very forgiving, so we don't have to add
this additional semantic information to our code.
But as we also learned throughout this course,
it helps a lot.
It helps other developers.
It also helps the browser.
It helps screen readers,
and basically, it improves the entire way
the information is presented on our website.
Therefore, all the elements we add right now are optional,
but we show you a way how to add this semantic information
easily with default HTML elements.
For example, here our h1 element.
This is the main heading,
and therefore, it is part of the header section
of our webpage.
Header, as you can see, is an HTML element,
so it can hold other elements.
It can be styled and so on.
It's a completely normal HTML element
with the purpose of holding the header content here.
If we continue this logic, the ordered list here,
including the list items,
is basically the core content of our full week HTML file.
Turns out, the results and element for this,
it is the main element.
So the main element holds exactly that,
it holds the core part of our webpage,
so the main information that we want to display.
We could also have more information on our website.
For example, at the bottom, we could have a paragraph
and this paragraph could contain information
about the imprint or social media links, anything like this,
so typical information,
which is not the core of our website,
but which fits perfectly into a footer.
Here, we also have a corresponding element
which can be used in such cases.
Is it a must to structure your website this way?
No, it's not.
Do we recommend to do it? Yes, definitely.
Because as I said, websites become bigger and bigger
the more content you add to it.
Therefore, adding structure is crucial
to keep the website maintainable.
But these are not all our elements
when it comes to structuring a website though.
On the MDN docs, link is attached to this lecture,
you can find more information about the document
and the website structure.
If you go down a bit,
you see all the basic sections of a document,
the header, the main content, and the footer I described,
and also in navigation bar, a sidebar,
so basically lots of different areas
a typical website can have.
You can find more information about the elements
if you scroll down further,
but the purpose of this course
is to turn you into a web developer
so you can, of course, focus onto all these details.
We recommend to first start with the basics here,
so to add a core structure to the website.
Once the concepts are set, then you can dive deeper
and structure your website in even more details.
We'll get started with the basics though,
so let's go back to our code
and let's have a look at the full week HTML file.
As I said, we are inside the body element here,
so structure is not required in the head obviously
with the metadata.
And here, I first want to add the header element here
and now put the h1 element,
so our header here into this header
and actually also our anchor tag
because the anchor tag is also part of the headline
so to say of the top part of this page.
If you look at it, you see we have the challenges
and below today's challenge,
so these are not part of the main area
because the main area are just the actual challenges,
so the list of all our challenges here.
Therefore, we can select this anchor tag here,
put it up into the header like this.
So what remains for the main part is our ordered list,
so we can now create below our header our main element,
and here put the ordered list into this main element.
And maybe also quickly format this a bit.
With this, if we go back to the project,
you see nothing changed from a visual point of view,
but we added more semantic meaning,
more structure to our webpage.
With this, we added even more elements to our webpage.
This is not a problem at all.
As I said, it adds a lot of value here.
But at the moment,
we are only working with the so-called type selector
and a pseudo selector here with the hover effect
in our full week CSS file.
Now, the thing is that we don't only have
these type selectors.
You learned about one other selector in the last module
here in the daily challenge CSS file,
we have this todays-challenge selector,
a so-called ID selector,
which was added right here by this ID attribute.
Now with our website becoming a bit more complex
step by step, the next thing we should discover now
is if we have additional selectors
which might be helpful here
to select exactly the specific element
that should be selected.
Because what if we would add a fourth list item here,
for example right here, and say learn all about forms,
and now we have four different goals
and now two goals should be highlighted
as your main priority goals.
With an ID, this would not be possible
because as you learned, the ID should only be used once.
It's a unique ID.
Selecting the list items won't work
because then all list items would be highlighted.
So what do we do in such cases?