1
00:00:00,780 --> 00:00:01,380
‫Hey, there.

2
00:00:01,560 --> 00:00:08,080
‫Welcome back, Siobhan, the site now in this lecture, let us discuss about HDMI semantics.

3
00:00:08,760 --> 00:00:13,230
‫Now why this is important and why we are going to use it in our company.

4
00:00:13,230 --> 00:00:18,060
‫Of course, the first thing is something they do, but have more meaning.

5
00:00:18,390 --> 00:00:20,130
‫Let's take things from basics.

6
00:00:20,550 --> 00:00:24,150
‫We use device to add content into our group.

7
00:00:24,660 --> 00:00:29,730
‫Similarly, here you can see we use this to our content in the main section.

8
00:00:29,910 --> 00:00:33,660
‫So we have banner and then we have certain products here.

9
00:00:33,660 --> 00:00:36,670
‫We use this day to wrap things and go for.

10
00:00:37,020 --> 00:00:40,170
‫So we have a logo, we have countries and few other information.

11
00:00:40,830 --> 00:00:48,110
‫Similarly, we have certain other dogs that can utilize and loved them, and that's where this HD embedded

12
00:00:48,120 --> 00:00:49,710
‫semantics come into picture.

13
00:00:50,100 --> 00:00:56,790
‫When we used this day, when we used this band, we don't have any idea what content we are referring

14
00:00:56,790 --> 00:00:57,090
‫to.

15
00:00:57,360 --> 00:00:59,370
‫We need to add class than we need to.

16
00:00:59,380 --> 00:01:00,240
‫A great idea.

17
00:01:00,480 --> 00:01:01,140
‫That's great.

18
00:01:01,180 --> 00:01:07,950
‫We can do that, but we don't have any information about the content and it does nothing about the content.

19
00:01:08,190 --> 00:01:10,760
‫And that's where these semantics come into Bachir.

20
00:01:11,250 --> 00:01:15,690
‫All these semantic elements clearly defines about the content.

21
00:01:16,050 --> 00:01:17,270
‫So interactive.

22
00:01:17,280 --> 00:01:20,640
‫What I can do is I have a dog called footer.

23
00:01:22,990 --> 00:01:23,280
‫Yep.

24
00:01:23,560 --> 00:01:30,220
‫We have back all patrol and we can use it, so I don't need to utilize this, do I can use that spotter?

25
00:01:30,850 --> 00:01:34,510
‫Remember, we can still use them inside that section.

26
00:01:34,510 --> 00:01:38,140
‫We can still use Dev to divide according to our own requirements.

27
00:01:38,590 --> 00:01:44,050
‫But for these major divisions or these major, I think we can use this semantic tags.

28
00:01:44,680 --> 00:01:47,980
‫So we have two types of dogs now, two type of blocks.

29
00:01:48,430 --> 00:01:52,090
‫The first one is nonsense and tech element, which is Devon Span.

30
00:01:52,360 --> 00:01:58,060
‫And the second one is Semantic Element, which is going to be about our form, about our table, about

31
00:01:58,060 --> 00:02:00,640
‫these for the article and few other.

32
00:02:01,180 --> 00:02:02,350
‫Now these are important.

33
00:02:02,350 --> 00:02:07,300
‫These semantics are important because we can just read about them and understand what they're going

34
00:02:07,300 --> 00:02:10,600
‫to do or understand what the content is referring to.

35
00:02:11,900 --> 00:02:18,650
‫For example, if I see further, I can directly understand or visualize that this is going to be something

36
00:02:18,650 --> 00:02:20,330
‫related to at the bottom.

37
00:02:20,480 --> 00:02:22,490
‫And the content will be some length.

38
00:02:23,120 --> 00:02:28,910
‫Be something related to logo or maybe have some copyright information so he can visualize thing.

39
00:02:29,450 --> 00:02:31,570
‫That's the important part of the mandate.

40
00:02:32,240 --> 00:02:34,040
‫Now let me do certain things.

41
00:02:34,040 --> 00:02:38,480
‫So we are going to use me in here because we know this is going to be mean content.

