<b>および<i>タグが非推奨になったのはなぜですか?


98

この質問は、私の大学の授業で出てきました。教授は、それがより説明したという答えを与えたが、それがあるかのように思える<b>し、<i>その意味ではなく、明示的であり、より入力しやすい<strong><em>

これらのタグの廃止の公式の議論は何でしたか?


38
私はかなり確信<b>して<i>おり、廃止されていません。
ドーバル14


4
私はそれについて次のように推論する傾向があります:スクリーンリーダーにこれを違ったように読んで欲しいですか、そうではありませんか?(盲人ではない)読者が見つけやすいように単語を選びたいだけなら、b文字通り「これは強調されている」ではなく「これは大胆だ」という意味です。何の廃止、あなたが行うために使用する場合だけではないということもありません-しかし、主なポイントは、彼らは意味が違うよ、であるbi、あなたは通常のものstrongかはem
ルアン14

1
@MichaelT LaTeXを初めて使い始めたとき、空のドキュメント(スタイルパッケージなし)で開始するときにテキストを斜体にし、太字にする方法について混乱していたことを覚えています。
コールジョンソン14

@Luaan:<i><b>が実際に非推奨でなく<tt><u>も、そうであり、質問はそれらに当てはまるでしょう。
supercat

回答:


135

昨年の夏、私は完全なHTML5仕様、以前のすべてのHTML仕様(放棄されたものも含む)、見つけられるすべてのCSS仕様、および多くのXML仕様を読みました。私は意味的に豊富なハイパーテキストドキュメントが大好きなので、HTML5の関連するHTMLセマンティクスの背後にあるアイデアを説明しましょう。

HTML5の前

HTML5の前に、iそしてbファッションの外に確かでした。理由は、それらは本質的にそれぞれemとのようstrongに機能するが、セマンティクスではなくプレゼンテーションに焦点を当てているためです(これは悪いことです)。

確かに、iテキストは斜体にする必要があることを意味しました(テキストを画面上でどのようにレンダリングするかについて何かを言いました)。他方でemは、テキストが強調されることを意味しました(テキストのセマンティクスについて何か言った)。

ここには重要な理論上の違いがあります。を使用するem場合、ユーザーエージェント(ブラウザ)はテキストを強調する必要があることを知っているので、ドキュメントが画面上に表示される場合は斜体で表示できます(書式設定が不可能な場合はすべて大文字、または場合によっては太字でも)ユーザーはそれを好む)、ドキュメントがユーザーに話しかけられている場合など、異なる発音をすることができます。

強調は本当にセマンティクスについてであることに注意してください。たとえば、フレーズ

  • 猫は私のものです。(=犬ではありません!)
  • 猫は私のものです。(=あなたのものではありません!)

同じ意味を持ちません。

同じ違いがb(太字フォント)とstrong(強い強調)に適用されます。

