Web Survive

Webで生きる道を模索するブログ

主なインライン要素

ブロックレベル要素と同じく、インライン要素にもたくさんの種類がありますので、
以下では代表例を解説します。

アンカー(a要素)

アンカーを定義するためにa要素を利用します。
「アンカー」と書くとわかりにくいのですが、
クリックしたら別のページに飛ぶ、という「リンク」と考えておきましょう。

アンカー(a要素)のマークアップ例

以前はインライン要素だったため、
divやpなどのブロック要素にリンクを貼ることは不可能でしたが、
HTML5ではインライン要素・ブロック要素の区別がなくなったため、
<div>を<a>で囲むことができるようになりました。

name属性が廃止され、アンカーリンクとしての使用ができないので、
ページ内リンクは目的の要素にid属性を設定します。
href属性を持たないa要素は、プレースホルダーを表します。

画像(img要素)

画像を埋め込むにはimg要素(空要素)を利用します。
src属性とalt属性が必要とされており、src属性で画像ファイルのURLを、
alt属性で代替テキストを指定します。

また、width属性とheight属性で幅と高さが指定でき、
ブラウザでの画像の安定表示のためにきちんと指定しておくのが一般的です。

画像(img要素)のマークアップ例

alt属性は「alternative text」の略で、一般的には「オルト」と呼ばれます。
画像が表示できない環境では、alt属性で画像ファイルのURLを、
alt属性値が代替的に表示・表現されます。
音声ブラウザでalt属性値が読み上げられることで
全盲や弱視ユーザーの理解を助けたり、
検索クローラーがどのような画像が埋め込まれているかを判断したり、といったことです。
したがって、alt属性値は具体的でわかりやすい内容にすることが大切です。
たとえば「画像」や「写真」といった具体性のない内容は好ましくなく、
「◯◯◯を示したグラフ」「◯◯◯の写真」と指定します。
ただし、ロゴやボタンなど単にテキストを代替する画像については、
そのまま「スイートレシピや「お問い合わせ」と指定します。
情報としての意味をもたない装飾やイメージ画像の場合は、
alt属性値の値は空(alt=””)でも大丈夫です。

改行(br要素)

テキストの途中で改行するために利用するのがbr要素(空要素)です。
テキストは領域幅に合わせて自動的に折り返されますが、
br要素を利用することで任意の改行位置が指定できます。

ソースコードのなかで改行を入れても、
ブラウザの表示上はbr要素が指定されていないと改行されない点に注意しましょう。

改行(br要素)のマークアップ例

段落(p要素)のなかで利用することが多い要素ですが、
もちろん他の要素のなかでも利用できます。
たとえば見出し(h1〜h6要素)が長くなってしまう場合、
読みやすさを確保するために改行するなどです。

なお、br要素を複数指定することで、テキストとテキストを離すといった
「見た目の調整」に利用するのは好ましくありません。
この場合、それぞれのテキストをp要素として(つまり、別の段落として)マークアップし、
どのくらい離すかはCSSで設定します。

strong要素

従来は「より強い強調」に使われていましたが、
HTML5より「重要なテキスト」を表す意味に変更になりました。

b要素

従来は文字を太くするために使われていましたが、
HTML5より「キーワードや固有名詞等たと区別したいテキスト」を表す意味に変更になりました 。
その箇所が重要であるという意味や強調する役割はない。
実際に使用することはほとんどないと思われます。

i要素

従来は文字を斜体にする時に使われていましたが、
HTML5からは
代替音声や気分、他の言語のフレーズ等を表す場合に使用します。
欧文の船の名前や専門用語など、斜体(イタリック体)で表す語句にも使用します。

削除と追加(del要素とins要素)

テキストに「削除」という意味を与えるにはdel要素を、
逆に「追加」という意味を与えるにはins要素を利用します。

ページをサーバーにアップロードして
上書き保存すれば内容が自動的に更新されますが、
どの内容が変更されたかをユーザーに明確に伝えたり、
関係者間で共有する必要がある場合にdel要素やins要素を利用します。

削除と追加(del要素とins要素)のマークアップ例

ブラウザでは、変更箇所であることがはっきりとわかるように、
del要素には取り消し線が、ins要素には下線が自動的に引かれます。

汎用インライン要素(span要素)

以上のような特定の役割をもつインライン要素のほかに、
span要素という汎用的な要素も利用できます。
例えば「強調という意味はないけど、テキストの色を変えたい」という場合に利用します。
このように、span要素はCSSを適用するために利用するのが一般的です。

汎用インライン要素(span要素)のマークアップ例