<I>

i 要素 (HTML)

[1] HTMLi 要素型の要素は、 内容斜体 (イタリック) で表示するべきものです。

[2] 仕様書:

[3]

状態
W3C 勧告
名前空間名
http://www.w3.org/1999/xhtml
局所名
i (はじめ italic (斜体)、のち instance (実現値) より)
開始タグ
必須
終了タグ
必須
内容模型
(%inline;)*
出現できる文脈
%inline な文脈
属性
属性名属性値既定値説明状態出典
class[HTML4] %coreattr
dir書字方向[HTML4] %i18n
id一意識別子[HTML4] %coreattr
lang自然言語[HTML4] %i18n
xml:lang自然言語[XHTML1]
onclick[HTML4] %events
ondblclick[HTML4] %events
onkeydown[HTML4] %events
onkeypress[HTML4] %events
onkeyup[HTML4] %events
onmousedown[HTML4] %events
onmousemove[HTML4] %events
onmouseout[HTML4] %events
onmouseover[HTML4] %events
onmouseup[HTML4] %events
styleスタイル情報[HTML4] %coreattr
title注釈的題[HTML4] %coreattr

代替

[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専用タグ

と紹介されています。普通 HTMLdeprecated非推奨と訳されるので 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 の誕生

語句化内容

[55] HTML要素概説
要素名
i
借用先
HDML

HTML5

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

[118] HTML要素概説
要素名
i
要素名
x
日付
説明
HTML5ix に改称された。
出典

x, t

[33] <x> -> <t>, Hixie, , https://github.com/whatwg/html/commit/6ea26c5e3b39bb8ad99d6e5b14747b10d0a6b3d4#diff-41cf6794ba4200b839c53531555f0f3998df4cbb01a4d5cb0b94e3ca5e23947d

[32] HTML要素概説
要素名
x
要素名
t
日付
説明
HTML5xt に改称された。
出典
[34] 同時に旧 ttime に改称されました。

[35] inter-element whitespace and comments should not affect algorithms; b…, Hixie, , https://github.com/whatwg/html/commit/7f75de99cdef5686b5812ce14c88759aa70ab207#diff-41cf6794ba4200b839c53531555f0f3998df4cbb01a4d5cb0b94e3ca5e23947d

[36] HTML要素概説
要素名
t
日付
説明
HTML5t を削除した。
出典

[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] 講演申込手順 ( 版) https://secure1.gakkai-web.net/gakkai/ieice/kaikoku/tejun.html

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

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

[17] IRC logs: freenode / #whatwg / 20110414 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20110414

[18] IRC logs: freenode / #whatwg / 20110505 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20110505

[20] ncsa-mosaic/CHANGES at master · alandipert/ncsa-mosaic ( ( 版)) https://github.com/alandipert/ncsa-mosaic/blob/master/CHANGES#L1026

絵文字への流用 (濫用)

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

[47] >>38

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

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

[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 が完全にアイコン専用とされている。

[54] HTML要素概説
要素名
i
日付
説明
公開の Bootstrap は、 アイコン機能のため i を利用した。 >>56 この用法はどの HTML 仕様とも整合せず濫用に当たるが、 これ以後多くのアイコン絵文字用のライブラリー等に模倣され、 現在もかなり使われている。
出典
注釈
  • Bootstrap Twitter 社の汎用 CSS ライブラリー。 平成時代後期に世界的に人気を博した。

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

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

[43] >>42 Googlematerial designから i を使っていた模様だが、今は span にあらためている >>44

[22] Explain better when to use <i> instead of <u> · whatwg/html@19a59f0 ( 版) https://github.com/whatwg/html/commit/19a59f050decea91310724061afe3f4621844909

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

[24] 必ず覚えておきたいHTML5の特徴と新機能/HTML5完全読本#1-1 | HTML5完全読本―実践テクニックとWebデザインの最新動向 | Web担当者Forum (鈴木 雄太(株式会社トライフォート) 著, 版) http://web-tan.forum.impressrd.jp/e/2014/04/24/17355

<i> イタリック体 声や考えていることなど、他と区別したいテキストを表す

[26] [css-display] Convert <i> autolinks. (tabatkins著, ) https://github.com/w3c/csswg-drafts/commit/a518110243c5a7a31d58961163a5c05632d9bc87

[27] <i> auto linking can get deprecated and removed · Issue #1042 · tabatkins/bikeshed () https://github.com/tabatkins/bikeshed/issues/1042