HTML5

Các bạn thân mến, các bài trước chúng ta đã tìm hiểu về việc thiết kế web bằng html5, cách cắt bố cục website với html5 … Có lẽ các bạn cũng nhận thấy được điểm khác biệt cơ bản nhất của html4 và html5 là việc ra đời tag <section>, <header>, <article>, <aside>, <footer>, <nav> … thay thế cho <div>.  Như vậy khi html5 phổ biến, tag <div> sẽ còn tồn tại không, có thể thay thế hoàn toàn div không bằng tag khác, vậy nên kết hợp chúng như thế nào, bài viết sẽ chia sẽ cho chúng ta các điểm khác biệt và gợi ý cho việc kết hợp của các tag trên.

Trước tiên mời các bạn tìm hiểu công dụng của các tag:

<div> :  dùng để chứa một nội dung gồm tất cả các dạng và vị trí.

<header> – html5:  chuyên dùng để thể hiện nội dung nằm trên cùng

<nav> – html5:  thể hiện menu ngang cho site

<aside> – html5:  chuyên dùng thể hiện những phần trong khung nội dung nhưng được cố định không thay đổi như các menu phụ ở cột right, left, …

<section> – html5: thể hiện một nội dung cụ thể

<article> – html5: thể hiện một phần độc lập của site, có thể bao gồm nhiều section và ngược lại.

<footer> – html5:  thể hiện nội dung ở phần cuối trang.

Qua tìm hiểu sơ qua về các tag mới, mọi người thấy rằng trước đây <div> thống lĩnh với các thuộc tính id, class kèm theo. Giờ đây html5 cho thêm các tag thật ra chúng cũng chỉ là div nhưng định dạng sẵn vị trí để người cắt web đỡ mệt hơn và đặc biệt là đỡ rối hơn (vì trước đây 1 site toàn div thì thật mệt phải không).

Vậy <div> sẽ bị cho vào quên lãng chăng, thật sự không thể bỏ do thói quen người cắt html dù có thể thay thế hoàn toàn div bằng section. Nhưng điều quan trong hơn hết mà chúng ta cần tìm hiểu là cách kết hợp nhưng tag trên sao cho tốt nhất.

Cuộc chiến <div>, <section>, <article> … có lẽ sẽ không mấy gay cấn vì chúng có thể kết hợp với nhau khá tốt, giúp người cắt nhẹ hơn và đỡ nhứt mắt hơn.

Các gợi ý để kết hợp các tag trên:

Trước đây, người cắt html đã quen dùng tất cả là <div>, dù có id, class nhưng cũng không ít khó khăn, giờ đây các bạn có thể kết hợp các tag trên theo 1 trình tự mà bản thân mình thấy thích nhất. Sau đây là các gợi ý:

Gợi  ý 1:

• Thay tag <header>, <footer>, <nav> vào các ví trí tương tự của chúng.
• Thay tag <aside> vào vị trí nội dung cố định các trang
• Thay tag <article> vào vị trí nội dung có thay đổi
• <section> sẽ thay thế cho những mục lớn bên trong của article, aside
• Những mục nhỏ trong section ta dùng div cho linh động và dễ dàng.

Cách này rất thuận tiện và dễ truy vấn bởi sử dụng rải các tag ra trên site, những tag nhỏ ta dùng div nên rất linh động. Nhưng có một điểm yếu là nếu website có cấu trúc phức tạp một chút thì hơi khó áp dụng.

Gợi ý 2:

Dùng các tag mới bổ sung từ html5 cho những gì cố định và được thể hiện trong template, có nghĩa là tất cả những gì có trong template không dùng div mà chỉ dùng những tag mới.

Tương tự những phần bên thay đổi từ các trang thì các bạn chỉ dùng div, và như vậy mỗi lần chỉnh sửa ta có thể nhìn vào tag là biết được nên sửa trang ngoài hay template.

Html5 chỉ là sự kế thừa chứ không phải đối mới, điều quan trọng là anh em dânthiết kế web biết cách kết hợp và chọn lựa cách cắt web phù hợp nhất. Trên đây chỉ là những gợi ý, các bạn hãy tự tạo một cái cho riêng mình nha.

Chúc các bạn thành công.