[1]

HTML の i 要素型の要素は、内容を斜体イタリックで表示するべきものです。

代替

[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` の誕生

語句化内容

[55]

HTML要素概説

要素名: i
借用先: HDML

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年2005になって提案者 Ian Hickson 自身によって実現されました。 WA1 の歴史の項

[118]

HTML要素概説

要素名

i

要素名

x

日付

2006-10-26

説明

2006-10-26、 HTML5 の i は x に改称された。

出典

HTML5 r208, Hixie, 2006-10-26 08:07:25 +09:00, 2024-09-01T10:12:50.000Z https://github.com/whatwg/html/commit/4075f1e21b142f4fc05188f4f0239260662c49a7

`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

[32]

HTML要素概説

要素名

x

要素名

t

日付

2006-11-23T11:04:15+09:00

説明

2006-11-23、 HTML5 の x は t に改称された。

出典

HTML5 r360, Hixie, 2006-11-23 11:04:15 +09:00, 2024-09-01T12:20:04.000Z https://github.com/whatwg/html/commit/6ea26c5e3b39bb8ad99d6e5b14747b10d0a6b3d4

[34] 同時に旧 t は time に改称されました。

[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

[36]

HTML要素概説

要素名

t

日付

2006-12-22

説明

2006-12-22、 HTML5 は t を削除した。

出典

HTML5 r456, Hixie, 2006-12-22 10:07:05 +09:00, 2024-09-01T12:35:32.000Z https://github.com/whatwg/html/commit/7f75de99cdef5686b5812ce14c88759aa70ab207

[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のタグコード(以下の、、、など)で入力して下さい.
上付き文字: 対象文字
下付き文字: 対象文字
斜体字: 対象文字

[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  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

With v2.0.0, the <code></code> tag is essentially dedicated to iconography.

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

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

[54]

HTML要素概説

要素名

i

日付

2012-01-31

説明

2012-01-31公開の Bootstrap は、アイコン機能のため i を利用した。

>>56

この用法はどの HTML 仕様とも整合せず濫用に当たるが、これ以後多くのアイコンや絵文字用のライブラリー等に模倣され、現在もかなり使われている。

出典

[56] BOOTSTRAP:TWEAKS: 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

注釈

Bootstrap Twitter 社の汎用 CSS ライブラリー。平成時代後期に世界的に人気を博した。

[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 and 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 instead of 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 instead of 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年2014から i を使っていた模様だが、今は span にあらためている >>44。

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

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

[24]

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

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

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

[27] 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

属性名	属性値	既定値	説明	状態	出典
`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

代替

応用

不思議解釈

例

歴史

i の誕生

HTML5

x, t

絵文字への流用 (濫用)

`i` の誕生

`x`, `t`