Please enter key search to display results.

HomePhân biệt thẻ HTML Block và Inline

Phân biệt thẻ HTML Block và Inline

Trong bài này mình sẽ giải thích khái niệm về HTML Block và HTML Inline. Đây là vấn đề rất quan trọng, bởi nó liên quan đến nhiều thuộc tính CSS.

Có bao giờ bạn thắc mắc rằng, tại sao nội dung của 2 thẻ p lại nằm ở 2 hàng khác nhau, còn ở 2 thẻ span thì lại nằm trên cùng một hàng? Đó là vì trình duyệt quy định cách hiển thị block và inline. Thẻ nào đang hiển thị kiểu block thì nằm trên một khối riêng biệt, còn thẻ nào hiện thị dạng inline thì nằm trên một hàng.

Thẻ HTML block là gì?

HTML block là cách hiển thị của một thẻ HTML trên trình duyệt sẽ ở dạng khối, có độ dài 100% và có chiều cao phụ thuộc vào nội dung nằm bên trong. Điều này có nghĩa rằng tất cả những thẻ HTML nằm phía dưới khi hiển thị lên trình duyệt sẽ nằm ở một hàng khác.

Chúng ta có một số thẻ HTML dạng block như: div, p, header, footer, table, ul, li, section, article.. và nhiều thẻ khác.

Đặc điểm chung của các thẻ này là:

  • Có chiều dài mặc định là 100%
  • Có thể thiết lập khoảng trống giữa nội dung và đường viền.
  • Có thể thay đổi độ rộng bằng thuộc tính width.

Ví dụ: Hai thẻ div sẽ hiển thị trên 2 hàng khác nhau.

<div>Nội dung thẻ div thứ nhất</div>
<div>Nội dung thẻ div thứ hai</div>

Kết quả:



Nội dung thẻ thứ nhất


Nội dung thẻ thứ hai

Thẻ HTML inline là gì?

HTML inline là cách hiển thị nội dung bên trong của thẻ HTML trong 1 phạm vi xác định. Nghĩa là chiều dài của nó sẽ phụ thuộc vào độ lớn của dữ liệu. Vì vậy, các thẻ inline sẽ hiển thị nối tiếp nhau chứ không xuống hàng như block.

Có rất nhiều thẻ HTML hiển thị dạng inline như: span, strong, i, b, a, br, big, button, textarea, label, …

Ví dụ: Hai thẻ span sẽ hiển thị dữ liệu liên tiếp nhau, nó không nằm ở 2 hàng như trong ví dụ 1.

<span>Nội dung thẻ span thứ nhất</span>
<span>Nội dung thẻ span thứ hai</span>

Khi nào sử dụng thẻ HTML inline và block?

Việc phân ra hai định dạng như vậy là có lý do cả. Nếu bạn muốn tạo một thẻ HTML bao bọc một khối bên trong thì nên sử dụng thẻ div hoặc thẻ p, bởi vì nó hiển thị dạng block. Còn nếu bạn muốn hiển thị dữ liệu trên một hàng thì hãy sử dụng các thẻ inline.

Câu hỏi đặt ra là liệu ta có thể biến một thẻ block thành thẻ inline không? Rất đơn giản, chỉ cần sử dụng thuộc tính CSS display là được nhé.

Ví dụ: Thiết lập CSS display:inline cho hai thẻ div.

<!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>

Kết quả:



Nội dung thẻ div inline thứ nhất Nội dung thẻ div inline thứ nhất

Ngược lại, nếu bạn muốn chuyển từ inline sang block thì sử dụng thuộc tính CSS:

<!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>

Kết quả: Mặc dù là thẻ span nhưng vẫn hiển thị block.



Nội dung thẻ span block thứ nhất



Nội dung thẻ span block thứ hai

Như vậy là mình đã hướng dẫn xong cách sử dụng inline và block trong HTML. Sau này khi làm việc với CSS bạn sẽ gặp nó rất nhiều đấy nhé.

Bài tập

Câu 1 Form liên hệ (Contact Form Validation)

Yêu cầu:

Tạo form liên hệ đơn giản:

