Tất cả các phần tử HTML có thể được phân loại thành hai loại
(1) Block Elements – Phần tử khối
(2) Inline Elements – Phần tử nội tuyến.
1. Phần tử khối
Các phần tử khối xuất hiện trên màn hình như thể chúng có dấu ngắt dòng trước và sau chúng.
Ví dụ: các thẻ <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr />, <blockquote> và <address> đều là các phần tử khối. Tất cả chúng đều bắt đầu trên dòng mới của riêng chúng và bất cứ thứ gì theo sau chúng đều xuất hiện trên dòng mới của riêng nó.
2. Phần tử nội tuyến
Mặt khác, các Phần tử nội tuyến có thể xuất hiện trong các câu và không phải xuất hiện trên một dòng mới của riêng chúng. Các <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, <code>, <cite>, <dfn>, <kbd>, và <var> đều là các phần tử nội tuyến.
3. Nhóm các phần tử trong HTML
Có hai thẻ quan trọng mà chúng ta sử dụng rất thường xuyên để nhóm các thẻ HTML
- Thẻ <div>
- Thẻ <span>
3.1. Thẻ <div>
Thẻ div được gọi là thẻ Division, mỗi thẻ trong HTML đều có mục đích khác nhau.
Ví dụ như thẻ <p> được dùng để chỉ định một đoạn văn bản nhất định. Thẻ div được sử dụng trong HTML để phân chia nội dung trong trang web như (văn bản, hình ảnh, đầu trang, chân trang, thanh điều hướng, v.v.). Thẻ Div có cả thẻ mở (<div>) và đóng (</div>) và bắt buộc phải đóng thẻ. Div là thẻ có thể sử dụng nhiều nhất trong phát triển web vì nó giúp chúng ta tách dữ liệu trong trang web và chúng ta có thể tạo một phần cụ thể cho dữ liệu hoặc chức năng cụ thể trong các trang web.
3.2. Thẻ <span>
HTML <span> là một phần tử nội tuyến và nó có thể được sử dụng để nhóm các phần tử nội tuyến trong tài liệu HTML. Thẻ này cũng không cung cấp bất kỳ thay đổi trực quan nào trên khối nhưng có ý nghĩa hơn khi nó được sử dụng với CSS.
Sự khác biệt giữa thẻ <span> và thẻ <div> là thẻ <span> được sử dụng với các phần tử nội tuyến trong khi thẻ <div> được sử dụng với các phần tử khối.
Ví dụ