Các thẻ cấu trúc HTML5 mới

Xác định rõ các khối nội dung của bạn

HTML5 giới thiệu nhiều thẻ mới, bao gồm một số thẻ dành để mô tả tốt hơn cho một cấu trúc tài liệu. Trong bài này, hãy tìm hiểu về thẻ cấu trúc HTML5 mới. Hãy khám phá cách sử dụng chúng để phân chia một tài liệu thành các khối nội dung. Mã ví dụ sẽ giúp minh họa các khái niệm này.

Jeremy Wischusen, Kiến trúc sư ứng dụng Web, Visual Flow Designs

Jeremy Wischusen đã thiết kế trang Web từ năm 1997 và lập trình từ năm 2003. Ông đã làm việc với Microsoft Gold Certified Partners để cung cấp đào tạo phần mềm cho các công ty như Wyeth Pharmaceuticals và The Vanguard Group. Ông cũng đã từng làm việc trên các trang Web có quy mô lớn, như myYearbook.com và cho các khách hàng như Dockers, Quicksilver, Major League Baseball, Sports Authority, CBS, và Liz Claiborne cho tới GSI Commerce. Ông làm việc với các hệ thống tầng trước và tầng sau, thiết kế nhiều dự án từ lúc bắt đầu cho tới khi kết thúc bằng các công nghệ như Ajax, jQuery, CSS, XHTML, PHP, Flash và Flex.



26 04 2012

HTML5 là gì?

HTML5, phiên bản mới nhất của Ngôn ngữ đánh dấu siêu văn bản (HTML), là bản hiệu chỉnh triệt để nhất về ngôn ngữ này cho đến nay. Nó giới thiệu nhiều tính năng mới trong nhiều lĩnh vực. Một số trong những bổ sung đáng chú ý hơn cả bao gồm:

Phát triển kỹ năng về chủ đề này

Nội dung này nằm trong "đường dẫn đến kiến thức (knowledge path)" để bổ sung các kỹ năng của bạn. Xem Những điều cơ bản về HTML5

  • Các thẻ đa phương tiện có sẵn cho âm thanh và video.
  • Một thẻ canvas (khung nền ảnh) để vẽ nội dung trong trình duyệt.
  • Các biểu mẫu thông minh hơn cho phép bạn làm những việc như xác nhận hợp lệ thông qua việc sử dụng một thuộc tính cần thiết.

Với một bộ các thẻ cấu trúc mới, HTML5 sửa đổi cách cấu trúc các tài liệu HTML. Các thẻ cấu trúc mới tập trung vào cách chia một tài liệu HTML thành các phần logic. Tên của thẻ mô tả kiểu nội dung dự kiến chứa trong thẻ. Trong bài này, hãy tìm hiểu về các thẻ mới chi tiết hơn.

Một chút về lai lịch

Tim Berners-Lee đã tạo ra HTML ban đầu vào năm 1989 để giải quyết một số những thiếu sót của các phương pháp truy cập thông tin hiện có trên Internet. Từ buổi đầu của Internet, việc tìm đường của bạn trên Internet là một nhiệm vụ khó khăn. Nội dung trên Internet được coi là các tài liệu cá nhân, không có phương pháp dễ dàng nào để điều hướng giữa chúng. Về cơ bản bạn phải biết địa chỉ của tài liệu mà bạn đang tìm kiếm và nhập nó vào bằng tay. Để giải quyết vấn đề này, Berners-Lee đã tạo ra hai công nghệ: HTTP (Hypertext Transfer Protocol – Giao thức truyền siêu văn bản) và HTML.

HTTP là một giao thức dịch vụ được các máy chủ web sử dụng để cung cấp nội dung. Phần đầu của một URL trong trình duyệt web của bạn (giả sử trình duyệt hiển thị URL đầy đủ) thích hợp nhất sẽ bắt đầu bằng http://. Phần này của URL cho trình duyệt biết sử dụng kiểu giao thức nào khi đưa ra yêu cầu đến máy chủ web. Khi máy chủ nhận được một yêu cầu về một tài liệu, tài liệu đó có thể được viết hoặc được chuyển đổi sang HTML. Tài liệu HTML là thứ được gửi trở lại trình duyệt đưa ra yêu cầu đó.

