HTML4.0とHTML5は何が変わったのか?なぜ変更したのか?その違いと理由について。

ホーム School [BLOG教室™] Lesson Room Pro(有料) HTML4.0とHTML5は何が変わったのか?なぜ変更したのか?その違いと理由について。

タグ: HTML5

このトピックには0件の返信が含まれ、1人の参加者がいます。3 週間、 5 日前 Yuichi Okita さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #985

    Yuichi Okita
    キーマスター

     最終更新日:2018-05-02

    HTML4.0からHTML5を使った記述へ急速に切り替わっている理由と背景

    HTMLは、文章中の語句やフレーズに意味を持たせることが役割ですので、

    「テキストのサイズ・カラー・太字・アンダーライン・イタリック体など文字装飾は、HTMLでは行わず、デザイン関連の指定はCSS(スタイルシート)という言語に任せて、それぞれの言語の役割分担をはっきりとさせていきましょう。HTML5を積極的に使っていきましょう。」

    というWebの流れで、今後ますますHTML5&CSS3以降の表現で作成されたWebサイトが世界的に増加するのは必至です。

     

    これは、

    1. インターネット技術の標準化団体であり、Webの方向性に決定的な影響力を及ぼすW3Cが2016年11月1日に勧告した。
    2. GoogleやMozillaも同調して、HTML5の世界的普及を強力に推進するために、急速な啓蒙運動を展開し続けている。

    このような背景を起因としています。

    Illustration of HTML

    画像をクリックすると、拡大表示されます。
    画像提供:Designed by Freepik

    Webが向かう目標を知ると、HTMLを進化させる正当性が見えてくる

    Webサイトにしろブログにしろモバイル向けアプリにしろ、新しい表現が可能になり、多彩な表現で豊かなユーザーエクスペリエンス(UX)を提供することを目標として、

    HTMLを始めとするWeb言語は進化していっています。

    最近の表現で代表的な例を挙げれば、VR(バーチャルリアリティー)の表現が相当すると思います。

    テレビは大画面の方向へ開発が進化してきましたが、寧ろ専用メガネをかければ臨場感溢れた迫力のあるVR画面で、家に居ながら3D立体映像が楽しめる時代となりました。

    コンパクトなメガネを掛けてテレビを観るライフスタイルなら、大きな電気製品を部屋に設置する必要もなくなり、居住空間が広くなるメリットがあります。

    特に日本は国土が狭いため、世界から「うさぎ小屋」と揶揄される日本の住宅事情には好都合だと、私は考えています。

     

    Webは表現を追求することにより、社会へゆとりある楽しさと幸せを提供する

    少し脱線しましたが、Webはひたすら表現を追求していき、新しい表現を開発するクリエイティブな世界であり、

    その社会的機能は、

    1. 人とコミュニケーションをとる利便性が高くなる。
    2. 物品購入が簡単・スマート・迅速になる。
    3. 金銭の流動性が高まり、人の生活へ劇的な変化をもたらす。

    その結果、

    • 人の暮らしにおいて、時間のゆとりが出来る。
    • 人は仕事や勉強のプロセスにおいて、作業する時間を大幅に削れて考案する部分に対して、より一層エネルギーを注げるようになれる。

     

    平たくいえば、

    「Webが進化すると、人々はゆとりある時間を持てるようになり、その時間を発案や想像に充てることができるため、日々の生活が楽しいライフスタイルを送れるようになる」

    このような主作用や可能性を見出すことが出来ます。

     

     

    なぜ、2014年に誕生したHTML5が、世界へ浸透するのが遅いのか?

    これまでは、Web技術でFlashプレイヤーが使用され続けてきた業界背景により、なかなかHTML5での記述が浸透されにくかったのですが、先に述べた大手組織のGoogleやMoziilaが本格的に乗り出し、Flashを使用しているサイトを原則的に「危険なサイト」とユーザーに明示してきたことで、大手企業サイトを含む世界中のWebサイトが次々と変更されていき、HTML5による表現が一気に加速しました。

    W3CはHTML5以降に完全に切り替わることを望んでいますので、HTML4.0では通用したけれども、HTML5以降では廃止または変更されたHTMLタグを押さえておく必要があります。

     

    HTML4.0とは、私が1997年のときに学んだ言語で、私自身がHTML4.0とHTML5のタグの違いを一番強く把握しておかなければならない重要事項のため、自分の備忘録も兼ねて今回記事をかきました。

     

    HTML5で変更された要素

    HTML4.0からHTML5で変更された要素の対比表

    HTML5では、以下の要素の意味が変更されました。

     要素  (旧)HTML4.0の定義   (新)HTML5の定義
      <a>  リンク  リンク、またはプレースホルダ
     <abbr>   略語  略語や頭字語
      <b>   太字   他と区別されるテキスト
      <p>  改行   改行、またはプレースホルダ
     <cite>  引用元  作品のタイトル・著者名[1]・URL
     <dd>  用語の説明  記述リストの値
     <dl>  定義リスト   記述リスト
     <dt>  定義用語  記述リストの名前
     <em>  強調  ニュアンスに変化をもたらす強調
    <head> 文書のヘッダ メタデータの集まり
    <hr /> 水平線  段落レベルのテーマの区切り
    <i>  イタリック体  他と区別されるテキスト
    <iframe> インラインフレーム    入れ子にされたブラウジングコンテキスト
    <s>  取り消し線 すでに正確ではない内容
    <small> 小さめの文字  細目のような注釈
    <strong> 強い強調 重要性
    <u> 下線付き ラベル付け

    引用元:HTML5/HTML5の基本/変更された要素 – TAG index
    Note[1]: W3Cでは<cite>タグに「人名を含めても良い」とされていますが、WHATWGでは「人名を含めてはいけない」とされています。
    参考:<cite>: 引用元要素 – HTML | MDN

     

    上の表で改めて確認すると、HTMLが「意味を表す言語」としての機能強化がよく分かります。

    TAG indexさんのHTML5リファレンスは、とても分かりやすくまとめておられますので、私のようなHTML4.0の古い癖を持ってる方はもちろん、

    HTMLを全くご存じない方にもHTML5を理解しやすい情報サイトになると思います。

    TAG indexさんのHTML5リファレンスは、http://www.tagindex.com/html5/ にて掲載されています。

     

    CSSすらもまだ世の中で耳にしなかった時代の知識をこれまで引きずっていたので、

    今回はとても大きく前進させて頂けました。

    少しずつ、HTML5を覚えていきたいと思います。

     

