web-dev-qa-db-ja.com

HTML 5でネストされたスパンの使用は有効ですか？

Spanでspanを使用する場合、HTML 5では標準ですか？

<span class="fake-input">
  <span id="fake-input"></span>
  <span id="deftext">No file selectedspan</span>
</span>
htmlvalidation
5
mafortis

これはdivの仕事のように見えます：

<div class="fake-input">
  <span id="fake-input"></span>
  <span id="deftext">No file selectedspan</span>
</div>

さらに詳しく知りたい場合は、<form>タグ、<input>タグなどを使用しているかもしれませんが、それはトピックからさらに進んでいます。

Divとスパンにはセマンティックな値や自動スタイルはありません。彼らはあなたが彼らにこれを割り当てるためにそこにいます。ただし、通常、ブロック要素にはdivを使用し、インライン要素にはspanを使用します。

検証エラーは発生しませんが、最近ではネストされたスパンはあまり見られません。

4
Henry Visotski

ネストタグは有効なHTMLです。

スパンタグは、インラインコンテンツのグループ化を目的とした非セマンティックマークアップであり、 フレージングコンテンツの有効なラッパー です。これには、strong、em、timeなどのタグが含まれますが、追加のspanタグも含まれます。

これを確認するには、次のコードを W3C Markup Validator に貼り付けます。

<!DOCTYPE html>
<html lang="en">
<head><title>Nested Spans Test</title></head>
<body>

<span class="fake-input">
    <span id="fake-input"></span>
    <span id="deftext">No file selectedspan</span>
</span>

</body>
</html>

また、無効なHTMLがマークアップを解析できる限り、無効なHTMLがSEOランクまたはページ表示に影響を与える可能性は低いため、有効なHTML あなたが考えるほど大したことではない であることを忘れないでください。

このようなケースでは、<span>タグから偽の入力が構築されるため、はるかに大きな懸念事項はアクセシビリティであり、 適切なaria-属性を含む これらの要素の関係と機能を、スクリーンリーダーを使用している人や、カスタムスタイルで表示していない人に公開します。

8
ian.pvd