Just to be very clear,
we are done with this exercise
and we practiced all those HTML elements again.
But, there are more HTML elements we could use here
to improve the semantics of our code
or of our page.
And that's always something we should strive for.
Visually, the page is done,
but for computers, search engine crawlers,
for example, or people with assistive technologies,
we can still improve the semantics off this page.
Take this don't word here. As an example.
I'm clearly emphasizing this word here.
That's why I did give it this bold font weight.
Now this boldness is not something you see if you're blind.
I only achieve it with CSS and the dead CSS code is not
read out to blind people.
So blind people don't see
that I'm emphasizing the word don't.
Now, why don't they see it?
Because the CSS styles are not applied.
And because the span element,
which I'm wrapping around "don't"
has no semantic meaning as you learned.
And that's the part which we can improve here.
There are better HTML elements
we can use for situations like this.
When we want to emphasize something, yes,
we might want to bring our own styling,
but we also want to semantically annotate that content
to emphasize it even without the styling
for assistive technologies, for example.
And here we can, for example, use
D E M element
E M stands for emphasize,
but we can also use the strong element as an alternative.
And that also emphasizes to content,
which you wrap it around.
The difference is basically the pronunciation
you would use if you would read out this sentence.
With strong,
we want to put strong emphasis on that word
or that text, which is wrapped by it.
Which basically translates to us ramping
up our voice to speaking of it louder.
For example, I could be reading out this sentence here as
you don't use it for styling purposes,
if I use strong.
If we use M we instead mean emphasis,
which is not conveyed by raising our voice,
but by changing our tone a little bit.
For example,
I could be reading this out as
you don't use it for styling purposes.
And I hope the difference is clear.
So which one is better?
That really depends on which kind of emphasis you want here
and here I want strong emphasis.
So I will use the strong element
because I want this to be read as
you don't use it for styling purposes.
Now we can actually even remove our highlight class here
because it turns out that the browser default for strong
is to make it bold.
We could still also do it ourselves with CSS,
but we don't need to do this ourselves anymore.
The browser default is that it is bold, automatically.
But now, it doesn't just look bold,
but it also is semantically more correct.
Now another semantic change we could make
to this document, to this HTML file
is that we wrap our different sections
in the main content with an extra element.
Though, I will say that this is optional and not required,
but maybe for us as a human, as a developer,
writing that code and working with that code,
it would be nice if our content in those two sections,
in the main element,
would be kind of wrapped with a separate element each,
just to make it a bit easier for us to quickly see where
each section starts and begins.
Because whilst it's clear that it starts
with the H two element,
it's not obvious that it ends after the paragraph.
We have to look at the code as a whole to determine this.
And that's when we can actually wrap it
with another HTML element, the section element.
We can take all our code here,
up to the next H2 tech, but excluding that tag,
and put that into section
and do the same here for the CSS summary, add the section,
select all the content that goes in that section,
not the footer though, just like this,
and put that into the section here.
And then I'll press that auto format shortcut.
Now we've got those section elements and as the name implies
semantically they, mark up a
separate section of your content.
We don't have to add them because the H2 element also
already does this, but now we make it super clear,
which doesn't hurt. And for us as a developer,
this now also might be a bit easier
to read and to work with.
And therefore, the section element is the other new element,
which I wanted to introduce here.