Hello and welcome back. This lesson is gonna be about the div element remember these different elements that we saw in the previous lesson.
Well one way of looking at these elements is that they are actually containers to whole different parts of the content like that it is a container for logo and introductory content on the page then a side is a container to hold side elements on the page and so on.
But just to give you a little background these elements were introduced in HDMI 5 which as you know is the latest version of HD Yemen.
And we never had them earlier when each team 5 wasn’t introduced.
So at that time what one could use instead is a container element that we still use commonly to date and that element is the diff element and the div element
is basically a box that can act as a container for other elements so earlier in place of each of these elements we used to just add a div element and
then give it an idea of header or a side or footer etc. As you can see here I talk about the idea a bit later I’ve prepared a complete lesson for that.
So now a question you might have manages to HTML 5 has provided as dedicated elements what do use that development for then.
Well we still use the def element wherever we need to add a container for any group of elements that it doesn’t make sense to add any of these predefined container elements to explain with few examples.
Let’s say I have three images on my website and I want to put them inside a container so that if at
any time I want to move these three images to center top right etc I just need to move the container
instead of moving each individual image.
Besides by just changing the height and weight of the container I can also control the space taken by these three images together.
And this is one of the main reasons why we put elements inside containers so that we can simply modify
the container property rather than modifying it for each individual element.
Now the reason why I use the div element is that this group of three images is known as section so
it doesn’t really make sense to use a section element here.
It’s not even an article.
So again I shouldn’t use the article element either or any other predefined element since it doesn’t
fit into the definition.
It’s simply a container for TV images together therefore whenever we need to add a container but it’s
not any of the predefined elements and we can use that div element and that’s why we also call the dev
element a nonsemantic element because it doesn’t carry a default meaning like pattern f a site etc.
It can have any meaning we want to give it like earlier we use the same div to act as a header container
on one hand for the container on the other hand and so on.
In general, developers use def containers to divide in each dismal page into different sections so as to easily apply
CSS as the styling properties to these div elements and therefore to easily manage paste designs.
One last example I would like to show you is of this website that I used a div element to hold these three boxes together.
Now you can see the container because I haven’t provided any border or background color but as I mentioned
one of the advantages of wrapping these three boxes inside the div is that if I make the box smaller
then these three boxes also become smaller and therefore I don’t have to adjust the individual width
of each box.
Moreover, since I added these three boxes inside the div element the dev now becomes the parent element
of these three boxes whereas these three boxes become its style elements.
So this is the relation all the elements inside an element are called it’s child elements and likewise
for all the child elements the container element becomes the parent element but that’s about the diff
But before I finish let me add the div element in our document and show you life.
So I go to our HDMI document I just cleared the previous content and let’s now add a heading and a paragraph.
Let’s use each one heading type and this is just an example.
The same can work for other elements as well than inside.
I type some random content and I’m going to make it quite long.
Then I add a paragraph tag and again type some random content
we now have two elements added.
Let me show you how it looks now I just saved a document
and refreshed the web page and here are the heading in the paragraph I can see that both the heading
and the paragraph is taking up the entire route of the page.
Now let’s say I want them to occupy only 50 percent of the vote in order to do so I would have to first
set the weight of each one to 50 percent and then I would have to set the weight of the paragraph
to 50 percent to avoid doing this for each individual element.
You now know that I can simply create a div tag and then inside I can put both the heading in the paragraph
so I go to the document and then before this h1 tag I add the opening div tag
and then after this ending p tag I had the closing div tag.
Now these two elements are within the opening and closing of tax and hence are inside this div and this
div is now a container for these elements.
Now I go inside the opening div tag and add the word property by typing style is equal to.
It’s a basic styling that I’m applying and we’ll talk about it more and see us as lessons.
Then inside coats I type with 50 percent.
Now I have applied this word 50 percent to this div element I now save the document and then refresh
the web page.
You can see that by just setting the word of the div element to 50 percent the weight of heading and
paragraph elements got automatically reduced to 50 percent.
And in terms of relation, this div is now the parent element of this heading in the paragraph and that’s
the reason why modifying the properties of this pattern div container is impacting the properties of
the child heading.
And paragraph elements now within the style.
If I add the background color of the div element
and say the green color and save the document and then refresh the web page you can now see and feel this
Now the text color looks quite odd but no problem I go to our AGM and document and said the color to
white and see it on the browser now I refresh it again.
And now the color of both heading and paragraph changes to white so I’m just changing the properties
of the div element and the properties of all the elements inside.
That is the child elements are changing automatically.
Hence this saves time and lines of coding for each individual element.
So that’s the quality of the div element you’ll see me using this div element and I’ll be designing
the website project as well but I hope this lesson gave you a fair idea about the role of the div elements
in the coming lessons.
I’m going to be talking about more different elements as well as other interesting topics in HDMI.
So keep learning and see when the next lesson.
Also, Read –