語義上正確的嵌套錨

我正在開發一個web應用程序。我們也創建了一些可以被描述爲內聯編輯的東西。只是爲了描繪我正在嘗試解決的事情，我使用Facebook發佈的例子。語義上正確的嵌套錨

您有類似帖子。

史蒂夫·喬布斯增加5張新的照片

史蒂夫·喬布斯是鏈接重定向到他的個人資料，以便在HTML中，這將是：

<div class="post-block"> 
    <p><a href="stevejobs/" title="#">Steve Jobs</a> added 5 new photos.<p> 
</div>

但我要的是整個郵報「塊「雖然我只希望這個名字看起來像是鏈接，但可點擊。通常在HTML邏輯中會這樣說：

<a href="stevejobs/" title="#"><div class="post-block"> 
    <p><a href="stevejobs/" title="#">Steve Jobs</a> added 5 new photos.<p> 
</div></a>

但這在語義上不正確。快速瀏覽HTML 4.01或任何其他標準說明如下：

由A元素定義的鏈接和定位點不能嵌套;一個A 元素不得包含任何其他A元素。

如何創建它在語義上更正除了使用javascript和定義div：hover狀態爲整個「div錨」？

來源

2012-10-13 Blackie123

嵌套的'a'元素在HTML中被語法*禁止，因此它們沒有分配給它們的語義。你似乎想要的是一個特定的*功能*。 –

既然你不想要的JavaScript（這本來就容易），這裏是另一種方法：

<div class="post-block"> 
    <p><a href="stevejobs/" title="#">Steve Jobs <span style="color:none; text-decoration:none;">added 5 new photos.</span></a></p> 
</div>

任何其他樣式效果可以添加。如cursor: none;等取決於你想要的效果。

來源

2012-10-13 15:09:48 hjpotter92

我不反對JS，但我想知道是否有其他適當的選項。這不像JS解決方案那麼光滑，但也要感謝這一點！ – Blackie123

'none'不是有效的顏色，而是使用'initial'。 –

只是一個跨度和風格的它，只要你想更換圍繞「史蒂夫·喬布斯」的錨標記在你的第二個例子：

<a href="stevejobs/" title="#"><div class="post-block"> 
    <p><span class="post-block-user">Steve Jobs</span> added 5 new photos.<p> 
</div></a>

與CSS：

a { 
    cursor: default; 
} 
.post-block-user { 
    font-weight: bold; 
    cursor: pointer; 
}

或任何風格的你」重新申請或不申請。實際上，我會嘗試丟失div並將該類放在錨標記上，除非保留該結構的其他原因。

來源

2012-10-13 15:15:44 ultranaut

在HTML5中，可以使用a作爲塊級元素。

<div class="post-block"> 
    <a href="stevejobs/"><p>Steve Jobs added 5 new photos.<p></a> 
</div>

現在，刪除CSS的默認鏈接樣式（.post-block a {text-decoration:none;}）。

要獲取名稱的鏈接樣式，請將該名稱放在元素中並添加類似「name」的類。該b元素將是一個合適的選擇在這裏（以其它方式使用span）：

<div class="post-block"> 
    <a href="stevejobs/"><p><b class="name">Steve Jobs</b> added 5 new photos.<p></a> 
</div>

我們找回造型：.post-block .name {text-decoration:underline;}。

在元素中包含名稱甚至允許您使用微格式hCard（如果您喜歡）。

來源

2012-10-13 15:33:38 unor

HTML：

<div class="post-block"> 
<p><a href="stevejobs/" title="#"><span class="author">Steve Jobs</span> <span class="posttext">added 5 new photos.</span></a> <p> 
</div>

CSS：

.post-block { margin: 0px; } 
.post-block p { margin: 0px; } 
.post-block p a {display: inline-block; background-color: transparent; width: 100%; min-height: 100px; /* can be varied */ } 
.post-block p span.author { display: inline-block; } 
.post-block p span.posttext { display: inline-block; }

來源

2012-11-20 05:19:12 ganesh

我有好幾年了同樣的問題，在這我要保持HTML語義和語義搜索引擎優化也如標題標籤和段落等，同時仍然保持默認的錨定行爲，例如，指示目標網址在瀏覽器中，保持標籤完整並保留默認的錨點懸停操作，JavaScript本身並不具備這些功能。

我能想出的最佳解決方案是將絕對定位的塊級錨點放在（覆蓋）內容上，並使用父元素的懸停操作將任何行爲整合到實際內容中，這在語義上是正確的，應該被所有網絡抓取工具正確解析，因此：

.post-block { 
 
    position: relative; 
 
} 
 

 
.post-block p span.anchor { 
 
    text-decoration: underline; 
 
} 
 

 
.post-block:hover p span.anchor { 
 
    text-decoration: none; 
 
} 
 

 
.postblock a.overlay { 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    z-index: 1; /* to be on the safe side */ 
 
    text-indent: -9999em; 
 
}

<div class="post-block"> 
 
    <p><span class="anchor">Steve Jobs</span> added 5 new photos.<p> 
 
    <a class="overlay" href="stevejobs/" title="#">Steve Jobs</a> 
 
</div>

這非常適用於塊和網格佈局，甚至玩弄觸摸設備不錯，因爲錨本身沒有懸停動作 - 這一些設備劫持了第一個clic K爲:)

不是100％確定如果搜索引擎懲罰文本縮進，但有任何數量的額外變通，discussion here讓任何人感興趣開始。

來源

2014-11-24 18:00:06 Atari

禁止嵌套錨標籤。

如果您只想將名稱顯示爲鏈接使用錨定標記。如果你需要整個塊可點擊在jQuery中的onclick功能。類似於

$(.post-block).click(//your function);

來源

2017-07-17 13:41:03

語義上正確的嵌套錨

回答

相關問題