この記事は XHTML 1.0 入門としての主なインライン要素についての記事です。
HTML 5 入門に於ける相当する記事は、HTML 5での主なフレージング内容要素をご覧ください。
これまで、HTMLでのインライン要素としては、
を解説して来ました。
しかし、HTMLで定義されているインライン要素は他にも幾つかあり、その中には知っていると便利なものもあります。
ここでは、HTMLで初心者の段階を終えたら是非覚えておきたい便利なインライン要素をご紹介します。
<dfn>要素は定義語、すなわちそれを含む文章内で意味が定義される語句です。
例えば、以下のようにマークアップします。
堀北真希ちゃんのボシュロム社CM出演に因んで描いた、ソフトコンタクトレンズを入れる堀北真希うさぎ<p>通信方法やデータのフォーマットなど、インターネットに於ける取り決め・約束事一般は、<dfn>プロトコル</dfn>と呼ばれております。HTMLの文法も、ある意味プロトコルの一つと言えます。</p><dfn>要素は、仕様上定義語とされておりますが、定義の有無に拘らず専門用語を<dfn>要素としてマークアップする場合もあります。
上記の例では、二番目のプロトコルと言う言葉は文章中で定義が書かれておらず、従って定義語とは言えないのですが、専門用語である事を示すために同様に<dfn>要素としてマークアップする事も考えられます。
<dfn>要素の表示方法について特に規定はありませんが、ファイヤーフォックスやインターネットエクスプローラなどの視覚系のウェブブラウザでは、<dfn>要素の内容をしばしば斜体で表示します。
<abbr>要素は略語です。
一方、<acronym>要素は頭字語、すなわち語句の頭文字を並べて一つの単語のように発音する略語です。
いずれにしても、略す前の語句をtitle属性すなわち補助的な情報として併記する事が考えられます。
例えば、以下のようにマークアップします。
<h1><acronym title="全日本空輸">全日空</acronym>(<abbr title="All Nippon Airways">ANA</abbr>)・日本航空(<acronym title="Japan Airlines">JAL</acronym>)で行く、夏の沖縄！</h1>この場合、
ANAはエー・エヌ・エーと発音するので頭字語に該当せず
JALはジャルと頭文字の並びを一つの単語のように発音するため頭字語に該当する
ため、それぞれ<abbr>要素、<acronym>要素としてマークアップしております。
尚、全日空
はぜんにっくうと頭文字の並びを一つの単語のように発音するため、やはり頭字語と考えられます。
尚、<abbr>要素及び<acronym>要素の表示方法についてはいずれも特に規定はありません。現状、ファイヤーフォックスやインターネットエクスプローラなどの視覚系のウェブブラウザでは、特別なスタイルを与えていないようです。
<abbr>要素は、仕様上略語とされておりますが、略されていない語句であっても特殊な語句であれば<abbr>要素としてマークアップする場合もあります。
特に、
顔文字やインラインアスキィアートなど、意味をtitle属性としたうえで<abbr>要素とする
などと言った事も考えられます。
<code>要素は、コンピュータ言語のコードです。
但し、言語の種類は問いません。すなわち、
何でも<code>要素とする事が出来ます。
例えば、以下のようにマークアップします。
変数<var class="Perl">$a<var>の値を一つ増やすには、<code class="Perl">++$a</code>とコードします。この例では、Perlのコードである事をclass属性で明示しております。
尚、<code>要素の表示方法について特に規定はありませんが、ファイヤーフォックスやインターネットエクスプローラなどの視覚系のウェブブラウザでは、<code>要素の内容を等幅フォントを用いて表示します。
<kbd>要素は、キーボードなどから人間がコンピュータに入力するテキストです。
例えば、以下のようにマークアップします。
<p>試しに<kbd>Hello World!</kbd>と打ち込んでみましょう。</p>尚、<kbd>要素の表示方法について特に規定はありませんが、ファイヤーフォックスやインターネットエクスプローラなどの視覚系のウェブブラウザでは、<kbd>要素の内容を等幅フォントを用いて表示します。
<samp>要素は、コンピュータが出力するテキストの一例です。
但し、それが何故出力されたのかは問いません。すなわち、
のどちらであっても同じ<samp>要素としてマークアップが可能です。
例えば、以下のようにマークアップします。
<p>先ず、<kbd>4</kbd>と入力してみましょう。</p><p>そうすると、<samp class="ok">4の平方根は 2です。</samp>と言う答えが返ってくるでしょう。<p>次に、<kbd>-1</kbd>と入力したとします。</p><p>-1の平方根は実数ではないので、<samp class="error">正しい数値を入力して下さい！</samp>と言うエラーメッセージが返ってくるでしょう。
この場合、
class="ok" 属性で、class="error" 属性で、それぞれ示しております。
尚、<samp>要素の表示方法について特に規定はありませんが、ファイヤーフォックスやインターネットエクスプローラなどの視覚系のウェブブラウザでは、<samp>要素の内容を等幅フォントを用いて表示します。
<var>要素は、変数名です。
元々は数式などの変数を想定していたようですが、コンピュータ言語の変数の名前を<var>要素としても全く問題はありません。
例えば、以下のようにマークアップします。
<var>x</var>の二乗を<var>y</var>とします。この例では、数学の変数を扱っております。一方、コンピュータ言語での例を挙げると以下のようになるでしょう。
変数<code class="Perl"><var>$a</var></code>の値を一つ減らすには、<code class="Perl">--$a</code>とコードします。この例では、Perlの変数なので、<code>要素と併用しております。勿論、このような記述にせずに、<var>要素に class="Perl" 属性を与えても良いでしょう。
尚、<var>要素の表示方法について特に規定はありませんが、ファイヤーフォックスやインターネットエクスプローラなどの視覚系のウェブブラウザでは、<var>要素の内容を斜体で表示します。
<sup>要素は上付き文字、<sub>要素は下付き文字です。
このような表示方法を指定する要素(物理要素)は、本来好ましくないものとされているのですが、数学や理科或いは一部の外国語でこのような表示方法があるため、HTMLでも排除されない要素として用意されております。
例えば、数学の二次方程式
ax2+bx+c=0
ですが、二乗を表す2
が上付きになるので、<sup>要素として以下のようにマークアップします。
<var>ax</var><sup>2</sup>+<var>bx</var>+<var>c</var>=0また、過酸化水素が分解されて水と酸素になると言う化学式
2H2O2 → 2H2O + O2
は、やはり原子数を表す数字は下付きとなるため、<sub>要素として以下のようにマークアップします。
2H<sub>2</sub>O<sub>2</sub> → 2H<sub>2</sub>O + O<sub>2</sub><em>要素は、強調されたフレーズです。
一方、<strong>要素は、より強く強調されたフレーズです。
日本語で言えば、傍点付きが<em>要素、太字が<strong>要素と考えれば分かり易いでしょう。
但し、<em>要素及び<strong>要素の表示スタイルは特に規定されておりません。現状ではファイヤーフォックスやインターネットエクスプローラなどの視覚系のウェブブラウザの場合、<em>要素は斜体、<strong>要素は太字での表示となる場合が多いようです。
例えば、
と言う場合があるでしょうが、それが強調のためであるなら、<em>要素としてマークアップして、スタイルシート言語(CSS)で希望の色なり文字サイズなりで表示するようにします。
例えば、以下のようにマークアップします。
<p>車が来ない事を確かめて、<em>横断歩道</em>を渡りましょう。</p><p>バスを降りた後、バスの前や後ろを横断するのは、<strong>非常に危険</strong>です。</p><span>要素は、グループ化されたインライン要素です。
一般に<span>要素については特に表示スタイルを持たない要素としておりますが、スタイルシート(通常CSS)で適切なスタイルを与える事も出来ます。
例えば、以下のようにマークアップします。
<p><span class="actress">堀北真希ちゃん</span>って可愛いよな。</p><p xml:lang="en" lang="en">He ate <span class="loan">tempura</span>.</p>それぞれ、女優の名前, 英文での外来語となっております。
<i>要素は斜体のテキスト, <b>要素は太字のテキスト, そして<small>要素は小さい字のテキストです。
HTMLの考えからすれば、このような表示方法を定義した要素は本来使うべきでは無いのですが、HTMLにて定義されていない要素を文書作成者なりにマークアップしたい場合、これらの要素に<span>要素の使い方と同様にclass属性で適切なクラス名を与えた要素としてマークアップする事があります。
例えば、英語の文書では専門用語や外来語或いは船舶・列車等の愛称を斜体で書きますが、これらの要素はHTMLでは定義されておりません。
そこで、
それぞれマークアップすると言う方法があります。
また、補足となるテキストはしばしば小さく書かれますが、補足と言う要素も定義されておりません。
そこで、そのようなテキストは<small class="note">要素としてマークアップすると言う方法が考えられます。
見出しの中にサブタイトル部分があれば、それも小さく書かれる事が多いですが、サブタイトルと言う要素も定義されておりません。
そこで、サブタイトル部分のテキストは<small class="subTitle">要素としてマークアップすると言う方法が考えられます。
こう言った定義の無い要素を独自にマークアップする際に、これらの要素で代用する事があります。
尚、<span>要素との違いは、
と言う違いがあります。
このため、スタイルシート言語(通常はCSS)に対応していない旧式のグラフィカルなウェブブラウザで開かれても、当該要素が特別な要素と閲覧者が認識出来るようにしたい場合には<i>要素, <b>要素または<small>要素のいずれかとしてマークアップすると言う事が考えられます。
例えば、以下のようにマークアップします。
<p><b class="actress">堀北真希</b>ちゃんって可愛いよな。</p><p>明日、八時ちょうど発の<i class="train">スーパーあずさ5号</i>で松本に行く事にした。</p><p xml:lang="en" lang="en">He ate <i class="loan">tempura</i>.</p><h1>HTML入門 <small class="subTitle">〜より良いウェブサイトのために〜</small></h1>それぞれ、女優の名前, 列車愛称, 英文での外来語, 見出しの中のサブタイトルとなっております。
