16

私は私にとって本当に素晴らしいと思われる次の構造を持っており、私は常にHTML5を使用しています。

<div class="drop-menu" data-dropmenu="language">
  <a href="language/pt-pt" class="drop-menu-link">Português <span>(Brasil)</span></a>
  <a href="language/pt-pt" class="drop-menu-link">Português <span>(Portugal)</span></a>
  <a href="language/es" class="drop-menu-link">Español</a>
  <a href="language/en" class="drop-menu-link">English</a>
  <a href="language/ja" class="drop-menu-link">日本語&lt;/a>
  <a href="language/it" class="drop-menu-link">Italiano</a>
  <a href="language/de" class="drop-menu-link">Deutsch</a>
  <a href="language/fr" class="drop-menu-link">Français</a>
</div>

では、ブロックとして表示されているA要素だけが機能するのに、なぜリスト構造(UL / LI)を使用する必要があるのでしょうか。この場合、リストを使用することは本当に便利ですか?私はいつもこれが好きで、とても良さそうです。

4

9 に答える 9

15

より意味的に正しいです。

上にあるのは、順序付けられていない言語のリストです。意味的に正しいアイテムの順序付けられていないリスト(UL要素を持つ要素)を使用する必要があります。LI

これは、正しいセマンティクスに依存するスクリーンリーダーやその他のテクノロジーの動作にも役立ちます。

于 2012-11-16T12:48:39.623 に答える
7

JAWS スクリーン リーダーを使用している目の不自由な人の意見では、メニューまたはナビゲーション リストに ul 要素と li 要素を使用しないことを提案しています。

https://css-tricks.com/navigation-in-lists-to-be-or-not-to-be/

ある種のナビゲーション メニューである場合は、nav 要素内にアンカー要素をネストする必要がありますが、そのオプションはユーザーを新しいビュー/ページに導きます。それが単なる非対話型データのリストである場合は、セクションまたは aside 要素が機能する可能性があります。

新しいページにつながらない (つまり、get/post リクエストを送信するだけの) インタラクティブなオプションを持つ要素のリストの場合、何をラップするかがあまり明確ではありません。nav 要素は意味的に意味があると思います (ページのデータベース/CRUD の側面をナビゲートする)、またはセクション/脇の要素だけでも機能する可能性があります。

それに適したメニュー要素の部分的なサポートがあります:(

于 2018-09-27T15:33:41.543 に答える
3

また、CSS を使用しないと、メニューが文章のようにインラインでレンダリングされるため...

Português (ブラジル) Português (ポルトガル) Español English 日本語 Italiano Deutsch Français

...きれいにフォーマットされた(かなり退屈に見えますが)リストではありません。

于 2014-04-30T14:39:05.857 に答える
2

リストを使用する理由は(少なくとも)2つあります。リストを使用すると、SEOの観点からだけでなく、アクセシビリティの理由でカスタムCSSまたはスクリーンリーダーを使用している場合にも、サイトの構造を理解するのに役立ちます。2つ目は、少し関連性がありますが、スタイルシートの作成に関してはかなり役立つということです。要素をネストする独自の方法を考え出す必要はありません。リストを使用して、そこから移動します。次に、最初、最後、奇数、または偶数のリストアイテムなど、さまざまな階層レベルにさまざまなスタイルを提供するスタイルシートを正しく作成することに集中できます。

この回答の内容。

于 2012-11-16T12:50:28.527 に答える
2

Odedの答えに追加するために、特に意味的に正しくなりたい理由は、通常のブラウザーを使用していないすべてのWebユーザーのためです。例として、スクリーンリーダーまたはある種のWebクローラーを使用している視覚障害者を考えてみましょう。

于 2012-11-16T12:51:19.563 に答える
2

これは、マークアップを意味的に説明する目的で推奨されます。ドロップダウンメニューは、本質的に、さまざまな言語へのリンクの順序付けられていないリストであるため、サイトのインデックスを作成するときにスクリーンリーダーまたは検索エンジンスパイダーに伝える必要があります。

明らかに、そのメニューの一般的な表示や機能には影響しません(または影響する必要はありません)。したがって、問題は、SEOとアクセシビリティのベストプラクティスが懸念事項であるかどうかの1つです。

于 2012-11-16T12:53:01.853 に答える
1

タグは、プレゼンテーション(とにかく今日は大幅に変更できます)だけでなく、意味もあります。たとえば、とだけdivで完全なWebページを作成することはほぼ(?)できますが、それが良い考えであるとは限りません...span

あなたはHTML5について言及します:それらは似たようなレンダリングでいくつかのタグを追加するために非常に長い時間を費やしましたが、意味の意味は大きく異なります。
上で書いたように、これはスクリーンリーダーに役立ちます。彼らはあなたのコーディングを異なって読み、おそらくそれを全文として読み込もうとしますが、適切なトーンと一時停止で実際のリストを読みます。
ただし、Webスパイダー(「Google」と考えてください)がページの構造をよりよく把握し、最も重要な部分のインデックスを作成するのにも役立つ場合があります。

于 2012-11-16T13:06:51.617 に答える
1

<ul>並べ替えられていないリストとリスト アイテムを使用して、<li>アイテムをグループ化します。HTMLタグをグループ化する理由....これにより、開発者はcssクラスを使用してフォーマットを1つのグループに適用できます...各要素ではなく.

于 2012-11-16T12:57:13.747 に答える