デジタルライティング全般、特にハイパーテキストオーサリングの一般原則は、コンテンツとスタイルを分離することです。ハイパーテキストオーサリングでは、これはコンテンツがHTMLファイルにあり、スタイルがCSSファイル(またはいくつかのCSSファイル)にあることを意味します。異なるが関連する原則は、ドキュメントがセマンティクス(ヘッダー、フッター、リスト、強調、アドレス、ナビゲーションエリアなどのマークアップなど)に富んでいる必要があるということです。これには多くの利点があります。

  • コンピュータプログラムがドキュメントを解釈するのははるかに簡単です。これらのプログラムには、ブラウザ、テキスト読み上げアプリケーション、検索エンジン、デジタルアシスタントが含まれます。(たとえば、アドレス帳を見つけて解釈できる場合にのみ、アドレス帳にアドレスを保存できます。また、見出しを正しくマークアップすると、Microsoft Wordが目次を作成して自動的に更新できることをご存知かもしれません)
  • 後でスタイルを変更する方がはるかに簡単です。(860ページのドキュメントのすべての第3レベルの見出しの色を変更する場合は、スタイルシートの1行を変更できます。コンテンツとプレゼンテーションが混在している場合は、ドキュメント全体を手動で確認する必要があります。 。また、見出しが1つまたは2つ欠落していると、ドキュメントが専門的でないように見える可能性があります。
  • 状況に応じて異なるスタイルシートを使用できます(ドキュメントは画面に表示されますか、それとも紙に印刷されますか?)。エンドユーザーが自分でスタイルを選択できるようにすることもできます。(私のWebサイトでは、多数の代替スタイルシートを提供しています。IEおよびFFでは、[表示]メニューを使用してこれらを変更します。)

だから、要するに、iそしてb彼らがいたので、廃止されたHTMLタグを懸念プレゼンテーション完全に間違っています、。

HTML5で

HTML5 ib廃止されなくなりました。代わりに、セマンティックな意味が与えられます。したがって、実際にはセマンティクスに関するものであり、プレゼンテーションに関するものではありません。

前と同じように、em強調「猫私のものです」とマークアップするために使用します。しかしi、印刷物で斜体を使用する他のほとんどすべての場合に使用します。例えば:

  • i分類学的指定をマークアップするために使用します:「私はR. norvegicusが好きです。」
  • i周囲のテキストとは異なる言語でフレーズをマークアップするために使用します:Àla carte
  • i単語自体について話すとき、単語をマークアップするために使用します:「飲み物は名詞でもあり動詞でもあります」

class属性を使用して正確な使用法を指定することもお勧めします(Googleの「microformat」と「microdata」も)。そしてもちろん、2番目のケースでは、lang属性を使用して正しい言語を指定する必要があります。(それ以外の場合、たとえば、音声合成エージェントがテキストを読み違える可能性があります。)

1年ほど前、HTML5仕様citeでは、書籍、映画、オペラ、絵画などの名前をマークアップするために使用する必要があるとも述べています。

  • Nymphomaniacについてどう思いますか?

最後に、ずっと前から、dfnテキスト内のフレーズの定義インスタンスをマークアップするために使用されます(数学的な定義や用語の定義など)。

  • グループは、このようなこと*単一のバイナリ操作を装備した集合Xで...

したがって、印刷された本のイタリック体(多くの異なるものを意味する可能性があります)は、4つの異なるHTML5タグで表されます。(たとえば、テキスト内のすべての定義のリストを作成するようにブラウザーに依頼できるため、試験前にすべての定義を確実に把握できます。)

とに目を向けるstrongb、HTML5仕様ではstrong、警告や文中の非常に重要なキャッチワードなど、テキストの重要な部分をマークアップするために使用する必要があります。一方、bキーワードなど、テキスト内で簡単に見つける必要があるものをマークアップするために使用する必要があります。bリストアイテム(LI)の見出しとしても使用します。


1
修正:定義タグはであり<dfn>、ではありません<def>。それ以外の場合は、すべての問題の包括的な包括的な要約。<b>リストアイテムの見出しとして使用する提案は興味深いものです。セマンティックアプローチは定義リストを使用することですが、現在サポートしているブラウザはないためdisplay:run-in、インラインキーワードマークアップを使用する<b><span>、できる限り最適です。
アメリアBR

@AmeliaBR。タイプミス(def)を観察していただきありがとうございます。定義リストについて:名前と値のペアには定義リストを使用する必要があり、これには常に使用します(たとえば、guestbookを見てください)。私も大好きdisplay:run-inですが、サポートが減少しているので、floatまたはを使用する必要がcontent:あります。rejbrand.se/ rejbrand / news.asp?ItemIndex = 169を参照してください。bリストで「見出し」をマークアップするために使用することについて話すとき、名前と値のペアではなく、各項目で「ヘッダー」を使用する単純なリストを意味します。
アンドレアスレイブランド14

1
@SarahofGaia <b>太字のテキストを保証する推論には少なくとも2つの欠陥があります。1)スクリーンリーダー、点字ディスプレイ、および太いグリフが意味のない概念であるテキストを消費するその他の手段。2)b { font-weight: normal }<b>どちらの表示スタイルも固定されていないことを意味します。
8bittree