このトピックに返信するにはログインが必要です。

Privacy Preference Center

Your Privacy

When you visit any web site, it may store or retrieve information on your browser, mostly in the form of cookies. This information might be about you, your preferences or your device and is mostly used to make the site work as you expect it to. The information does not usually directly identify you, but it can give you a more personalised web experience.

Because we respect your right to privacy, you can choose not to allow some types of cookies. Click on the different category headings to find out more and change our default settings. However, blocking some types of cookies may impact your experience of the site and the services we are able to offer.

gravatar.com,rrating-widget.com

Strictly Necessary Cookies

These cookies are necessary for the website to function and cannot be switched off in our systems. They are usually only set in response to actions made by you which amount to a request for services, such as setting your privacy preferences, logging in or filling in forms. You can set your browser to block or alert you about these cookies, but some parts of the site may not work then.

jsdelivr.com,wordpress.com

Performance Cookies

These cookies allow us to count visits and traffic sources, so we can measure and improve the performance of our site. They help us know which pages are the most and least popular and see how visitors move around the site. All information these cookies collect is aggregated and therefore anonymous. If you do not allow these cookies, we will not know when you have visited our site.

accaii.com

Targeting Cookies

These cookies are set through our site by our advertising partners. They may be used by those companies to build a profile of your interests and show you relevant ads on other sites. They work by uniquely identifying your browser and device. If you do not allow these cookies, you will not experience our targeted advertising across different websites.

amazon.co.jp,rakuten.co.jp

3rd-parties

We uses cookies to help us identify and track visitors, their usage of this website, and their website access preferences.

facebook.com,twitter.com,google.com,linkedin.com.com
https://www.facebook.com/policies/cookies/
https://policies.google.com/technologies/types
https://support.google.com/analytics/answer/181881?hl=ja
https://www.linkedin.com/legal/cookie-policy

Major browser help page

How to set cookies in browser.

Google Chrome: https://support.google.com/chrome/answer/95647?hl=en Internet Explorer https://support.microsoft.com/en-us/help/260971/description-of-cookies Mozilla Firefox https://support.mozilla.org/en-US/kb/cookies-information-websites-store-on-your-computer Safari (デスクトップ) https://support.apple.com/kb/PH5042?locale=en_US Safari (モバイル) https://support.apple.com/en-us/HT201265 Androidブラウザー https://support.google.com/nexus/answer/54068?visit_id=1-636621905069450730-928182436&hl=en&rd=1 Opera https://www.opera.com/help Operaモバイル https://www.opera.com/help/mobile/android#privacy