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
Hiển thị trình duyệt:
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ỏ.
HTML viết
Xem thêm:
- Kiến thức về HTML (P1): Giới thiệu HTML và tạo trang web bằng HTML
- Kiến thức về HTML (P2): HTML Elements
- Kiến thức về HTML (P3): Hướng dẫn tạo bảng HTML
- Kiến thức về HTML (P4): Tag mới trong HTML
- Kiến thức về HTML (P5): Đơn vị trong HTML và CSS
- Kiến thức về HTML (P6): HTML Symbols-mã kí tự chữ
- Kiến thức về HTML (P7): HTML Symbols-mã kí tự số
- Kiến thức về HTML (P8): Thẻ định dạng tiêu đề
- Kiến thức về HTML (P9): Thẻ định dạng đoạn văn bản
Chúc bạn tự học thiết kế web thật hiệu quả. Đón đọc các bài đọc tiếp theo nhé.