Các quy tắc căn bản của HTML5 - phần 2

Để học và tự lập trình website, thì người lập trình không thể không biết về html/css cũng như kiến thức căn bản php. Và để tối ưu tốt hơn về thiết người, thì HTML5 đã được ra đời. Và nó đem lại nhiều kết quả tốt. 

Vùng Header

Vùng Header ví dụ chứa tiêu đề và phụ đề trang. Bạn sử dụng thẻ <header> để tạo ra nội dung cho vùng Header của trang. Thẻ<header> có thể chứa thông tin mở về một <section> và <article> ngoài chính trang web đó. Trang web được tạo ra ở đây có một vùng Header cho trang này, được hiển thị trong thiết kế cao cấp, cũng như vùng Header ở bên trong vùng Article và Section. Liệt kê 1 đưa ra một ví dụ đánh dấu thẻ <header>.

Liệt kê 1. Ví dụ thẻ <header>

<header> <h1>Heading Text</h1> <p> Text or images can be included here</p> <p> Logos are frequently placed here too</p> </header>

Thẻ <header> cũng có thể chứa một thẻ <hgroup>, như trong Liệt kê 2. Thẻ <hgroup> tạo nhóm các tiêu đề với nhau, bằng cách sử dụng các mức tiêu đề <h1> đến <h6> được hiển thị ở đây có một tiêu đề chính (Main Heading) và một phụ đề (Sub-heading).

Liệt kê 2. Ví dụ thẻ <hgroup> 

<header> <hgroup> <h1>Main Heading</h1> <h2>Sub-heading </h2> </hgroup> <p> Text or images can be included here</p> </header>

Vùng Navigation

Bạn tạo vùng Navigation (Chuyển hướng) của trang bằng cách sử dụng thẻ <nav>. Phần tử <nav> định nghĩa một vùng đặc biệt dành cho việc chuyển hướng. Thẻ <nav> nên được sử dụng để chuyển hướng trang web chính, không dùng để thiết lập các liên kết có chứa trong các vùng khác của trang. Vùng Navigation này có thể chứa mã như được hiển thị trong Liệt kê 3.

Liệt kê 3. Ví dụ thẻ <nav> 

<nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Our Products</a></li> <li><a href="#">Contact Us</a></li> </ul> </nav>

Các vùng Article và Section

Trang web mà bạn đang thiết kế có chứa một phần Article, giữ nội dung thực sự của trang. Bạn sử dụng thẻ <article> để tạo vùng này, và thẻ đó định nghĩa nội dung có thể được sử dụng độc lập với các nội dung khác được tìm thấy trên trang này. Ví dụ, nếu bạn muốn tạo ra một nguồn cấp dữ liệu RSS, bạn có thể sử dụng <article> để xác định nội dung duy nhất. Thẻ<article> xác định nội dung có thể được gỡ bỏ và được đặt trong ngữ cảnh khác và có thể hoàn toàn dễ hiểu.

Vùng Article trong kế hoạch của Acme United có chứa ba vùng Section. Bạn tạo ra các vùng này bằng cách sử dụng thẻ<section>. Một <section> chứa các vùng thành phần của nội dung trang web có liên quan . Thẻ <section> — và thẻ<article> nữa — có thể chứa các header (tiêu đề), các footer (chân trang), hoặc bất kỳ các thành phần nào khác cần thiết để hoàn thành phần này. Thẻ <section> dùng cho nội dung tạo nhóm. Nội dung cho cả hai thẻ <section> và thẻ <article>thường bắt đầu bằng một <header> và kết thúc bằng một <footer>, với nội dung cho thẻ này ở giữa.

Thẻ <section> cũng có thể chứa các thẻ <article>, cũng giống như thẻ <article> có thể chứa các thẻ <section>. Thẻ<section> nên được dùng để tạo nhóm các thông tin giống nhau, và thẻ <article> nên được sử dụng cho các thông tin như một bài viết hoặc một blog mà chúng có thể bị gỡ bỏ và được đặt trong một ngữ cảnh mới mà không ảnh hưởng đến ý nghĩa của nội dung. Thẻ <article> như tên gọi của nó, cung cấp một gói thông tin đầy đủ. Ngược lại, thẻ <section> chứa thông tin liên quan, trừ thông tin không thể được đặt trong một ngữ cảnh khác với chính nó, do nghĩa của nó sẽ bị mất.

Xem Liệt kê 4 với một ví dụ về cách sử dụng thẻ <article> và <section>.

Liệt kê 4. Ví dụ thẻ <article> và thẻ <section> 

<article> <section> Content </section> <section> Content </section> </article> <section> <article> Content </article> <article> Content </article> </section>

                         nguồn: http://www.ibm.com/developerworks/vn/library/wa-html5fundamentals/