主要インライン要素

a

説明

ハイパーリンクを設定し、各リソースを結びつける事が出来ます。マークアップには Anchor の頭文字を用いて <a>～</a> を用います。URIの指定にはhref属性を用います。

使用例

<p>
今日から<a href="http://～">真面目に創るWebサイト</a>を参考にして
Webサイトを創ってみる事にした。
</p>

主な視覚系ブラウザによる表現

ハイパーリンクがその文字列に設定されている事がわかるように、下線が引かれたり色が変更されたりします。また、参照済みリソースを未参照のものと区別できる様にそれぞれの色が設定される場合が多いです。この文字色や下線などの見栄えは全て CSS によって制御が可能です。

注意

リンク機能はHTML文書同士を結びつける役割を果たす事が多いですが、いちいちリソースという言葉を使っていることからもわかるように、href属性を用いてURIを指定すれば画像をはじめとした様々なリソースへのリンクも可能です。

良くない例

<a href="./index.html"><h1>ララの世界</h1></a>

良くない理由

body要素の直下にインライン要素であるa要素は置けない。
インライン要素であるa要素にブロック要素であるh1要素は内包できない。

img

説明

img要素を用いて画像を表示することができます。マークアップには Embedded Image の略である <img> を用います。空要素なので終了タグを持ちません。必須属性に src属性と alt属性を持つため、使用する時は必ず <img src="URI" alt="代替テキスト"> という記述になります。src属性で画像のURIを指定し、alt属性で代替テキスト記入します。古いブラウザでは width属性と height属性で画像の大きさを指定しておいた方がレイアウトの都合上、描写が早くなり、ページ表示の体感速度が上がるという事があり、今も慣習的に付けた方が良いとされたりしていますが、新しいブラウザではそのような事は無いらしいです。

使用例

<ul>
<li><img src="./image/a.gif" alt="縁側で日向ぼっこをする茶トラの猫"></li>
<li><img src="./image/b.jpg" alt="裾野が綺麗な夏の青い富士山"></li>
<li><img src="./image/c.png" alt="孫が書いた家族の似顔絵"></li>
</ul>

主な視覚系ブラウザによる表現

指定されたURIにある画像を表示します。特に指定が無ければ大きさは原本のままで描写されます。img要素にリンクを行うと枠線が表示されます。これは CSS によって制御が可能です。

注意

width属性と height属性を用いて画像の大きさを任意の値に変更する事が出来ますが、それでは画像自体の容量は変わりません。寸法が大きく容量も大きな画像を用いる場合は、画像編集ソフトなどを用いて縮小加工したもの用意し、その画像に元の画像へのリンクを行うなどの手段を考えた方が良いでしょう

良くない例

<img src="./image/d.jpg" alt="よさこい祭りで元気に踊る娘達">
<p><img src="./image/e.gif"></p>
<p><img src="./image/f.gif" alt="f.gif"></p>
<p><img src="./image/g.bmp" alt="チンパンジーが書いた芸術作品"></p>

良くない理由

body要素の直下にインライン要素であるimg要素は置けない。
必須属性であるalt属性が無い。
代替テキストの書き方が良くない。
bmp形式の画像はWebには適さない。

br

説明

任意の位置で改行を行うことができます。マークアップには Forced Line Break の略である を用います。空要素なので終了タグを持ちません。

使用例

<p>
もしもアナタが望むなら<br>
私はアナタの空になる<br>
もしもアナタが望むなら<br>
私はアナタの風になる<br>
もしもアナタが望むなら<br>
私はアナタの星になる<br>
もしもアナタ望むなら…
</p>

主な視覚系ブラウザによる表現

任意の箇所でテキストを改行し、折り返して表示させる事が出来ます。意味的に文章を区切りたい場合はp要素を用います。

注意

p要素を用いた場合は段落を意味し、br要素はあくまでも改行を示します。p要素で改行を示すのも間違いと書きましたが、br要素で段落の区切りを示すのも間違いです。またbr要素を複数用いて空白行を作るような事も間違いです。ブラウザによっては連続した複数のbr要素を一つと見做す場合もあります。空白の指定はCSSを用いて制御する事が可能です。

良くない例

<br>
ああああああああああああああああああ
ああああああああああああああああああ
<br>
<br>
いいいいいいいいいいいいいいいいいい
いいいいいいいいいいいいいいいいいい
<br>

<p>
うううううううううううううううううう
うううううううううううううううううう
<br>
<br>
<br>
ええええええええええええええええええ
ええええええええええええええええええ
</p>

<p>
りんご<br>
みかん<br>
いちご<br>
ぶどう<br>
もも<br>
</p>

良くない理由

段落の区切りを示す場合はbr要素では無くp要素を用いる。
余白を作るのにbr要素を複数用いてもブラウザによっては解釈されない。
箇条書きを表現するのならばリスト要素を用いた方が良い。

em

説明

強調部分を示す事が出来ます。マークアップには Emphasis の頭文字を取って ～ を用います。

使用例

<p>
真面目に創るWebサイトは<em>初心者の為の</em>Webサイト作成支援サイトです。
</p>

主な視覚系ブラウザによる表現

任意の強調したい箇所を斜体文字にしたり太字にするなどなんらかの形で他のテキストと区別し強調させます。

注意

インライン要素なので段落そのものを内包し強調する事はできません。強調の見栄えの指定はCSSを用いて制御する事が可能です。

