Thẻ Xác định Danh Sách | Hướng Dẫn Học

Trang chủ » Dl Là Gì Html » Thẻ Xác định Danh Sách | Hướng Dẫn Học

Có thể bạn quan tâm

Thẻ xác định danh sách
  • Trang chủ
  • Hướng dẫn học
  • Hướng dẫn học HTML/HTML5
  • Thẻ xác định danh sách

Định nghĩa

Định nghĩa danh sách trong HTML/HTML5 có nhiều dạng khác nhau, mỗi dạng sẽ theo một cấu trúc thẻ khác nhau, do đó việc hiểu rõ danh sách rất quan trọng, nếu bạn chưa nắm rõ cách định nghĩa về danh sách thì bạn không thể hiểu hết được bài học này, xin hãy xem trước định nghĩa về danh sách trong HTML/HTML5.

Thẻ xác định danh sách (có đề mục và mô tả đề mục) là một bộ gồm 3 thẻ:

  • <dl></dl> viết tắt của chữ "definition list" có nghĩa là sự xác định (hay định nghĩa) danh sách.
  • <dt></dt> viết tắt của chữ "defines an item" có nghĩa là xác định (hay định nghĩa) một mục.
  • <dd></dd> viết tắt của chữ "defines describe an item" có nghĩa là xác định (hay định nghĩa) một mô tả của một mục.

Thẻ xác định danh sách sử dụng cho danh sách có các mục và có nội dung mô tả cho các mục, không sử dụng cho danh sách không có phần nội dung mô tả.

HTML viết

<!DOCTYPE html> <html> <head> <meta charset=utf-8" /> <title>Tiêu đề trang web</title> </head> <body> <dl> <dt>Trái cây:</dt> <dd>giúp bỗ sung vitamin cho cơ thể.</dd> <dt>Nước:</dt> <dd>giúp chúng ta tăng cường lượng nước cần cho cơ thể.</dd> <dt>Thịt:</dt> <dd>giúp cơ thể tăng cường đạm, và chất béo.</dd> </dl> </body> </html>

Hiển thị trình duyệt:

Trái cây: giúp bỗ sung vitamin cho cơ thể. Nước: giúp chúng ta tăng cường lượng nước cần cho cơ thể. Thịt: giúp cơ thể tăng cường đạm, và chất béo.

Xem thêm ví dụ

Cấu trúc và cách dùng

Cấu trúc thẻ xác định danh sách phải theo các nguyên tắc sau đây:

  • Lúc nào cũng phải tồn tại 3 thẻ, không thể thiếu một trong 3: <dl></dl>, <dt></dt>, <dd></dd>.
  • Bên trong thẻ <dt></dt> chỉ chứa được các thẻ thuộc nhóm inline.
  • Bên trong thẻ <dd></dd> chứa được hầu hết các thẻ HTML/HTML5, tuy nhiên không được chứa một số thẻ sau đây: <html></html>, <meta></meta>, <body></body>, <title></title>, <link></link>. Và một số thẻ không nên chứa như: <style></style>, <script></script>.
  • Thẻ <dt></dt> và <dd></dd> phải được viết trực tiếp bên trong <dl></dl>:

<dl> <dt></dt> <dd></dd> <dt></dt> <dd></dd> </dl>

  • Bên trong thẻ <dl></dl> chỉ chứa trực tiếp thẻ <dt></dt> và <dd></dd>, không được xen kẻ bất kỳ thẻ nào khác, những cấu trúc như bên dưới đây là sai, không đúng chuẩn W3C:

<dl> <h2></h2> <dt></dt> <dd></dd> </dl>

<dl> <dt></dt> <p></p> <dd></dd> </dl>

<dl> <dt></dt> <div> <dd></dd> </div> </dl>

Những cấu trúc không nên sử dụng

Những cấu trúc dưới đây tuy hiển thị tốt cho trình duyệt, nhưng lại không đúng ý nghĩa của bộ 3 thẻ <dl></dl>, <dt></dt>, <dd></dd>, sẽ khiến cho trình duyệt lúng túng trong việc xác định thẻ.

Cấu trúc thiếu vắng <dt></dt>: thiếu mục.

<dl> <dd></dd> </dl>

Cấu trúc thiếu vắng <dd></dd>: thiếu mô tả mục.

<dl> <dt></dt> </dl>

