代替

[8] この要素型は非推奨 (deprecated) ではありませんが、 推奨されません (discouraged) HTML 4 15.2。 代わりに、スタイル・シートを利用できます。

[9] 斜体にするためには、 CSS なら font-style 特性を利用できます。

element-type.class-name {
  font-style: italic;
}

[10] i の代わりに使うべき要素型は、 その部分を斜体にしたかった理由によって決めます。

• 強調 → em または strong
  • HTML 部分の例

    It <em>is</em> important to separate structure and presentation.

  • CSS 部分の例

    em {
      font-style: italic;
    }

• 書名 → cite
  • HTML 部分の例

    In <cite>The Origin of Structured Markup Languages</cite>, page 231, ...

  • CSS 部分の例

    cite {
      font-style: italic;
    }

• 引用文 → q または blockquote
  • HTML 部分の例

    He said that...
    <blockquote>
    <p>WYSIWYG is not the only solution.</p>
    </blockquote>

  • CSS 部分の例

    blockquote {
      font-style: italic;
    }

• [25] 他の言語 → span (xml:lang 属性つき)
  • HTML 部分の例

    <abbr>A.D.</abbr> stands for <span xml:lang="la">Anno Domini</span>.

  • CSS 部分の例

    :lang(la) {
      font-style: italic;
    }

• 数式の変数 → var または MathML の要素型
  • HTML 部分の例

    ...where <var>n</var> is the number of nodes in the tree.

  • CSS 部分の例

    var {
      font-style: italic;
    }

• 船の名前
  • 適当な要素型が無いので、 span を使います。
  • HTML 部分の例

    The <span class="ship">Queen Elizabeth 2</span> is an ocean liner.

  • CSS 部分の例

    span.ship {
      font-style: italic;
    }

• 属名・種名
  • 適当な要素型が無いので、 span を使います。
  • HTML 部分の例

    <span class="species">Tyrannosaurus rex</span> is very, very famous.

  • CSS 部分の例

    span.species {
      font-style: italic;
    }

• 初出の重要語 → dfn
  • HTML 部分の例

    These tags, often referred as <dfn>descriptive markups</dfn>, ...

  • CSS 部分の例

    dfn {
      font-style: italic;
    }

応用

[4] i 要素は、フォント・スタイル要素の一種です。 フォント・スタイル要素のレンダリングは UA 依存で、仕様書では規定されていませんが、参考 (informative) として、 斜体 (italic) スタイルでレンダリングするとされています。 他のフォント・スタイル要素も含めて入れ子の場合のレンダリングは UA 依存です。 HTML 4 15.2.1

[5] i はいわゆる物理要素で、 論理的・構造的意味は持たないのですが、 斜体という物理的意味さえ伝わることが保証されないということです。

[6] 多くの (非 text 系) 視覚UA では、 i 要素の内容を斜体でレンダリングします (想定通り)。 しかし、視覚 UA でも text browser 系は、 斜体を表現できないことが多いので、太字, 下線, 違う文字色, 反転, 前後を記号で囲む, 地の文と同じなど、異なる方法でレンダリングすることがあります。

i 要素の中に b 要素を入れたり、 その逆にしたりすると太字 + 斜体になるはずですが、 UA のレンダリング能力によってはいずれかだけになることもあります。

[7] 斜体 (Italic) は、本来はラテン文字などの書体の一種で、 丸みを帯びたあれ(謎)を指しますが、多くの実装では、 (italic フォントが見つからない場合は、または常に、) 単に通常の文字を傾けたもの (oblique, slant) を使っています。

不思議解釈

[11] ほぷしぃ−HTMLタグリファレンス 〜I〜 http://www.isl.ne.jp/pc/100/tagRef_007.html (2005年7月現在)

この文書では i 要素が

html4.01非推奨、Netscape専用タグ

と紹介されています。普通 HTML の deprecated は非推奨と訳されるので deprecated とされていない i をこう紹介するのは望ましくありませんが、 実際推奨しないと HTML 4 には書いてあるので、間違ってはいません。

