初めまして。CyberGreenWEBの更新作業をすることになりました新人のフローラです。これから皆様のお役に立つような記事を掲載していきたいと思いますので、よろしくお願いたします！
久しぶりにWEB制作の仕事に戻り分からないことだらけですが、その中でもまずHTMLの基本について勉強し直したいと思います。現在の主流はHTML5。HTML4との違いを見比べてみます。

HTML5とは

2014年10月勧告。現在では、ほとんどのブラウザで対応しているようです。
新しい要素が加わり意味のあるマークアップができることになったことにより、文書構造をより明確に表すことができるようになりました。
DOCTYPE宣言とエンコーディングについては下記の通りです。

  • DOCTYPE宣言

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

    HTML5
    <!DOCTYPE html>

  • エンコーディング

    HTML 4.01 Transitional
    <meta content=”text/html; charset=utf-8″ http-equiv=”Content-Type” >
    HTML5
    <meta charset=”utf-8″>

 新しい要素、廃止された要素

では新しい要素、廃止された要素を見ていきたいと思います。
書構造用タグが多く用意されています。
例えば<head>タグ。HTML5で追加されました。
HTML4では<div id=”header”>～ヘッダー</div>などと書いていたものですが、<head>ヘッダー</head>となるわけです。シンプルでキレイなソースですね。
他にもセクションは<section>、ナビゲーションは<nav>、時間は<time>など。
反対に廃止された要素をいくつかご紹介します。
<center>（テキストをセンタリング）、<font>（フォントのスタイルを設定）、<blink>（テキストをチカチカと光らせる）など。こちらはHTMLでスタイルを表現するものでしたが、CSSで指定するようになりました。
HTMLがシンプルになりますね。
このようにCSSで指定できるものは廃止になりました。
他にも仕様自体完全に廃止になった要素（など）や別の要素で代替する要素もあります。

 動画や音声データを簡単に埋め込みできる

<video>や<audio>といったHTML5のタグを使用することで動画や音声が簡単に扱えるようになりました。
スマートフォンでも同じタグを使うことが可能です。

 その他
  • スマートフォンブラウザは標準対応（機種依存有り）。
  • フォームの入力制御がHTMLで行えるようになった。
  • 様々なAPIが追加され高度な機能のウェブアプリケーションが作りやすくなった。

とてもメリットも多いHTML5。これから勉強する方にはおすすめできそうですが、非対応ブラウザを使うユーザ（IE8以前など）もまだ多いためHTML4もまだ完全には捨てられないようです。

投稿者プロフィール

kinukawahiroyasu
投稿タグ
,