1
00:00:02,090 --> 00:00:02,960
Throughout this course,

2
00:00:02,960 --> 00:00:04,970
we've worked with different elements.

3
00:00:04,970 --> 00:00:07,330
Here in our full week html file,

4
00:00:07,330 --> 00:00:08,810
we have an h1 element,

5
00:00:08,810 --> 00:00:11,683
paragraph, an anchor tag and so on,

6
00:00:12,600 --> 00:00:16,530
but I'm not referring to this differentiation of elements.

7
00:00:16,530 --> 00:00:21,510
We also have another way to differentiate our elements here.

8
00:00:21,510 --> 00:00:22,920
I'm referring to the way,

9
00:00:22,920 --> 00:00:24,660
these elements behave,

10
00:00:24,660 --> 00:00:26,560
on our website.

11
00:00:26,560 --> 00:00:28,450
Now if we go back to our website,

12
00:00:28,450 --> 00:00:32,060
you see that if we focus on to our header here,

13
00:00:32,060 --> 00:00:33,337
all three elements,

14
00:00:33,337 --> 00:00:34,840
the h1 element here,

15
00:00:34,840 --> 00:00:37,270
the paragraph and the anchor tag,

16
00:00:37,270 --> 00:00:39,520
are displayed one after another.

17
00:00:39,520 --> 00:00:41,030
So line by line,

18
00:00:41,030 --> 00:00:42,663
not next to each other.

19
00:00:44,070 --> 00:00:46,490
Now, if we duplicate,

20
00:00:46,490 --> 00:00:47,800
our h1 element,

21
00:00:47,800 --> 00:00:49,250
which you typically wouldn't do,

22
00:00:49,250 --> 00:00:51,100
it's just for demonstration purposes.

23
00:00:52,020 --> 00:00:53,330
And I go back,

24
00:00:53,330 --> 00:00:55,850
it's added in a new line again.

25
00:00:55,850 --> 00:00:56,760
Now you might say,

26
00:00:56,760 --> 00:00:57,600
okay, this makes sense

27
00:00:57,600 --> 00:00:59,850
because, well the text here is kind of too long.

28
00:00:59,850 --> 00:01:02,880
So it has to be added in two different lines.

29
00:01:02,880 --> 00:01:05,209
But even if I changed just to,

30
00:01:05,209 --> 00:01:06,043
like short,

31
00:01:06,043 --> 00:01:08,113
my here and my there,

32
00:01:09,600 --> 00:01:13,350
both elements are added one after another.

33
00:01:13,350 --> 00:01:15,020
So here, first,

34
00:01:15,020 --> 00:01:16,823
h1 element, second h1 element.

35
00:01:18,300 --> 00:01:19,773
Let's undo this change now.

36
00:01:21,070 --> 00:01:24,400
And let's not duplicate our, anchor tag

37
00:01:24,400 --> 00:01:26,963
where we can view our today's challenge.

38
00:01:27,930 --> 00:01:29,230
If we do this

39
00:01:29,230 --> 00:01:30,730
and go back,

40
00:01:30,730 --> 00:01:32,640
things are different.

41
00:01:32,640 --> 00:01:36,693
Here our elements are displayed next to each other.

42
00:01:37,740 --> 00:01:39,490
Okay, Strange.

43
00:01:39,490 --> 00:01:40,793
Let's undo this change though,

44
00:01:40,793 --> 00:01:42,183
just we keep it like that.

45
00:01:43,490 --> 00:01:45,930
And if we further investigate our website,

46
00:01:45,930 --> 00:01:48,330
we see that also in our main part,

47
00:01:48,330 --> 00:01:50,970
we have again, like for the h1 element,

48
00:01:50,970 --> 00:01:52,810
element after element.

49
00:01:52,810 --> 00:01:54,340
So, list item,

50
00:01:54,340 --> 00:01:56,440
list item, list item,

51
00:01:56,440 --> 00:01:59,950
inside the list items h2 element, paragraph.

52
00:01:59,950 --> 00:02:02,503
So line by line each element.

53
00:02:03,660 --> 00:02:06,850
If we switched to our today's challenge here,

