HTML講座 - 属性

属性

今回は、属性を紹介します。属性とは、要素の付属情報みたいなもので、ある要素にさらに情報を付け加えます。具体例として、次の要素を紹介します。

a要素

a要素は、ハイパーリンクを表すものです。ハイパーリンクもまた、HTMLの根幹をなすものです。

ハイパーリンクとは、例えば、「グーグル」のように、一般にクリックすると違うページにジャンプできるものです。

「この部分がリンクである」というのをa要素を用いて表すのですが、それだとリンク先がどこであるか分かりません。そこで、そのリンク先がどのページであるかという情報を、属性を用いて要素に与えるのです。

それで、属性の書き方はこうです。


属性名="値"

注目すべきは、値が"（引用符;ダブルクォーテーション）で囲まれているということです。囲まなくてもいい場合もありますが、なるべく囲んだほうがいいです。また、'（シングルクォーテーション）でもいいです。

そしてこれをタグのどこに書くかというと、開始タグを次のようにします。


<要素名 属性名="値">

つまり、要素名を書いたあとにスペースで間をあけて属性を書きます。属性は、同じくスペースで間をあけて複数書くことも可能です。

それでは、a要素の具体例を見てみます。a要素で、リンク先を示す属性はhref属性です。

<a href="http://google.com/">グーグル</a>

このようにすることで、グーグルがリンク先のリンクを作成できます。

他にもたくさんの要素に属性があります。

a要素

要素の種類

インタラクティブ・コンテンツ。

子

透過。

意味

ハイパーリンク。

属性

href: リンク先のパス。
target: ブラウジングコンテキスト。
rel: リンクの種類。
media: 対象のメディア。
hreflang: リンク先の言語。
type: リンク先のMIMEタイプ。

URLの指定

a要素が出てきたところで、URLについて解説します。URLは、要するにインターネットのアドレスのことなのですが、さっきのようにhttp://とかhttps://（プロトコル）から始まるアドレスは、絶対パスとかいいます。

それに対して、相対パスというものがあります。これは、今いるページを基準とするパスのことです。

例えば、例えばこのサイトからGoogleのように、違うサイトへリンクする場合は絶対パスを使いますが、同じサイト内ではいちいち書くのも面倒です。

たとえば、このページは2_4.htmlで、前のページは2_3.htmlです。このとき、いちいちhttp://uhyohyo.sakura.tv/html/2_3.htmlとかくのは面倒ですね。これを解消する書き方が相対パスなのです。

というのも、2_4.htmlと2_3.htmlのように、同じディレクトリ（フォルダ）にある場合はファイル名だけでいいのです。すなわち、こんな感じです。

<a href="2_3.html">前のページ</a>

さらに、違うディレクトリにある場合でも相対パスで書けます。例えば、今いるページからあるディレクトリに入るときはこうします。

ディレクトリ名/

例えば、このサイトのトップページから、htmlというディレクトリの中にあるこのページに移動するには、トップページに次のようにします。

<a href="html/2_4.html">

とします。まずhtmlというディレクトリの中に入って、そのなかの2_4.htmlということです。同様に、次のように複数回移動することもできます。

<a href="aaa/bbb/ccc.html">

今いるディレクトリから、aaaというディレクトリに入り、次にbbbというディレクトリに入り、そのなかのccc.htmlということです。

逆に、今いるディレクトリから出るということも可能です。それは、../とします。例えば、このページからトップページに移動するには、次のようにします。

<a href="../index.html">トップページ</a>

これらを組み合わることで相対パスを書きます。相対パスを利用することの利点は、サイトがまとめて別のサーバーに移動したときなどにURLを全て書き直さなくてもいいという点などにあります。

ちなみに、「./」というのもあります。

<a href="./2_3.html>前のページ</a>

「同じディレクトリ」を表す場合に「./」と書くことができます。これは書かなくても同じになりますが、わかりやすさのために書かれることがあります。

さて、前回・前々回でテキストをマークアップする要素を紹介してきましたが、まだまだあるので次々と紹介します。一度に全てを覚える必要はないですが、一度目を通しておくと必要になったときに思いつくことができるかもしれません。

q要素

q要素は、引用です。他のところから引用してきた文、あるいは他の人の発言などを引用した際にq要素を使います。


<p>友人から電話がかかってきた。友人は<q>集合時刻は9時なのにどうしたんだ。
風邪でもひいたのか。</q>と言った。</p>

この例では、友人の発言がq要素でマークアップされています。注意したいのが、引用符（日本語の場合「」）をつけないということです。q要素そのものが「引用」の意味を持っているので、引用を表す記号をつける必要がないのです。

q要素には、cite属性というものがあります。これは、引用元がWebページの場合、そのURLを示します。

q要素

要素の種類

フレージング・コンテンツ。

子

フレージング・コンテンツ。

意味

引用。

属性

cite: 引用元のURL。

br要素

さっきのサンプルで、友人の言葉の途中で改行がありました。ところが、これをブラウザで表示してみると、ちょっと間が開くだけで改行したりはしません。実は、HTMLにおいては、改行というものはスペースくらいの意味しかありません。そもそも、今までも下のように見やすくするために改行をつかってきました。

<!DOCTYPE html>
<html>
  <head>
    <title>タイトル</title>
  </head>
  <body>
  </body>
</html>

