1
00:00:07,120 --> 00:00:15,070
This is where we left in the previous video by talking about some of the new semantic elements in a

2
00:00:15,070 --> 00:00:16,329
HTML five.

3
00:00:16,480 --> 00:00:24,320
In this video, I'm going to use some diagrams to show you how we are going to use some of these elements.

4
00:00:24,340 --> 00:00:26,380
So here we go.

5
00:00:26,410 --> 00:00:35,890
We are going to compare a time for website to a HTML five, and that way you're going to see the importance

6
00:00:35,890 --> 00:00:38,170
of the HTML five.

7
00:00:38,200 --> 00:00:40,090
So here we go.

8
00:00:40,300 --> 00:00:45,880
Let's take it that we are going to create a website in a HTML four.

9
00:00:46,000 --> 00:00:54,370
And for our site, this is the container, and we are about to fill out the layout of this application.

10
00:00:54,520 --> 00:01:01,900
And for every website, when it depends on the client's needs, how they layout are going to be used.

11
00:01:01,900 --> 00:01:06,610
In that way, you can decide which element that you are going to use.

12
00:01:06,610 --> 00:01:11,590
But for this one, definitely we are going to have the header.

13
00:01:11,920 --> 00:01:19,460
As you can see for this header we use div and inside you're going to have the content inside.

14
00:01:19,540 --> 00:01:27,090
So this is our header and also we want a section for a side bar.

15
00:01:27,100 --> 00:01:35,770
And as you can see, we also use Dave and inside you're going to have the side bar and after that you're

16
00:01:35,770 --> 00:01:38,160
going to have the main content.

17
00:01:38,170 --> 00:01:46,180
Let's take it that we are creating a website for blogging and this is the main container that is a dark

18
00:01:46,180 --> 00:01:46,960
background.

19
00:01:46,960 --> 00:01:52,030
It means that we are going to fill up the individual post here.

20
00:01:52,060 --> 00:01:57,640
Then you also have the footer down here and inside the container.

21
00:01:57,640 --> 00:02:04,720
This is where we are going to place the individual blog post and we are going to put individual posts

22
00:02:04,720 --> 00:02:05,820
inside Div.

23
00:02:05,830 --> 00:02:13,170
As you can see, this is our first post and then the second post and then the third post.

24
00:02:13,180 --> 00:02:18,280
So this is the school or way for structuring website.

25
00:02:18,280 --> 00:02:19,690
By using this.

26
00:02:19,690 --> 00:02:29,710
As you can see, this website does not convey much information because when I see this on layers, I

27
00:02:29,710 --> 00:02:36,430
look at the content inside or with some comment before I consider oh, this one is for header.

28
00:02:36,730 --> 00:02:40,870
Likewise, the sidebar, unless I look at the content inside.

29
00:02:40,870 --> 00:02:44,170
So it means that this is not very structured.

30
00:02:44,170 --> 00:02:47,170
So let's look at the top five.

31
00:02:47,170 --> 00:02:52,260
We are going to create or recreate this website using a HTML five.

32
00:02:52,270 --> 00:02:53,860
So here we go.

33
00:02:53,980 --> 00:03:00,640
We're going to have the main content, the main page, and you're going to fill out the same content

34
00:03:00,640 --> 00:03:03,300
as you can see for 18.5.

35
00:03:03,310 --> 00:03:10,720
Instead of using DIV, we are going to use new element core header as we spoke about.

36
00:03:10,840 --> 00:03:18,280
And for the sidebar we are going to use what is called navigation, right, instead of using this.

37
00:03:18,550 --> 00:03:19,210
All right.

38
00:03:19,210 --> 00:03:26,170
And also for the main content, instead of using this, we are going to use a tag called Main.

39
00:03:26,410 --> 00:03:33,070
Then inside the main we are going to have individual posts and we're going to group them inside a tag

40
00:03:33,070 --> 00:03:35,920
called article for a term of four.

41
00:03:35,950 --> 00:03:43,300
You can see we are using this all around when I have multiple articles and for the footer we are going

42
00:03:43,300 --> 00:03:44,890
to use this.

43
00:03:45,040 --> 00:03:49,090
So based on this guys, which one is the best way to go?

44
00:03:49,360 --> 00:03:51,940
And that is a HTML five.

45
00:03:51,970 --> 00:03:54,580
This one conveys much information.

46
00:03:54,580 --> 00:03:56,710
It looks more descriptive.

47
00:03:57,040 --> 00:04:05,410
And one cool thing is that search engines can help us to improve the as you because it knows the purpose

48
00:04:05,410 --> 00:04:07,180
for these tasks.

49
00:04:07,180 --> 00:04:09,550
Unlike the school old way.

50
00:04:09,820 --> 00:04:16,750
All right, guys, we have a lot of this HTML five semantic elements, but these are the common ones.

51
00:04:16,899 --> 00:04:19,089
Let's continue on in the next video.