54
00:02:06,850 --> 00:02:09,240
we have, an image here,

55
00:02:09,240 --> 00:02:10,073
at the beginning

56
00:02:10,910 --> 00:02:13,023
and afterwards the h1 element.

57
00:02:14,490 --> 00:02:15,710
In our code,

58
00:02:15,710 --> 00:02:18,030
the index html file,

59
00:02:18,030 --> 00:02:19,330
we could now add

60
00:02:19,330 --> 00:02:20,620
the image, twice.

61
00:02:20,620 --> 00:02:22,270
Could be as different image,

62
00:02:22,270 --> 00:02:24,223
right now I'll add the same image.

63
00:02:25,170 --> 00:02:26,610
If I go back,

64
00:02:26,610 --> 00:02:30,680
the image is also displayed next to the other image.

65
00:02:30,680 --> 00:02:32,530
Okay, let's keep this in mind.

66
00:02:32,530 --> 00:02:34,140
Let's go back.

67
00:02:34,140 --> 00:02:36,140
And if we now go down,

68
00:02:36,140 --> 00:02:38,470
to our, last line here,

69
00:02:38,470 --> 00:02:40,760
explore the full week.

70
00:02:40,760 --> 00:02:43,640
Well, this is basically a paragraph,

71
00:02:43,640 --> 00:02:46,373
and inside this paragraph, we have an anchor tag.

72
00:02:47,440 --> 00:02:49,680
But typically if we have structures

73
00:02:49,680 --> 00:02:51,720
where one element holds another one,

74
00:02:51,720 --> 00:02:53,720
as we had it, in our full week

75
00:02:53,720 --> 00:02:55,683
and here in our,

76
00:02:57,070 --> 00:02:58,250
list for example,

77
00:02:58,250 --> 00:03:00,710
so list holding two other elements.

78
00:03:00,710 --> 00:03:02,890
These were displayed one after another.

79
00:03:02,890 --> 00:03:05,123
So things look a bit random here, again.

80
00:03:06,320 --> 00:03:07,560
Of course there is another,

81
00:03:07,560 --> 00:03:10,940
concept which defines whether elements are displayed,

82
00:03:10,940 --> 00:03:13,993
next to each other or one after another.

83
00:03:14,960 --> 00:03:18,650
And this concept is the difference between a Block Level or

84
00:03:18,650 --> 00:03:22,620
Block Element and Inline Elements.

85
00:03:22,620 --> 00:03:25,200
Now, if we think about what we just saw,

86
00:03:25,200 --> 00:03:28,070
we could say that a paragraph you, for example,

87
00:03:28,070 --> 00:03:30,000
is a Block Element.

88
00:03:30,000 --> 00:03:32,850
The lines, the white lines to the left and to the right,

89
00:03:32,850 --> 00:03:35,963
are the borders of our website, so to say.

90
00:03:36,860 --> 00:03:38,640
So if we create a paragraph,

91
00:03:38,640 --> 00:03:42,110
this paragraph occupies the entire space,

92
00:03:42,110 --> 00:03:43,163
of the page.

93
00:03:44,210 --> 00:03:46,100
We see this here, for example

94
00:03:46,100 --> 00:03:49,030
with our header here,

95
00:03:49,030 --> 00:03:51,320
this paragraph as you see the content,

96
00:03:51,320 --> 00:03:53,410
so you, select this.

97
00:03:53,410 --> 00:03:56,020
So the blue, area here

98
00:03:56,020 --> 00:03:57,760
occupies the entire space.

99
00:03:57,760 --> 00:03:58,770
We have a small gap here,

100
00:03:58,770 --> 00:04:00,020
but generally you see,

101
00:04:00,020 --> 00:04:01,943
it occupies the interest space.

102
00:04:03,200 --> 00:04:05,800
Now, whenever you have this behavior,

103
00:04:05,800 --> 00:04:08,083
we are talking about Block Elements.

104
00:04:09,130 --> 00:04:12,000
Things are different with Inline Elements though.

105
00:04:12,000 --> 00:04:13,430
We could have another paragraph.

106
00:04:13,430 --> 00:04:14,960
So this for example,