Yêu cầu xử lý bằng JS:

  1. Ngăn reload khi submit (event.preventDefault()).

  2. Kiểm tra:

    • Họ tên: không rỗng, có ít nhất 2 từ.

    • Email: đúng định dạng [email protected].

    • Nội dung: ít nhất 10 ký tự.

  3. Nếu hợp lệ → in ra Cảm ơn bạn đã liên hệ! màu xanh.
    Nếu sai → in thông báo lỗi màu đỏ (hiển thị lỗi đầu tiên gặp phải).

  4. Sau khi gửi thành công → tự động xóa nội dung input sau 1 giây.

Câu 2 – Quản lý công việc (Todo List)

HTML gợi ý:

 

Yêu cầu:

  1. Khi bấm “Thêm”, nếu ô input có nội dung → thêm 1 <li> mới vào danh sách.

    • Mỗi <li> có nút “Xóa”.

    • Nếu input trống → hiển thị cảnh báo "Vui lòng nhập nội dung!".

  2. Khi bấm “Xóa” → xóa công việc tương ứng.

  3. Hiển thị tổng số công việc hiện có trong #stats (ví dụ: “Tổng: 3 công việc”).

  4. Dùng querySelector và addEventListener (không inline JS).

Câu 3 Lấy dữ liệu người dùng từ API (fetch + async/await)

HTML gợi ý:

 
<section id="users"> <h2>Danh sách người dùng</h2> <button id="load-btn">Tải dữ liệu</button> <ul id="user-list"></ul> <p id="error"></p> </section>

Yêu cầu:

  1. Khi bấm “Tải dữ liệu”, dùng fetch + async/await gọi API:

     
    https://jsonplaceholder.typicode.com/users

  2. Trong lúc tải:

    • Disable nút “Tải dữ liệu”.

    • Hiển thị trạng thái "Đang tải dữ liệu...".

  3. Khi tải xong:

    • Hiển thị danh sách tên người dùng (name) và email.

    • Mỗi dòng: <li>Leanne Graham - [email protected]</li>.

  4. Nếu lỗi (mạng hoặc status != 200) → hiển thị "Không thể tải dữ liệu, vui lòng thử lại!" màu đỏ.

  5. Trước khi render mới, phải xóa nội dung cũ trong danh sách và thông báo lỗi.

Câu 4 – Tìm kiếm và xem chi tiết người dùng

Yêu cầu:

  1. Khi bấm “Tìm”:

    • Lọc danh sách người dùng (đã tải từ Câu 3) theo tên chứa từ khóa (không phân biệt hoa thường).

    • Nếu không tìm thấy → hiển thị "Không tìm thấy người dùng nào.".

    • Nếu có → in <li>: Tên — Công ty.

  2. Khi bấm vào 1 <li> trong kết quả → hiển thị chi tiết người dùng gồm:

    • Họ tên, Email, Số điện thoại, Tên công ty, Địa chỉ (street, city).

  3. Nếu người dùng chưa bấm “Tải dữ liệu” ở Câu 3 → hiển thị "Vui lòng tải dữ liệu trước.".

  4. Code cần tách thành các hàm nhỏ: renderList(), renderError(), showDetail(), filterUsers().

Bài viết liên quan:

Sắp xếp sủi bọt – Bubble Sort
TypeScript với Kiểu Dữ Liệu Cơ Bản – 3
TypeScript với Kiểu Dữ Liệu Cơ Bản – 2
TypeScript với Kiểu Dữ Liệu Cơ Bản – 1
Typescript cơ bản và cách cài đặt cho người mới
Thực Hành Micro Frontends
Dynamic Component trong Angular
Async Validator trong Angular Form
Reactive Forms Trong Angular (Phần 2)
Reactive Forms Trong Angular (Phần 1)
Template-driven Forms Trong Angular (Phần 2)
Template-driven Forms Trong Angular (Phần 1)

THÊM BÌNH LUẬN

Giới thiệu

hocvietcode.com là website chia sẻ và cập nhật tin tức công nghệ, chia sẻ kiến thức, kỹ năng. Chúng tôi rất cảm ơn và mong muốn nhận được nhiều phản hồi để có thể phục vụ quý bạn đọc tốt hơn !

Liên hệ quảng cáo: [email protected]

Kết nối với HỌC VIẾT CODE

© hocvietcode.com - Tech888 Co .Ltd since 2019