Cấu trúc hóa của XHTML hai: Vụ án mẫu: Thẻ cấu trúc hóa của W3school

Bất kể gì, đừng bỏ qua phần này. Đọc chương này sẽ nâng cao kỹ năng của bạn, giúp trang web của bạn nhẹ hơn và giúp bạn có cái nhìn rõ ràng hơn về sự khác biệt giữa thẻ và thiết kế. Ý tưởng trong chương này dễ học nhưng lại có thể极大提高 trang web của bạn, cũng như sự tiện lợi trong việc thiết kế, sản xuất và cập nhật trang web.

Trong phần này, bạn sẽ học cách viết các thẻ logic và gọn gàng để giảm lượng lưu lượng băng thông khoảng 50%, giảm bớt gánh nặng và áp lực cho máy chủ đồng thời giảm thời gian tải trang của trang web. Bằng cách loại bỏ những yếu tố biểu diễn và thay đổi những thói quen xấu không có lợi ích, chúng ta có thể đạt được mục tiêu trên.

Những thói quen xấu này đang làm phiền rất nhiều trang web trên mạng, đặc biệt là những trang web kết hợp mã CSS với bố cục dựa trên bảng chính. Việc này rất cồng kềnh và không kinh tế, ngay cả đối với những nhà thiết kế có kinh nghiệm trong nhiều lĩnh vực khác. Đồng thời, xác suất xuất hiện vấn đề này là平等的, bất kể là những trang web viết mã thủ công hay những trang web được tạo ra bằng các công cụ chỉnh sửa trực quan như Dreamweaver và GoLive.

Phần này sẽ nêu ra những lỗi phổ biến để bạn có thể nhận biết và phòng ngừa chúng, và học cách sửa chữa chúng. Chúng tôi sẽ giải thích chi tiết về thuộc tính nhận diện duy nhất (id) và minh họa cách nó giúp bạn viết mã XHTML rất gọn gàng, bất kể bạn tạo ra là bố cục hỗn hợp hay bố cục CSS thuần túy.

Mỗi phần tử phải được cấu trúc hóa không?

Như chúng tôi đã nói ở phần trước, mỗi phần tử đều có thể được cấu trúc hóa, CSS có thể làm cho một danh sách có thứ tự hoặc không có thứ tự hiển thị như một thanh điều hướng hoàn toàn, trong đó còn có hiệu ứng nút phản chiếu. Nội dung tài liệu có thể được đánh dấu bằng các phần tử thông thường, các phần tử này được chỉ ra bởi các thuộc tính cấu trúc hóa đặc biệt để chỉ ra vai trò ngữ nghĩa của chúng trong thiết kế trang web.

Chúng tôi đã tạo ra phiên bản thử nghiệm tiếng Trung đầu tiên của CodeW3C.com vào năm 2006, chúng tôi đã sử dụng CSS để bố cục từ đầu và sử dụng XHTML để cấu trúc tài liệu. Mỗi phần tử trong đó đều được cấu trúc hóa, từ tiêu đề đến danh sách, thậm chí là đoạn văn. Bạn có thể thấy nút trang chủ có hiệu ứng phản chiếu và nút menu cấp hai trên mỗi trang của CodeW3C. Dưới đây là mã XHTML của hai thành phần này:

<div id="header"><h1><a href="/">codew3c hướng dẫn trực tuyến</a></h1></div>
<div id="navfirst">
<ul id="menu">
<li id="h"><a href="/h.asp" title="hướng dẫn html">hướng dẫn html</a></li>
<li id="x"><a href="/x.asp" title="hướng dẫn XML">hướng dẫn XML</a></li>
<li id="b"><a href="/b.asp" title="kịch bản trình duyệt">kịch bản trình duyệt</a></li>
<li id="s"><a href="/s.asp" title="Văn bản máy chủ">Văn bản máy chủ</a></li>
<li id="d"><a href="/d.asp" title="Hướng dẫn dot net">Hướng dẫn dot net</a></li>
<li id="m"><a href="/m.asp" title="Hướng dẫn đa phương tiện">Hướng dẫn đa phương tiện</a></li>
<li id="w"><a href="/w.asp" title="Hướng dẫn xây dựng trang web">Hướng dẫn xây dựng trang web</a></li>
</ul>
</div>

div, id và các trợ lý khác

Nếu được sử dụng đúng cách, div có thể trở thành trợ lý tuyệt vời cho các ký tự cấu trúc, trong khi id lại là một công cụ nhỏ nhưng rất hữu ích, giúp bạn có khả năng viết mã XHTML rất gọn gàng, tận dụng một cách tinh tế CSS và thêm các hành vi phức tạp, tinh vi vào trang web thông qua mô hình đối tượng tài liệu tiêu chuẩn (DOM).