107
00:04:14,960 --> 00:04:16,209
the opening tag,

108
00:04:16,209 --> 00:04:19,970
this, nested into a Block Element,

109
00:04:19,970 --> 00:04:21,500
closing tag,

110
00:04:21,500 --> 00:04:23,330
and into this paragraph,

111
00:04:23,330 --> 00:04:25,860
we could now add an anchor tag,

112
00:04:25,860 --> 00:04:29,920
which says this link is an Inline Element.

113
00:04:29,920 --> 00:04:32,300
The anchor tag here is of course missing the reference.

114
00:04:32,300 --> 00:04:34,290
It's just for demonstration purposes here.

115
00:04:34,290 --> 00:04:37,240
But the thing is, we can add such anchor tags

116
00:04:37,240 --> 00:04:38,870
into existing elements

117
00:04:38,870 --> 00:04:41,523
without creating a new line.

118
00:04:42,420 --> 00:04:44,350
We also saw this in our project.

119
00:04:44,350 --> 00:04:46,490
This was the example we had.

120
00:04:46,490 --> 00:04:48,960
Here, at the bottom,

121
00:04:48,960 --> 00:04:50,280
we had this paragraph

122
00:04:50,280 --> 00:04:52,780
and this paragraph holds this anchor tag.

123
00:04:52,780 --> 00:04:55,770
So we just, were able to add this anchor tag

124
00:04:55,770 --> 00:04:59,233
without full week being displayed in a new line.

125
00:05:00,700 --> 00:05:02,810
So what are the core differences now

126
00:05:02,810 --> 00:05:04,900
between these two element types?

127
00:05:04,900 --> 00:05:06,540
Well basically it's the question,

128
00:05:06,540 --> 00:05:08,390
whether a new line is started

129
00:05:08,390 --> 00:05:10,600
or whether these elements occupy,

130
00:05:10,600 --> 00:05:13,300
the full width of our page by default.

131
00:05:13,300 --> 00:05:14,370
For the Block Element,

132
00:05:14,370 --> 00:05:15,800
we can confirm this,

133
00:05:15,800 --> 00:05:18,200
the Block Element uses an entire line.

134
00:05:18,200 --> 00:05:20,890
So each new Block Element creates a new line

135
00:05:20,890 --> 00:05:22,160
when it's added to the page

136
00:05:22,160 --> 00:05:24,683
and the element uses the full width.

137
00:05:25,555 --> 00:05:26,930
For the Inline Element,

138
00:05:26,930 --> 00:05:28,883
both of these things are not true.

139
00:05:29,890 --> 00:05:32,400
Inline Elements can be added, in line

140
00:05:32,400 --> 00:05:33,880
as the name indicates already

141
00:05:33,880 --> 00:05:35,540
and only use the space needed

142
00:05:35,540 --> 00:05:37,603
for the content of this element.

143
00:05:38,460 --> 00:05:41,810
Now why would we use such Inline Elements then?

144
00:05:41,810 --> 00:05:43,630
Well, this becomes clear if we look at

145
00:05:43,630 --> 00:05:45,620
some common Inline Elements,

146
00:05:45,620 --> 00:05:47,210
for example, the anchor tag

147
00:05:47,210 --> 00:05:49,540
which allows us to link to other websites

148
00:05:49,540 --> 00:05:53,050
or to other pages of the current websites, as we headed.

149
00:05:53,050 --> 00:05:55,820
Links are typically added as parts of paragraphs,

150
00:05:55,820 --> 00:05:57,260
for example, therefore,

151
00:05:57,260 --> 00:05:59,290
if a new line would be started for the link,

152
00:05:59,290 --> 00:06:01,280
well, this would break our page flow,

153
00:06:01,280 --> 00:06:02,630
so to say, therefore,

154
00:06:02,630 --> 00:06:05,363
we need Inline Elements for such cases.

155
00:06:06,370 --> 00:06:08,110
Same thing as to, for buttons.

156
00:06:08,110 --> 00:06:10,980
So click, a blue buttons to submit forms.

157
00:06:10,980 --> 00:06:14,160
Forms will be covered, a bit later in the course.

158
00:06:14,160 --> 00:06:16,590
These are basically such,

