Kiến thức về HTML (P10): Thẻ phân chia khu vực

Chào các bạn, bài tiếp theo trong kiến thức về HTML, mình sẽ giới thiệu thẻ phân chia khu vực <div>, các bạn cùng theo dõi bài nhé.

Định nghĩa

  • Thẻ <div></div> viết tắt của từ “division” có nghĩa là phân chia, ta có thể hiểu đây là sự phân chia khu vực hay vùng, sự phân chia này sẽ giúp cho trình duyệt hiểu rõ những vùng được bố cục trên trang web.
  • Có thể chứa hầu hết các thẻ trong HTML/XHTML.
  • Một số thẻ không được chứa bên trong <div></div>: <html></html>, <meta></meta>, <body></body>, <title></title>, <link></link>.
  • Một số thẻ không nên chứa bên trong <div></div>: <style></style>, <script></script>.
  • Một số khu vực khuyên sử dụng thẻ <div></div>:
    • Header, global navigation, page body, content, sidebar, footer (Xem lại cấu trúc cơ bản của trang web)
    • Một số khu vực lớn, cấu trúc có nhiều thẻ bên trong thì cũng nên nhóm lại bằng thẻ <div></div> để tiện cho việc điều khiển.

Xem ví dụ để hiểu rõ hơn về thẻ <div></div>, đoạn code bên dưới có sử dụng thuộc tính id.

Thuộc tính id

Định nghĩa và sử dụng

  • Một thuộc tính id chỉ được dùng duy nhất cho một tag trong cùng văn bản (giống như chứng minh nhân dân chỉ sử dụng cho một người vậy), sử dụng nhiều lần vẫn chạy nhưng khi check validator sẽ bị báo lỗi.
  • Thuộc tính id được dùng chủ yếu để định dạng nội dung thông qua css, hoặc được dùng để điều khiển thành phần trong HTML thông qua script.
  • Thuộc tính id thường được sử dụng cho những nội dung lớn, hay những nội dung có định dạng riêng (duy nhất) trong văn bản.
  • Trong một tag có thể có chứa duy nhất một thuộc tính id, có thể sử dụng kết hợp với thuộc tính class .

Chú ý: Tên id không được bắt đầu bằng số, vì điều này chỉ hỗ trợ trong trình duyệt Internet Explorer.
Tên id không nên đặt quá dài hay dùng ký tự đặc biệt, vì như thế sẽ khó quản lý sau này.

HTML viết

1A

Hiển thị trình duyệt:

2b

Những cấu trúc không nên sử dụng

Không nên sử dụng thẻ <div></div> trực tiếp cho những chi tiết nhỏ như: một đoạn text, một image, một liên kết, một button,… nói tóm lại không nên sử dụng thẻ <div></div> trực tiếp cho nhóm inline. Tuy trình duyệt sẽ hiển thị đúng ý đồ của tác giả, nhưng code như vậy sẽ không đúng với ý nghĩa của thẻ <div></div>, khiến trình duyệt khó xác định được đâu là nội dung lớn đâu là nội dung nhỏ.

  • Người viết đánh giá

  • Rated 5 stars
  • 100%

  • Reviewed by:
  • Published on:
  • Last modified: 30/06/2016

Giới thiệu

WEBICO là công ty thiết kế website theo hướng chuyên nghiệp và hiện đại, tiên phong trong việc áp dụng các công nghệ hàng đầu trên thế giới hiện nay như HTLM5, CS3, PHP, Bootstrap,...Ngoài ra, WEBICO còn cung cấp thêm các giải pháp cũng như dịch vụ chuyên về Internet Marketing.

Báo giá dịch vụ

Liên hệ với chúng tôi để nhận báo giá dịch vụ cho dự án của bạn với chi phí tốt nhất.