HTML là một ngôn ngữ kịch bản lệnh để cho một trình duyệt web biết cách trình bày nội dung. Các liên kết đến những tài liệu khác có thể nằm trong nội dung này, cung cấp một phương pháp chuyển hướng thân thiện với người dùng giữa các tài liệu trên Internet.

Sự kết hợp giữa HTTP và HTML đưa ra sự chuyển hướng nội dung nhanh chóng và dễ dàng trên Internet bằng cách cho phép bạn chỉ cần nhấn chuột vào các liên kết văn bản để chuyển hướng giữa các tài liệu. Sau khi tạo ra hai công nghệ này, Berners-Lee vẫn tiếp tục làm việc để thành lập W3C (World Wide Web Consortium – Liên minh mạng toàn cầu). W3C đã là tổ chức chỉ đạo cho bốn phiên bản đầu tiên của HTML.

Ý định ban đầu của Internet là dùng cho các tài liệu văn bản đơn giản. Tất cả các trình duyệt đầu tiên đều dựa trên văn bản (không có cửa sổ bắt mắt nào — chỉ có văn bản trên màn hình). Ngay cả việc thêm các hình ảnh vào cũng là một vấn đề lớn khi được giới thiệu lần đầu. Bây giờ, mọi người làm mọi thứ từ việc gửi các thông báo qua e-mail đến xem truyền hình trên Internet. Internet đã trở nên có nhiều thứ hơn là một cơ chế để vận chuyển các tài liệu văn bản đơn giản. Với các tính năng và các cách sử dụng mới đã có những thách thức và các vấn đề mới mà ngôn ngữ HTML chưa bao giờ được thiết kế để xử lý.

W3C đã cố gắng để giải quyết các vấn đề của Internet ngày nay với tiêu chuẩn XHTML 2.0 (Extensible Hypertext Markup Language – Ngôn ngữ đánh dấu siêu văn bản mở rộng). Tuy nhiên, tiêu chuẩn này không được đón nhận rộng rãi và phần lớn đã bị loại bỏ. Vào năm 2004, trong khi W3C đã đang tập trung vào tiêu chuẩn XHMTL 2.0, một nhóm có tên là WHATWG (Web Hypertext Application Technology Working Group - Nhóm công tác Công nghệ ứng dụng siêu văn bản Web) đã bắt đầu xây dựng tiêu chuẩn HTML5 và tiêu chuẩn này được đón nhận nồng nhiệt hơn so với tiêu chuẩn XHTML 2.0. W3C đã từ bỏ tiêu chuẩn XHTML 2.0 và hiện đang làm việc với WHATWG về phát triển HTML5.

Các trình duyệt được hỗ trợ

Vào thời điểm viết bài này, HTML5 vẫn chưa chính thức được phát hành. Hầu hết các nội dung trên web vẫn còn đang được viết cho đặc tả HTML 4. Tuy nhiên, một số trình duyệt đưa vào sự hỗ trợ cho đặc tả HTML5. Vì mỗi trình duyệt chỉ có thể hỗ trợ các tính năng nhất định của HTML5, nên nhiều thứ có thể khó khăn. Trước khi viết một trang web dựa trên HTML5, hãy kiểm tra từng trình duyệt đích của bạn để chắc chắn rằng chúng hỗ trợ các tính năng mà bạn sẽ sử dụng cho trang web của mình.


Kiểu tài kiệu mới

Bất kể các khả năng của các trình duyệt đích của bạn, bạn phải cho trình duyệt biết bạn muốn biểu diễn nội dung nào của mình khi sử dụng đặc tả HTML5. Bạn làm điều này bằng cách sử dụng khai báo kiểu tài liệu (doctype).