42
00:02:39,990 --> 00:02:46,620
‫And hair and scrub, this navigation, which is basically Haydar, what I can do is instead of this,

43
00:02:46,620 --> 00:02:47,690
‫I can use header.

44
00:02:51,840 --> 00:02:56,610
‫Here I can wrap things with meaningful names, meaningful tags.

45
00:02:56,640 --> 00:03:00,540
‫Now these bags are already defined just like Deb, just like Span.

46
00:03:00,870 --> 00:03:01,920
‫So this is harder.

47
00:03:01,920 --> 00:03:03,150
‫I can understand this.

48
00:03:03,570 --> 00:03:04,950
‫This is my mean.

49
00:03:04,950 --> 00:03:06,180
‫I can understand this.

50
00:03:06,300 --> 00:03:07,400
‫This is my fault.

51
00:03:07,770 --> 00:03:12,870
‫Now, if you visualize the body, now we have our head up inside our body.

52
00:03:13,410 --> 00:03:18,690
‫Then we have our mean part and then we have our foot up our heads really well.

53
00:03:18,720 --> 00:03:22,770
‫Not just to, you know, not just to the developer, but also Google.

54
00:03:22,770 --> 00:03:23,560
‫Understand this.

55
00:03:23,580 --> 00:03:24,780
‫That means the search engine.

56
00:03:24,780 --> 00:03:30,410
‫Understand this if Google right to read your page, they understand, OK, this is the part.

57
00:03:30,420 --> 00:03:31,350
‫This is the main part.

58
00:03:31,350 --> 00:03:32,460
‫This is the product bar.

59
00:03:32,730 --> 00:03:38,100
‫So your browser understand this when your browser is noting some content there understand, OK, this

60
00:03:38,100 --> 00:03:38,850
‫is the part.

61
00:03:38,850 --> 00:03:39,810
‫This is the main part.

62
00:03:39,810 --> 00:03:40,890
‫This is the counterpart.

63
00:03:41,340 --> 00:03:43,080
‫So this is important.

64
00:03:43,350 --> 00:03:47,570
‫You can still art classes to define any particular name.

65
00:03:47,570 --> 00:03:53,640
‫Maybe you just want to give us specific last name your photo itself so you can refer to them with photo

66
00:03:53,640 --> 00:03:55,170
‫and then your class name as well.

67
00:03:55,710 --> 00:03:57,300
‫So that's how this is going to work.

68
00:03:57,630 --> 00:03:59,760
‫Now there are several semantic tags.

69
00:04:00,000 --> 00:04:02,190
‫The common one that we use was form.

70
00:04:02,550 --> 00:04:07,260
‫You can directly understand when I see a form, you can visualize things that, OK, we are going to

71
00:04:07,260 --> 00:04:09,900
‫have a form so we can understand about this.

72
00:04:10,170 --> 00:04:15,720
‫If I talk about Table, you can understand, OK, I'm going to create a table when I use this table

73
00:04:15,720 --> 00:04:16,020
‫tag.

74
00:04:16,380 --> 00:04:19,860
‫But if I say Div, I can not understand what the content will be.

75
00:04:20,310 --> 00:04:24,150
‫So that's where the semantic and automatic comes into picture.

76
00:04:24,600 --> 00:04:26,940
‫You can refer to this as a nuance topic.

77
00:04:26,940 --> 00:04:31,140
‫More student Most beginners are not familiar with this concept.

78
00:04:31,150 --> 00:04:37,920
‫They have started out, but the easiest thing that I can tell you is you divide things according to

79
00:04:37,950 --> 00:04:38,400
‫head.

80
00:04:38,700 --> 00:04:42,600
‫Then you have your main and then you have your partner.

81
00:04:43,020 --> 00:04:45,300
‫That's how a general flow works.

82
00:04:45,750 --> 00:04:47,460
‫Now there are different other parts.

83
00:04:47,460 --> 00:04:51,150
‫When we walk with this header, we have this now bar.

84
00:04:51,720 --> 00:04:55,650
‫So now everybody is going to have all the information off that navigation.

