Định dạng HTML nào phù hợp với Menu? Đị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>

• Trang chủ
• Sản phẩm
  
  
  
  
  • Sản phẩm 1
  • Sản phẩm 1
  • Sản phẩm 1
• Liên hệ

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>

Trang chủ

Sản phẩm

Sản phẩm 1

Sản phẩm 2

Sản phẩm 3

Liên hệ

Ở 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.