Khai báo kiểu tài liệu cho trình duyệt biết trang được viết bằng phiên bản nào của ngôn ngữ đánh dấu. Nó làm như vậy bằng cách tham khảo một DTD (Document Type Definition – Đinh nghĩa kiểu tài liệu). DTD chỉ rõ các quy tắc được ngôn ngữ đánh dấu sử dụng sao cho các trình duyệt biểu diễn đúng nội dung.

Các kiểu tài liệu có thể là một khái niệm khó hiểu. Trong đặc tả HTML hiện nay, có nhiều kiểu tài liệu và sự khác biệt giữa chúng không hoàn toàn rõ ràng. Bảng 1 (Bảng 1) cho thấy các kiểu tài liệu hiện có sẵn và các khả năng của chúng.

Bảng 1. Các kiểu tài liệu và các khả năng
Các kiểu tài liệuCác khả năngVí dụ
HTML 4.01 chính xácCho phép tất cả các phần tử và các thuộc tính HTML, nhưng không cho phép các thẻ trình bày, như thẻ phông chữ. Không cho phép các bộ khung. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 chuyển tiếpTương tự như HTML chính xác, nhưng cho phép sử dụng các phần tử không chấp nhận như thẻ phông chữ. Không cho phép các bộ khung. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 bộ khung Tương tự như HTML chuyển tiếp, nhưng cho phép các bộ khung.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 chính xácTương tự như HTML chính xác, nhưng tất cả nội dung phải được viết đúng định dạng XML. Ví dụ, tất cả các thẻ mở phải có một thẻ đóng phù hợp. Không cho phép các bộ khung. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 chuyển tiếpTương tự như HTML chuyển tiếp, nhưng tất cả nội dung phải được viết đúng định dạng XML. Không cho phép các bộ khung. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 bộ khung Tương tự như XHTML chuyển tiếp, nhưng cho phép các bộ khung.<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1Tương tự như XHTML chính xác, nhưng cũng cung cấp các khả năng cho các mô-đun, như hỗ trợ Ruby cho các ngôn ngữ Đông Á. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Thật may, việc khai báo kiểu tài liệu được đơn giản hóa rất nhiều trong HTML5. Trong thực tế, chỉ có một kiểu tài liệu. Đối với trình duyệt của bạn để biểu diễn bằng cách sử dụng đặc tả HTML 5, hãy thêm kiểu tài liệu như hiển thị trong Liệt kê 1.

Liệt kê 1. Kiểu tài liệu HTML5
<!DOCTYPE html>

Khai báo kiểu tài liệu là việc nên làm đầu tiên trong một tài liệu HTML, trước thẻ <html>.


Các phần tử cấu trúc mới

Lý do để tạo ra các thẻ cấu trúc mới là để chia các trang web thành các phần logic với các thẻ có mô tả các kiểu nội dung mà chúng chứa. Theo khái niệm, hãy suy nghĩ về trang web như một tài liệu. Các tài liệu có chứa các tiêu đề, các cuối trang, các chương và các quy ước khác nhau để phân chia tài liệu thành các phần logic.

Phần này rà soát lại các phương pháp hiện tại về chia một tài liệu HTML bằng cách sử dụng mã mẫu tổng quát. Trong phần còn lại của bài này, bạn sẽ sửa đổi mã ban đầu bằng cách sử dụng các thẻ cấu trúc HTML5 mới để thấy từng bước chuyển đổi tài liệu thành các phần logic như thế nào.

Cách tiếp cận của HTML 4

Nếu bạn đã từng tạo phần đơn giản nhất của các tài liệu HTML, thì bạn đã hiểu rõ thẻ div. Thẻ div là cơ cấu chính trong thời kỳ trước HTML5 để tạo ra các khối nội dung trong một tài liệu HTML. Ví dụ, Liệt kê 2 cho thấy cách bạn có thể sử dụng các thẻ div để tạo ra một trang đơn giản có một tiêu đề, vùng nội dung và cuối trang.

