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のアロー関数の特徴と通常の関数との違い

推薦する

html の img src="" で js 関数または js 変数を呼び出して、画像パスを動的に指定します。

この問題に関して、オンライン リソースをたくさん見つけました。ここにいくつかの方法を示します。コード...

MySQL 5.7.23 winx64 のインストールと設定方法のグラフィックチュートリアル (win10 の場合)

この記事はMySQL 5.7.23 winx64のインストールチュートリアルを記録します。具体的な内...

あるテーブルからバッチデータをクエリし、それを別のテーブルに挿入する MySQL の完全な例

事前に言っておくNodejs はデータベースを非同期操作として読み取るため、データベースがデータを読...

MySQL の時間保持問題に関する簡単な分析

MySQL のデフォルトの時間タイプ (datetime と timestamp) の精度は秒です。...

MySQL で 1000 万件のレコードをすばやくクエリする方法

目次通常のページングクエリ最適化する方法大きなオフセット使用ID制限大量データ問題の最適化通常のペー...

Vueは単一ファイルコンポーネントの完全なプロセス記録を実装します

目次序文単一ファイルコンポーネント基本概念シンプルなローダーコンポーネントコンテンツの解析コンポーネ...

Linux で AutoFs マウント サービスをインストールするチュートリアル

Samba サービスでも NFS サービスでも、サーバーの起動時にリモート共有リソースが自動的にマ...

純粋なCSSで立体的な画像配置効果を実現するサンプルコード

1. 要素の幅/高さ/パディング/マージンのパーセンテージ基準要素の幅/高さ/パディング/マージンの...

nginx を使用してブルーグリーン デプロイメントをシミュレートする方法

この記事では、ブルーグリーン デプロイメントと、nginx を使用してブルーグリーン デプロイメント...

docker で zabbix_agent をデプロイする方法

zabbix_agent のデプロイメント:推奨事項: zabbix_agent は docker-...

カレンダー効果を実現するJavaScript

この記事では、カレンダー効果を実現するためのJavaScriptの具体的なコードを参考までに紹介しま...

Alibaba Cloud ホストが IP を使用して Web サイトにアクセスできない問題の解決策 (セキュリティ グループ ルールを構成することで解決)

Alibaba Cloud ホストを購入したばかりで、その速度を試すのが待ちきれませんでした。しか...

Dockerコンテナ内にkibanaトークナイザーをインストールする方法

ステップ: 1. 仮想マシンディレクトリに新しいdocker-compose.ymlファイルを作成し...

MySQL のクエリパフォーマンスに対する制限の影響

I. はじめにまず、MySQL のバージョンについて説明します。 mysql> バージョンを選...

CSS3マスクレイヤーのくり抜き効果を実現するさまざまな方法

この記事では、マスク レイヤーの中空化を実現する 4 つの方法を紹介します。みんなと共有し、自分用の...