HTML Layout

Ví dụ một layout đơn giản của một website về tin tức

HTML Layout Elements

Trong HTML ta nên dùng các thẻ khác nhau theo từng trường hợp:

• <header> - Xác định tiêu đề cho một tài liệu hoặc một section
• <nav> - Xác định một tập hợp các link điều hướng
• <section> - Xác định một phần trong tài liệu
• <article> - Xác định nội dung độc lập, khép kín
• <aside> - Xác định nội dung ngoài nội dung (như thanh bên)
• <footer> - Xác định chân trang cho một tài liệu hoặc một section
• <details> - Xác định các chi tiết bổ sung mà người dùng có thể mở và đóng theo yêu cầu
• <summary> - Xác định tiêu đề cho <details> element

Các kỹ thuật tạo HTML Layout

Có bốn kỹ thuật khác nhau để tạo bố cục nhiều cột. Mỗi kỹ thuật đều có ưu và nhược điểm của nó:

• CSS framework
• CSS float property
• CSS flexbox
• CSS grid

CSS Frameworks

Nếu bạn muốn tạo nhanh một layout, bạn có thể sử dụng CSS Frameworks như Bootstrap.

CSS Float Layout

Thông thường, người ta thực hiện tạo layout cho trang web bằng cách sử dụng thuộc tính float của CSS. Float rất dễ học - bạn chỉ cần nhớ cách hoạt động của thuộc tính float và clear.

Nhược điểm: ảnh hưởng đến element chứa chúng (phần tử “cha” của chúng). Nếu phần tử cha mẹ này không chứa gì ngoài các phần tử float, thì chiều cao của nó thực sự sẽ giảm xuống không còn gì cả.

Ví dụ

CSS Flexbox Layout

Việc sử dụng flexbox đảm bảo rằng có thể kiểm soát các element khi cần bố cục trang thay đổi để phù hợp với các kích thước màn hình khác nhau và các thiết bị hiển thị khác nhau.

Ví dụ

CSS Grid Layout

CSS Grid Layout cung cấp một hệ thống bố cục dựa trên lưới, với các hàng và cột, giúp thiết kế các trang web dễ dàng hơn mà không cần phải sử dụng float và position.