1
最後に、ブラウザを信頼していない場合は、常に独自のCSSを自由に提供できますb, strong { font-weight:bold; }。そうすれば、あなたはおそらくあなたがそうすることができると確信することができます。CSSは、視覚的な形式を指定する方法です。HTMLは意味(コンテンツ)について、CSSは視覚的な表現についてです。
アンドレアスレイブランド

1
この回答により、フォントタグをcssに変更する必要がある理由がわかりました。私はいつも太字のフォントタグが好きでしたが、今ではそれらを使用しない理由を理解しています。ありがとう
アンドレアス

58

Dovalが言うように、それらは非推奨ではありません。それらはまだ存在しますが、多くの人がHTML5以前に使用していたものとは異なる方法で使用する必要があります。

「セマンティック」htmlについてです。見た目ではなく、それが何であるかを記述する必要があります。ブラウザまたは理論的には他の表示媒体(視覚障害者向けの読書アプリなど)は、正確に解釈する方法を決定できる必要があります。

これは、「赤」などのCSSクラス名を使用せず、ここで別の色を使用する背後にある機能的なアイデアを説明するより記述的なクラスを使用しない理由と似ています。後で緑の方が良いと判断する場合があります(太字の代わりに赤を使用して「強い」ものを表示する必要があります)。または、色覚異常のユーザーは、色が他の手段に置き換えられる特別なブラウザー設定を持っている場合があります。


1
<strong>ではなく<b>を使用することが望ましい状況はありますか?または、<strong>は常に「より意味のある」タグですか?
ランスラフォンテーヌ

4
テキストのキーワードのように、「強調表示」する必要があるが「強調」する必要のないものには、大体<b>を使用できます。技術文書では、プログラミングブックのコードサンプルや技術用語など、特定の属性を表示するために使用されるさまざまなテキストスタイルがよく見られます。技術用語<b>または<i>のようなそのようなユースケースには、使用できます。
トールステンミュラー14

3
@LanceLafontaine 公式の標準をご覧ください。
ラッフルウインド14

4
@thorstenmüllerそれも悪い例だと思います...それは、管理者が後で太字ではなくタイプライターフォントで属性を使いたいと決めた教科書のケースであり、太字ではなく下線が付い<span class="keyword">...</span>ているため、最初の場所で使用するとあなたが節約できますたくさんの問題。
CompuChip 14

2
@LanceLafontaine <b>はエッジケースですが、不適切な<i>場合に使用するための堅実な例があります<em>:種の学名または英語に採用されたラテン語(言語属性を持つスパンを使用できますが、それは他のあらゆる意味を持っています- -スクリーンリーダーが異なる言語の音声を切り替える場合があります)。意味的に正しいアプローチはを使用すること<cite>ですが、他の作品のタイトルを斜体にするためにも使用できます。
アメリアBR 14

41

本当の話はそれであるbi最初に、廃止廃止予定、呪わ、および(大まかに言えば)様々なHTML5のドラフトでは「プレゼンテーション」としてanatematizedが、その後、彼らはこれらのタグは、広く使用され、また、多くのオーサリングプログラムによって生成されていることに気づきました。単純にそれらを許可する代わりに、彼らは彼らのために考案された新しい「セマンティック」定義を開発しました。新しい定義はドラフトごとに異なり、曖昧です。同じように理解して解釈する2人を見つけることはほとんどできません。

申し訳ありませんが、参照はありません。上記の説明は、変更を追跡し、多くの場合行間でドラフトとディスカッションを読んだ結果です。彼らは原因を明示的に語っていません。私はまだそれが本当の話だと思います。

