原始版本: http://www.w3.org/QA/2002/04/Web-Quality

翻譯: web practice

聲明:原始版本(英文版)是唯一的官方版本。中文(繁體)版本是根據W3C網站上的文件翻譯的,可能存在某些錯誤。翻譯不保證譯文完全準確。請您自己承擔風險。

我的網站是標準的!你的呢?

狀態

這篇文章是作為W3C質量保證利益集團工作產生的。請發送關於它的任何公眾反饋到公共檔案 郵件列表public-evangelist@w3.org或是發送私人反饋到karl@w3.org。作者感謝這些人,他們花費了時間來檢查和構想。

此文章用多種語言翻譯過了

介绍

你會在這裡找到簡單、不難的技術和理念來提高你的網站質量,使你的網站有效。這個文檔是獻給HTML用戶,基於Web應用程序工作的開發人員,還有Web管理者的。

大多數網絡中的網站都不是有效的。我們可能會假想99%的網頁有這種情況,但這是沒有統計數據支持的。去做一項調查來證明情況確實如此,那應該會很有意思的。

為什麼?

HTML和標準

常見評論

我聽到許多關於這個主題的評論和嚷嚷。大多數都是由於缺乏對HTML驗證是什麼的認識及對它的理解。下面的是幾個例子:

  1. Steve,首席執行官,說:如果我的網站按照標準來做了,它就會乏味,我還會失去我的客戶。

    符合W3C標準,你可以有非常令人興奮地網站。創建一個網站,尊重標準與生成純文本的網頁沒有任何關係。

    目前W3C正在提議一系列非常酷的綜合技術。你可以體驗一個全面多媒體網站,採用了現有的W3C互相協作技術:使用了XHTML(結構化XML標記),CSS(樣式表),SVG(2D矢量圖形動畫),還有SMIL(同步多媒體)。這些技術是基於不同網絡市場不同角色的共識建立起來的。

  2. Alan,技術總監,說:我沒有這個財力來關心我網站上的標準。這將花費太多!

    標準的設計會簡化網站代碼維護,因為你不會有多個版本讓不同的瀏覽器來選擇。你的頁面會有更長的壽命,並且不會依賴於模糊不清的技術。因此,事實上,網絡標準的設計會花費的更少。

  3. Dean,藝術總監,說:如果我尊重標準,就會破壞我的創造力。

    技術上的限制存在於任何藝術中,不管你是畫畫、雕刻或是設計網頁。水彩或是油畫都有它們自己的限制,但是這些技術並不能阻礙創造力,而是它們提供了創造表達的結構。

    網絡標準的創建將會開啟一個技術的新世界,尤其是媒體、技術和讀者的。這個領域還有很多的探索。我們僅僅開始探索基於標準多媒體體驗的好處。

  4. Claudia,平面設計師,說:我不關心無障礙。殘疾人士不在我的目標讀者之中。

    你會受益於無障礙設計。總人口的8%到10%是殘疾人士。遵循無障礙準則(也就是網絡標準)的網站更易於維護。你的網站流量將增加,更多種類的瀏覽器可以以訪問到網站的內容。

    一些國家通過法律來要求無障礙,比如澳大利亞(殘疾歧視法諮詢條例 3.1 版本1999年5月),美國(第508章——基於網絡內聯網和互聯網的信息和應用程序),還有歐洲,在一個類似的計劃上運行(信息無障礙)。

  5. Aminata,網絡程序員,說:我為什麼要遵循標準?網絡是一個自由的地方。

    網絡是一個自由的地方,由許多你不一定知道他們需求的用戶分享使用的。該標準旨在考慮到所有潛在的讀者。按照網絡標準創建是一個對網絡團體的挑戰。你不會連接到任何公司或專有技術。你可以使用獨立平台要求的技術。

  6. Karl,網絡開發人員,說:我只是遵循書本的指示。

    不幸的是,許多書本都教不好網絡程序。當你創建一個網站,你應該檢查你的標記的正確性。如果你是一個網絡開發人員,要注意使用書本來開發你的應用程序和閱讀你正試圖實現的特別規範。

    一些網站收集了好的材料幫助人們按照w3c標準來設計。在W3C的網站上,你可以找到一個越來越多的教程列表推廣良好的實踐。

    W3C的有些人已經開發了自己使用的自由訪問軟件我們鼓勵使用它們,在它們可以使用的時候。這些軟件包實現了W3C技術。

  7. Tim,會計師,說:我的網絡編輯器生成非有效標記。

    許多創作工具都不能生成有效標記。有些嵌入了語法檢查,其它的做得正確,還是許多没有生成有效標記。作為一個另外的解決辦法,你需要使用HTML 驗證器檢查你的網頁。同時,聯繫軟件製造商(通過郵件、電話、信函)讓他們知道結果。如果你要求他們的話,公司將會做正確的事。

  8. Valérie,網絡內容開發人員,說:不是我的過錯。是模板引擎設計的方法。 (通常一個基於網絡界面的系統)。

    你是對的。通常不是你的過錯。如果這是一個簡單的表格,你從來沒有用手編寫過HTML,編寫你界面的開發或是模網站的維護,直到問題解決。如果你不確定產生的內容是否合乎W3C標準,就使用HTML驗證器來驗證,再把報告提交給你的網絡管理員,或是內容管理系統的負責人。

  9. Ning,軟件開發人員,說:沒有信息可以幫助我。我找到的所有資料都是英文的。

    有人把文檔和規範翻譯成了其它的語言。 W3C維護一個翻譯列表

