Now we got our editor's set up
and even before that wrote
our first HTML code, which leads to this page.
And of course, this is great.
It's our first page,
but the content of this page is not amazing yet.
This is of course not a realistic website.
We typically want to build more complex things. Nonetheless,
this of course is our first important step.
Now let's take a closer look at this HTML code though,
because understanding this code and how it works and how you
would add more content,
that of course all is extremely important to become a web
developer.
Now, HTML is a markup language,
and that means that it is in the end,
a language that is there to add extra annotation to content,
which we might have in our page,
just as we might make content bold,
or turn content into a title or a subtitle in a word
document.
We also typically want to assign different meanings to the
different pieces of content we have on our webpage,
because on a webpage,
we also have titles and subtitles and paragraphs of texts
and links and images and buttons.
And we describe our content with HTML.
That's why it's called a markup language.
HTML is a language for adding extra meaning to our content.
Hence, describing our content.
HTML instructs the browser about our content,
its structure and its meaning.
And we do provide extra meaning and structure to our content
with those angled bracket things here, we write HTML code,
always like this and this overall thing here.
This entire code snippet here is called a so-called HTML
element.
So let's start understand these HTML elements
and how they are
written and structured and what their different building
blocks are.
As I just said, this entire thing,
which we wrote is a so-called HTML element and those
elements, as a whole, tell the browser
what our content is and
which kind of content it is.
We do inform the browser about the type of content with help
of those angle bracket, things which are called HTML tags.
So every HTML element,
which is the entire thing has such HTML tags,
which describe which kind of content is stored inside of
that element and that's there
for the parts between the tags,
the element content.
So an HTML element is made up of HTML tags and the element
content.
Now you can't pick any arbitrary tags and I'll come back for
that later,
but instead there is a clearly standardized list of
available tags, which you as a web developer can use.
For example,
the h1 tag stands for heading one and marks a main
title on your website.
There are other tags for describing other types of content,
but that's something we're going to dive into later.
Now for those tags,
you might of course notice that these two tags don't look
exactly the same.
The second tag has this forward slash after the opening
angle bracket,
the first tag does not have that.
That's the case because
we have two different kinds of tags
for every HTML element.
We have the opening and the closing tag,
and we have a different syntax here as it's called.
We have the forward slash on the closing tag to tell those
two tags apart for the browser.
So for the computer in the end,
And we need this differentiation because we want to tell the
browser where an element starts and where it ends,
and if we would be using exactly the same tag.
So both times without the forward slash for example,
then the browser wouldn't know if the second time we use it
marks the end of an element or already the start of another
element.
That's why we have a clear distinction here between opening
and closing tag, and we therefore have opening tag,
content closing tag, and that altogether forms
the HTML element.
Now, if we take a closer look at those texts,
we can also split those up even more there,
we have those angle brackets less than and greater than.
And between those angle brackets,
we have the so-called element name,
and that's another official term,
which you might want to memorize.
So in this case, h1 is the element name,
Hello World is the element content together with the angle
brackets, the element name forms the HTML tag.
And when it comes to those tags,
we have the opening tag and the closing tag,
which looks just like the opening tag,
but has this extra forward slash,
and that all together forms the HTML element,
which has the Hello World content and instructs the browser
about which kind of content this is in case of the h1
tag,
it tells the browser that this is a main heading a main
title on the website,
but that of course brings us to another important question,
which HTML elements exist.
How do we know which elements we can use.