HTML5からの変更点
- 新しい要素や属性の追加
- HTML4以前では使えた要素や属性の廃止
- マークアップにより明確に文書構造を構成
- フォームの入力補助やチェック機能などが充実
- 動画や音声データをHTMLでシンプルに扱える
- HTML5で廃止された要素
マークアップにより明確に文書構造を構成
今までは適切な要素(マークアップ)が無い時には、
HTML5になり、文書構造を表す新しい要素(マークアップ)が加わった事で、明確に文書構造を書く事ができ、「ブラウザ」や「検索エンジン」に対してどのような文章なのかが、伝えられるようになりました。
例をあげますと、 ヘッダー(header)、 フッター(footer)、 一つのセクションを示す(section)、 記事を示す(article)、 ナビゲーションを示す(nav)などの要素が追加され、役割に応じてそれぞれ適切な要素(マークアップ)を割り当てる事ができます。
フォームの入力補助やチェック機能などが充実
フォーム関連の新しい属性が多数追加され、「入力補助」や「入力チェック」などの機能が充実しました。
JavaScriptで作成したいた内容が、 フォーム要素に追加され簡単に指定できるようになりました。
面倒なフォーム作成作業の手間が軽減されコーディングの負担が減るようになりました。
placeholderの追加
|
1 2 3 |
<form> <input type="text" size="50" placeholder="'placeholder'を入力するとこのように表示されます"> </form> |
type=”tel”・type=”url”の追加
type=”tel”・type=”url”を使用するとスマートフォンなどの対応機種で、
それぞれの入力する種類に応じた内容のキーパッドが表示されます。
ユーザビリティによいです。
type=”sarch”を使用すると自動的にフォームが角丸になります。
|
1 2 3 4 5 6 7 |
<form> <ul> <li> <input type="tel"> </li> <li> <input type="url"> </li> <li> <input type="sarch"> <input type="submit"> </li> </ul> </form> |
メールアドレスのチェック
type属性をemailとすると、@を含むメールアドレスの形式になってないものは送信時にエラーを出してくれます。
|
1 2 3 |
<form> <input type="email"> <input type="sarch"> </form> |
フォーカスを当てる
autofocus属性を使用すると、ロードした最初にフォーカスをが当てる事ができます。
|
1 2 3 |
<form> <input type="text" autofocus> </form> |
必須項目を示す
required属性を使用すると、required属性を入れたフォームが未入力の場合エラーメッセージを出すことができます。
|
1 2 3 |
<form> <input type="text" required> </form> |
スピンボックスで数字入力する
type属性にnumberを指定し、min=” ” max=” ” step=” ” を指定するとスピンボックスを表示して数字の入力ができます。
|
1 2 3 |
<form> <input type="number" min="0" max="31" step="2" value="1"> </form> |
入力を補完
autocomplete属性をonにすると、入力するときに入力候補を表示する事ができます。
autocompleteをonにし、datalistタグで候補を入力します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<form method="post" action="example.php"> <fieldset> ペットの種類： <input type="text" name="yourarea" autocomplete="on" list="animal"> <datalist id="animal"> <option value="犬"> <option value="猫"> <option value="うさぎ"> <option value="フェレット"> <option value="ハムスター"> </datalist> <input type="submit" value="送信"> </fieldset> </form> |
動画や音声データをHTMLでシンプルに扱える
audio 要素と video 要素
ウェブにあるビデオを再生する方法
|
1 2 3 |
<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls> Your browser does not support the <code>video</code> element. </video> |
HTML5で廃止された要素
HTML5になり廃止された要素の一部のご紹介
big
big要素は、テキストを一回り大きく表示する際に使用していました。
|
1 |
<p>このフォントサイズよりも<big>フォントが大きく</big>なります。</p> |
このフォントサイズよりもフォントが大きくなります。
center
ディレクトリ型リストを表します要素。
現在ではulにて対応しています。
|
1 |
<p><center>テキストをセンターに配置します</center></p> |
DIR
center要素は、要素およびテキストをセンタリングするために使用しておりました。
|
1 2 3 4 5 |
<dir> <li>あんパン</li> <li>ジャムパン</li> <li>メロンパン</li> </dir> |
font
フォント装飾（色・サイズ・種類）などをhtmlに記載していましたが、今ではcssのみに設定
|
1 |
<font size="-3" color="#666" face="monospace">フォントの大きさとカラー変更</font> |
フォントの大きさとカラー変更
