So, currently we have one
h one element on our website.
But of course, in reality,
you might already imagine that this will not suffice.
We have more types of content.
We don't just have titles.
We might also have images and subtitles,
and regular text and buttons, and so on.
So one element alone is probably not getting us anywhere.
So therefore, which HTML elements exist?
Well, there are many available HTML elements,
because there are a lot of things you can describe.
A lot of different kinds of content.
We might immediately think about content
like titles, subtitles,
regular text,
images, buttons, maybe also input fields.
But if we dig a bit deeper,
we can get more detailed than that.
For example, we might be building a site like this,
where we have a blog post in the end.
And there we have a date, and we have an author,
and of course, we could just describe that as plain text.
But to us humans, it's more than text.
It's a date, and it's the name of a person.
So we might even want to describe
this kind of content to the browser.
So if we think about content like this,
then it makes sense that we might have
quite a lot of HTML elements we can use.
And indeed, we do.
There is a webpage out there, the MDN Web Docs,
which is kind of like the official documentation
for HTML and more, you could say.
And there, you find a page with an HTML elements reference.
On this page, you find all available HTML elements.
And that is a long list if you scroll through it.
But don't worry.
You don't need to learn those by heart.
You should absolutely not dive into this list
and try to fully understand and learn it right now.
Instead, throughout this course,
we're going to introduce
all those important HTML elements
you're working with all the time,
and we're also going to dive into
some lesser-used elements, of course.
And then you can always use resources
like this MDN page as a backup,
once you are a web developer,
to find the right element
for some niche case you might be facing.
It's also worth pointing out already
that the browser is quite forgiving,
and there is more than one way of annotating content.
You can annotate something as just regular text,
or be more specific and make it clear
that this is actually an address, for example.
So you won't break your webpage
if you go for a wrong HTML element,
and there also won't be always
a clear right element, either.
Sometimes you have multiple options
and you can go with the one which you personally
think best describes the content you have.
But again, that's already a bit too advanced here.
That is something which we'll learn
throughout the course, and that is something
which you'll get a better feeling for,
throughout this course.
But of course, now at this point,
you might be asking yourself,
"Why do we have those different HTML elements?
Why do we need them?"
And the answer here, as mentioned before already,
is that for a lot of content,
if you don't add any extra annotation,
that content doesn't really have a clear meaning.
If you think about text, for example,
There is a difference between having a title
and regular text.
But without some kind of annotation and or styling,
there's no way for us to tell
those different meanings apart.
It is all just plain text, then.
It's basically like in a Word document,
where you also don't just write plain, unformatted text.
Instead, you make text bold,
you turn something into a title,
to convey extra meaning.
That's why we use HTML elements.
Because with that, we can annotate and describe our content,
and we can tell the browser
that something should be a title, a subtitle,
an image, or anything else.
And that in turn then allows the browser
to display this content correctly.
And here it's important to understand
that in the case of a webpage,
there are different kinds of parties
that will view the page.
Of course that's us, as a regular visitor of the page,
and we also need to know
whether something is a title or not,
otherwise it will be hard for us
to get something out of that webpage.
But it's not just us.
It's, for example, all the search engine crawlers.
So the tools search engines use
to look at all the websites
in the World Wide Web,
and to then find out what that website is about,
so that they can present that website
if users search for something.
If you search for something in Google,
then Google shows results,
and these results are the websites it's crawled,
which it then thinks best fit your search query.
And it's able to find out whether a website
fits your search query
because Google looks into that website.
And since, of course, that search engine crawler
is not a human, but some
program written by developers,
that search engine crawler needs extra hints
like the HTML annotations,
to find out what your page is about.
So here we're not talking about a human,
but about a computer looking at our website.
And that hopefully also helps with understanding
why extra annotations are needed.
And last, but definitely not least,
it's also important to keep in mind
that not all human visitors of our website
will be able to just look at our content.
If a visitor is blind, for example,
then he or she will not be able to see the content.
Instead, that visitor typically will rely on
assistive technologies like screen readers,
to have that website content
read out to him or her.
And that means that we need to describe our content
so that such assistive technology
is able to read and present our content correctly.
And because of all those different parties
that are involved,
we need to annotate and describe our content,
and HTML is the language that allows us to do that,
with help of those HTML tags
that turn content into meaningful HTML elements.