我可以在導航元素中使用徽標圖片嗎？

爲了編寫語義和可靠的標記，我可以在導航元素中放置一個徽標圖像嗎？在ul元素之前。我可以在導航元素中使用徽標圖片嗎？

<nav> 
    <img id="logo" /> 
    <ul> 
     <li>a</li> 
     <li>b</li> 
    </ul> 
</nav>

或者我應該把它包在所有其他元素，像這樣：

<section id="navigation"> 
    <img id="logo" /> 
    <nav> 
     <ul> 
      <li>a</li> 
      <li>b</li> 
     </ul> 
    </nav> 
</section>

我寧願第一個最小化的標記。

來源

2012-08-01 thomasmyrman

是的，在<nav>標籤中放置圖像沒有問題。根據MDN和W3C，流量內容是此標記的允許內容，其他元素中還有<img>標記。

來源

2012-08-01 01:04:19 j08691

我在nav如果只插入一張圖片...

...這個圖像鏈接到網頁/錨（比如頭版的鏈接），或
...這個圖像包含文「導航」或類似

（所以應該在一個h1插入）的spec says：

nav元素表示鏈接到其他頁面或頁面內部分的頁面部分：包含導航鏈接的部分。

所以本節不應包含與導航無關的內容。

你的第二個例子不是你想要的，因爲你會創建一個錯誤的輪廓（因爲外部section）。

如果是網頁的主導航和圖像是網站的標誌，我會使用這個標記：

<header> 

<h1><a href="index.html" title="Home page"><img src="logo.png" alt="ACME Inc."></a></h1> 

<nav> 
    <ul> 
    <li>a</li> 
    <li>b</li> 
    </ul> 
</nav> 

</header>

如果您想將徽標鏈接到首頁和主頁不會在ul聯繫，我將其插入到nav：

<nav> 
<ul> 
    <li><a href="index.html" title="Home page"><img src="logo.png" alt="ACME Inc."></a></li> 
    <li>a</li> 
    <li>b</li> 
</ul> 
</nav>

但是，這是一種罕見的情況下，因爲你仍然需要一個頁面標題，並在大多數情況下，這將是標誌，並且在大多數情況下這應該鏈接到該網站的主頁。

來源

2012-09-09 15:10:22 unor

對不起，如果這個評論似乎有點隨意，但我有一個問題。你的意思是說，如果Logo替換了通常被稱爲'Home'的鏈接，它應該放在* ul裏面，但是當鏈接'Home'並且Logo也被鏈接時，那麼標識應該是* 「ul」的外部*（但當然內部的Home-link）？ – Sven 2013-10-22 19:49:41

@Sven：如果你有兩個鏈接的標誌和一個鏈接「Home」，只有「Home」鏈接應該在'nav'中，是的。如果您只有鏈接徽標，並且此徽標代表網站標題（大多數網站都是這種情況），它應該*不*在'nav'中。我的最後一個HTML例子僅適用於極少數情況（然後您需要額外的網站標題）。 – unor 2013-10-26 20:17:35

我可以在導航元素中使用徽標圖片嗎？

回答

相關問題