Thẻ Div và Span trong HTML

Ngày hôm nay, chúng ta sẽ cùng nhau đi vào tìm hiểu hai thẻ quan trọng hay được sử dụng để tạo bố cục, phân chia không gian trong thiết kế web là thẻ div và span nhé.

1. Inline và Block Elements:

Trước khi đi sâu vào thẻ div và span thì mình sẽ giới thiệu sơ qua hai khái niệm quan trọng: inline và block elements. Đây là hai cách khác nhau để quyết định các phần tử HTML sẽ hiển thị trên trang web như thế nào.

1.1. Block Elements:

Các phần tử block luôn bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng có sẵn của phần tử cha (container). Chúng giống như những “người tham lam” luôn không cho phép ai “xâm phạm” đến không gian riêng của mình.

• Ví dụ:
  • <h1> đến <h6> (các thẻ tiêu đề): Chắc chắn bạn đã quen thuộc với chúng. Các thẻ này thường được sử dụng để tạo tiêu đề cho các phần nội dung quan trọng.<p> (thẻ đoạn văn): Dùng để chứa các đoạn văn bản.<div> (thẻ “chia”): Chúng ta sẽ tìm hiểu kỹ hơn về nó ngay sau đây nhé.

1.2. Inline Elements:

Các phần tử inline sẽ ngược lại block element là sẽ không bắt đầu trên một dòng mới và nó chỉ chiếm không gian vừa đủ để chứa nội dung của chúng. Chúng giống như những “người nhân hậu” sẵn sàng chia sẻ không gian với những người khác.

• Ví dụ:
  • <a> (thẻ liên kết): Dùng để tạo các liên kết đến các trang web khác hoặc các phần khác nhau trong cùng một trang web.<span> (thẻ “khoảng”): Chúng ta sẽ tìm hiểu kỹ hơn về nó ngay sau đây.<img> (thẻ hình ảnh): Dùng để chèn hình ảnh vào trang web

Thẻ Div là gì?

<div> là viết tắt của “division” (phân chia). Đây là một phần tử block được sử dụng để tạo ra các vùng chứa (container) trên trang web. Nó không có ý nghĩa đặc biệt nào về mặt ngữ nghĩa, mà chỉ đơn thuần là một công cụ để nhóm các phần tử HTML lại với nhau.

Tại sao chúng ta cần thẻ Div?

Tổ chức bố cục: div giúp bạn chia trang web thành các phần riêng biệt (ví dụ: header, navigation, main content, footer). Điều này giúp bạn dễ dàng quản lý và sắp xếp các phần tử HTML trên trang web.

Áp dụng CSS: div cho phép bạn áp dụng các kiểu CSS cho một nhóm các phần tử cùng một lúc. Ví dụ: bạn có thể tạo một div chứa một hình ảnh và một đoạn văn bản, sau đó áp dụng một kiểu CSS để tạo background cho div đó.

Tạo bố cục phức tạp: Khi kết hợp với CSS, div cho phép bạn tạo ra các bố cục trang web phức tạp và linh hoạt.

Ví dụ sử dụng Div

Ví dụ 1: Tạo một header đơn giản

See the Pen
thẻ div html by haycuoilennao19 (@haycuoilennao19)
on CodePen.

Trong ví dụ này, chúng ta tạo một div có id là “header” để chứa tiêu đề và một đoạn văn bản giới thiệu về trang web. Sau đó, chúng ta có thể sử dụng CSS để định dạng div này (ví dụ: thay đổi màu nền, thêm hiệu ứng, v.v.).

Lưu ý khi sử dụng Div

Trước đây, khi HTML5 chưa ra đời, các nhà phát triển web thường sử dụng thẻ <div> để cấu trúc trang web. Điều này dẫn đến tình trạng “div soup” tức là trang web chứa quá nhiều thẻ <div>, gây khó khăn cho lập trình viên trong việc đọc và bảo trì trang web.

Do đó HTML5 đã giới thiệu các thẻ semantic (thẻ ngữ nghĩa) mới, giúp thiết lập cấu trúc trang web trở nên rõ ràng và dễ hiểu hơn. Ví dụ:

• <header>: Đại diện cho phần đầu của trang web hoặc một phần của trang web.
• <nav>: Đại diện cho phần điều hướng của trang web.
• <article>: Đại diện cho một bài viết độc lập.
• <aside>: Đại diện cho nội dung phụ, liên quan đến nội dung chính.
• <footer>: Đại diện cho phần cuối của trang web hoặc một phần của trang web.

Vì vậy bạn hãy sử dụng thẻ semantic và thẻ div khi:

Nên dùng thẻ semantic: Khi bạn muốn thể hiện rõ ý nghĩa của một phần nội dung cụ thể. Ví dụ, sử dụng <nav> cho menu điều hướng, <article> cho một bài viết, <footer> cho phần chân trang…

Nên dùng <div>: Khi bạn cần một container để nhóm các phần tử lại với nhau, nhưng không có thẻ semantic nào phù hợp. Hoặc khi bạn muốn tạo ra một bố cục phức tạp mà các thẻ semantic không thể đáp ứng được.

Thẻ Span HTML

Thẻ Span là gì?

<span> là một phần tử inline được sử dụng để bao bọc một phần nhỏ của văn bản hoặc các phần tử inline khác. Nó cũng giống như thẻ div là không có ý nghĩa đặc biệt nào về mặt ngữ nghĩa, mà chỉ đơn thuần là một công cụ để định dạng văn bản.

Tại sao chúng ta cần thẻ Span?

Định dạng một phần văn bản: span cho phép bạn áp dụng các kiểu CSS cho một phần nhỏ của văn bản mà không ảnh hưởng đến các phần khác. Ví dụ: bạn có thể thay đổi màu sắc, kích thước hoặc kiểu chữ của một từ hoặc một cụm từ trong một đoạn văn bản.

Thêm các hiệu ứng đặc biệt: span cho phép bạn thêm các hiệu ứng đặc biệt cho một phần văn bản. Ví dụ: bạn có thể tạo một hiệu ứng hover cho một từ hoặc một cụm từ.

Ví dụ sử dụng Span

Thay đổi màu sắc của một từ

See the Pen
Thẻ span HTML by haycuoilennao19 (@haycuoilennao19)
on CodePen.

Trong ví dụ này, chúng ta sử dụng span để bao bọc từ “lập trình web” và áp dụng kiểu CSS color: red để thay đổi màu sắc của từ này thành màu đỏ.

Span là một phần tử inline, vì vậy bạn không nên sử dụng nó để tạo bố cục trang web. Hãy sử dụng div hoặc các thẻ HTML semantic để tạo cấu trúc trang web nhé.

div và span là hai phần tử HTML đơn giản nhưng vô cùng mạnh mẽ. Khi kết hợp với CSS, chúng cho phép bạn tạo ra những trang web đẹp mắt, chuyên nghiệp và dễ sử dụng.

Kết luận

Hy vọng bài viết này đã giúp bạn hiểu rõ hơn về div và span trong HTML. Nếu bạn có bất kỳ câu hỏi nào, đừng ngần ngại đặt câu hỏi cho tôi nhé. Chúc bạn thành công trên con đường trở thành nhà lập trình web.