問題は Netscape専用と主張していることです。 根拠はありませんし、事実にも反します。

例

[10] 引用文献名をマークした例

<p class="NormRefDef"><a name="2-ISO-9899">ISO/IEC
9899:1990(R1997)</a>, <i>Programming languages — C</i>.</p>

この例の場合、 cite 要素型を使った方がより好ましいと考えられます。

出典: Portable Network Graphics (PNG) Specification (Second Edition) http://www.w3.org/TR/2003/REC-PNG-20031110/#2-ISO-9899

i の誕生

語句化内容

HTML5

• [12] www-html@w3.org from December 1997: Re: Comments on HTMl 4 draft (9/Nov/1997) http://lists.w3.org/Archives/Public/www-html/1997Dec/0064.html
• [31] Ian Hickson's Internet Projects, Ian Hickson, 2024-08-26T03:37:26.000Z, 2000-06-16T00:36:23.924Z https://web.archive.org/web/20000616003523/http://www.bath.ac.uk/~py8ieh/internet/home.html#html

[28] >>12 この i を換骨奪胎して再利用する案は西暦2005年になって提案者 Ian Hickson 自身によって実現されました。 WA1 の歴史の項

x, t

[33] <x> -> <t>, Hixie, 2006-11-23 11:04:15 +09:00, 2024-09-01T12:20:04.000Z https://github.com/whatwg/html/commit/6ea26c5e3b39bb8ad99d6e5b14747b10d0a6b3d4#diff-41cf6794ba4200b839c53531555f0f3998df4cbb01a4d5cb0b94e3ca5e23947d

[35] inter-element whitespace and comments should not affect algorithms; b…, Hixie, 2006-12-22 10:07:05 +09:00, 2024-09-01T12:35:32.000Z https://github.com/whatwg/html/commit/7f75de99cdef5686b5812ce14c88759aa70ab207#diff-41cf6794ba4200b839c53531555f0f3998df4cbb01a4d5cb0b94e3ca5e23947d

• [29] inter-element whitespace and comments should not affect algorithms; b…, Hixie, 2006-12-22 10:07:05 +09:00, 2022-11-13T05:27:11.000Z https://github.com/whatwg/html/commit/7f75de99cdef5686b5812ce14c88759aa70ab207#diff-41cf6794ba4200b839c53531555f0f3998df4cbb01a4d5cb0b94e3ca5e23947d

[30] i, b, div が同時追加

[13] gmane.comp.web.w3m.devel http://permalink.gmane.org/gmane.comp.web.w3m.devel/863 (名無しさん 2006-12-18 12:05:05 +00:00)

[14] [w3m-dev 04190] patches added to CVS repository http://permalink.gmane.org/gmane.comp.web.w3m.devel/856 (名無しさん 2006-12-18 12:06:28 +00:00)

[15] [w3m-dev 04191] Re: italics in emacs-w3m http://permalink.gmane.org/gmane.comp.web.w3m.devel/857 (名無しさん 2006-12-18 12:07:00 +00:00)

[16] 講演申込手順 (2007-12-06 10:30:27 +09:00 版) https://secure1.gakkai-web.net/gakkai/ieice/kaikoku/tejun.html

c.特殊な表記の方法 講演題目や講演要旨原稿の中の添字や斜体等は以下のようにHTMLのタグコード(以下の^、、_、など)で入力して下さい.

• 上付き文字: ^対象文字
• 下付き文字: _対象文字
• 斜体字: <i>対象文字</i>

[17] IRC logs: freenode / #whatwg / 20110414 ( (2011-04-16 20:30:22 +09:00 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20110414

[18] IRC logs: freenode / #whatwg / 20110505 ( (2011-05-07 13:59:30 +09:00 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20110505

[20] ncsa-mosaic/CHANGES at master · alandipert/ncsa-mosaic ( (2014-04-07 05:39:57 +09:00 版)) https://github.com/alandipert/ncsa-mosaic/blob/master/CHANGES#L1026

絵文字への流用 (濫用)