85
00:04:56,460 --> 00:04:59,490
‫Now inside man, you are going to have multiple sections.

86
00:04:59,490 --> 00:05:05,820
‫So what you can do is you can use this section and this section can can be related to anything.

87
00:05:05,820 --> 00:05:06,950
‫We can define anything.

88
00:05:06,960 --> 00:05:10,890
‫Maybe I want to divide this section into multiple divisions or wrapper.

89
00:05:10,890 --> 00:05:13,140
‫I can use this do so.

90
00:05:13,140 --> 00:05:16,710
‫I can divide this into multiple levels so you can use device.

91
00:05:16,710 --> 00:05:23,010
‫There is no issue, but on a general level, on a high level, you use this header, you use this now.

92
00:05:23,430 --> 00:05:25,650
‫And similarly, I can add multiple section.

93
00:05:25,650 --> 00:05:29,190
‫I can have different other sections to define different content.

94
00:05:29,550 --> 00:05:32,490
‫I hope you got the basic idea now inside.

95
00:05:32,490 --> 00:05:38,940
‫For that, I can divide sections I can utilize there also at the highest level, use the semantics at

96
00:05:38,940 --> 00:05:41,510
‫lower level where you need more control.

97
00:05:41,520 --> 00:05:47,190
‫You can use these division basic thing that you will understand once we start working with different

98
00:05:47,190 --> 00:05:47,760
‫projects.

99
00:05:48,840 --> 00:05:54,540
‫Moving forward, I also want to discuss about a few other concepts here, everything is dependent on

100
00:05:54,540 --> 00:05:57,640
‫your visualization, so make sure you understand things.

101
00:05:57,900 --> 00:06:02,100
‫But for example, now suppose I'm working with a blog.

102
00:06:02,190 --> 00:06:04,140
‫So let me open a blog post.

103
00:06:08,970 --> 00:06:10,590
‫I suppose I'm walking with a blog.

104
00:06:10,860 --> 00:06:17,760
‫Let's take this example here, I have this heading and I have this image, then I have Saturday in section,

105
00:06:17,760 --> 00:06:23,100
‫then I have a paragraph and few other information, so that's how we are working with a blog.

106
00:06:23,130 --> 00:06:27,600
‫This is my header that does my navigation, and this is going to be my photo.

107
00:06:28,110 --> 00:06:30,840
‫So this give you a base idea of our page.

108
00:06:31,380 --> 00:06:38,160
‫If I want to convert this whole information into my structure, I'm going to have a header that says,

109
00:06:38,160 --> 00:06:42,570
‫Great, I'm going to have this mini, which is going to have all the information, and then I'm going

110
00:06:42,570 --> 00:06:44,700
‫to have a quote that things are simple.

111
00:06:45,270 --> 00:06:50,640
‫Then I'm going to find the section which is going to have information about this painting and this image.

112
00:06:51,090 --> 00:06:53,790
‫What I can do is I can add a tag.

113
00:06:54,240 --> 00:06:55,980
‫I'm going to have this heading.

114
00:06:56,990 --> 00:07:00,590
‫And then I'm going to have my imvu, which is going to be my image.

115
00:07:00,890 --> 00:07:01,310
‫Great.

116
00:07:01,790 --> 00:07:08,900
‫And the second section, maybe I want to define this part, this whole part, so I can just simply say

117
00:07:09,170 --> 00:07:13,820
‫this is the author information and this is the subscribing part.

118
00:07:14,240 --> 00:07:18,110
‫So what I can do is I can use Deb, I can use this.

119
00:07:18,110 --> 00:07:23,960
‫They can do such positive is going to have all the information they can know is going to have the subscription.

120
00:07:23,960 --> 00:07:28,100
‫But then again, I'm going to create this section now.

121
00:07:28,100 --> 00:07:32,300
‫This time I have some meaningful content, which is I have this article.

122
00:07:33,410 --> 00:07:37,860
‫So what I can do is I can you articulate so I can I can use this article.