W3C định nghĩa phần tử div như sau trong mô hình cấu trúc XHTML của bản nháp XHTML2 mới nhất của mình:

Các phần tử div, thông qua việc kết hợp với các thuộc tính id, class và role, cung cấp cơ chế chung để thêm cấu trúc bổ sung vào tài liệu. Phần tử này sẽ không định nghĩa phong cách biểu diễn cho nội dung. Do đó, người sáng tạo có thể kết hợp phần tử này với bảng phong cách, xml:lang, thuộc tính để làm cho XHTML phù hợp với nhu cầu và khẩu vị của họ.

div là viết tắt của division. Division có nghĩa là phân chia, khu vực, nhóm. Ví dụ, khi bạn nhóm lại một loạt các liên kết, bạn tạo ra một division của tài liệu.

Cơ chế cấu trúc phổ biến

Mọi người viết HTML đều rất quen thuộc với các yếu tố phổ biến như đoạn văn và tiêu đề, nhưng có thể có một số người không quen thuộc với div. Trong mô tả của W3C, chúng ta có thể tìm thấy chìa khóa để hiểu yếu tố div, "một cơ chế phổ biến để thêm cấu trúc."

Trên trang chủ của chúng tôi, chúng tôi封装 danh sách mục hướng dẫn vào một div, vì danh sách mục hướng dẫn không phải là một phần của bất kỳ yếu tố chính văn bản nào. Trong đó, yếu tố h2 đánh dấu tiêu đề của mỗi hướng dẫn, và yếu tố danh sách ul đánh dấu danh sách chi tiết của mỗi hướng dẫn. Nhưng trong ý nghĩa lớn hơn và cụ thể hơn, danh sách hướng dẫn này đóng vai trò cấu trúc, tức là thành phần điều hướng cấp hai. Để nhấn mạnh vai trò này, chúng tôi sử dụng id navsecond để đánh dấu div này.

<div id="navsecond">
<h2>Hướng dẫn HTML</h2>
<ul>
<li><a href="/html/index.asp" title="Hướng dẫn HTML">HTML</a></li>
<li><a href="/xhtml/index.asp" title="Hướng dẫn XHTML">XHTML</a></li>
<li><a href="/css/index.asp" title="Hướng dẫn CSS">CSS</a></li>
<li><a href="/tcpip/index.asp" title="Hướng dẫn TCP/IP">TCP/IP</a></li>
</ul>
<h2>Hướng dẫn XML</h2>
<ul>
<li><a href="/xml/index.asp" title="Hướng dẫn XML">XML</a></li>
<li><a href="/xsl/xsl_languages.asp" title="Ngôn ngữ XSL">XSL</a></li>
... ...
... ...
</div>

Bạn có thể sử dụng bất kỳ tên nào. "Gladys" và "orangebox" đều hoàn toàn tuân thủ quy tắc đặt tên của XHTML. Tuy nhiên, tên có ý nghĩa (semantic) hoặc cấu trúc meta-structural là tốt nhất (tức là tên có thể giải thích chức năng của các yếu tố trong đó).

Khi khách hàng quyết định sử dụng màu xanh, bạn sẽ nghĩ rằng việc đặt tên một phần của trang là orangebox (hộp màu cam) sẽ rất ngốc. Trong tình huống sau, bạn sẽ cảm thấy mình ngốc hơn, khi chỉ còn sáu tháng để giao hàng, bạn bắt đầu điều chỉnh biểu mẫu样式, nhưng lại không thể nhớ ra "Gladys" (tên nữ) đại diện cho khu vực điều hướng, thanh bên hay khung tìm kiếm.

Do đó, việc gán id là "menu", "content" hoặc "searchform" sẽ giúp bạn nhớ lại. Đưa ra thêm, đánh dấu không phải là thiết kế, trang web có cấu trúc tốt có thể được định dạng thành bất kỳ hình dạng nào bạn mong muốn. Kết quả là, bất kể bạn sử dụng bố cục CSS thuần túy hoặc bố cục hỗn hợp, bạn sẽ hoàn toàn thay đổi thói quen suy nghĩ và sáng tạo dựa trên các thẻ biểu diễn.

id vs. class

