How to Use div tags in HTML
div tags are huge in HTML, because they allow you to create blocks of content.
Just reading these words won't make you understand this.
Let's actually look at an example.
Let's take the website, youtube.
You notice how youtube has a video page when you click on a video and then underneath the video is a description of the video, like and dislike buttons, etc.
The video, along with the like/dislike buttons and the description, all are the same, width-wise on the web page. You wouldn't want the description running longer width-wise than the video. You would the descripton, like/dislike buttons, etc contained within the same block as the video.
So the best way of going about this from a programmer/web designer perspective is to create a div tag in which the video, the description underneath, like/buttons, and all other features are all within this div tag.
In the CSS file, you can simply specify all the attributes of this div tag, one of the most being the width. Say, you want the video to be 400px width, then you would create the div tag to be either be exactly 400 or 420 or so to give a little padding.
So the way to go about this would be to create a div tag and place the video, video description, etc. all within this div tag.
So this is what we will do below.
Video description: This is a video of Carmelo Anthony in a foot locker commercial. While Carmelo Anthony is walking through the halls near a gym, he encounters 2 kids during the week of greatness. The kids ask whether Melo will be part of it. Melo responds that he will, even though he's experienced his share of greatness. The kids say he's definitely very good, but question his greatness. To this, Melo responds that he's won a college championship. One kid said that doesn't really count. Melo responds that he's a 9-time all-star. One kid says that's more of a popularity contest. Melo says that he's won 3 gold medals. One kids says, yea against like Peru. Melo in the end questions whether they comment a lot on the internet.
So if you look at the above video, along with the video description and like/dislike buttons, everything is well structured. All are part of the same container or HTML div tag.
Notice how everything is the same width. This is because they are part of the same div tag, which has a width in this case of 510px.
So let's go around the HTML of this code and then we'll go over the CSS file.
HTML Code
So in the HTML code, we have to create a div tag, in which we enclose the video, video descriptions, and the like/dislike buttons.
We give this div tag an id of "videocontainer"
Below is the HTML code.
We so just simply enclose everything within the div tag with an id of "videocontainer"
CSS Code
Now in our CSS file, we must specify the appropriate attributes for the div container.
We do this through the following CSS code shown below.
Basically, we just give the videocontainer id a width of 510px and a some padding.
And this is all that is required to create a block of content on a web page with HTML.
Notice there is a lot of space to the right of the video.
Youtube uses this space to either place ads or similar videos that a user can then watch next.
So this is the power of using div tags IN HTML to create blocks of sections in a web page.
Related Resources
How to Create Dynamic URLs in Django
How to Create a Video Uploader with Python in Django
How to Create an Image Uploader with Python in Django