Home / ネットワーク・IT / IT基礎知識 / HTML / 初心者にも使いやすくなった!HTML5と従来バージョンの違い5つ

初心者にも使いやすくなった!HTML5と従来バージョンの違い5つ

※本ページにはプロモーション(広告)が含まれています

インターネットを使っていると、HTMLという単語を見たことがある人は多いかと思います。

このHTMLにはバージョンがあって、現在では「HTML5」が使われています。

バージョンアップされる毎に使いやすさ・汎用性が広がるHTMLですが、「旧バージョンと最新バージョンの違いが分からない」、「とりあえず最新バージョンを使っておけばいい」、「最新バージョンはすべてのウェブサイトに適応されているかわからないから不安」という人も多いのではないでしょうか。

使いやすくなったと言われるHTML5ですが 現在と従来バージョンの違い は何でしょうか。本記事では合わせて HTML5の特徴も合わせて ご紹介いたします。

そもそもHTMLとは?

tablet

インターネットのもととなるHTMLですが、そもそもHTMLは何なのでしょうか?まずはこれからご紹介いたします。

1.Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)

HTMLとは、Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略で ホームページを作る言語 となっています。

これは「マークアップ言語」と言われるもので、「ホームページの裏側」などと呼ばれたりもしますね。

これらは「ソース」とか「ソースコード」と呼ばれ、ホームページの表示や動作を命令する言語です。

具体的なところでは、見出しや段落、表やリストをはじめ、太字や色文字、また画像や動画、音声ファイルなどを埋め込むことができるのです。

2.リンク

リンクもHTMLの特徴のひとつです。ホームページってただ、字を読んでるだけではありませんよね。青色など色が変わったところをクリックすると、他のページに飛んだりできます。これらはリンクとかハイパーリンクと呼ばれ、指定のタグ<a href=”リンク先へのURL”></a>を用いることでその命令が実行できます。

3.画像を表示する

また、ホームページを見ていると、きれいな画像が貼られていますよね。これもHTMLでタグの<img src=”画像ファイルへのURL”>を書くことで、ホームページに画像を表示することができます。

これはかなり昔から、PCが一般的になりだした1990年頃から実装されていた技術ですね。現在では画像を表示するばかりか動画などのムービーも表示することができます。

HTML5で出来るようになったこと5つ

 ãƒ“ジネス 仕事 室内 テーブル PC ノートパソコン Mac マック パソコン インターネット 情報 WEBサイト 入力 打つ 働く 会社 オフィス オフィスワーク デスクワーク サービス 通信 キーボード 事務 デスクトップ モニター 画面 デスク 背景 IT コンピュータ 作業 コンピューター 作る ネットワーク コード 電子機器 クラッカー ソース 開発 アプリ ネット デジタル インフラ イメージ デザイン 職人 職業 小物 セキュリティ テクノロジー 技術 インターフェース ブラインドタッチ スクリーン 労働 製作 言語 ワーク ディスプレイ 叩く 制作 セキュリティー サーバー 企業 設計 ノートPC クラウド 情報処理 ï¼°ï¼£ デザイナー アプリケーション 制御 インターフェイス システム ソフトウェア 電子 労働者 業務 ビジネスパーソン ディスプレー 分析 コマンド 技術者 エンジニア オンライン ハイテク 依頼 WEB ホームページ ブログ 技術職 アウトソーシング ハッカー ハッキング プログラム サイバー 羅列 専門職 HP 副収入 副業 パソコン操作 データベース スキル ウェブ 在宅 クラウドソーシング フリーランス SE プログラミング クリエイティブ クリエイター 解析 クラッキング ウェブサイト パソコンスキル ウェブデザイン ウェブデザイナー コーディング バーチャル JavaScript プロフェッショナル web開発 デバッグ プログラマー システム管理 ソースコード HTML 制作者 Java プログラミング言語 コーダー php 開発者 エンジニアリング 外注 サイト制作 hpデザイン マークアップ システムプログラマー エンジニアー クラウドワーカー プログラマ アプリ制作

HTML5はHTMLの5回目の大幅なバージョンアップだと言われています。そのため、いままで出来なかったことができるようになったと言われています。それでは、HTML5になって、どんなことが新たにできるようになったのでしょうか?今までのHTMLとの違いをご紹介いたします。

