TopDev
#HTML CSS

Cách sử dụng thẻ <div> và <span> trong HTML

minhu 📖 3 phút đọc

Thẻ <div> và <span> trong HTML được sử dụng để nhóm và định dạng nội dung. Chúng đều là các thẻ chứa không có ý nghĩa ngữ nghĩa đặc biệt (non-semantic elements), nhưng rất hữu ích cho việc cấu trúc và định dạng trang web. Dưới đây là hướng dẫn chi tiết về cách sử dụng thẻ <div> và <span>:

Thẻ <div>#

  • Mục đích: Thẻ <div> là một khối (block-level element) được sử dụng để nhóm các phần tử và tạo cấu trúc cho trang web. Nó chiếm toàn bộ chiều rộng của phần tử chứa nó và bắt đầu từ dòng mới.

  • Cú pháp: `

    `

  • Ví dụ Sử Dụng:

` Example of div

My Website

Welcome to my website. This is a content section.

Footer content here

`

.container: Nhóm các phần tử lại với nhau, định dạng chung cho toàn bộ trang.

  • .header: Định dạng phần đầu trang.

  • .content: Định dạng phần nội dung chính.

  • .footer: Định dạng phần chân trang.

Thẻ <span>#

  • Mục đích: Thẻ <span> là một phần tử inline được sử dụng để nhóm các phần tử hoặc văn bản trong một dòng mà không tạo ra sự ngắt dòng. Nó chủ yếu được dùng để áp dụng các kiểu CSS cho các phần nhỏ của văn bản hoặc nhóm các phần tử inline.

  • Cú pháp: `

    `

  • Ví dụ Sử Dụng:

` Example of span

This is a paragraph with highlighted text in the middle.

`

.highlight: Áp dụng kiểu CSS cho phần văn bản được nhóm bởi thẻ <span>, làm cho nó nổi bật với nền màu vàng và chữ đậm.

Sự Khác Biệt Chính#

  • Khối và Inline: Thẻ <div> là thẻ khối, có nghĩa là nó chiếm toàn bộ chiều rộng của phần tử chứa nó và luôn bắt đầu trên dòng mới.

    • Thẻ <span> là thẻ inline, có nghĩa là nó chỉ chiếm không gian cần thiết và không tạo ra ngắt dòng.

  • Sử Dụng: Dùng <div> khi bạn cần nhóm các phần tử lớn hơn hoặc cấu trúc trang, như các phần của layout.

    • Dùng <span> khi bạn cần nhóm các phần tử nhỏ hơn hoặc áp dụng kiểu CSS cho một đoạn văn bản hoặc các phần tử inline khác.

Khi Nào Nên Sử Dụng#

  • Thẻ <div>: Khi bạn muốn tạo cấu trúc layout cho trang web hoặc nhóm các phần tử khối lại với nhau để định dạng hoặc xử lý.

  • Thẻ <span>: Khi bạn cần áp dụng kiểu CSS cho một phần nhỏ của văn bản hoặc nhóm các phần tử inline mà không làm thay đổi dòng của chúng.

Cả hai thẻ <div> và <span> đều rất linh hoạt và hữu ích trong việc tạo cấu trúc và định dạng cho các phần tử HTML trên trang web.

Bài liên quan trong #HTML CSS

✓ Đã sao chép link