結論は次のとおりです。ここには便利なものは何もありません。bそしてi、彼らはいつもの警告で、それぞれ、フォントを太字や斜体にする:彼らは常に持っているように要素が同じことを行います。これは、ブラウザ、検索エンジン、またはその他のソフトウェアに影響を与えない準学的な「セマンティクス」ではなく、考慮すべき現実です。


3
それはあなただけで処理することによりquasischolasticセマンティクスに従うことができます、と述べた<b>のおかしい一種として、<span>そのデフォルトでは太字でレンダリングします。気になる場合は、その使用方法にもclass属性を与えて、共通のセマンティクスを持っているため、必要に応じて一度にそれを使用した複数のものを再スタイルできるようにします。人々はb.productname {font-weight: normal; font-style: italic; }、プレゼンテーションについて考えを変え、セマンティックマークアップの賢明な選択を活用した後、あなたがやることに頭が似ていると人々が考えるという点で準学問的です;
スティーブジェソップ14

1
@SteveJessopは:まだ、ファイルサイズを気に誰が世界で私たちのいくつかのそれらのために、ことわざは<b>this</b>よりもはるかに合理的なようです<span class="bold">this</b>(;後者の23バイトのオーバーヘッドが狂ったようで、元の8バイトのオーバーヘッドは十分にうんざりです)。なぜHTMLがに<@quack>this</@>相当するような短い形式の表現を定義しなかったのだろうか<span class="quack">this</span>
supercat 14

4
@supercat:それがtransfer-encoding:gzipの目的です。または、「quack」のより簡潔な表記法を導入する正確な場所と方法に応じて、XML + XSLTを使用することもできます。
スティーブジェソップ14

7
@supercat class='bold'The Codeless Codeの Master Sukuは、そのような貧弱なクラス名の使用についてあなたと話し合います。これを最後のboldRedTextと考えてください。

2
14.4モデムの時代には、CSSをしたアイデアはまだ実現したり、任意のユーザー・エージェントに実装されていません。これらのHTML要素は、私たちが永遠に立ち往生する古代の残骸です。
マイケルハンプトン14

11

タグは「大胆」と「イタリック」のコンセプトで始まりました。問題は、これらは一部のユーザーエージェントにとって完全に無意味かもしれないということです。たとえば、視覚障害者のスクリーンリーダーで「イタリック」とはどのような音ですか?<b><i>

でそれらを交換<strong>し、<em>印刷上の概念への直接リンクを削除しました。代わりに、ユーザーエージェントは、適切と思われる場合でもレンダリングできます。


2
厳密に言えば、ユーザーエージェントはレンダリングできますが<b><i>適切に表示されます。
ジョナサンユニス14

8

<b>そして<i>あなたは、文字通り「ボールド」または「イタリック」内のテキストを必要としたときにタグが不可欠です。

斜体の「I」が非斜体の「I」とは異なる意味を持つ式をHTMLで書いている場合、その区別をすることができることが重要です。

タグ<sup><sub>タグと同じように考えます-このような「外観」タグを使用しないと、方程式の意味を正しく表現できません。

純粋なアプローチはMathMLまたはTeXを使用することですが、ブラウザのサポートはまだありません...


14
「セマンティック」マークアップを要求する人々が、場合によっては古いタグが他のタグよりも意味的に正しいことを認識することを望みます。文書のテキストが特定の下線付きの単語を参照する場合、それらの単語に下線を引く以外の方法で表示することは意味的に間違っています。いくつかのテキストを入れるin a monospaced typefaceが、理由を区別しないシステムからテキストをインポートする場合、「置換」のいずれかを使用<tt>すると、インポートを実行するコードが目的についてよりも多くのことを知っていたという誤った意味になります。
supercat 14

私はの適合に同意bし、i数学的(物理的な)状況では、そのような使い方をされていない HTML5のドラフトで述べました。この質問を提起したとき、ユニコードの特殊文字(数学的な太字と数学的な斜体文字)を代わりに使用することが真剣に回答されました!
ユッカK.コルペラ14