Liệt kê 2. Trang HTML đơn giản khi sử dụng các thẻ div
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
        Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html>
   <head> 
      <title> A Simple HTML Page Using Divs </title> 
   </head>
   <body> 
      <div id='header'>Header</div> 
      <div id='content'>Content</div> 
      <div id='footer'>Footer</div> 
   </body>
</html>

Trang này hoạt động tốt; thẻ div là một thẻ đa năng thú vị. Tuy nhiên, khác với việc xem xét thuộc tính id của mỗi thẻ div, thật khó để nói mỗi thẻ div biểu diễn phần nào của tài liệu. Mặc dù bạn có thể biện luận rằng id là đủ cho một chỉ thị nếu được đặt tên đúng, các thuộc tính id là tùy ý. Có nhiều biến thể có thể được coi giống như các id hợp lệ. Bản thân thẻ đó không chỉ thị kiểu nội dung mà người ta dự kiến biểu diễn nó.

Cách tiếp cận của HTML5

HTML5 giải quyết vấn đề này bằng cách cung cấp một bộ các thẻ để xác định rõ hơn các khối nội dung chính tạo ra một tài liệu HTML. Bất kể nội dung cuối cùng được hiển thị bởi một trang web, hầu hết các trang web đều chứa các tổ hợp khác nhau của các phần và các phần tử trang web phổ biến.

Mã trong Liệt kê 2 tạo ra một trang đơn giản có một tiêu đề, vùng nội dung và cuối trang. Các phần này và các phần khác và các phần tử trang, là khá phổ biến, do đó, HTML5 gồm có các thẻ để ngắt các tài liệu thành các phần phổ biến và cho biết nội dung được chứa trong mỗi phần. Các thẻ mới là:

Phần còn lại của bài này cung cấp một cái nhìn tổng quan về mỗi thẻ. Bạn cũng sẽ tìm hiểu cách sử dụng các thẻ dự kiến bằng cách sửa đổi ví dụ mã dựa vào div ban đầu của Liệt kê 2 để sử dụng các thẻ cấu trúc HTML5 mới.


Như tên cho thấy, thẻ header được dự kiến để đánh dấu một phần của trang HTML là phần tiêu đề. Liệt kê 3 cho thấy ví dụ mã từ Liệt kê 2 được sửa đổi để sử dụng một thẻ header.

Liệt kê 3. Thêm một thẻ header
<!DOCTYPE html> 
<html> 
   <head> 
      <title> A Simple HTML Page</title> 
   </head> 
   <body>
      <header>Header</header> 
      <div id='content'>Content</div> 
      <div id='footer'>Footer</div> 
   </body>
        
</html>

Kiểu tài liệu trong Liệt kê 3 cũng được thay đổi để cho biết rằng trình duyệt nên sử dụng HTML5 để biểu diễn trang. Từ điểm này trở đi, tất cả các ví dụ đều giả định bạn đang sử dụng kiểu tài liệu đúng.


Thẻ section

Thẻ section dùng để xác định các phần quan trọng của nội dung trên trang. Thẻ này có phần tương tự như việc chia một cuốn sách thành các chương. Thêm một thẻ section vào các kết quả ví dụ mã trong đoạn mã ở Liệt kê 4.

Liệt kê 4. Thêm một thẻ section
<!DOCTYPE html> 
<html> 
   <head> 
      <title> A Simple HTML Page</title> 
   </head> 
   <body> 
      <header>Header</header>
      <section> <p> This is an important section of the page. </p>
      </section> 
      <div id='footer'>Footer</div> 
   </body> 
</html>

Thẻ article

Thẻ article (mục) xác định các phần nội dung chính trong một trang web. Hãy nghĩ về một blog, nơi mà mỗi bài đăng riêng sẽ tạo nên một phần nội dung có ý nghĩa. Thêm các thẻ article vào các kết quả ví dụ mã trong đoạn mã được hiển thị trong Liệt kê 5.