HTML是一個標準的(XHTML也是!)

HTML在其發展過程中演變,有幾個版本。所有版本都是標準,你可以選擇適合你需求的一種。多數時候,最新的版本會是最好的選擇,除非你的目標是一個特定的讀者,或更舊的,破的瀏覽器。你選擇的版本定義了你可以使用的元素和屬性。

例如:在HTML 4.01裡,你會找到允許你在頁面裡使用的元素列表屬性列表。你可以手動編輯你的頁面,一種通常被稱為“手工編碼”或是“編寫源”的方法。

HTML 4.01允許你你編寫一個段落,並且給此段落編寫一個描點標識符,像這樣:

<p id="ref">This is a paragraph</p>

注意你嵌套你的元素的方式。有些元素不能被包含在其它元素裡,還有一些屬性只屬於某些元素。

你可以在你的文檔裡編寫的或是在你的軟件裡實現的元素,取決於HTML的版本。此表格包含了你可以使用的HTML的定義,或文檔類型(DOCTYPEs):

版本 DTD 列表 在文檔里文檔類型宣告
HTML 2.0 DTD
<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
HTML 3.2 DTD
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
HTML 4.01 Strict, Transitional, Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
	
XHTML 1.0 Strict, Transitional, Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

	
XHTML 1.1 DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
	

如果你在文檔的開頭不使用文檔類型之一,你就無法驗證你的文檔。當你手動編寫文檔時不要忘記它。

HTML 創作工具
所有HTML創作工具必須提供一個文檔類型,並根據此語言生成標記。
HTML 模板
任何HTML 模板必須有一個文檔類型。
HTML 庫或是模板引擎(服務端)
任何HTML 庫或是模板引擎必須返回一個文檔類型。

這裡,你看到了一個XHTML 1.0的嚴格檔模板的示例。

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />

	<meta http-equiv="Content-Style-Type" content="text/css" />
</head>

<body>

     ... Your HTML content here ...

</body>
</html>

一個XHTML的嚴格模板是非常容易實現的。文檔的修改和驗證簡單易懂。

驗證文件

HTML 驗證

一個HTML驗證器針對宣告的文檔類型簡單的檢查了文檔的正確性。

如果你想要驗證你最終的文檔的有效性,當該文檔顯示在它的用戶代理上了(例如,一個網絡瀏覽器),你可以使用W3CHTML 驗證器。此HTML驗證器會返回一個針對選擇的HTML文檔的錯誤列表。如果你的文檔沒有錯誤,它會返回一條信息:沒有找到錯誤!

如果你通過格式的幫助來編輯你的網站(你又沒有在你的格式裡編寫HTML標記),你可以向你網站的網絡管理員報告錯誤,要求固定HTML標記生成。

如果你手動創建你的網站,或是直接編排標記代碼,驗證器就會返回你頁面的錯誤,簡單的修正你的標記。 HTML驗證器給你錯誤所在行的編號。

HTML驗證器提供發生錯誤行的編號,所以能夠幫助你找到文檔的問題所在。它從第一行開始,一行接一行的檢查文件。這意味著在你文檔開頭的錯誤會導致你頁面裡接下去更多的錯誤。一個解決錯誤的好辦法是,改正第一個顯示的錯誤,然後重新驗證你的頁面。通常你會發現修復好一個文檔前面的錯誤, 同時間也解決了一些錯誤。繼續這樣做,直到錯誤都修復,最後產生的文件就會是有效的了。

如果你使用一個HTML創作工具,而你的頁面編輯之後仍不是有效的,請向軟件開發人員或是公司報告。你應該能聯繫公司的技術支持人員。

如果你是一個模板引擎、創建工具、或是內容管理系統的開發人員,使用HTML驗證器來修復在你實現中的問題。你也可以把HTML驗證器併入你的軟件或是後端。HTML驗證器的源代碼是免費提供的。驗證器每天都在加強,你也可以參與其發展。

注意有些文檔相對DTD是有效的,相對HTML規範也同樣是不正確的。在不久的將來,我們將提出一個不是由HTML驗證器檢測到的可能的錯誤列表。

HTML 驗證器列表

驗證鏈接

另一個不少網站存在的重要問題是URI的持久性。當你在你的文檔裡添加其它網站的鏈接時,你希望這些鏈接會保持穩定和持續性。這就意味著,你指出的信息點要一直存在,當別人在閱讀你的網站,點擊你給出來的鏈接,仍然還存在。你要檢查,確保你給出的到其它網頁上的鏈接或到你自己的網站上其它章節的鏈接都是沒有任何錯誤的。對於這一目的開發出來的一個工具:W3C 鏈接檢查

