HTML4とHTML5の違い

Posted on by

HTML5からの変更点

  • 新しい要素や属性の追加
  • HTML4以前では使えた要素や属性の廃止
  • マークアップにより明確に文書構造を構成
  • フォームの入力補助やチェック機能などが充実
  • 動画や音声データをHTMLでシンプルに扱える
  • HTML5で廃止された要素

マークアップにより明確に文書構造を構成

今までは適切な要素(マークアップ)が無い時には、

でくくってしまう事が多かったです。
HTML5になり、文書構造を表す新しい要素(マークアップ)が加わった事で、明確に文書構造を書く事ができ、「ブラウザ」や「検索エンジン」に対してどのような文章なのかが、伝えられるようになりました。

例をあげますと、 ヘッダー(header)、 フッター(footer)、 一つのセクションを示す(section)、 記事を示す(article)、 ナビゲーションを示す(nav)などの要素が追加され、役割に応じてそれぞれ適切な要素(マークアップ)を割り当てる事ができます。

フォームの入力補助やチェック機能などが充実

フォーム関連の新しい属性が多数追加され、「入力補助」や「入力チェック」などの機能が充実しました。
JavaScriptで作成したいた内容が、 フォーム要素に追加され簡単に指定できるようになりました。
面倒なフォーム作成作業の手間が軽減されコーディングの負担が減るようになりました。

placeholderの追加

type=”tel”・type=”url”の追加

type=”tel”・type=”url”を使用するとスマートフォンなどの対応機種で、
それぞれの入力する種類に応じた内容のキーパッドが表示されます。
ユーザビリティによいです。
type=”sarch”を使用すると自動的にフォームが角丸になります。

 

     
    
  •   
    •  
    
  •   
    •  
    
  •    
    •

メールアドレスのチェック

type属性をemailとすると、@を含むメールアドレスの形式になってないものは送信時にエラーを出してくれます。

フォーカスを当てる

autofocus属性を使用すると、ロードした最初にフォーカスをが当てる事ができます。

必須項目を示す

required属性を使用すると、required属性を入れたフォームが未入力の場合エラーメッセージを出すことができます。

スピンボックスで数字入力する

type属性にnumberを指定し、min=” ” max=” ” step=” ” を指定するとスピンボックスを表示して数字の入力ができます。

入力を補完

autocomplete属性をonにすると、入力するときに入力候補を表示する事ができます。
autocompleteをonにし、datalistタグで候補を入力します。


    

    ペットの種類：
ペットの種類：



動画や音声データをHTMLでシンプルに扱える

audio 要素と video 要素

ウェブにあるビデオを再生する方法

HTML5で廃止された要素

HTML5になり廃止された要素の一部のご紹介

big

big要素は、テキストを一回り大きく表示する際に使用していました。 

このフォントサイズよりもフォントが大きくなります。

このフォントサイズよりもフォントが大きくなります。

center

ディレクトリ型リストを表します要素。
現在ではulにて対応しています。 

テキストをセンターに配置します

テキストをセンターに配置します

DIR

center要素は、要素およびテキストをセンタリングするために使用しておりました。 



  • あんパン
    • 

  • ジャムパン
    • 

  • メロンパン
    •

  • あんパン
  • ジャムパン
  • メロンパン

    •

    font

    フォント装飾（色・サイズ・種類）などをhtmlに記載していましたが、今ではcssのみに設定 

    フォントの大きさとカラー変更

    フォントの大きさとカラー変更

    参考サイト

    HTML5リファレンス

    memocarilog

    MDN