HTML5のa要素はインラインでもブロックでもない

HTML5のa要素はインライン要素ではない

平成30年度 第3回のウェブデザイン技能検定2級から、<a>要素(アンカー・タグ)に関する問題を解説する。よく使われるタグであり、使い方もシンプルだが曖昧な知識では解けない問題だ。3級の受験者でも理解できるように基礎的な説明から始めて、2級の問題を解けるように順を追って話していこう。

まずは実際の問題文を見ていこう。

第26問
HTML5のa要素に関する説明として適切なものを以下より1つ選択しなさい。

  1. a要素の終了タグは省略できる。
  2. a要素にはhref属性を指定しなくてもよい。
  3. a要素の内部に入れられるのはインライン要素のみである。
  4. a要素の内部に入れられるのはブロックレベル要素のみである。

※ 平成30年度 第3回のウェブデザイン技能検定2級 学科試験より引用

最初に解き方を誤らない様に、問いのポイントを2つ挙げておこう。

HTMLのバージョン「5」であることを見落とすな

この問いは「HTML5の~」で始まっている。今後の技能検定試験ではHTML4やXHTMLなどの出題はないだろう。理由は簡単だ。HTML5が現在のニーズに合っているし、これから現場で働くであろう2級や3級の受験生に古いバージョンのHTMLを学ばせる理由がない。

この問題の主旨の一つは、過去のHTML4やXHTMLを学習した受験生に対し、新しいHTML5の仕様を覚えているかどうかを聞いているのだ。選択肢にある「インライン要素」や「ブロックレベル要素」は、HTML4まで使われていた要素の分類方法で、HTML5からは使われていない。そのため、新しい仕様を学んでいない受験生は引っかかってしまうように作られている。

要素と属性について

そして、二つめのポイントは「a要素に関する~」の部分。2級の受験生には説明不要かもしれないが、3級の受験生のために、この部分も説明しておこう。

普段、我々は“<a>“を指して「エータグ」とか「アンカータグ」と呼んでいる。”a“はanchor(アンカー)の頭文字で、船の「錨(いかり)」を意味している。HTMLファイル同士が、あちこちへリンクを張る様子を船の錨に模したものだ。

技能試験では「aタグ」とは問われず、「a要素」として出題されるため、3級の受験生は要素という用語にも慣れておいた方がいい。要素とはdivとかimgとかblockquoteとかHTMLの基礎として覚えたこれらの文字を指す。そして、aならhref=”~”だったり、imgならsrc=”~”のように要素の機能を補足する部分が加えられている。この部分が属性だ。

具体例
<a href=”http://www.nagura.com” target=”_blank”>ナグラウェブデザイン事務所</a>
<要素 属性=”属性の値” 属性=”属性の値”>〇〇〇<終了タグ>

例のように属性は半角スペースで区切って、複数を指定することもできるが、要素は必ず、先頭に一つだけ。

インライン要素とブロックレベル要素とは

インライン要素とブロックレベル要素とはどのようなものか、簡単に説明しておこう。ブラウザに表示される部分はbody要素内に書かかれているが、以前は<body>~</body>の中に直接、インライン要素を書いてはいけないというルールがあった。具体例を見てみよう。

<html>
<head>
<title>〇〇〇</title>
</head>
<body>

<strong>〇〇〇</strong>

</body>
</html>

以前は上記のように書いてはいけなかったのだ。何がダメなのかというと、strongをはじめ、aやimg、input、spanなどはインライン要素として区分されており、ブロックレベル要素の中に収めなければならないというルールがあった。ここでは、どれがブロックレベル要素で、どれがインライン要素であるかといった説明しない。HTML5からは必要のない情報だし、技能検定の受験生には他の学習に時間を割いて欲しいからだ。

インライン要素とブロックレベル要素の簡単な見分け方

ただ、ブロックレベル要素とインライン要素を簡単に見分ける方法がある。ブラウザで表示したときに、自動的に改行される要素はブロックレベル要素だ。</h1>や</p>など終了タグの後は自動的に改行されているはず。

