HTML の小さなタグの使用に関するヒント

HTML の小さなタグの使用に関するヒント
<em></em> などのフレーズ要素を使用すると、意図した視覚スタイルを維持しながらドキュメントの構造を改善できます。しかし、<small></small>は日常的なアプリケーションではあまり一般的ではありません。第一印象は、Taobao UEDがこの小さな問題を無視しているのではないかということです。

<small></small> に関しても、オンライン検索の結果は非常に断片的です。使用を推奨しないという意見もあれば、放棄タグにその名前が記載されていないという意見もあります。幸いなことに、「Mastering HTML Semantics, Standards, and Styles」という本でこの点が詳しく説明されています。

<small> は、その兄弟である <hr><pre><sup><sub><i><b> と同様に、プレゼンテーション要素として定義されています。W3C によれば、これは単にフォント情報を指定できる要素であり、セマンティクスはありません。たとえば、<b> タグは間違いなく <em> または <strong> に置き換える必要がありますが、<i> タグについては、ページ内の外国語の段落を斜体にしたいときに直接使用することの何が問題なのかはわかりません (外国語を表示するための慣例)。これは、ユーザーが斜体の段落を表現するために <span class="">…</span> を使用すると、前者よりもはるかに多くのスペースを占有するためです。

より複雑な <big><small> については、本の著者である Paul Haine は明確な答えを出していません。理論的には、これらは純粋にプレゼンテーション要素であり、CSS に置き換える必要があります。しかし、業界の重鎮 (ジョー・クラーク) の中には、「重要度による重み付け」の視覚効果を実現するためにそれらを使用することを推奨する人もいます。議論の結果、利益と損失があり、特定の問題を具体的に分析する必要があることがわかりました。

Taobao コードのこのセクションに戻ると、<small></small> タグ内にナビゲーションをスキップするためのリンクがあります: <a class="invisible" href="#Content">ナビゲーションとツールバーをスキップ</a>。 Taobao UED は、考えた末に <i> タグと同じアイデアを採用したと思います。HTML スペースを多く占める <span class="skipNavigation"></span> を定義する代わりに、直接 <small> を使用する方がよいでしょう。さらに重要なのは、ナビゲーションをスキップする機能はユーザー向け、より正確には、読み取りブラウザを使用しているか CSS スタイル定義がない障害のあるユーザー向けであるということです。簡潔な <small></small> の方が標準化の精神に沿っているかもしれません。

唯一の疑問は、裸の CSS の下の <small> が、次のフォント サイズでその重要でない意味を示していることです。しかし、目の不自由なユーザーや読書用ブラウザの場合、<small></small> を <strong></strong> に変更すると、ユーザー エクスペリエンスがより最適化されるでしょうか?

<<:  CSS を使用して正方形の div を実装する 2 つの方法

>>:  JavaScriptのアロー関数の特徴と通常の関数との違い

推薦する

MySQLトリガーの使用と理解

目次1. トリガーとは何ですか? 2. トリガーを作成するトリガーを作成するための構文は次のとおりで...

Web デザインにおける HTML フォーマットと長いファイルに関するヒント

<br />関連記事: Web コンテンツ ページ作成に関する 9 つの実用的な提案、W...

CSS を使用して、左側に固定幅、右側に適応幅を持つ 2 列レイアウトを実装する複数の方法

CSS を使用して、左側に固定幅、右側に適応幅を持つ 2 列レイアウトを実装する 7 つの方法。コー...

MySQL 8.0.15 のインストールと設定のグラフィックチュートリアルと Linux でのパスワード変更

このブログは、MySQL8.0.15 を正常にインストールしたことを思い出すために書きました。以前は...

レスポンシブ Web デザインが価値のない 5 つの理由

この記事は Tom Ewer の Managewp ブログからのもので、現在人気のレスポンシブ デザ...

Vueでjsonpを使用する方法

目次1. はじめに2. インストール3. 使用4. vueファイルの使用1. はじめに最近、手書き入...

Linux bash: ./xxx: バイナリ ファイルを実行できません エラー

今日、Ubuntu 用の小さなツールを顧客に送りましたが、ユーザーはそれを受け取った後、実行できませ...

MySQLトリガーの例の詳細な説明

目次トリガーとは何かトリガーを作成する複数の実行ステートメントを持つトリガーの作成制限と考慮事項要約...

CSS3 のフィルタプロパティの使用に関する詳細な説明

最近、イントラネットポータルを修正していたときに、フィルターを使用する必要がある箇所に遭遇しました。...

表のセルの内容が超過した場合に省略記号効果を表示する(実装コード)

例示するフロントエンド開発では、セルの幅を制限し、コンテンツが制限を超える部分に省略記号を表示する必...

Tomcatのサーバーオプションの詳細な説明

1. 構成デフォルトでは、最初の 2 つはチェックされていないので、チェックする必要があります。 (...

vue-element-adminフレームワークを使用して、バックエンドからメニュー機能を動的に取得します。

目次2. 詳しい説明2.1. asyncRoutesルーティングを追加する2.2. 新しいpermi...

Windows オペレーティング システムでの Linux 仮想マシンのインストールと構成のチュートリアル

序文仕事では、Linux 環境で操作する必要があることがよくあります。ここでは、win10 システム...

新しい CSS :where および :is 疑似クラス関数とは何ですか?

:is と :where とは何ですか? :is()と:where()は、セレクターを作成するとき...

Zabbix 5.0 ディスク自動検出と読み取り/書き込み監視の問題を分析する

ディスクを自動的に検出する構成キーの値注: このキー値は Linux プラットフォームでのみサポート...