Liệt kê 5. Thêm các thẻ article
<!DOCTYPE html> 
<html> 
   <head> 
      <title> A Simple HTML
        Page</title> 
   </head> 
   <body> 
      <header>Header</header>
      <section> 
         <article> <p> This is an important section of content on the
                page. Perhaps a blog post. </p> 
         </article> 
         <article> <p> This is an important section of content on the 
                page. Perhaps a blog post. </p>
         </article> 
      </section> 
      <div id='footer'>Footer</div>
   </body> 
</html>

Thẻ aside

Thẻ aside cho biết nội dung có chứa trong thẻ này có liên quan đến nội dung chính của trang, nhưng không phải là một phần của nó. Nó hơi giống như việc sử dụng các dấu ngoặc đơn để tạo ra một chú thích trong phần thân của văn bản (như thế này). Nội dung trong các dấu ngoặc đơn cung cấp thêm thông tin về phần tử chứa nó. Thêm một thẻ aside vào các kết quả ví dụ mã trong đoạn mã ở Liệt kê 6.

Liệt kê 6. Thêm một thẻ aside
<!DOCTYPE html> 
<html> 
   <head> 
      <title> A Simple HTML Page </title> 
   </head> 
   <body> 
      <header>Header</header>
      <section> 
         <article> <p> This is an important section of content on the
               page. Perhaps a blog post. </p> 
            <aside> <p> This is an aside for the
               first blog post. </p> </aside> 
         </article> 
         <article> <p> This is an important section of content on 
              the page. Perhaps a blog post. </p>
         </article> 
      </section> 
      <div id='footer'>Footer</div> 
   </body>
</html>

Thẻ footer đánh dấu nội dung phần tử đã chứa như cuối trang của tài liệu. Thêm một thẻ footer vào các kết quả ví dụ mã trong đoạn mã được hiển thị trong Liệt kê 7.

Liệt kê 7. Thêm một thẻ footer
<!DOCTYPE html> 
<html> 
   <head> 
      <title> A Simple HTML Page</title> 
   </head> 
   <body> 
      <header>Header</header>
      <section> 
         <article> <p> This is an important section of content on the
             page. Perhaps a blog post. </p> 
             <aside> <p> This is an aside for the first blog post. </p> 
             </aside> 
         </article> 
         <article> <p> This is an important section of content on the page. 
             Perhaps a blog post. </p> 
         </article>
      </section> 
      <footer>Footer</footer> 
   </body> 
</html>

Tại thời điểm này, tất cả các thẻ div ban đầu đã được thay thế bằng các thẻ cấu trúc HTML5.


Nội dung có chứa trong thẻ nav được dành cho các mục đích chuyển hướng. Thêm một thẻ nav vào các kết quả ví dụ mã trong đoạn mã ở Liệt kê 8.

Liệt kê 8. Thêm một thẻ nav
<!DOCTYPE html> 
<html> 
   <head> 
      <title> A Simple HTML
        Page</title> 
   </head> 
   <body> 
      <header>Header 
         <nav> 
            <a href='#'>Some Nav Link</a> <a href='#'>Some Other Nav Link</a> 
            <a href='#'> A Third Nav Link</a> 
         </nav> 
      </header> 
      <section>
        <article> <p> This is an important section of content on the page. 
                Perhaps a blog post. </p> 
           <aside> <p> This is an aside for the first blog
                 post.</p> 
           </aside> 
         </article> 
         <article> <p> This is an important section of content on the page. 
               Perhaps a blog post. </p> 
         </article>
      </section> 
      <footer>Footer</footer> 
   </body> 
</html>

Ví dụ cuối

Liệt kê 9 cho thấy kết quả của việc thay thế các thẻ div ban đầu bằng các thẻ cấu trúc HTML5 mới.

Liệt kê 9. Ví dụ cuối
<!DOCTYPE html> 
<html>
   <head> <title> A Simple HTML Page </title> </head> 
   <body>
      <header>Header <nav> <a href='#'>Some Nav Link</a> <a
            href='#'>Some Other Nav Link</a> <a href='#'>A Third Nav Link</a>
            </nav> 
      </header> 
      <section> 
         <article> <p> This is an important section of content on the page. 
             Perhaps a blog post. </p> 
             <aside> <p> This is an aside for the first blog post. </p> 
             </aside> 
         </article>
         <article> <p> This is an important section of content 
             on the page. Perhaps a blog post. </p> 
          </article> 
      </section> 
      <footer>Footer</footer>
        
   </body> 