thuộc tính id không phải là điều mới mẻ đối với XHTML; thuộc tính class hoặc thẻ div cũng vậy. Chúng đều có thể được truy hồi từ thời kỳ HTML. Thuộc tính id sẽ gán một tên duy nhất cho một phần tử. Mỗi tên chỉ được sử dụng một lần trong trang được gán. (Ví dụ, nếu trang của bạn chứa div có id là content, thì không có div hoặc phần tử nào khác có thể sử dụng tên này. Ngược lại, thuộc tính class có thể được sử dụng nhiều lần trong trang (ví dụ, năm đoạn văn trong trang có thể sử dụng tên class "small" hoặc "footnote"). Dưới đây là các thẻ giúp minh họa sự khác biệt giữa id và class:

<div id="searchform">Các thành phần biểu mẫu tìm kiếm sẽ được đặt ở đây. Điều này
phần của trang là duy nhất.</div>
<div class="blogentry">
   <h2>Bài viết blog hôm nay</h2>
   <p>Nội dung blog sẽ được đặt ở đây.</p>
   <p>Đây là đoạn văn khác của nội dung blog.</p>
   <p>Người ta có thể có rất nhiều đoạn văn trong một trang, vậy cũng vậy
   có thể có rất nhiều bài viết trong một blog. Một trang blog có thể sử dụng
   một số lượng lớn các ví dụ về lớp "blogentry" (hoặc bất kỳ loại nào khác)
   ).
</div>
<div class="blogentry">
   <h2>Bài viết blog ngày hôm qua</h2>
   Thực tế, ở đây chúng ta đang trong div có class
   "blogentry."
   Họ nhân lên như cáo.
   Nếu có mười bài viết blog trên trang này, có thể
   Có mười div của class "blogentry".
</div>

Trong ví dụ này, div có tên là searchform được sử dụng để bao bọc khu vực trang web chứa biểu mẫu tìm kiếm,而 div có class="blogentry" được sử dụng để bao bọc mỗi bài viết trong blog. Trong trang web chỉ có một biểu mẫu tìm kiếm, vì vậy chúng tôi chọn đánh dấu thành phần duy nhất này bằng ID. Nhưng blog có rất nhiều bài viết (như bài viết), vì vậy thuộc tính class được áp dụng trong trường hợp này. Tương tự, trang tin tức thường có nhiều div, các div này có class có thể là "newsitem" hoặc bất kỳ cái gì khác.

Tuy nhiên, không phải mọi trang web đều cần div. Trang blog có thể chỉ sử dụng h1, H2 và h2 tiêu đề và đoạn văn <p>. Trang tin tức cũng vậy. Chúng tôi trình bày div có class là blogentry không phải là khuyến khích bạn lấp đầy trang web với div, mà chỉ để trình bày nguyên tắc: Trong cùng một tài liệu HTML, bạn có thể sử dụng nhiều class, nhưng chỉ sử dụng một lần ID.

Luận thuyết miếng dán dính

So sánh thuộc tính ID như là một miếng dán dính để suy nghĩ sẽ rất có ích. Tôi sẽ dán một miếng dán lên tủ lạnh để nhắc nhở mình mua sữa, một miếng dán khác trên điện thoại để nhắc nhở mình gọi điện cho một khách hàng chậm trả nợ. Còn một miếng dán khác, dán trên sổ ghi chép, nhắc nhở tôi phải trả hóa đơn trước ngày 15 của tháng này.

ID cũng sẽ đánh dấu các khu vực đặc biệt trong tài liệu, để nhắc nhở bạn khu vực nào cần xử lý đặc biệt. Về điểm này, thuộc tính ID tương tự như dán dính. Để thực hiện xử lý đặc biệt, bạn cần sử dụng ID đặc biệt này để viết một số quy tắc trong bảng样式 hoặc thêm một số dòng mã vào tệp JavaScript. Ví dụ, trong tệp CSS của bạn có một số quy tắc đặc biệt chỉ áp dụng cho các yếu tố trong div có tên là searchform.

Khi một thuộc tính id được sử dụng như một vật có từ tính (magnet) trong một loạt các quy tắc CSS đặc biệt, nó được gọi là CSS selector. Có rất nhiềuTạo ra bộ lọcphương pháp, nhưng id rất dễ sử dụng và có nhiều mục đích sử dụng.

Lực lượng của id

Tính mạnh mẽ của thuộc tính id không thể tưởng tượng được. Nó có các khả năng sau:

  • Là bộ lọc của bảng kiểu, cho phép chúng ta tạo ra các đoạn mã XHTML tối ưu.
  • Là điểm dính của hyperTEXT, thay thế cho thuộc tính name đã lỗi thời.
  • Là phương pháp để xác định phần tử cụ thể từ các đoạn mã JavaScript dựa trên DOM.
  • Là tên của một phần tử đối tượng.
  • Là một công cụ xử lý tổng hợp (xử lý tổng hợp) (trong ví dụ của W3C, “Khi dữ liệu được lấy từ trang HTML vào cơ sở dữ liệu, hoặc khi chuyển đổi tài liệu HTML sang định dạng khác, sử dụng làm công cụ nhận diện lĩnh vực.”).

Các quy tắc của id