1.プラグインなしで動画や音声が実行できる

かつてはPCを使っていて「プラグイン」をダウンロードしなければ、表示が見れなかったり、音が聞こえなかったりということが起こりました。しかし、HTML5では、このようなプラグインがなくても、例えば 動画や音声をページに埋め込むことができるように なりました。

2.より簡単な文章構造になった

HTML5では、複雑な文章構造だったHTML4に比べてすごくすっきりと シンプルな文章構造 になりました。というのもタグ(<>)を使うことでいままでは<div id=>や<div class=>などと表示していたものが

<article>、<section>などシンプルな表示でよくなりました。そのため、複雑な文字の羅列であるタグ打ちに精力を使い果たすということもなくなりました。

3.Webページが作りやすい

文章だけではなく、画像や動画、音声ファイルなど、いろいろな要素が組み合わさってできているWebページ。HTML4までは、画像をはじめ、動画や音声ファイルなどを埋め込むには、長いタグを打たなくてはなりませんでした。

HTML5からは、これら高度な機能を実現するためのApplication Programming Interfaceの頭文字を取ったAPIが追加されることとなるため、難しいコードを書くことなく、誰でも簡単に実装できるようになりました。

具体的な例でいうと、自分の位置情報やドラッグ&ドロップ機能を追加するなどです。これらを簡単に実装できるのがHTML5の特徴のひとつと言えます。

4.プラグインが要らない

サラリーマン 男 男性 会社員 ビジネスマン ビジネス 人物 メール 手 手元 PC ノートパソコン パソコン インターネット 情報 家庭 学習 コミュニケーション 入力 管理 会社 オフィス 通信 キーボード ファイル 社内 青 ブルー クール 背景 人 攻撃 ビジネスイメージ 課題 IT コンピュータ データ コンピューター 機械 ネットワーク コード 指 ネット ウイルス デジタル バックグラウンド アクセス 青色 グラフィック バック 未来 セキュリティ グローバル ビジネスシーン テクノロジー 最先端 技術 モバイル 通信機器 指先 CG 金融 賢い 知的 狙う 近未来 セキュリティー サーバー 標的 企業 歯車 電波 プライバシー ウィルス クラウド ターゲット 職場 情報処理 個人情報 アタック システム ユーザー 犯罪 ビジネスパーソン 無線 プラットフォーム 狙い リスク 分析 エンジニア レーダー オンライン ハイテク ダウンロード グラフィックデザイン ホームページ パスワード 匿名 ハッカー ハッキング サイバー攻撃 違法 プログラム シェア サイバー デジタルイメージ ミッション 感染 ソリューション 共有 サイバー空間 データベース 電脳 仮想空間 マイナンバー SE プログラミング Wifi 解析 AI CG システムエンジニア 先進性 ウェブサイト IOT 漏洩 イノベーション 人工知能 先進的 情報漏洩 ファイナンス 情報通信 ビッグデータ 情報管理 バーチャル プログラマー ウィルス対策 vr サイバーセキュリティ サイバーセキュリティー フィンテック fintech ブロックチェーン バーチャル空間 サイバーイメージ バーチャルイメージ 情報セキュリティ ランサムウェア

以前は動画や画像を見るにもプラグインが必要となった時期もありましたが、HTML5となってからはこのようなプラグインは必要なくなりました。

これらプラグインの代わりに<VIDEO>、<AUDIO>といったタグを使うことでそれらをウエブページに埋め込むことが出来、記述がより簡単になりました。

5.CSS3との連携で動画もOK

いままでは、動画をウエブページ上で動かそうとすると、プラグインなどが必要となりました。それがブロードバンドとなり、いつしか難なく動画も家庭のPCで動かせるようになりました。動画をブラウザで動かすのに何の苦労もなくなって久しいですが、実はこれもHTMLが進化してきているからなのです。

HTML5からは、CSSの最新バージョンであるCSS3と組み合わせることで、アニメーションも再生できるようになりました。

次ページ:HTML5を利用するメリット

1 2

Check Also

HTMLで画像表示の方法と表示されない時の9つの原因

意外と簡単!HTMLで画像表示の方法と表示されない時の9つの原因

HTMLでも簡単に画像表示がで …