使用自定義HTML標記

Question

在我的html中，我很好奇，如果它在語義上是正確的使用唯一標識符，如<toys></toys>來保存圖像，而不是<h2>。例如：

是它最好有： <toys class="grid_4 push_2">&nbsp</toys>

與CSS：

toys { 
    background: url("toys.png") no-repeat scroll 0 0 transparent; 
    width: 181px; 
    height: 93px; 
    margin-top: -8px; 
    } 

，而不是：我目前有： <h1 class="grid_4 push_2">&nbsp</h1>

與CSS：

h1 { 
    background: url("toys.png") no-repeat scroll 0 0 transparent; 
    width: 181px; 
    height: 93px; 
    margin-top: -8px; 
    } 

像<toys>這樣的唯一標識符在語義上是否正確？

Answer 1

最好避免使用自定義標籤，因爲您永遠不知道何時這些標籤可能會變得標準化，並且在將來有特殊用途。

爲您的例子做的最好的事情，如果你想避免使用標題標籤，如下：

<div class="toys grid_4 push_2">&nbsp</div> 

.toys { 
    background: url("toys.png") no-repeat scroll 0 0 transparent; 
    width: 181px; 
    height: 93px; 
    margin-top: -8px; 
} 

另外：

如果你不使用標準的HTML標籤在設計頁面時，當樣式被禁用時，它們不會以任何有組織的方式出現。這不是問題，但是如果出於任何原因，您需要查看沒有款式的「玩具」列表，那麼除非您使用<ul>或<ol>和<li>標籤，否則您的運氣不好。

UPDATE：

由於Flimzy在評論中指出，自定義HTML元素現在有自己的W3C規範。但是，他們還沒有完全支持。

• 規格：https://www.w3.org/TR/custom-elements/
• 支持：http://caniuse.com/#feat=custom-elements

Answer 2

您當然可以可以;然而，這通常是不是一個好主意這樣做。在很多方面，HTML5正在轉向類似的東西，但具有通用性;具有特定的標籤，雖然支持不同瀏覽器可能會有非常不同的結果。

Answer 3

是的，這在語義上是正確的。

但是，它是無效的語法，因爲HTML有一組定義的標記。

你可以在一些瀏覽器中解決這個問題。

這就是說，這樣做的好處是什麼？這實際上只會使必須維護源代碼的人受益。如果你想提供什麼，那麼XML就是一個很好的例子。

Answer 4

如果你的文檔類型設置爲XHTML，你應該罰款。但是它通常對於HTML文檔類型無效。

Answer 5

你不想編造自己的標籤。

HTML標籤在HTML規範中定義。

在代替：

<h1 class="grid_4 push_2">&nbsp</h1> 

你應該這樣做：

<h1 class="toys">&nbsp</h1> 

但是可以彌補你自己，如果XML標記。

但請注意，並非所有的瀏覽器都支持您的標籤，您將無法使用CSS對其進行設計。

同樣的事情，與新HTML5 tags

Answer 6

我@superUntiled同意發生的事情，你應該好好利用CSS選擇器（class和ID）的。所以如果你有一個「玩具」類型的對象，你應該爲該對象創建一個類。然後，您可以使用選擇器.toy使用CSS選擇所有cars。

事情是這樣的：

<style> 
.toy { 
    color: red; 
} 
</style> 

<p class="toy">My little car</p> 

Answer 7

大多數這些反應都不錯一般建議，但不恰當的問題的答案，我認爲這是完全合法的。

HTML5已經是一個移動的目標;瀏覽器實現規格並​​以不同的步驟進行創新。沒有任何單一的東西被稱爲「有效的HTML」，至少不值得使用。如果你正在爲地球上的每個人和機器人/爬行者建立一個公共頁面，那麼你已經或者必須A）檢測客戶端並相應地進行自定義，用於複雜/高級頁面或者B）使其真實，簡單和簡單。另一方面，如果你把它放在局域網上，或者把它藏在登錄牆後，或者在最前沿開發，並且計劃頻繁更新，那麼你應該隨意自由地進行創新。瀏覽器開發者和規範編寫者可以滿足他們的需求，你也可以做同樣的事情。因此，如果你想要一個自定義標籤，請仔細選擇（這裏我會指出，那些已經成爲瀏覽器實現規範的一部分的可能性完全可以忽略不計），然後去做。爲了讓你的CSS在IE中工作，你必須像html5shim那樣做，並在你的javascript中調用document.createElement（'toys'）。

我還應該補充一點，自定義元素正在獲得自己的標準和支持，但目前的共識是他們都應該在名稱中包含' - '。所以我會推薦像'x-toys'或'my-toys'這樣的東西，而不僅僅是'玩具'。就我個人而言，我對這個慣例並不感到激動，但我理解其中的原因。

Answer 8

UPDATE（因爲所有的答案都是舊）：

，因爲Web組件的API獲取每一個主要的瀏覽器中實現，在我看來，你不能避免在今後再次使用自定義標記。我認爲Web組件很容易成爲主流。整個理論建立在它上面：自定義標籤，自定義屬性自定義JS附加到這些元素。

所以我說：現在使用你自己的標籤並不是壞事，但你仍然需要考慮與SEO相關的建築。

Answer 9

當然，如果你定義了一個標籤，並且在你的樣式表中定義了它應該做的事情，那應該把它綁定起來嗎？即使您的新標籤後來變得標準化，您的樣式表也會覆蓋標準 - 畢竟這是樣式表的用途。

例如，我經常需要在我的頁面上控制換行符。除了使用笨拙

<span style="white-space:nowrap">bla bla bla</span> 

每一次，附上我自己的標籤內，我的非破碎的文字和我的樣式表定義：

nbr { 
    white-space:nowrap; 
} 

所以

<p> This is some text. <nbr>This is some more text.</nbr></p> 

將出現在一行如果有空間，否則第二句將出現在下一行。或者，確切地說，在除舊版IE以外的所有瀏覽器中。是鑄鐵的，我添加了下面的每一頁[主治]部分（在WordPress的，只需要添加到主題的header.php文件）： -

<!--[if lt IE 9]> 
<script> document.createElement('nbr'); </script> 
<![endif]--> 

還是我失去了一些東西？