Giá trị của id phải bắt đầu bằng chữ cái hoặc dấu gạch dưới; không thể bắt đầu bằng số. Mặc dù W3C kiểm tra sẽ không bắt lỗi này, nhưng bộ phân tích XML sẽ. Đồng thời, nếu bạn sử dụng id với JavaScript trong biểu mẫu, tên và giá trị của id phải là biến hợp lệ của JavaScript. Không gian và dấu gạch nối, đặc biệt là dấu gạch nối, không được phép. Ngoài ra, việc sử dụng dấu gạch dưới trong tên class hoặc id không phải là một ý tưởng tốt, do các giới hạn trong CSS2.0 (và một số trình duyệt).

Các thẻ có ý nghĩa và khả năng truy cập

Hiện nay, chúng ta đã thảo luận về các yếu tố XHTML phổ biến (nhất là div và id), hãy cùng xem một ví dụ về trang chủ của trang web này. Đầu tiên, hãy cùng nhìn lại menu ở vị trí đầu báo:

<div id="navfirst">
<ul id="menu">
<li id="h"><a href="/h.asp" title="hướng dẫn html">hướng dẫn html</a></li>
<li id="x"><a href="/x.asp" title="hướng dẫn XML">hướng dẫn XML</a></li>
<li id="b"><a href="/b.asp" title="kịch bản trình duyệt">kịch bản trình duyệt</a></li>
<li id="s"><a href="/s.asp" title="Văn bản máy chủ">Văn bản máy chủ</a></li>
<li id="d"><a href="/d.asp" title="Hướng dẫn dot net">Hướng dẫn dot net</a></li>
<li id="m"><a href="/m.asp" title="Hướng dẫn đa phương tiện">Hướng dẫn đa phương tiện</a></li>
<li id="w"><a href="/w.asp" title="Hướng dẫn xây dựng trang web">Hướng dẫn xây dựng trang web</a></li>
</ul>
</div>

Chúng ta có bảy liên kết, mỗi liên kết được分配 một id để tương ứng với nội dung tương ứng: ví dụ, id tên là h tương ứng với hướng dẫn HTML, tương tự như vậy. Đồng thời, các liên kết này được封装 trong phần tử danh sách tên là menu, id tên menu xác định chức năng của danh sách này - danh sách menu, và div ngoài cùng tên là navfirst được sử dụng để đánh dấu phần này của trang, phân biệt nó với các phần tử như nội dung chính (maincontent), thanh bên (sidebar) và chân trang (footer).

Các phần tử div và ul cung cấp một cấu trúc thực tế, tức là xác định chức năng của nội dung trong đó (danh sách điều hướng) và vị trí của nó trong tài liệu (vị trí đầu trang của trang). Ngược lại, việc sử dụng bố cục bảng truyền thống không cung cấp bất kỳ thông tin ngữ nghĩa nào về dữ liệu và có thể tiêu thụ ba lần băng thông.

Lưu ý rằng các thẻ này không chứa thẻ img, vì vậy chúng không liên quan đến các thuộc tính như width, height, background hoặc border v.v. Đồng thời, chúng không sử dụng các ô của bảng, cũng không liên quan đến một loạt các thuộc tính liên quan. Chúng rất gọn gàng và nhỏ gọn, đồng thời cung cấp tất cả thông tin cần thiết để hiểu chúng.

Bằng cách sử dụng cùng với CSS, các thẻ này cung cấp cho người truy cập trang web một布局 có thể tải nhanh chóng và đáng tin cậy. Đồng thời, nó cũng cung cấp khả năng tạo ra một diện mạo linh hoạt và đa dạng hơn cho người truy cập. Và trong môi trường không có CSS, các thẻ cấu trúc của chúng ta vẫn có thể cung cấp tất cả nội dung một cách không lộn xộn.

Người đọc tinh tường có thể đã phát hiện ra rằng văn bản trong phần a không được trình bày bởi trình duyệt, điều này cũng phải归功于 sự hợp tác hoàn hảo giữa các thẻ cấu trúc và CSS, cho phép chúng ta định nghĩa một cơ chế kích hoạt bằng cách sử dụng một số quy tắc CSS, khi người dùng sử dụng trình duyệt đồ họa, họ sẽ thấy các nút điều hướng đẹp mắt,而当 người dùng sử dụng trình đọc văn bản thuần văn bản thì họ cũng có thể nhận được toàn bộ văn bản, từ đó, nội dung sẽ giống nhau đối với tất cả người dùng.

Và, do thẻ không chứa hình ảnh và ô bảng, thành phần thanh điều hướng này có thể được trích dẫn bởi bất kỳ trang nào trong trang web mà không thay đổi cấu trúc, đồng thời mang lại hiệu ứng thị giác khác nhau. Nói một cách ngắn gọn, bằng cách modular hóa mã, chúng tôi đã tăng cường khả năng tái sử dụng mã.