什么是POSH ？不，這不是一些新的網(wǎng)頁設(shè)計上的時尚的宣傳- POSH是Plain Old Semantic HTML（清晰老式語義化HTML）縮寫。語義的HTML這個詞被用于各種各樣的事情，但它起源于一個目標(biāo)：使用語義化的標(biāo)記和屬性建立XHTML文檔，而不是用表象的HTML 。POSH這個名詞被創(chuàng)造出來，因為一群高度值得尊敬的網(wǎng)頁設(shè)計師想有一個簡短的便于記憶的，能輕松捕捉的語義化HTML本質(zhì)概念 。
為什么要使用語義化的HTML？
你可能會說： “因為對于互聯(lián)網(wǎng)這是正確的事情， ”但它的好處遠(yuǎn)遠(yuǎn)超出了這一點。例如，它使得有屏幕閱讀器有次序的解析網(wǎng)頁，從而視覺障礙的用戶更容易理解獲取網(wǎng)站的信息。
其次，搜索引擎優(yōu)化和語義的HTML是密不可分的伙伴。他們有時可能有利益沖突，我們會稍后在文章中說明，但總的來說，他們是一致的。搜索引擎優(yōu)化的目的是為了幫助搜索引擎爬蟲更好地了解網(wǎng)頁的信息和將網(wǎng)頁更好地歸類。搜索引擎爬蟲不比視覺閱讀器強多少，它需要更多的指引去確定一個網(wǎng)頁的結(jié)構(gòu)和主題。好的語義化的HTML能夠體現(xiàn)頁面的結(jié)構(gòu)。
語義的HTML試圖通過網(wǎng)頁上文字和標(biāo)記傳達(dá)網(wǎng)頁的含義。 嘗試這樣思考：如果網(wǎng)頁上的內(nèi)容是你說的話。那么標(biāo)簽是話的結(jié)構(gòu)，音調(diào)，停頓，甚至是臉上的表情。基本上標(biāo)簽是一半語言。
網(wǎng)站結(jié)構(gòu)
我在以前的文章dev.opera.com我談到網(wǎng)站結(jié)構(gòu)，目的是提供一個明確的方式為搜索引擎發(fā)現(xiàn)這些網(wǎng)站上的網(wǎng)頁討論的主題-這可以進(jìn)一步提高利用語義的HTML的效果。
網(wǎng)頁結(jié)構(gòu)
網(wǎng)頁包含一個title，內(nèi)容。 內(nèi)容可以包含段落，列表，引用，圖片和表格。所有這些類型的信息都有自己特定的標(biāo)記。我們將所有這些標(biāo)簽以標(biāo)題開始。使用此有關(guān)排序表的網(wǎng)頁作為例子引出以后要描述的點（不好翻譯，原文：Use this page about sortable tables as an example to follow along with for the coming points.）。
標(biāo)題，由H1至H6
一個很好的文檔擁有標(biāo)題和小標(biāo)題，因為標(biāo)題更容易確定網(wǎng)頁的主題。這些標(biāo)題根據(jù)重要性從h1至h6排列。說實話，我自己從來沒有使用h5和h6。我通常只有一個h1標(biāo)記在內(nèi)容頁上;在入口網(wǎng)頁，例如博客首頁上，你可以有多個h1在你的所有文章上。 從語義的角度出發(fā)，這樣肯那個很奇怪，但是從搜索引擎優(yōu)化的角度來看，它是很有效的。
嚴(yán)格語義研究者會建議你只有一個h1兩個h2的，3個h3的等，在我來看，我不同意這種說法，通常一個文檔不僅僅只有兩個h2，我認(rèn)為這樣式也是非常良好的結(jié)構(gòu)。
通常，了解語義化HTML的設(shè)計師會把網(wǎng)站的標(biāo)題放在h1中。在一個網(wǎng)站的主頁上，這可能是一個非常明智的決定。網(wǎng)站其他的頁面上，你可能有一個特定的標(biāo)題，這可能與你的網(wǎng)站名稱相關(guān)，但是不是。關(guān)于這些子網(wǎng)頁，這個標(biāo)題應(yīng)放在h1是明智的，把你的網(wǎng)站名稱放在h4甚至span中。
搜索引擎會給標(biāo)題中的文字以更高的權(quán)重。您的網(wǎng)頁關(guān)鍵字優(yōu)化應(yīng)該至少一次出現(xiàn)在h1中，而且相關(guān)的關(guān)鍵字在其他標(biāo)題（hx）中，圖1所示 。
包含關(guān)鍵詞的標(biāo)題有助于提高網(wǎng)頁的搜索引擎優(yōu)化
圖：包含關(guān)鍵詞的標(biāo)題有助于提高網(wǎng)頁的搜索引擎優(yōu)化
圖像
文檔中圖片被以各種方法使用，應(yīng)該讓圖片體現(xiàn)適當(dāng)語義。 唯一真正有用的語義標(biāo)記是img標(biāo)記的alt屬性，而且只應(yīng)該用在對文檔而言有特定含義的圖片。如果圖像只有裝飾的目的，讓alt屬性為空。否則，在alt中注明圖像描述的信息。
如果你想使用的圖像來替換文字，因為你文字更好看一些（用圖片代替），確保你使用的是正常的文本在您的HTML中，而使用CSS實現(xiàn)圖片替代文字。你必須這樣做，因為有視覺障礙的人和搜索引擎無法讀取文本中的圖像。我自己的首選方法，是通過CSS的background-image屬性，然后隱藏HTML文本通過使用一個大的文本縮進(jìn)（text-indent）（約 -1000px或其他比較大的值。）要小心：文檔中的圖片上的文字應(yīng)該是完全和文本一樣。否則，你可能失去很多搜索引擎的排名值（譯者注：會被搜索引擎懲罰為作弊）。
縮略語
作為一個網(wǎng)頁設(shè)計師，會經(jīng)常遇到縮略詞，我在這篇文章中多次遇到，使用縮寫或者簡稱。如果存在縮略詞，請務(wù)必提供正式版的術(shù)語并且使用abbr或acronym標(biāo)簽。對密度過大的關(guān)鍵詞很有效。
表格
我們都知道，為什么使用表格布局的網(wǎng)站是不好的，而且我們也知道他們是-用于顯示表格數(shù)據(jù)的。 使用基本的表格已經(jīng)是在正確方向邁出的一大步，但也有一些方法，可以改善table語義的價值，從而進(jìn)步一改善網(wǎng)站的SEO：
1.使用表標(biāo)題（ th ）為表格的表頭（這很簡單簡單）
2 。如果可以的話，使用thead ， tbody和tfoot適當(dāng)?shù)膮^(qū)分表格
3.為表格提供了一個caption，說明是什么信息在表格中
caption和th是很好的放置你文檔關(guān)鍵詞的地方。
強調(diào)
還記得我說過標(biāo)簽應(yīng)該是文字的情感嗎？ 這才是真正的情感：您可以使用em或strong強調(diào)某些詞。在過去，人們用b和i ，但這些標(biāo)記已不再提倡，因為它們意味著一個特定的表現(xiàn)，HTML僅僅是用來展示文檔結(jié)構(gòu)/含義（所有風(fēng)格應(yīng)當(dāng)使用CSS來實現(xiàn)）
搜索引擎會給與這四個標(biāo)記更高的權(quán)重（strong em b i）。 過量使用他們可是弊大于利的，實際會造成損失重點，但如果小心處理，可為你的文檔增色不少。
簡短的關(guān)于（i）frames
這很簡單：不使用它們。 搜索引擎不會讀取他們，屏幕閱讀器也很難處理他們。
利益沖突
所有上述規(guī)則也是可以做小小調(diào)整的，如果能讓你所在的組織的每個人高興，也是一件好事啊，當(dāng)你的老板要在網(wǎng)頁上有一個令人激動的營銷標(biāo)題，但是你不愿意，因為它沒有準(zhǔn)確描述這個網(wǎng)頁，還把你認(rèn)為重要的關(guān)鍵詞擠到了第二位。如果你好勝心很強，你不妨把老板認(rèn)為的一級標(biāo)題放到h2中，二級標(biāo)題放在h1中。
同樣的問題也可以使用內(nèi)置頁框（iframes）和圖像（images）來處理。如果有人很想你把某個大塊內(nèi)容放在排名較高的頁面，但你并不想冒著失去網(wǎng)頁重點內(nèi)容的風(fēng)險，你當(dāng)然可以把這些內(nèi)容放到iframe或不提供alt的圖片中。
最終這些決定在于你-正常語義應(yīng)該是你設(shè)計的基礎(chǔ)，當(dāng)你還想讓你的網(wǎng)頁最優(yōu)的時候，這些沖突將出現(xiàn)。
并非如此簡單的語義化HTML -微格式
微格式也語義的HTML ，但他們并不完全簡單！目前，搜索引擎很難使用微格式的算法，但是，很可能發(fā)生變化。 特別是在hCard （ HTML版本的的vCard ）對于搜索引擎他顯得非常簡單和明顯，我懷疑，未來的幾年搜索引擎將開始使用他們。你可以更加智能的通過HTML基本語義使用微格式，例如，把hCard 放在address標(biāo)記中也是一個很好的方法！
結(jié)論
用語義化的HTML創(chuàng)建你的網(wǎng)頁，更具有可訪問性，不論是殘障人士還是搜索引擎。良好的語義標(biāo)記有助于搜索引擎去確定你網(wǎng)站的主題，如果配合一個良好的網(wǎng)站結(jié)構(gòu)，會讓你的網(wǎng)站排名大放光彩！
微格式：http：//zh.wikipedia.org/w/index.php？title=%E5%BE%AE%E6%A0%BC%E5%BC%8Fvariant=zh-cn
vCard：http：//zh.wikipedia.org/w/index.php？title=VCardvariant=zh-cn
hCard：http：//zh.wikipedia.org/wiki/HCard
（作者：Joost de Valk 翻譯：greengnn 來源：dev.opera.com）