1
@supercat:一般的な主張(これは常に当てはまるとは限りません)は、ユーザーエージェントが換金できない小切手を書くべきではないということです。特に、誰かのスクリーンリーダーが等幅フォントで話すと主張するページを書くべきではありません(ロボットの声が適切だと思います:実際にスクリーンリーダーを使ったことはありません)。もちろん、これはほとんどの人のページが少なくともスクリーンリーダーで動作しないことを無視しているので、彼らが気にかけない仮想的なアクセシビリティに対して代価を払う意味はありません。しかし、W3Cはその事実を原則として意図的に無視しています。
スティーブジェソップ14

コードインポートの場合、正解(満足できない場合)の答えはclass="source-X-asserts-it-should-be-monospace"であるため、他のソースが未知の理由で固定スペースであると主張するという意味で意味的に異なるテキストと区別しています。実際には、これは単に悪さをHTMLに変換するのではなく、HTMLが悪と考えるものを監査することです。
スティーブジェソップ14

1
@SteveJessop:言い換えると、<TT>テキストを対照的な等幅フォントで設定することを直接示唆しました等幅である。すべてのスクリーンリーダーが役に立つ<tt>ことをすることを期待していないかもしれませんが、彼ら<tt>よりもずっと楽な時間を過ごせると思います<span class="styleNameThisImportUtilityPicked">
supercat 14

0

HTMLタグの基礎となる設計原則は、「セマンティック」でなければならないということです。つまり、低レベルの指示ではなく、意味と意図を示す必要があります。

古典的なテストは、「盲人のためにブラウザでタグを有意義に使用できるか」です。

したがって、オーディオベースのブラウザの場合、イタリック体の「i」は、イタリック体のスピーチができないため、ほとんど役に立ちません。ただし、「em」タグは、ピッチを上げる、音量を上げる、アクセントを変更するなど、さまざまな方法でフレーズを強調することができるため、意味があります。点字レンダラーは、間隔を変更したり、サイズを変更したり、振動を追加したりすることにより、点を強調することができます。


しかし、あなたは...それはイタリック体であるという事実は、セマンティックな意味を持っているイタリック体、例えば方程式を持つことができます-あなたはイタリックスピーチを持つことはできません言うように
SAL

2
「つまり、音声ベースのブラウザの場合、斜体の「i」は、イタリック体のスピーチができないため、ほとんど役に立ちません。」...はい、それは<img>、画像を話すことができず、サウンドハードウェアのないシステムが存在できないため<audio>です。プレゼンテーションは要素のまさに目的であり、普遍的にサポートする必要はありません(そして、サポートされて<i>いない可能性のある他の要素とは異なり、斜体であるという事実だけが失われるため、代替テキストは必要ありません)。本当の問題は、人々i意味する ときに言うときemです。
nmclean 14

@SAL:なぜ「イタリックスピーチ」ができないのですか?「ピッチ」値が100で通常の音声が話され、<i>タグ内のテキストが120のピッチを使用し、<b>タグ内のテキストが80を使用<tt>し、テキストを生成する合成タイプライターと音声を同期させると、リスナーはこれらの形式のマークアップを簡単に区別するため。ジョブがあれば代わりに使用してのはるかに困難になり<i>、テキストが代わりに使用されるタグ<span class="whatever">のテキストの部分が「アクメSemiScript」ではなく「ウォルドルフなき」[一部のフォントファミリよりも...使用して示される原因となった
supercat

...良いイタリック体のフォントはありませんが、イタリック体のみのフォントは、別のフォントファミリを使用して記述されたテキスト内で設定すると、見栄えがよくなる場合があります。
supercat

@supercat斜体の音声ではなく、強調された音声を説明しています。別のトーンが必要な場合は、nmcleanが言ったようにemを使用する必要があります。イタリック体にする場合は、iを使用します。スクリーンリーダーが何をすべきかを知らなくても構いません。何もすることがないからです。書籍のタイトルは多くの場合、イタリック体で表記されていますが、発音を変えることはありません。
DCShannon 14
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.