Throughout this course,
we've worked with different elements.
Here in our full week html file,
we have an h1 element,
paragraph, an anchor tag and so on,
but I'm not referring to this differentiation of elements.
We also have another way to differentiate our elements here.
I'm referring to the way,
these elements behave,
on our website.
Now if we go back to our website,
you see that if we focus on to our header here,
all three elements,
the h1 element here,
the paragraph and the anchor tag,
are displayed one after another.
So line by line,
not next to each other.
Now, if we duplicate,
our h1 element,
which you typically wouldn't do,
it's just for demonstration purposes.
And I go back,
it's added in a new line again.
Now you might say,
okay, this makes sense
because, well the text here is kind of too long.
So it has to be added in two different lines.
But even if I changed just to,
like short,
my here and my there,
both elements are added one after another.
So here, first,
h1 element, second h1 element.
Let's undo this change now.
And let's not duplicate our, anchor tag
where we can view our today's challenge.
If we do this
and go back,
things are different.
Here our elements are displayed next to each other.
Okay, Strange.
Let's undo this change though,
just we keep it like that.
And if we further investigate our website,
we see that also in our main part,
we have again, like for the h1 element,
element after element.
So, list item,
list item, list item,
inside the list items h2 element, paragraph.
So line by line each element.
If we switched to our today's challenge here,
we have, an image here,
at the beginning
and afterwards the h1 element.
In our code,
the index html file,
we could now add
the image, twice.
Could be as different image,
right now I'll add the same image.
If I go back,
the image is also displayed next to the other image.
Okay, let's keep this in mind.
Let's go back.
And if we now go down,
to our, last line here,
explore the full week.
Well, this is basically a paragraph,
and inside this paragraph, we have an anchor tag.
But typically if we have structures
where one element holds another one,
as we had it, in our full week
and here in our,
list for example,
so list holding two other elements.
These were displayed one after another.
So things look a bit random here, again.
Of course there is another,
concept which defines whether elements are displayed,
next to each other or one after another.
And this concept is the difference between a Block Level or
Block Element and Inline Elements.
Now, if we think about what we just saw,
we could say that a paragraph you, for example,
is a Block Element.
The lines, the white lines to the left and to the right,
are the borders of our website, so to say.
So if we create a paragraph,
this paragraph occupies the entire space,
of the page.
We see this here, for example
with our header here,
this paragraph as you see the content,
so you, select this.
So the blue, area here
occupies the entire space.
We have a small gap here,
but generally you see,
it occupies the interest space.
Now, whenever you have this behavior,
we are talking about Block Elements.
Things are different with Inline Elements though.
We could have another paragraph.
So this for example,
the opening tag,
this, nested into a Block Element,
closing tag,
and into this paragraph,
we could now add an anchor tag,
which says this link is an Inline Element.
The anchor tag here is of course missing the reference.
It's just for demonstration purposes here.
But the thing is, we can add such anchor tags
into existing elements
without creating a new line.
We also saw this in our project.
This was the example we had.
Here, at the bottom,
we had this paragraph
and this paragraph holds this anchor tag.
So we just, were able to add this anchor tag
without full week being displayed in a new line.
So what are the core differences now
between these two element types?
Well basically it's the question,
whether a new line is started
or whether these elements occupy,
the full width of our page by default.
For the Block Element,
we can confirm this,
the Block Element uses an entire line.
So each new Block Element creates a new line
when it's added to the page
and the element uses the full width.
For the Inline Element,
both of these things are not true.
Inline Elements can be added, in line
as the name indicates already
and only use the space needed
for the content of this element.
Now why would we use such Inline Elements then?
Well, this becomes clear if we look at
some common Inline Elements,
for example, the anchor tag
which allows us to link to other websites
or to other pages of the current websites, as we headed.
Links are typically added as parts of paragraphs,
for example, therefore,
if a new line would be started for the link,
well, this would break our page flow,
so to say, therefore,
we need Inline Elements for such cases.
Same thing as to, for buttons.
So click, a blue buttons to submit forms.
Forms will be covered, a bit later in the course.
These are basically such,
pages you might know if you registered somewhere,
where you have to enter your email,
your password and so on.
Then you have to send the information
or submit this form.
Buttons are often placed next to other buttons.
Therefore, the Inline logic here,
is also something that makes sense.
Images as also seen in our project here,
are also Inline Elements.
And finally we have the span.
The span is a non semantic inline container
to mark-up text in the end.
So a span does not have any semantic meaning,
it can just be added into a paragraph for example,
to select,
a specific part of the texter, so to say,
and then to add a specific style to text parts here.
So this is the difference between,
Block and Inline Elements.
As you see throughout the course,
we will use both element types.
And whenever you have that behavior,
that an element is well positioned next to another one
and not below it.
Then you have the case of an Inline Element.
In case you want to dive deeper into Inline Elements,
which is not required at this stage of the course,
you can again find a link to the MDN Web Docs here.
The link is attached to this lecture.
And if you scroll down a bit,
you can find a list of all Inline Elements.
Now again, these are lots of elements,
as you saw in our common Inline Element list
on the slide,
we don't have to know all these elements by heart.
Get started with the course project as we do
and then by gaining more and more experience
with HTML and CSS,
you will automatically see,
which element you might need here
and if you have an Inline or Block Element,
but it's important to keep in mind
that there is this differentiation.
And with that,
we finally finished, the last core concept,
of this deep dive module in HTML and CSS.
So with this, in the following lectures,
we can focus onto adding a bit more style,
especially to our, landing page.