プラカンブログSTAFF BLOG

2017.04.19

HTML5について知らなかった事

つい最近HTMLコーディングをしていて、HTML5について知らない点がある事に気づきました。厳密には以前一度読んで確認はしていましたがすっかり忘れていた件について触れたいと思います。
今頃気づいたの?という話ではありますが、HTML5が出た当初、sectionやarticle、canvasなどの新しい要素ばかりに目が行き、細かい仕様変更をスルーしてしまっている方も、少なからずまだいるのではないでしょうか。この事をきっかけにHTML5の仕様変更を改めて読み返してみて、よく使う内容であまり意識していなかった点を紹介したいと思います。

HTML5ではインライン要素・ブロック要素という分類が廃止されました

「え・・・?そうだったの?」とすっかり忘れていました。つまりHTML5以前のコーディングでは、ブロック要素・インライン要素という縛りがあったために、ブロック要素の外側をインライン要素で囲う事はできませんでした。長年コーディングをしてきた中で染み付いたこの習慣により、できないと思いこんでコーディングを続けていました(もちろんこの古い考えによるコーディングが間違っていたわけではありませんが)。この仕様変更により、便利になった要素「aタグ」の使い方を再確認したいと思います。

HTML5で便利になったaタグ

aタグは以前はインライン要素として定義されており、ブロック要素を囲う事ができませんでしたが、html5では次のようにする事ができます。

<a>
	<div class=“box”>
		<h2>タイトル</h2><p>本文本文本文</p><p><img src=“test.jpg”></p>
	</div>
</a>

このようにdivで囲われた中にある文章や画像の塊を、ひとつのボックスとしてデザインされたものに、リンクを設定したりすることができるのようになったのです。これはとても便利ですね!以前のルールが染み付いている人にとっては違和感があると思いますが、いいんです!!

しかしここで疑問に思う方もいらっしゃるかもしれません。それはまだ実際に、CSSではdisplay:block;やdisplay:inline;という指定が存在するという事です。ブロック・インラインの概念は無くなったのでは?と思いがちですがこれは、たとえばaタグの場合初期値がdisplay:inlineで、これは単に見え方の初期値が違うだけであり、意味的なインライン要素・ブロック要素という概念が廃止されたという理解で良いと思います。

aタグのtarget属性が非推奨ではなくなった

またaタグに関して言えば、以前まではtarget属性が非推奨であり、target属性はよく使う属性なのでこれを使う事にとても負い目を感じてたのですが、HTML5において晴れて非推奨ではなくなり、気兼ねなく使う事ができるようになりました。

dl要素は従来のような定義リストという意味が無くなった

dlといえば定義リストという認識で使っていましたが、HTML5では説明リストという程度で利用する事になり、定義リストとして意味付けする場合は、定義語を表すdfn要素をあわせて用いる必要があるように変更されました。

<dl>
<dt><dfn>定義語</dfn></dt>
<dd>定義語の説明文</dd>
</dl>

hr要素は単なる罫線ではなくなった

hr要素は以前までは単なる罫線を表すだけの要素でしたが、HTML5からは意味的な段落を表すようになります。話が変わるけど見出しがつかない場合などに使えます。

strong要素を入れ子にできる

HTML5でstrong要素の意味は、強い強調というよりは「重要性」を表すようになりました。そしてstrongを入れ子にする事で、入れ子の中身のstrongはより重要な内容となるような意味を持つ事になりました。

<strong>重要な内容ですがこの中の言葉の方が<strong>もっと重要な内容</strong>になります。</strong>

img要素のalt属性は必須ではなくなった

alt属性は全ての画像に対して必須ではなく、代替テキストで説明する事ができない画像に関しては、必ずしも必須ではないという理解になるようです。
ただ画像に対して代替テキストで説明する事ができる場合は、やはり必須です。また、意味を持たいない単なる装飾としての画像に関してもalt=“”と空のaltを記述する必要があります。

まとめ

以上HTML5の変更点について、よく使う内容のものをピックアップしてみました。案外知らない人もいたのではないでしょうか?この変更点は一部でありその他にも変更された点がありますので、これをきっかけにもう一度HTML5を勉強してみてはいかがでしょうか?

この記事は、HISADA が書きました。