Phần Tử Khối (Block Element) Và Phần Tử Nội Tuyến (Inline Element) Trong HTML

5/5 - (2 đánh giá)

Trong HTML, hầu hết các phần tử được phân thành 2 loại đó là: phần tử khối (block element) và phần từ nội tuyến (inline element). Vậy 2 dạng phần tử này nó có ý nghĩa và tác dụng như thế nào và những thẻ nào thuộc dạng phần tử khối và thẻ nào thuộc phần tử nội tuyến? Bài viết này chúng ta cùng đi tìm hiểu rõ hơn về phần tử khối và phần tử nội tuyến trong HTML nhé.

Phần tử khối (Block Element) là gì?

Phần tử khối (Block Element) đúng như tên gọi của nó với chức năng tạo thành 1 khối với các đặc điểm như sau:

Luôn bắt đầu trên 1 hàng mới
Phần tử phía sau nó cũng cũng được bắt đầu trên 1 hàng mới dù đó có là phần tử khối hay là phần tử nội tuyến.
Chiều rộng không phụ thuộc vào nội dung bên trong mà nó chiếm toàn bộ chiều rộng của phần tử chứa nó.

Ví dụ minh họa về phần tử khối:

Phần tử số 1 (Phần tử nội tuyến)

Phần tử số 2 (Phần tử khối)

Phần tử số 3 (Phần tử khối)

Phần tử số 4 (Phần tử nội tuyến)

Một số thẻ thuộc loại phần tử khối:

<div>
<p>
<h1>, <h2>,…, <h6>
<ul>, <li>
<table>
….

Tham khảo thêm

Phần tử nội tuyến (Inline Element) là gì?

Phần tử nội tuyến (Inline Element) là phần tử có thể nằm chung dòng với các phần tử nội tuyến khác và nó có các đặc điểm như sau:

Không bắt đầu trên 1 hàng mới ngoại trừ trường hợp trước nó là 1 phần tử khối.
Chiều rộng phụ thuộc vào phần nội dung bên trong nó

Ví dụ minh họa về phần tử nội tuyến:
Phần tử số 1 (Phần tử nội tuyến)
Phần tử số 2 (Phần tử nội tuyến)

Phần tử số 3 (Phần tử khối)

Phần tử số 4 (Phần tử nội tuyến)
Phần tử số 5 (Phần tử nội tuyến)

Một số thẻ thuộc loại phần tử nội tuyến:

span>
<a>
<img>
….

Thẻ <div> trong HTML

Thẻ <div> là 1 thẻ tiêu biểu của phần tử khối nó dùng để tạo block, tạo vùng chứa các phần tử khác. Thẻ <div> nó không có định dạng gì đặc biệt nên nó thường phải dùng CSS để định dạng cho nó.

<p>Đoạn văn bản 1</p>
<div align="center">
	Đoạn văn bản 2
	<p>Đoạn văn bản 3</p>
	<p>Đoạn văn bản 4</p>
</div>
<p>Đoạn văn bản 5</p>
<div align="right">
	<p>Đoạn văn bản 6</p>
	<p>Đoạn văn bản 7</p>
</div>

Thẻ <span> trong HTML

Thẻ <span> trong HTML là 1 thẻ nội tuyến tiêu biểu, nó thường dùng để định dạng cho văn bản mà không làm cho văn bản bị ngắt dòng. Bạn có thể xem ví dụ như sau:

<p>Trong đoạn văn bản, <span style="background-color:green; font-size: 25px;">các chữ nằm trong thẻ span</span> được định dạng khác</p>

Gợi ý: Để kiểm tra 1 phần tử nào đó xem nó thuộc phần tử khối hay phần tử nội tuyến, ta chỉ cần thêm style=”border:1px solid black” vào thẻ mở để xem kích thước của phần tử. Ví dụ <div style=”border:1px solid black”>Xin chào!</div>

Lời kết

Như vậy là bạn đã biết thế nào là phần tử khối (Block Element) và thế nào là phần tử nội tuyến (Inline Element) trong HTML rồi nhé. Với cách nhận biệt và mẹo để kiểm tra bạn chỉ cần làm theo hướng dẫn ở trên là có thể phân biệt được.

Nếu thấy bài viết hay hãy like và share ủng hộ blog nhé. Và nhớ theo dõi series tự học HTML để tìm hiểu thêm về nhiều thẻ trong HTML hơn nữa nhé. Chúc bạn thành công!