159
00:06:16,590 --> 00:06:18,570
pages you might know if you registered somewhere,

160
00:06:18,570 --> 00:06:19,860
where you have to enter your email,

161
00:06:19,860 --> 00:06:21,440
your password and so on.

162
00:06:21,440 --> 00:06:23,960
Then you have to send the information

163
00:06:23,960 --> 00:06:25,373
or submit this form.

164
00:06:26,220 --> 00:06:29,020
Buttons are often placed next to other buttons.

165
00:06:29,020 --> 00:06:31,610
Therefore, the Inline logic here,

166
00:06:31,610 --> 00:06:34,150
is also something that makes sense.

167
00:06:34,150 --> 00:06:36,880
Images as also seen in our project here,

168
00:06:36,880 --> 00:06:39,153
are also Inline Elements.

169
00:06:40,360 --> 00:06:42,900
And finally we have the span.

170
00:06:42,900 --> 00:06:45,870
The span is a non semantic inline container

171
00:06:45,870 --> 00:06:47,370
to mark-up text in the end.

172
00:06:47,370 --> 00:06:50,790
So a span does not have any semantic meaning,

173
00:06:50,790 --> 00:06:53,560
it can just be added into a paragraph for example,

174
00:06:53,560 --> 00:06:54,393
to select,

175
00:06:54,393 --> 00:06:56,490
a specific part of the texter, so to say,

176
00:06:56,490 --> 00:07:00,313
and then to add a specific style to text parts here.

177
00:07:01,540 --> 00:07:03,700
So this is the difference between,

178
00:07:03,700 --> 00:07:06,000
Block and Inline Elements.

179
00:07:06,000 --> 00:07:07,320
As you see throughout the course,

180
00:07:07,320 --> 00:07:09,650
we will use both element types.

181
00:07:09,650 --> 00:07:11,610
And whenever you have that behavior,

182
00:07:11,610 --> 00:07:14,650
that an element is well positioned next to another one

183
00:07:14,650 --> 00:07:15,560
and not below it.

184
00:07:15,560 --> 00:07:17,760
Then you have the case of an Inline Element.

185
00:07:18,750 --> 00:07:21,800
In case you want to dive deeper into Inline Elements,

186
00:07:21,800 --> 00:07:24,440
which is not required at this stage of the course,

187
00:07:24,440 --> 00:07:27,650
you can again find a link to the MDN Web Docs here.

188
00:07:27,650 --> 00:07:29,850
The link is attached to this lecture.

189
00:07:29,850 --> 00:07:31,653
And if you scroll down a bit,

190
00:07:32,550 --> 00:07:36,400
you can find a list of all Inline Elements.

191
00:07:36,400 --> 00:07:38,810
Now again, these are lots of elements,

192
00:07:38,810 --> 00:07:41,460
as you saw in our common Inline Element list

193
00:07:41,460 --> 00:07:42,480
on the slide,

194
00:07:42,480 --> 00:07:45,024
we don't have to know all these elements by heart.

195
00:07:45,024 --> 00:07:47,830
Get started with the course project as we do

196
00:07:47,830 --> 00:07:50,280
and then by gaining more and more experience

197
00:07:50,280 --> 00:07:52,250
with HTML and CSS,

198
00:07:52,250 --> 00:07:53,550
you will automatically see,

199
00:07:53,550 --> 00:07:55,230
which element you might need here

200
00:07:55,230 --> 00:07:57,393
and if you have an Inline or Block Element,

201
00:07:58,270 --> 00:07:59,830
but it's important to keep in mind

202
00:07:59,830 --> 00:08:01,670
that there is this differentiation.

203
00:08:01,670 --> 00:08:02,630
And with that,

204
00:08:02,630 --> 00:08:06,310
we finally finished, the last core concept,

205
00:08:06,310 --> 00:08:09,640
of this deep dive module in HTML and CSS.

206
00:08:09,640 --> 00:08:11,520
So with this, in the following lectures,

207
00:08:11,520 --> 00:08:14,530
we can focus onto adding a bit more style,

208
00:08:14,530 --> 00:08:16,803
especially to our, landing page.