‫Hey, there.
‫Welcome back, Siobhan, the site now in this lecture, let us discuss about HDMI semantics.
‫Now why this is important and why we are going to use it in our company.
‫Of course, the first thing is something they do, but have more meaning.
‫Let's take things from basics.
‫We use device to add content into our group.
‫Similarly, here you can see we use this to our content in the main section.
‫So we have banner and then we have certain products here.
‫We use this day to wrap things and go for.
‫So we have a logo, we have countries and few other information.
‫Similarly, we have certain other dogs that can utilize and loved them, and that's where this HD embedded
‫semantics come into picture.
‫When we used this day, when we used this band, we don't have any idea what content we are referring
‫to.
‫We need to add class than we need to.
‫A great idea.
‫That's great.
‫We can do that, but we don't have any information about the content and it does nothing about the content.
‫And that's where these semantics come into Bachir.
‫All these semantic elements clearly defines about the content.
‫So interactive.
‫What I can do is I have a dog called footer.
‫Yep.
‫We have back all patrol and we can use it, so I don't need to utilize this, do I can use that spotter?
‫Remember, we can still use them inside that section.
‫We can still use Dev to divide according to our own requirements.
‫But for these major divisions or these major, I think we can use this semantic tags.
‫So we have two types of dogs now, two type of blocks.
‫The first one is nonsense and tech element, which is Devon Span.
‫And the second one is Semantic Element, which is going to be about our form, about our table, about
‫these for the article and few other.
‫Now these are important.
‫These semantics are important because we can just read about them and understand what they're going
‫to do or understand what the content is referring to.
‫For example, if I see further, I can directly understand or visualize that this is going to be something
‫related to at the bottom.
‫And the content will be some length.
‫Be something related to logo or maybe have some copyright information so he can visualize thing.
‫That's the important part of the mandate.
‫Now let me do certain things.
‫So we are going to use me in here because we know this is going to be mean content.
‫And hair and scrub, this navigation, which is basically Haydar, what I can do is instead of this,
‫I can use header.
‫Here I can wrap things with meaningful names, meaningful tags.
‫Now these bags are already defined just like Deb, just like Span.
‫So this is harder.
‫I can understand this.
‫This is my mean.
‫I can understand this.
‫This is my fault.
‫Now, if you visualize the body, now we have our head up inside our body.
‫Then we have our mean part and then we have our foot up our heads really well.
‫Not just to, you know, not just to the developer, but also Google.
‫Understand this.
‫That means the search engine.
‫Understand this if Google right to read your page, they understand, OK, this is the part.
‫This is the main part.
‫This is the product bar.
‫So your browser understand this when your browser is noting some content there understand, OK, this
‫is the part.
‫This is the main part.
‫This is the counterpart.
‫So this is important.
‫You can still art classes to define any particular name.
‫Maybe you just want to give us specific last name your photo itself so you can refer to them with photo
‫and then your class name as well.
‫So that's how this is going to work.
‫Now there are several semantic tags.
‫The common one that we use was form.
‫You can directly understand when I see a form, you can visualize things that, OK, we are going to
‫have a form so we can understand about this.
‫If I talk about Table, you can understand, OK, I'm going to create a table when I use this table
‫tag.
‫But if I say Div, I can not understand what the content will be.
‫So that's where the semantic and automatic comes into picture.
‫You can refer to this as a nuance topic.
‫More student Most beginners are not familiar with this concept.
‫They have started out, but the easiest thing that I can tell you is you divide things according to
‫head.
‫Then you have your main and then you have your partner.
‫That's how a general flow works.
‫Now there are different other parts.
‫When we walk with this header, we have this now bar.
‫So now everybody is going to have all the information off that navigation.
‫Now inside man, you are going to have multiple sections.
‫So what you can do is you can use this section and this section can can be related to anything.
‫We can define anything.
‫Maybe I want to divide this section into multiple divisions or wrapper.
‫I can use this do so.
‫I can divide this into multiple levels so you can use device.
‫There is no issue, but on a general level, on a high level, you use this header, you use this now.
‫And similarly, I can add multiple section.
‫I can have different other sections to define different content.
‫I hope you got the basic idea now inside.
‫For that, I can divide sections I can utilize there also at the highest level, use the semantics at
‫lower level where you need more control.
‫You can use these division basic thing that you will understand once we start working with different
‫projects.
‫Moving forward, I also want to discuss about a few other concepts here, everything is dependent on
‫your visualization, so make sure you understand things.
‫But for example, now suppose I'm working with a blog.
‫So let me open a blog post.
‫I suppose I'm walking with a blog.
‫Let's take this example here, I have this heading and I have this image, then I have Saturday in section,
‫then I have a paragraph and few other information, so that's how we are working with a blog.
‫This is my header that does my navigation, and this is going to be my photo.
‫So this give you a base idea of our page.
‫If I want to convert this whole information into my structure, I'm going to have a header that says,
‫Great, I'm going to have this mini, which is going to have all the information, and then I'm going
‫to have a quote that things are simple.
‫Then I'm going to find the section which is going to have information about this painting and this image.
‫What I can do is I can add a tag.
‫I'm going to have this heading.
‫And then I'm going to have my imvu, which is going to be my image.
‫Great.
‫And the second section, maybe I want to define this part, this whole part, so I can just simply say
‫this is the author information and this is the subscribing part.
‫So what I can do is I can use Deb, I can use this.
‫They can do such positive is going to have all the information they can know is going to have the subscription.
‫But then again, I'm going to create this section now.
‫This time I have some meaningful content, which is I have this article.
‫So what I can do is I can you articulate so I can I can use this article.
‫Now this help Google to understand, you know, the text that we are going to have is related to article.
‫Even if any other developer is working, they can directly reference that, OK, the text that I'm going
‫to have is related to article.
‫So in this way, I'm going to have all the content related to my article.
‫Now this is the general structure that got me through on that structure.
‫Maybe some people start with the section directly and inside that they can have article inside that
‫they can have a one time and then they can have an image and then they can have multiple paragraph.
‫Make sure you visualize things.
‫So this will work well.
‫So what I heard is I created an Arctic dog here, and then I ordered at one time.
‫It is going to be this line.
‫And then I added, I image something like this.
‫And then my paragraphs, different paragraph I can, how are they here specifically for that subscription
‫part?
‫And then my other paragraph.
‫So this is also going to work fine.
‫Its total depends how you lay out things.
‫And my idea was to give you brief about this wholesome indicate that there are certain other very truly
‫odd things you can use this article to, and then you can use header apart to define your H1 tag as
‫well as your image so you can use this.
‫So this is going to be the head up art and inside that you can add multiple sections, you can add multiple
‫paragraphs.
‫So that is also going to work fine.
‫Now, if you have multiple articles site, if you have multiple different sections, what you can do
‫is you can have multiple article tags.
‫So this is the article tag first and then you can have the article tag second, then you can have articles,
‫tag partner.
‫So that's how it is going to work, and I hope you'll get the idea to visualize thing.
‫So we created our section here inside, I mean, then you open an article, dog, then we had our H1
‫that image new paragraph paragraph and keep on calling.
‫So this was the base information, if you're going to understand this content right now, it is going
‫to work well for you in future as well.
‫During the part as well as during the project section.
‫Now in the next section, I'm going to discuss more about these semantic dogs, their meaning and how
‫a page is structured.
‫There will be few other new elements new dogs that you will discover.
‫Thank you for watching and I hope this was helpful.
‫Make sure to rewatch this lecture if you are not able to understand.
‫Also, try to practice and visualize thing, and I see you guys in the next one.