</html>

Mặc dù ví dụ này đơn giản, dùng cho các mục đích trình diễn, khi bạn so sánh ví dụ dựa vào thẻ div ban đầu từ Liệt kê 2 đến kết quả trong Liệt kê 9, nghĩa của các thẻ cấu trúc mới sẽ rõ ràng.


Kết luận

Các thẻ HTML5 mới mô tả các kiểu nội dung mà chúng chứa và chúng giúp chia tài liệu thành các phần logic. Nó vẫn để cho bạn quyết định sử dụng các thẻ mới trong một tài liệu khi nào và ở đâu, tương tự như một tác giả đang viết một cuốn sách. Trong khi hai tác giả đang viết chung một cuốn sách có thể chọn các cách khác nhau để chia cuốn sách thành các chương, việc sử dụng các chương vẫn đưa ra một phương pháp nhất quán về chia cuốn sách thành các phần. Tương tự, trong khi hai tác giả của một trang web cụ thể có thể chọn các cấu trúc khác nhau, các thẻ cấu trúc HTML5 mới cung cấp các quy ước mới để các nhà phát triển trang web có thể sử dụng chúng trong khi các thẻ div cũ không cung cấp được.

Tài nguyên

Học tập

Lấy sản phẩm và công nghệ

  • Đánh giá các sản phẩm của IBM theo cách phù hợp với bạn nhất: Tải nó về dùng thử, dùng thử nó trực tuyến, sử dụng một sản phẩm trong một môi trường đám mây hoặc dành một vài giờ trong SOA Sandbox để tìm hiểu cách thực hiện kiến trúc hướng dịch vụ một cách hiệu quả.

Thảo luận

Bình luận

developerWorks: Đăng nhập

Các trường được đánh dấu hoa thị là bắt buộc (*).


Bạn cần một ID của IBM?
Bạn quên định danh?


Bạn quên mật khẩu?
Đổi mật khẩu

Bằng việc nhấn Gửi, bạn đã đồng ý với các điều khoản sử dụng developerWorks Điều khoản sử dụng.

 


Ở lần bạn đăng nhập đầu tiên vào trang developerWorks, một hồ sơ cá nhân của bạn được tạo ra. Thông tin trong bản hồ sơ này (tên bạn, nước/vùng lãnh thổ, và tên cơ quan) sẽ được trưng ra cho mọi người và sẽ đi cùng các nội dung mà bạn đăng, trừ khi bạn chọn việc ẩn tên cơ quan của bạn. Bạn có thể cập nhật tài khoản trên trang IBM bất cứ khi nào.

Thông tin gửi đi được đảm bảo an toàn.

Chọn tên hiển thị của bạn



Lần đầu tiên bạn đăng nhập vào trang developerWorks, một bản trích ngang được tạo ra cho bạn, bạn cần phải chọn một tên để hiển thị. Tên hiển thị của bạn sẽ đi kèm theo các nội dung mà bạn đăng tải trên developerWorks.

Tên hiển thị cần có từ 3 đến 30 ký tự. Tên xuất hiện của bạn phải là duy nhất trên trang Cộng đồng developerWorks và vì lí do an ninh nó không phải là địa chỉ email của bạn.

Các trường được đánh dấu hoa thị là bắt buộc (*).

(Tên hiển thị cần có từ 3 đến 30 ký tự)

Bằng việc nhấn Gửi, bạn đã đồng ý với các điều khoản sử dụng developerWorks Điều khoản sử dụng.

 


Thông tin gửi đi được đảm bảo an toàn.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=70
Zone=Nguồn mở
ArticleID=811907
ArticleTitle=Các thẻ cấu trúc HTML5 mới
publish-date=04262012