Cấu trúc lặp nhiều <dt></dt> cùng lúc: nhiều mục, nhưng thiếu mô tả.

<dl> <dt></dt> <dd></dd> <dt></dt> <dt></dt> <dd></dd> <dt></dt> <dd></dd> </dl>

Cấu trúc lặp nhiều <dd></dd> cùng lúc: Không cần phải phân nhiều mô tả cho một mục, chỉ cần viết tất cả mô tả trong một <dd></dd> là được.

<dl> <dt></dt> <dd></dd> <dd></dd> <dd></dd> <dt></dt> <dd></dd> </dl>

Cấu trúc lồng <dl></dl> bên trong <dl></dl> khác: Cấu trúc này rườm rà khó điều khiển, ta nên sử dụng cấu trúc <div></div> và <hx></hx> kết hợp <dl></dl> thay thế.

<dl> <dt></dt> <dd> <dl> <dt></dt> <dd></dd> </dl> </dd> <dt></dt> <dd> <dl> <dt></dt> <dd></dd> </dl> </dd> <dt></dt> <dd></dd> <dt></dt> <dd></dd> </dl>

Cấu trúc trên ta thay thế như sau:

<div> <h2></h2> <div> <dl> <dt></dt> <dd></dd> </dl> </div> <h2></h2> <div> <dl> <dt></dt> <dd></dd> </dl> </div> <h2></h2> <div></div> <h2></h2> <div></div> </div>

Tham khảo thêm

  • <!Doctype>
  • <html></html>
  • <head></head>
  • <body></body>
  • <hx></hx>
  • <p></p>
  • <div></div>
  • <dl></dl>
  • <dt></dt>
  • <dd></dd>

Thẻ phân chia khu vực

Thẻ danh sách có thứ tự và không thứ tự

HỌC WEB CHUẨN

HƯỚNG DẪN HỌC

Hướng dẫn học XHTML & HTML5

  • Hướng dẫn học XHTML & HTML5
  • Giới thiệu về HTML
  • Cấu trúc cơ bản của HTML

  • Nhóm các thẻ block

    • <h1> - <h2> - <h3> - <h4> - <h5> - <h6>
    • <p>
    • <div>
    • <dl> - <dt> - <dd>
    • <ul> - <ol> - <li>
    • <nav>
    • <header>
    • <section>
    • <article>
    • <aside>
    • <footer>
    • <figure> - <figcaption>

  • Nhóm các thẻ inline

    • <a>
    • <img />
    • <br />
    • <span>
    • <strong>
    • <em>
  • Xem thêm ví dụ về HTML
  • Bài tập HTML & HTML5 cơ bản
  • Bài tập HTML & HTML5 nâng cao

Hướng dẫn học XHTML & HTML5

Bài tập HTML & HTML5

Hướng dẫn học CSS

Hướng dẫn học CSS3

Bài tập CSS & CSS3

Hướng dẫn học SCSS

Hướng dẫn học Responsive

Hướng dẫn học jQuery

Bài tập jQuery

Hướng dẫn học ES6

Hướng dẫn học React.js

Hướng dẫn học Webpack

Hướng dẫn XAMPP

Hướng dẫn học PHP

Hướng dẫn học Laravel

Hướng dẫn học htaccess

THAM KHẢO

  • Tham khảo
  • Tham khảo HTML4/XHTML
  • Tham khảo HTML5
  • Tham khảo CSS
  • Tham khảo CSS3
  • Tham khảo jQuery

CHUYÊN ĐỀ

  • Chuyên đề
  • Chuyên đề HTML/CSS
  • Chuyên đề HTML5/CSS3
  • Chuyên đề jQuery/JS
  • jQuery/JS plugin

GÓP Ý - LIÊN HỆ

  • BẠN SẼ TÀI TRỢ?DONATE
  • CÔNG CỤ TẠO CSS3CSS3 GENERATOR
  • BỘ CÔNG CỤGENERATOR TOOLS
  • CÔNG CỤ HỖ TRỢWEB TOOLS
  • CÔNG CỤ TẠO RANDOMRANDOM GENERATOR
  • CÔNG CỤ KIỂM TRA RESPONSIVE TEST
  • CHIA SẺ HAYWEB & TOOLS
  • Follow us on hocwebchuan.com
  • Short URL
  • Rabbie theme

Từ khóa » Dl Là Gì Html