[39] 関連: 絵文字, アイコンフォント

• [19] Base · Bootstrap ( ( 著, 2012-12-22 03:04:10 +09:00 版)) http://twitter.github.com/bootstrap/base-css.html#icons
  • [38] Bootstrap, from Twitter, 2024-09-08T09:20:10.000Z, 2012-02-04T01:04:29.877Z https://web.archive.org/web/20120204010350/http://twitter.github.com/bootstrap/base-css.html#icons

[47] >>38

With v2.0.0, we have opted to use an <i> tag for all our icons,

• [50] tweaks abound, updated prettify styles, new sidenav component started…, mdo, 2012-01-05 18:34:14 +09:00, 2024-09-08T10:22:24.000Z https://github.com/twbs/bootstrap/commit/fb9401b355366452d310d39f51224999da4daa82

[51] >>50 が i が追加されたコミット。

[52] >>50

<p>With v2.0.0, the <code>&lt;i&gt;</code> tag is essentially dedicated to iconography.

// As of v2.0.0, the <i> tag is reserved for icons from the Glyphicons set.

[53] >>52 の当初の文言は >>47 よりも強く、 i が完全にアイコン専用とされている。

• [48] Icons as font instead of img · Issue #966 · twbs/bootstrap · GitHub, 2024-09-08T10:16:41.000Z https://github.com/twbs/bootstrap/issues/966

[49] >>48 に >>45 作者も投稿している。

• [45] Font Awesome, the iconic font designed for use with Twitter Bootstrap, 2024-09-08T09:52:53.000Z, 2012-03-09T00:07:42.165Z https://web.archive.org/web/20120309000714/http://fortawesome.github.com/Font-Awesome/
• [21] Font Awesome Examples ( (Dave Gandy 著, 2014-08-04 17:31:34 +09:00 版)) http://fontawesome.io/examples/
  • [37] Font Awesome Examples, Dave Gandy, 2024-09-08T09:17:15.000Z https://fontawesome.com/v3/examples/

[46] >>45 が現存最古? Font Awesome 1 (1.0.0) は2012-03-03公開とのこと。

• [42] Inconsistent use of <i> and <span> across material.io and documentation · Issue #1007 · google/material-design-icons · GitHub, 2024-09-08T09:44:10.000Z https://github.com/google/material-design-icons/issues/1007
  • [40] Use <span> instead of <i> for icon HTML element, for examples too, RoelN, 2021-02-03 00:12:22 +09:00, 2024-09-08T09:43:42.000Z https://github.com/google/material-design-icons/commit/6eed39a37d4d9aa0aaf7831eae80b34ede668a57
  • [41] Use <span> instead of <i> for icon HTML element, RoelN, 2021-01-26 01:02:49 +09:00, 2024-09-08T09:44:03.000Z https://github.com/google/material-design-icons/commit/b9f25299148e3250a83a77b36a07b806ed2ea651
  • [44] マテリアル アイコンガイド | Google Fonts | Google for Developers, 2024-08-22T09:57:52.000Z, 2024-09-08T09:45:06.881Z https://developers.google.com/fonts/docs/material_icons?hl=ja

[43] >>42 Google の material design。西暦2014年から i を使っていた模様だが、今は span にあらためている >>44。

[22] Explain better when to use <i> instead of <u> · whatwg/html@19a59f0 (2015-12-21 11:34:36 +09:00 版) https://github.com/whatwg/html/commit/19a59f050decea91310724061afe3f4621844909

[23] <i>Mil</i> (ミール) のように宇宙船も海の船同様にイタリックを使うようです。

[26] [css-display] Convert <i> autolinks. (tabatkins著, 2017-05-16 08:27:40 +09:00) https://github.com/w3c/csswg-drafts/commit/a518110243c5a7a31d58961163a5c05632d9bc87

[27] <i> auto linking can get deprecated and removed · Issue #1042 · tabatkins/bikeshed (2017-10-11 10:26:30 +09:00) https://github.com/tabatkins/bikeshed/issues/1042