それでは、本当にある場所で改行したい場合はどうするかというと、そういう時に使うのがbr要素なのです。しかし、この要素は、あまりつかう機会は多くありません。

なぜなら、そもそも改行はなぜするのでしょうか。大抵の場合、「ここで改行したほうが見やすいから」とかそういった理由であると思います。現に多くの人がそういった使い方をしています。ところが、それは駄目なのです。

というのも、見やすいという理由で改行するのは、前回説明したHTMLの理念に反します。「HTMLで見た目を記述しない」ということです。そのため、Webページで文章を表示するならば、ちゃんと端まで到達してから自然に改行するのがよいのです。これは、原稿用紙に書くときに途中で勝手に改行しないのと似ています。段落を変えれば改行しますが、それはHTMLではp要素で表現します。

それでは、正しくbr要素を使える場面というのはどんな場面なのでしょうか。

それは、「実際にコンテンツの一部となるような改行」に使うとされています。改行が、他の文字と同じように必要な場合、改行が絶対に必要で無いと意味が変わってしまう場合です。

例えば、詩などでは改行の位置にまでこだわりがある場合もあります。他に、アメリカなどでは、住所にも改行が使われます。こういった改行にのみbr要素を使うことができるのです。

ところで、br要素は空要素です。空要素とは何かというと、中身がない要素です。そもそも、今まで紹介してきたp要素やem要素などは、「範囲」や「中身」があるものでした。対して、今回のbr要素の「改行」はただそこにあるだけのものです。つまり、範囲や中身がないのです。

空要素は中身がないので、普通の要素とタグの書き方が違います。というもの、終了タグがありません。開始タグだけです。具体例は、次のような感じです。


<p>東海の小島の磯の白砂に<br>
われ泣きぬれて<br>
蟹とたはむる</p>

石川啄木の短歌です。俳句や短歌についても、詩同様に改行自体が意味を成す場合があります。

br要素

要素の種類

フレージング・コンテンツ。

意味

改行。

mark要素

mark要素は、その名のとおり、あるテキストをマークしておいたいような場合に使います。

基本的な使い方として、その文書にはもともとなかったハイライトを追加したい時に使います。例えば、先に紹介した引用です。


<p>友人は電話で、<q>集合時刻は<mark>9時</mark>なのにどうしたんだ。</q>と言っていた。</p>

ここで筆者は、友人の言葉の中の「9時」という部分に注目しています。そのため、mark要素を使っています。その「9時」という部分に注目しているのはその言葉を発した友人本人ではなく、その言語を引用した筆者なのです。

ここで、mark要素のかわりに例えばem要素を使用してしまうと、その言葉を発した友人本人が「9時」と強調したことになり、意味が違ってきます。

他にも、例えば教科書がHTMLで書いてあったとして、マーカーで線を引くような感じで教科書の一部分をマークできるとします。その時使う要素は何が適切でしょう。そう、mark要素です。教科書にはもともとそんなマークは存在しなかったものを、あとから勝手にマークしたのですから、mark要素が適切です。

mark要素

要素の種類

フレージング・コンテンツ。

子

フレージング・コンテンツ。

意味

参照を目的にマークされるテキスト。

ins要素・del要素

次に、ins要素とdel要素をまとめて紹介します。これらは、文書の訂正を表す要素です。

これらは、文書にある部分が追加された場合（ins要素）や削除された場合（del要素）に使われます。前に「取り消し」を表すs要素を紹介しましたが、あれとは違って公式に追加されたり削除されたりしたときにこれらの要素を使います。例えば、こんな感じです。


<p>集合時刻は<del>朝10時</del><ins>朝9時</ins>です。</p>

この例では、集合時刻が10時から9時に変更されたことが分かります。この文が表すのは、「集合時刻は9時だ」ということです。


<p>集合時刻は<s>朝10時</s>朝9時です。</p>

このようにs要素を使った場合、意味合いが多少変わってきます。「前は10時だったけど今は9時になった」ということを伝えたいのがこのs要素です。対してdel要素の場合は、この文書は10時と何のかかわりもありません。ただ「集合時刻は9時だ」ということを表しているのです。

また、このins要素とdel要素は、もう1つ特徴を持っています。それは、これらの要素が透過だということです。透過とは何かというと、その要素のコンテンツ・モデル（どういった種類の要素であるか。フレージング・コンテンツなど）が場合によって変わるということです。

どういうことかというと、先の例では、ins要素・del要素の子はテキストだけ、すなわちフレージング・コンテンツでした。すると、このins要素・del要素もフレージング・コンテンツ扱いになるのです。

それでは、そうでない場合というのもあります。例えば、次のように段落ごと追加・削除した場合です。


<body>
  <ins><p>集合時刻は朝9時です。</p></ins>
</body>

このようにした場合、ins要素はフレージング・コンテンツではなくなり、p要素と同等になります。

逆に言うと、ins要素やdel要素が、p要素の中など、フレージング・コンテンツしか書けないところにあると、ins・delの子も同じくフレージング・コンテンツだけになるということです。そうでなければ、ins・delの子にp要素などその他の要素も置くことができます。

ins要素

要素の種類

フレージング・コンテンツ。

子

透過。

意味

追加。

属性

cite: 変更を説明する文書のアドレス。
datetime: 変更された日付。

del要素

要素の種類

フレージング・コンテンツ。

子

透過。

意味

削除。

属性

cite: 変更を説明する文書のアドレス。
datetime: 変更された日付。