RASUKU

iPhone大好きな管理人「らく」がiPhoneやMac等のApple関連の情報、アプリ、鹿児島についてなどオススメすることをお届けするブログ。

未分類

初心に返って覚えるHTML5 第3回

投稿日:

今回は、HTML5で使い方が変更された要素について見ていきたいと思います。

a要素

・アンカーリンクとしての使い方が変わった

従来のアンカーリンクは、

 <h1> <a id = "top">初心に返って覚えるHTML5 </a> </h1>
・
省略
・
<a href = "#top">トップへ戻る </a>

となっていましたが、HTML5ではこうなっています。

<h1 id = "top">初心に返って覚えるHTML5</h1>
・
省略
・
<a href = "#top">トップへ戻る</a>

HTML5では、ページのアンカーを表すだけにa要素を使うことができなくなりました。代わりにアンカーを表す場合は、要素にかかわらずid要素を指定することでアンカーを機能させることができるようになりました。

・target属性が非推奨ではなくなった

別ウィンドウを表示させる際には、JavaScriptなどを使ってリンクを別ウィンドウで開いていましたが、target = _blankが使える様になったため、YoutubeなどのiframeやWebアプリケーションにおいて役立つようになりました。

<a href ="" target = "_blank">Youtube</a>

・div要素や複数のタグをまとめてa要素で囲むことができるようになった。

HTML5からブロック要素やインライン要素の分類がなくなるため、a要素でsection要素やdiv要素、p要素などの複数の要素を囲むことができるようになりました。

address要素

HTML4と同様に連絡先情報をマークアップする場合に使用します。しかし、HTML5では記事の著者・Web管理者への連絡先情報に限られるようになりました。

そのため、旧来は見られたコピーライト表記や公開年月数などの情報を含めることはできなくなりました。

small要素

HTML4では、小さい文字を表す要素でしたが、HTML5では免責事項・著作権表記・警告などのテキストや文章の注釈や補足としても使用することができます。コピーライト表記ではこちらを使いましょう。

dl要素

・定義リストにはdfn要素を使用

HTML4では定義リストとして使われていました。HTML5ではdfnが定義要素となります。

<dl>
<dt><dfn>初心に帰って覚えるHTML5</dfn></dt>
<dd>HTML5について新たな気落ちで覚える…</dd>
</dl>

・dt要素とdd要素は関連性がないといけない

dt要素とdd要素は必ず関連性がないといけません。

<dl>
<dt>補足情報</dt>
<dt>ライター</dt>
<dd>らく</dd>
</dl>

上記の場合、補足情報のdt要素が後続のらくにかかっているため正しくありません。このままでは補足情報とライターがらくになってしまいます。下記のように直します。

<dl>
<dt>補足情報</dt>
<dd>補足情報はありません</dd>
<dt>ライター</dt>
<dd>らく</dd>
</dl>

・1つのdl要素の中で、同じ内容を持つdt要素が複数存在していはいけない

新着情報などを作成する際に定義リストを使用すべきではないということです。

<dl>
<dt>2015-10-19</dt>
<dd>ブログを更新しました</dd>
<dt>2015-10-19</dt>
<dd>サイトを解説しました</dd>
</dl>

strong要素

HTML4では強調を伝えるテキストの範囲を表しましたが、HTML5から文章内で強い重要性という意味が加わりました。もし、強調したいのであれば、em要素を使用するようにしてください。

strong要素の使いすぎはSEOの評価が下がってしまいますので注意が必要です。

 

変更点がイマイチわからない要素

b要素

HTML4では太字を表示する見た目の要素でしたが、HTML5では文書内のキーワードや記事リードなどの強調や重要性をもたないが他と区別したテキストを洗わず場合に使用します。

i要素

HTML4では斜体を表示する見た目だけの要素でしたが、HTML5から技術用語などの専門用語や多言語の慣用句、思考・船舶の名前など、他の文章と区別しているテキスト範囲に使用します。

s要素

HTML4では文章テキストの打ち消し線を引く要素でしたが、HTML5では正確ではなくなった内容・関連性がなくなった内容を表す要素となります。

u要素

HTML4では下線を表す要素でしたが、HTML5では漢字での固有名詞を明示するためのラベル付けや単語のスペルミスに対してラベル付けをする場合に利用されるようになりました。

cite要素

HTML4では情報の引用元タイトルやテーマ・作品を表す要素でしたが、HTML5では引用元や参照元となる情報のうち、作品名のみを表すようになりました。
HTML5

hr要素

HTML4では罫線を表す要素でしたが、HTML5では意味的な段落を表すようになりました。テーマの変わり目や参考書の話題に移るときに使用します。セクション区切りに使用することはできませんので注意が必要です。

 

次回から新要素について見ていきたいと思います。

 

おすすめ記事

-未分類

Copyright© RASUKU , 2018 AllRights Reserved Powered by AFFINGER4.