123
00:07:38,600 --> 00:07:43,850
‫Now this help Google to understand, you know, the text that we are going to have is related to article.

124
00:07:44,180 --> 00:07:49,640
‫Even if any other developer is working, they can directly reference that, OK, the text that I'm going

125
00:07:49,640 --> 00:07:52,130
‫to have is related to article.

126
00:07:52,820 --> 00:07:56,840
‫So in this way, I'm going to have all the content related to my article.

127
00:07:57,170 --> 00:08:00,900
‫Now this is the general structure that got me through on that structure.

128
00:08:00,920 --> 00:08:08,180
‫Maybe some people start with the section directly and inside that they can have article inside that

129
00:08:08,180 --> 00:08:15,560
‫they can have a one time and then they can have an image and then they can have multiple paragraph.

130
00:08:15,980 --> 00:08:17,700
‫Make sure you visualize things.

131
00:08:17,700 --> 00:08:19,160
‫So this will work well.

132
00:08:20,140 --> 00:08:28,240
‫So what I heard is I created an Arctic dog here, and then I ordered at one time.

133
00:08:29,450 --> 00:08:30,860
‫It is going to be this line.

134
00:08:32,020 --> 00:08:34,760
‫And then I added, I image something like this.

135
00:08:35,350 --> 00:08:41,380
‫And then my paragraphs, different paragraph I can, how are they here specifically for that subscription

136
00:08:41,380 --> 00:08:41,770
‫part?

137
00:08:41,980 --> 00:08:43,480
‫And then my other paragraph.

138
00:08:43,840 --> 00:08:45,540
‫So this is also going to work fine.

139
00:08:45,700 --> 00:08:48,160
‫Its total depends how you lay out things.

140
00:08:49,450 --> 00:08:56,680
‫And my idea was to give you brief about this wholesome indicate that there are certain other very truly

141
00:08:56,680 --> 00:09:04,090
‫odd things you can use this article to, and then you can use header apart to define your H1 tag as

142
00:09:04,090 --> 00:09:07,360
‫well as your image so you can use this.

143
00:09:07,900 --> 00:09:13,570
‫So this is going to be the head up art and inside that you can add multiple sections, you can add multiple

144
00:09:13,570 --> 00:09:14,200
‫paragraphs.

145
00:09:14,560 --> 00:09:16,330
‫So that is also going to work fine.

146
00:09:16,870 --> 00:09:22,630
‫Now, if you have multiple articles site, if you have multiple different sections, what you can do

147
00:09:22,630 --> 00:09:24,760
‫is you can have multiple article tags.

148
00:09:24,760 --> 00:09:30,980
‫So this is the article tag first and then you can have the article tag second, then you can have articles,

149
00:09:30,980 --> 00:09:31,690
‫tag partner.

150
00:09:32,230 --> 00:09:36,690
‫So that's how it is going to work, and I hope you'll get the idea to visualize thing.

151
00:09:37,970 --> 00:09:44,300
‫So we created our section here inside, I mean, then you open an article, dog, then we had our H1

152
00:09:44,300 --> 00:09:48,650
‫that image new paragraph paragraph and keep on calling.

153
00:09:50,300 --> 00:09:55,190
‫So this was the base information, if you're going to understand this content right now, it is going

154
00:09:55,190 --> 00:09:57,410
‫to work well for you in future as well.

155
00:09:57,770 --> 00:10:01,820
‫During the part as well as during the project section.

156
00:10:02,900 --> 00:10:08,240
‫Now in the next section, I'm going to discuss more about these semantic dogs, their meaning and how

157
00:10:08,390 --> 00:10:09,830
‫a page is structured.

158
00:10:10,160 --> 00:10:14,780
‫There will be few other new elements new dogs that you will discover.

159
00:10:15,410 --> 00:10:17,900
‫Thank you for watching and I hope this was helpful.

160
00:10:17,930 --> 00:10:21,260
‫Make sure to rewatch this lecture if you are not able to understand.

161
00:10:21,530 --> 00:10:25,820
‫Also, try to practice and visualize thing, and I see you guys in the next one.