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 の時間差関数 TIMESTAMPDIFF と DATEDIFF の使用

時間差関数 TIMESTAMPDIFF と DATEDIFF の使用SQL ステートメント、特にスト...

HTML ヘッドタグの詳細な紹介

HTML のヘッド部分には、ブラウザによる Web ページのレンダリングや SEO などに関連するタ...

Excel エクスポートは docker 環境では常に失敗する

Excel のエクスポートは、docker 環境では常に失敗します。最も直接的な原因は、中国語フォン...

mysqld_multi を使用して単一のマシンに複数のインスタンスをデプロイする方法に関する MySQL チュートリアル

目次1. MySQLのコンパイルとインストール: 2. 最初のマルチインスタンス3307を準備する3...

CentOS で MySQL を完全にアンインストールする方法

この記事では、CentOSでのMySQLの完全アンインストールについて記録しています。具体的な内容は...

CSS を使用して親コンテナ div を img 画像で埋め、コンテナのサイズを調整する方法

ページに複数の画像を導入すると、画像のサイズがばらつくことがあります。しかし、それらを一貫したサイズ...

WeChatミニプログラムがシームレスなスクロールを実現

この記事の例では、WeChatアプレットのシームレスなスクロールを実現するための具体的なコードを参考...

Vue ElementUI フォームのフォーム検証

フォーム検証は、フロントエンド開発プロセスで最もよく使用される機能の 1 つです。私の個人的な仕事経...

HTML タグ マーキーはさまざまなスクロール効果を実現します (JS 制御なし)

ページの自動スクロール効果は JavaScript で実現できますが、今日偶然、JS 制御なしでさま...

よく使われるシングルページアプリケーションウェブサイト共有

CSS3お願いしますこのウェブサイトを自分で見て、パラメータを変更し、CSS3効果をオン/オフにする...

Chrome デベロッパー ツールの詳細な紹介 - タイムライン

1. 概要ユーザーは、アクセスする Web アプリケーションがインタラクティブでスムーズに実行される...

HTMLのposition属性の使い方(4種類)の詳しい説明

位置の 4 つのプロパティ値は次のとおりです。 1.相対的な2.絶対3.修正4.静的これら 4 つの...

WeChatミニプログラム開発のためのコンポーネント設計仕様

WeChat ミニプログラム コンポーネント設計仕様コンポーネントベースの開発という考え方は、私の開...

Vue3 ベースのフルスクリーン ドラッグ アップロード コンポーネント

この記事は主に、みんなで共有できるVue3ベースのフルスクリーンドラッグアップロードコンポーネントを...

複合主キーと複数列インデックスに遭遇した場合の MySQL 行ロックの詳細な説明

背景今日、他のプロジェクト チームと協力してシス​​テムのストレス テストを実施しているときに、プロ...