How to use div tag in HTML to create interface blocks
In this article, I will show you how to use the div tag and some related CSS properties. Thereby, you will know how to create blocks on the interface of a web page.
The div tag plays a very important role, it is used to create a cover for a position ( block ) on the interface. Previously, when there were no header, footer, article .. tags, programmers used div tags to create interface blocks on header and footer. Now it's different, you can use div tags or those newly added tags instead.
But after all, these new cards are nothing special. It is essentially the same as the div tag, just giving a new name to look at the HTML layout that one can judge its exact position on the interface.
Mục lục
Properties of div tags in HTML
The div tag in HTML is a normal tag, displayed by default as a block. Therefore, we often use it to create blocks on the interface of the website.
The default length of a div tag is 100% , meaning that it spans full from left to right, the domain is limited by the amount of space that the outer HTML tags make up. The div tag does not have an attribute to adjust the display at all, which we must combine with CSS to change if needed.
The div tag syntax is as follows :
<div> ... Nội dung bên trong </div>You can also create multiple nested div tags like this :
<div> <div> <div> ... Nội dung bên trong </div> </div> </div>Of course, overusing HTML tags in a theme will affect page load speed, SEO .. and many other factors. Therefore, for experienced frontend people, they will be very limited in using too many levels of HTML.
How to create a block div on HTML interface
To use it fluently, you must know how to combine with CSS properties to customize the default display of div tags.
Change background for div . tag
Quite simply, we just need to use the background property in CSS.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> div{ background: white; } </style> </head> <body> <div> CHÀO MỪNG BẠN ĐẾN VỚI THẺ DIV </div> </body> </html>Set height and width for div . tag
Using the height and width properties, we can change the height and width of the div tag.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> div{ background:white; height: 300px; width: 400px; } </style> </head> <body> <div> CHÀO MỪNG BẠN ĐẾN VỚI THẺ DIV </div> </body> </html>Create border for div . tag
To create a border, we use the border property in CSS.
div{ background: yellow; height: 300px; width: 400px; border: solid 1px red }Change the space between the content and the border
Run the above examples and you will see the content inside the div tag close to the border. Now I will use the padding property in CSS to create space between them.
div{ background: yellow; height: 300px; width: 400px; border: solid 1px red; padding: 30px; }Set screen centering for div . tag
If you want the div tag to display centered relative to the margins, use the margin attribute.
div{ background: yellow; height: 300px; width: 400px; border: solid 1px red; padding: 30px; margin: 0px auto; }Where 0px is the distance at the top and bottom, and auto is the automatic distance between the left and right. Because I set auto, it will automatically center. Let's run the example to see the results.
Move left or right with float
The float property in CSS will help us align left or right for that div tag.
- float:left => align left
- float:right => right alignment
Left wing
div{ background: yellow; height: 300px; width: 400px; border: solid 1px red; padding: 30px; float:left }Right
div{ background: yellow; height: 300px; width: 400px; border: solid 1px red; padding: 30px; float:right }It's too simple, isn't it? In this article, I just want to introduce the div tag and some of the most commonly used operations. In the next articles, I will apply it to building layouts.
