※本ページにはプロモーション(広告)が含まれています
インターネットを使っていると、HTMLという単語を見たことがある人は多いかと思います。
このHTMLにはバージョンがあって、現在では「HTML5」が使われています。
バージョンアップされる毎に使いやすさ・汎用性が広がるHTMLですが、「旧バージョンと最新バージョンの違いが分からない」、「とりあえず最新バージョンを使っておけばいい」、「最新バージョンはすべてのウェブサイトに適応されているかわからないから不安」という人も多いのではないでしょうか。
使いやすくなったと言われるHTML5ですが 現在と従来バージョンの違い は何でしょうか。本記事では合わせて HTML5の特徴も合わせて ご紹介いたします。
目次
そもそもHTMLとは?
![tablet](https://minto.tech/wp-content/uploads/2018/04/pcandtablet-1483974_640.jpg)
インターネットのもととなる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ãã¶ã¤ã³ ãã¼ã¯ã¢ãã ã·ã¹ãã ããã°ã©ãã¼ ã¨ã³ã¸ãã¢ã¼ ã¯ã©ã¦ãã¯ã¼ã«ã¼ ããã°ã©ã ã¢ããªå¶ä½](https://d1f5hsy4d47upe.cloudfront.net/5a/5a35cba0e55d2c1651341711b3bf569e_t.jpeg)
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.プラグインが要らない
以前は動画や画像を見るにもプラグインが必要となった時期もありましたが、HTML5となってからはこのようなプラグインは必要なくなりました。
これらプラグインの代わりに<VIDEO>、<AUDIO>といったタグを使うことでそれらをウエブページに埋め込むことが出来、記述がより簡単になりました。
5.CSS3との連携で動画もOK
いままでは、動画をウエブページ上で動かそうとすると、プラグインなどが必要となりました。それがブロードバンドとなり、いつしか難なく動画も家庭のPCで動かせるようになりました。動画をブラウザで動かすのに何の苦労もなくなって久しいですが、実はこれもHTMLが進化してきているからなのです。
HTML5からは、CSSの最新バージョンであるCSS3と組み合わせることで、アニメーションも再生できるようになりました。
次ページ:HTML5を利用するメリット
1 2