Checklink生成鏈接報告。報告的長度取決於它取得和檢查你頁面裡包含的所有鏈接的時間。為了檢查鏈接,這個程序處理一個文檔的HEAD HTTP請求。如果服務器配置錯誤,僅僅因為服務器不能給出HEAD,你就會得到一個錯誤的報告,即使鏈接是好的。在這種情況下,你應該寫信件給網站的網絡管理員,請他修復服務器配置。

Checking link http://webstandards.org/
HEAD http://webstandards.org/  fetched in 0.1s

上面的是列表的一個例子。它給出了獲取鏈接使用的時間。

在鏈接列表後,你會得到一個報告,是關於哪個鏈接是壞的或是已重定向的,哪個會幫助你修復錯誤鏈接的報告。

如果你想了解更多關於鏈接重要性的信息,我們邀請你訪問此文檔Cool URIs 不用改變Tim Berners-Lee編寫。

如果你,作為一個網絡管理員,希望在你的網站上安裝一個程序來幫助大家檢查自己的網頁,W3C 鏈接檢查代碼免費提供。

CSS 驗證

自1996,階層樣式表(CSS)提供了一個以一種簡潔又有效的方式把結構從樣式中分離出來的方法。在過去的一年(2001年),許多用戶代理(瀏覽器)實現了支持CSS 1和CSS 2。使用樣式表幫助你在一個單一的地方維護關於你文檔的所有信息。

在寫這篇文章的日期,你可以在CSS 1CSS 2中選擇一個放到你的文檔中。

使用樣式表設計有很多好處,像降低你網站的設計成本和提高其互用性(你網站在許多不同的用戶代理上的可讀性)。使用表格和JavaScript為多個版本的用戶代理設計你的網站,增加了初步建設成本的30%。

不要和FACE屬性使用FONT元素。從一個國際化的角度來看,這被認為有害。如果你想要學習如何去掉你的字體元素,並採取樣式表,我們鼓勵你閱讀Todd Fahrner的教程超出FONT標籤:實用HTML文本樣式

由於通過W3C HTML驗證服務和W3C CSS驗證服務,你可以檢查你樣式表的有效性。你可以檢查你的文檔要求的外部樣式表的有效性。如果你想要在你的網站上安裝你自己的驗證器,CSS驗證器的源代码免费提供。

驗證無障礙

製作一個網站是不足夠的。大多數時候你不了解讀者。訪問你的網站的人有不同的材料,瀏覽器和/或特殊的殘疾。有許多商業利益來做網頁訪問設計。不幸的是,很少可以直接驗證你網頁的無障礙性。一些工具,比如Bobby,能夠幫助你,但是它們不是你無障礙性擔憂的最終答案。你可能需要做一個你的內容的檢查。無障礙網頁倡議維護著源列表,會幫助你設計無障礙的網站。

一步一步提高質量的工具

通常大家不願意去驗證網站,因為無效頁面的數目或是因為他們不知道從哪裡開始。其實很容易,聰明點:小的,細心的,無障礙的,有規律的,模板化的。採用小的步驟會幫助你獲得一個沒有煩惱和灰心的有效網站。因此,積極思考,再找出解決的辦法,這樣會使得你的工作更簡單,像使用一個模板引擎。

有一個能夠幫助你得到一個更好的網站的工具列表。

HTML Tidy

Tidy起初是由Dave Raggett開發的。它可以幫助你使網頁有效。有時候Tidy不能修復所有的錯誤。 Tidy並不是一個編輯工具- 他只能幫你解決問題。

Top invalid docs

有時候要知道你網站的哪些網頁是無效的,是很難的。如果你運行一個會在你所有頁面緩慢進行的腳本,你會得到一個巨幅的無效頁面列表。

那麼,如何解決?

在W3C,Gerald Oskoboiny為不超載網站網絡管理員的網站開發了一個QA進步的工具。它發送一個最無效訪問的前十名文檔的報告,以提供通知讓他們能夠被改正。每週,網絡管理員都會收到一個新的10個無效文檔的報告。這個工具已經對公眾發布了。你可以根據你的需要運用它。

Olivier Théreaux,W3C,開發了此工具的一個更便攜和更可插撥的版本:LogValidator

這個工具需要網絡服務器最後的記錄和它通過有效性模塊的處理。這些有效性模塊檢查最普遍文檔的有效性的一個特定技術。默認的模板是HTML驗證器,但是也提供其它的驗證器。

所以,你能夠修復你網頁的拼寫、是否包括元數據、是否連接都是有效的,等等。一個API 推薦會幫你按照你的需求創建新的模板。

感謝

感謝審查這篇文章的人:Ian JacobsSusan LeschOlivier ThéreauxStephanie TroethJeffrey Zeldman,還有public-evangelist mailing-list裡的人。

如果沒有審查和幫助我的技術作家Kim Nylander的參與,是不會有此篇文章的。


Valid XHTML 1.0!

Created Date: 2002-04-08 by Karl Dubost
Last modified $Date: 2009/06/14 13:34:48 $ by $Author: ylafon $

Copyright © 2000-2003 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark, document use and software licensing rules apply. Your interactions with this site are in accordance with our public and Member privacy statements.