Distinguish HTML Block and Inline tags
In this article, I will explain the concept of HTML Block and HTML Inline. This is a very important issue, because it involves many CSS properties.
Have you ever wondered why the contents of 2 p tags are located in 2 different rows, and in 2 span tags, they are on the same row? That's because the browser determines how to display blocks and inline. Cards that are showing block style are on a separate block, and cards that are showing inline are on a row.
Mục lục
What is an HTML block tag?
HTML block is the display of an HTML tag on the browser that will be in the form of a block, with a length of 100% and a height depending on the content inside. This means that all the HTML tags below when displayed in the browser will be in a different row.
We have some block HTML tags like: div, p, header, footer, table, ul, li, section, article .. and many others.
The common features of these cards are:
- Has a default length of 100%
- The space between the content and the border can be set.
- The width can be changed using the width property.
Example : Two div tags will display on 2 different rows.
<div>Nội dung thẻ div thứ nhất</div> <div>Nội dung thẻ div thứ hai</div>Result :
Nội dung thẻ thứ nhất Nội dung thẻ thứ haiWhat is an inline HTML tag?
HTML inline is a way to display the content inside of an HTML tag within a specified range. That is, its length will depend on the size of the data. Therefore, the inline tags will be displayed one after the other, not in a row like block.
There are many HTML tags that display inline form such as span, strong, i, b, a, br, big, button, textarea, label , …
Example : Two span tags will display consecutive data, it is not in 2 rows as in example 1.
<span>Nội dung thẻ span thứ nhất</span> <span>Nội dung thẻ span thứ hai</span>When to use inline and block HTML tags?
There is a reason to split the two formats like that. If you want to create an HTML tag that wraps a block inside, you should use a div or a p tag, because it renders a block. If you want to display data in a row, use inline tags.
The question is can we turn a block tag into an inline tag? Very simple, just use the CSS display property.
Example : Set CSS display:inline for two div tags.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> div{ background: white; display: inline } </style> </head> <body> <div>Nội dung thẻ div inline thứ nhất</div> <div>Nội dung thẻ div inline thứ hai</div> </body> </html>Result :
Nội dung thẻ div inline thứ nhất Nội dung thẻ div inline thứ nhấtConversely, if you want to convert from inline to block, use the CSS property:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> span{ background: white; display: block } </style> </head> <body> <span>Nội dung thẻ span block thứ nhất</span> <span>Nội dung thẻ span block thứ hai</span> </body> </html>Result : Although it is a span tag, it still displays block.
Nội dung thẻ span block thứ nhất Nội dung thẻ span block thứ haiSo I have finished the tutorial on how to use inline and block in HTML. Later when working with CSS you will encounter it a lot.
