{}

Tạp chí tiếng Việt dành cho Web Designers.
Thứ Năm ngày 4 Tháng 12 năm 2008
Định dạng HTML nào phù hợp với Menu?

Việc dùng đúng định dạng HTML sao cho có ý nghĩa và chuẩn cũng là một việc hết sức phức tạp đối với chúng ta. Thông thường mỗi thẻ HTML thường có ý nghĩa đối với một hoặc một số công việc nhất định. Ví dụ để định dạng cho đoạn văn bản thì cách làm đúng đắn nhất là dùng thẻ <p>, còn thông tin về địa chỉ thì chúng ta chắc chắn phải đặt trong thẻ <address>Thông tin địa chỉ</address>.

Trong bài viết này chúng ta sẽ đi tìm hiểu thẻ HTML nào thường được dùng để định dạng cho menu và vì sao nó lại được dùng?

Nếu chúng ta chú ý một chút thì sẽ thấy ngay rằng, bản chất của menu là một danh sách các liên kết. Mỗi liên kết có thể có một dãy các liên kết con của nó.

Giả sử ta có một cấu trúc menu đơn giản như sau:

  Trang chủ
  Sản phẩm
    Sản phầm 1
    Sản phẩm 2
    Sản phẩm 3
  Liên hệ

Để hiểu một cách thông thường nhất thì chúng ta sẽ thấy việc sử dụng định dạng <ul><li> là phù hợp, đơn giản vì nó là một danh sách các đường link. Với những menu có con thì cũng tương tự, chúng ta sẽ dùng định dạng <ul><li> để thể hiện danh sách các đường link con.

Với cấu trúc menu đơn giản như trên khi dùng định dạng <ul><li> chúng ta có:

<ul class="mainmenu">
  <li><a href="/home.html" title="Home">Trang chủ</a></li>
  <li><a href="/produc.html" title="Sản Phẩm">Sản phẩm</a>
    <ul>
      <li><a href="/sp1.html" title="Sản phẩm 1">Sản phẩm 1</a></li>
      <li><a href="/sp2.html" title="Sản phẩm 2">Sản phẩm 1</a></li>
      <li><a href="/sp3.html" title="Sản phẩm 3">Sản phẩm 1</a></li>
    </ul>
  </li>
  <li><a href="/contact.html" title="Liên hệ">Liên hệ</a></li>
</ul>

Ngoài cách hiểu như trên, chúng ta cũng có thể hiểu rằng menu là một danh sách các tiêu để, mỗi tiêu đề nó có phần mô tả và định nghĩa của nó. Như vậy thì chúng ta có thể dùng định dạng <dl><dt><dd>

Với cách hiểu thứ 2 thì chúng ta sẽ có định dạng HTML như sau:

<dl class="mainmenu"&t;
  <dt>Trang chủ</dt>
  <dt>Sản phẩm</dt>
    <dd>Sản phẩm 1</dd>
    <dd>Sản phẩm 2</dd>
    <dd>Sản phẩm 3</dd>
  <dt>Liên hệ</dt>  
</dl>

Ở trên là 2 định dạng mà các nhà thiết kế Website thường sử dụng để tạo ra một hệ thống menu, tuy nhiên khi menu có độ phức tạp cao thì menu đó sẽ có một kiểu định dạng phức tạp hơn.

www.CSSYeah.com - www.cssmagazine.net

 

Vài nét về tác giả

Chu Huu Trung Chào tất cả các bạn, tên tôi là Chu Hữu Trung. Thiết kế Web là nghề của tôi, hiện nay tôi đang sống và làm việc tại Hà Nội (Việt Nam). Tôi rất vui khi các bạn ghé thăm cssyeah.com

Free icons

Free icons Với những bộ icon này bạn sẽ làm cho các dự án của bạn thêm sinh động hơn.