創建有效的XHTML可點擊塊區域

我試圖創建一個「可點擊」區域。創建有效的XHTML可點擊塊區域

<a 
    style="display: block" 
    href="http://stackoverflow.com"> 
    StackOverflow 
</a>

A是一個內嵌元素，但CSS使它成爲一個塊。

如果上面是有效的，那麼下面的應該是有效的太：

<a 
    style="display: block" 
    href="http://stackoverflow.com"> 
    <div>Some DIV that links to StackOverflow</div> 
</a>

但validator.w3.org不應該被標記爲無效（它是現在）。

如果它無效，將塊元素設置爲「可點擊」並重定向到任意頁面的最合適方法是什麼？我知道我可以使用JS onclick來實現這種行爲，但谷歌將如何看待這一點？

來源

2009-07-01 Adrian Godong

我不確定xhtml驗證與SEO有什麼關係。首先，對於喜歡HTML 5的人來說，xhtml並不完全被視爲一個好規範。其次，沒有任何證據表明網站驗證（或缺乏）會影響SEO一點點...... – NotMe 2009-07-01 15:58:09

@Chris：我想讓我的網站通過XHTML驗證，並且有一個很好的SEO。我並不是說兩者都有關係。 HTML5是否具備這種功能？我還希望HTML5標準能夠在大約5年內被採用？ – 2009-07-01 16:12:07

我認爲內聯不能包含塊元素的（XHTML）規則應該有一些例外，例如'`元素。否則，沒有正常的做法。 – adardesign 2010-03-24 14:54:20

驗證器是正確的 - 你不能把<div>放在<a>之內，不管你事後用CSS做什麼。

做正確的事是你在你的第一個代碼塊做了什麼 - <a style="display: block;">

如果你想裏面的東西，你可以做<a style="display: block;"><span style="display: block;">

來源

2009-07-01 15:41:01 Greg

+1，這是廣泛接受的解決方案，可以在很多應該阻塞的內容周圍使用錨點。 – molf 2009-07-01 16:04:12

這並不意味着一個是有效的暗示其他必須是。有HTML的嵌套規則，而錨內的div不適合它們，這就是爲什麼validator.w3.org給你一個很難的時候。

如果你真的必須有一個div，而不是文本，圖像或<span style="display: block"> s，那是可點擊的，那麼是的，你將不得不使用onclick事件。谷歌不會理解或承認鏈接的存在。（除了onclick div之外，您可以通過在錨點上應用錨點來應對此問題。）

來源

2009-07-01 15:41:05 chaos

首先您需要知道您是要使用嚴格還是過渡的XHTML（frameset is這裏沒有用）。然後你看看DTD (link)，你會看到A裏面不能有DIV。

來源

2009-07-01 15:42:36 Lucero

儘可能嚴格，一如既往。 – 2009-07-01 15:46:01

爲什麼不使用area tag這個？它應該在圖像映射中定義可點擊區域。

來源

2009-07-01 15:42:37 jjclarkson

它可能不只是一個圖像，它應該可用於任何任意塊單元。 – 2009-07-01 15:48:14

Google bots現在遵循簡單的javascript鏈接，所以在div的onClick事件中使用JS是一個選項。其他搜索引擎機器人不這樣做，但遲早他們會。

更多信息in this article。

來源

2009-07-01 15:47:08 Nicolas

事情我已經在過去所做的有這類問題是調用父元素上的點擊（我的例子使用jQuery）：

<div class="link"> 
    <a href="http://www.google.com" title="Google">Visit Google</a> 
</div> 

$(".link").click(function(){ 
    document.location = $(this).find("a:first").attr("href"); 
});

使用樣式，你可以使整個區域顯得通過設置光標的鏈接，翻轉狀態等。

來源

2009-07-01 15:49:18 Sampson

不要混淆有效的HTML和有效的CSS。使用display css屬性可以阻止內聯元素是有效的。將塊HTML元素放在行內是無效的。

來源

2009-07-01 15:56:53 darasd

創建有效的XHTML可點擊塊區域

回答

相關問題