LotosLabo

プログラミング技術とか気になった情報を載せていきます

HTML5で変更・追加されたところ1

HTML5で変更・追加された所を挙げていきます。


f:id:lo25131:20140131185729p:plain


変更された所

宣言の仕方


HTML4.01では

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


こんな感じでした。

しかしHTML5では

<!DOCTYPE html>



こんなに短くなりました。

文字コード

HTML4.01では

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">



と書くのがとてもめんどくさいですが、


HTML5では

<meta charset="UTF-8">



こんなに簡単に書くことが出来ます。

アンカーリンクの使い方が変更


HTML言語を触ったことがない方向けにもアンカーリンクについて説明します。

アンカーリンクとは、同じドキュメント内で移動を可能にするハイパーリンクの1つです。
長い文章や多くのセクションを含む場合に、アンカーリンクを設置することで移動を簡単にできます。

以前までの設定

例:

<h1><a id="top" name="top">コンテンツ2</a></h1>

<a href="top">コンテンツ2</a>


HTML5では

<h1 id="top">〇〇</h1>


これで設定できる

アンカーを表すためだけにa要素を使うことはできなくなり、nameも廃止になった。

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

<a href="URL" taeget="_blank">リンク</a>



リンクを別ウインドウで表示されるtarget属性が非推奨ではなくなりました。

a要素でdivや複数の要素を囲めるようになった

<a href="http://">
<div class="topic">
<h1>あ</h1>
<h2>い</h2>
<p>す</p>
</div>
</a>



a要素でdivやp、h1などの要素を囲めるようになった。
しかしbutton要素やiframe要素などのインタラクティブ・コンテンツは囲めない。


address要素

アドレスといえば住所という意味だが、これが連絡先情報以外の情報を含んではいけなくなりました。

基本的に後々説明するfooterの中で使うことになります。


正しい使い方:

<footer>
<address>当ブログの連絡先
<a href="mailto:yahooo.co.jp">yahuu</a>まで。
</address>
</footer>



b要素

bタグは太字だったが、strongタグが太字の意味になったため、b要素は鏡夜重要性を持たないが、他と区別したいテキストを表すときに使用するようになった。
b要素はstrong要素・em要素・mark要素・cite要素などに属さない場合に使用できる。

<p>先輩、<b>こんにちは</b>っす</p>



cite要素

これまで情報元の書籍や論文などの著者名を製作者の解釈によって使用する事があったが、人名に使うことは出来なくなり、情報の引用元タイトルやテーマ・作品を表す要素となった。

<p>この記事のタイトルは<cite>LotosLabo</cite>です。</p>



dl要素

以前までは定義型リストでした。すなわち説明するためのリストです。
定義型リストはdt要素に用語、dd要素に用語の説明を入れ、dl要素内にどちらか1つを単独で含めなければなりませんでした。

しかし、HTML5では定義リストではなく記述リストとして使用されることになり、一個以上ではなくゼロ個以上になりました。

<dl>
 <dt><dfn>Twitter</dfn<</dt>
 <dd>SNSサイト</dd>
</dl>


dfnというのは定義された用語を明示的に表すことです。ブラウザでは斜体で表示されます。


hr要素


hr要素は罫線を表す要素でしたが、HTML5では意味的な段落を表すようになりました。しかし、セクションの区切りに使用することはできません。

<p>あああああああああ</p>
<hr>
<p>いいいいいいい</p>



i要素

イタリック体(斜体)を表すだけだったが、技術用語や多言語の慣用句の名前など他の文章と区別していたいときに使う。

<p>我の名前は<i>ダークメシア</i>だ</p>



s要素

文章のテキストの打ち消し線の意味であったが、HTML5では正確ではなくなった内容や関連性がなくなった内容を表すようになった。

<p>今ならこのブルーレイレコーダーの価格をなんと<s>7万円<s>5万円で販売します。</p>



small要素

小さい文字を表す要素だったが、著作権表記、警告、文章の注釈に使われるようになった。

<footer>
<p><small>©LotosLabo</small></p>
</footer>



strong要素


強い強調という意味であったが、強い重要性という意味に変わった。複数使い段階でわけることで重要性の強さを分けられる。

<p>面接「今、あなたが欲しい物は何ですか?3つ答えてください」

<p>私「1つ目は<strong>御社からの内定</strong>です。2つ目に<strong>お金</strong>です。そして3つ目は<strong>彼氏</strong>です。」</p>



em要素

強調という意味でしたが、アクセントを付けるという意味になりました。

<em>彼女</em>はとてもかわいい


名詞、形容詞、動詞どれかにつけることに文章の意味が変わってきます。


u要素

下線の意味であったが、固有名詞を明示する他の部分と明確に区別しにくいところを示すための要素です。

<p><u>メアリー</u>のお母さんは男である。</p>


その他にも
abbr(略語→略語+頭字語)
iframe(インラインフレーム→ブラウジングコンテキスト)
menu(メニュー型のリスト→コマンドのリスト)

などがあります。


HTML5で廃止された要素

basefont   基準のフォントサイズ
big      大きめの文字
center    センタリング
font     フォントのサイズ・色・種類
strike    取り消し線
tt      等幅フォント
u       下線
frame     フレーム内の設定
frameset   ウインドウの分割
noframes   フレームの代替コンテンツ
acronym    略語(頭字語)
applet    Javaアプレットの埋め込み
isindex    1行のテキスト入力欄
dir      ディレクトリ型のリスト
bgsound    BGMの再生
blink      文字の点滅
marquee    文字のスクロール
nobr     改行させない
noembed    embed要素の代替コンテンツ
rb       ルビベース
listing ソースをそのまま表示する
spacer スペースを挿入する
xmp      ソースをそのまま表示する