良くない例

<em>
<p>真面目に創るWebサイトは初心者の為のWebサイト作成支援サイトです。</p>
</em>

<p>
<em>真面目に創るWebサイトは<em>初心者の為の</em>Webサイト作成支援サイトです。</em>
</p>

良くない理由

インライン要素であるem要素はp要素などのブロック要素を内包することはできません。
より強く強調したい場合はstrong要素を用いるのが妥当です。

strong

説明

em要素よりもさらに強い強調部分を示す事が出来ます。マークアップには Strong Emphasis の略である ～ を用います。

使用例

<p>
真面目に創るWebサイトは<strong>初心者の為の</strong>Webサイト作成支援サイトです。
</p>

主な視覚系ブラウザによる表現

任意の強調したい箇所を斜体文字にしたり太字にするなどなんらかの形で他のテキストと区別し強調させます。

注意

インライン要素なので段落そのものを内包し強調する事はできません。強調の見栄えの指定はCSSを用いて制御する事が可能です。

良くない例

<strong>
<p>真面目に創るWebサイトは初心者の為のWebサイト作成支援サイトです。</p>
</strong>

<p>
<strong>真面目に創るWebサイトは<em>初心者の為の</em>Webサイト作成支援サイトです。</strong>
</p>

良くない理由

インライン要素であるem要素はp要素などのブロック要素を内包することはできません。
より強く強調したい場合はstrong要素を重ねて用いるか、em要素との順序を逆にした方が妥当でしょう。

q

説明

主に短文の引用に用いられます。マークアップには quote の頭文字を取って <q>～<q> を用います。cite属性を用いて引用元のURIを示します。

使用例

<p>
WWWとはWorld Wide Webの略で、
<q cite="http://dictionary.goo.ne.jp/">
インターネットにおけるhypertextによる世界規模の情報ネットワーク
</q>
の事です。
</p>

主な視覚系ブラウザによる表現

引用テキストには引用符が付けられたり斜体文字になったりし、なんらかの形で他のテキストと区別される事が多いです。それら見栄えの指定はCSSを用いて制御する事が可能です。

注意

インライン要素なので段落そのものを引用するには向きません。段落になり得る程の長文を引用する場合には blockquote要素を用いた方が良いでしょう。また、引用部は他と明確に区別されるべきであり、出典も明記されるべきです。

良くない例

<q>
<p>
WWWとはWorld Wide Webの略で、
インターネットにおけるhypertextによる世界規模の情報ネットワークの事です。
</p>
</q>

<p>
<q cite="goo辞書">
WWWとはWorld Wide Webの略で、
インターネットにおけるhypertextによる世界規模の情報ネットワークの事です。
</q>
</p>

良くない理由

出典が明記されていません。
インライン要素であるq要素はp要素などのブロック要素を内包することはできません。
cite属性は出典のURIを示す為に用い、出典がURIなどで示せない場合は引用部の前後どちらかでcite要素を用いて示す事になります。

cite

説明

引用元 (出典) を示す事が出来ます。マークアップには Citation の略である <cite>～<cite> を用います。

使用例

<p>
詳しい言葉の意味は<cite>広辞苑</cite>を参照してみて下さい。
</p>

主な視覚系ブラウザによる表現

出典は主に斜体文字になったりし、なんらかの形で他のテキストと区別される事が多いです。それら見栄えの指定はCSSを用いて制御する事が可能です。

注意

主に出典を示す為に、引用文そのものを表すのには適しません。引用文をマークアップするにはq要素やblockquote要素を用いるのが適当でしょう。

良くない例

<cite>
<ul>
<li>広辞苑</li>
<li>大辞林</li>
<li>現代用語の基礎知識</li>
</ul>
</cite>

良くない理由

インライン要素であるcite要素はul要素などのブロック要素を内包することはできません。
cite属性は出典のURIを示す為に用い、出典がURIなどで示せない場合は引用部の前後どちらかでcite要素を用いて示す事になります。

sup・sub

説明

上付き・下付き文字です。ルビとは違います。元素記号や数式の指数などに用いる事が多いようです。マークアップには Superscript と Subscript の略である ～ と ～ を用います。

使用例

<ul>
<li>2H<sub>2</sub> + O<sub>2</sub> = 2H<sub>2</sub>O</li>
<li>2<sup>2</sup></li> = 4
</ul>

主な視覚系ブラウザによる表現

他のテキストと高さをずらして表示されます。それら見栄えの指定はCSSを用いて制御する事が可能です。

注意

主に出典を示す為に、引用文そのものを表すのには適しません。引用文をマークアップするにはq要素やblockquote要素を用いるのが適当でしょう。

良くない例

<p>真面目に創るWebサイトは初心者の為のWebサイト作成支援サイトです。<sup>上付き文字</sup></p>

<cite>
<ul>
<li>広辞苑</li>
<li>大辞林</li>
<li>現代用語の基礎知識</li>
</ul>
</cite>

良くない理由

インライン要素であるcite要素はul要素などのブロック要素を内包することはできません。
cite属性は出典のURIを示す為に用い、出典がURIなどで示せない場合は引用部の前後どちらかでcite要素を用いて示す事になります。

dfn

説明: 執筆中。

code

説明: 執筆中。

samp

説明: 執筆中。

span

説明: 執筆中。