反対に、strongやsmall、imgなどは改行されず、同じ行に続けて表示される。これらがインライン要素。それ以上のことを覚える必要はない。

以前は、body要素の直下には、ブロックレベル要素(下記の例ではdiv要素やp要素)を置いてから、インライン要素(下記の例ではstrong要素やa要素)を書かなければならないというルールがあったのだ。ただし、ブラウザは、その様な厳密なルールに縛られず、body直下にインライン要素を書いても、ちゃんと表示してくれるようになっている。

<html>
<head>
<title>〇〇〇</title>
</head>
<body>

<div>〇〇〇<strong>〇〇〇</strong>〇〇〇</div>
<p>〇〇〇<a>〇〇〇</a>〇〇〇</p>

</body>
</html>

過去によく勉強した人が間違える問題

これらのブロックレベル要素とインライン要素という用語は、過去のHTMLをしっかりと学んだ人は意識してHTMLを記述するクセが付いていることだろう。しかしながら、HTML5ではこのような区分けは廃止され、body直下にstrongを書いて良いことになったし、aの中にpを入れても構わなくなった。

つまり、HTML5に関する問題文で、ブロックレベル要素やインライン要素のことを聞いてくること自体が不自然だと気が付かなければならないのだ。

解答

さて、問題文を見返してみよう。

第26問
HTML5のa要素に関する説明として適切なものを以下より1つ選択しなさい。

  1. a要素の終了タグは省略できる。
  2. a要素にはhref属性を指定しなくてもよい。
  3. a要素の内部に入れられるのはインライン要素のみである。
  4. a要素の内部に入れられるのはブロックレベル要素のみである。

※ 平成30年度 第3回のウェブデザイン技能検定2級 学科試験より引用

選択肢1の終了タグは省略できるかどうか。これは“省略できない“。一度、自分で書いてみるといい。a要素の終了タグを省略してしまうと、それに続くタグやテキストもずっとリンクが張られた状態となり、一目でおかしいと思うはずだ。

選択肢2を飛ばして、選択肢3と4を見てみよう。先に説明したブロックレベル要素とインライン要素について書かれている。HTML5からは、ブロックレベル要素とインライン要素の概念は廃止された。そして、以前にはNGとされていた、インライン要素であるa要素の中にブロックレベル要素もインライン要素も入れることができるようになった。

よって、選択の1、3、4番は適切ではない。

選択肢2についても触れておこう。普段、a要素を使う際は100%、href属性を一緒に使っているだろう。ただ、必ずhref属性を書かなければならないということではないのだ。

a要素には指定できる属性がいくつか決められており、href属性はその中の一つでしかない。W3Cの仕様にも“必ずhref属性を指定せよ”とは書かれていないのだ。現状では、href属性とセットで使われているが、他の属性を使ってもa要素は機能するし、今後、新しい属性が追加される可能性もある。

今回の問題では不適切は選択肢が3つあり、唯一、選択肢2番だけが、不適切とは言えないため消去法で正解を導くことになる。納得してもらえただろうか。

補足

今回、取り上げた問題の選択肢3番と4番は、過去に学んだ受験生にHTMLの新しいバージョンを学び続け、この業界に適応し続けて欲しいといった願いも込められているのだと思う。これは、HTML5から学び始めた受験生にも言える。すでにHTML5.2や5.3といったバージョンで微調整が行われているし、将来、HTML6や7が出てくるだろう。ウェブ制作に限らず、新しいことを学び続けてくれることを望む。私も学び続けるだろう。

要素の補足説明

正確には、「aタグ」と「a要素」は同じ意味ではない。下の図を見て欲しい。<と>で囲まれたものをタグと言い、開始タグから終了タグを含めた全体が要素だ。今回、取り上げた問題の選択肢1番は、「a要素の開始タグから始まり、終了タグで終える一連のa要素の中から、終了タグを省略しても良いか大丈夫か?」と言い変えることができる。

「開始タグ」  「終了タグ」
<a href=”~”>〇〇〇</a>
<—————要素—————>

こまかいことだが、このように定義されていることを頭の片隅に残しておいて欲しい。