HTML5をすごく分かりやすくはじめての人に説明

HTML5 HTML
福岡友だち作り交流会ARRIVO

HTML5はHTMLの最新バージョン

HTML5はHTMLの最新バージョンです。その前のバージョンはHTML4です。iphone8の前はiphone7と同じようにとらえていただくとわかりやすいかと思います。

HTMLはスイスが発祥!

HTMLは1993年にスイスで開発されてバージョンアップを繰り返して今一番最新ですごくわかりやすく簡単になったのがHTML5です。

HTML1は1993年スイスが発祥からHTML2、3とバージョンアップHTML4.01が1999年から現在HTML5

1999年html4.01から2014年HTML5へ

図のように1993年HTML1から現在HTML5です。

でも今からHTMLを学ぶ人はHTML1から学ぶ必要なくHTML5から学び始めて大丈夫です。iphone3からはじめないとiphone8が使えない訳ではないのと一緒です。

HTMLは難しいイメージ!HTML5は簡単になった。

HTMLに苦手意識を持っている人も多いのですが、HTML5のバージョンアップで簡単になったんです。難しいイメージの一つにブラウザによって表示が変わる事がありました。chromeでの表示のされ方とIE(インターネットエクスプローラー)での表示の仕方が違う事がしょっちゅうあってたのですが、HTML5になってブラウザをほとんど気にせずにHTMLが使えるようになったのです。

HTMLはハイパーテキストマークアップラングエッジ

HTMLはHyperText Markup Languageの頭文字をとってHTMLです。ハイパーテキストマークアップラングエッジと呼びます。

  • HyperText
  • Markup
  • Language

の三つに分けるとわかりやすいです。

「HyperText」

HyperTextはテキストを超えるの図

「テキストを超える」HyperText

ハイパーテキストは「テキストを超えた」と言う意味です。Textは文書と言う意味で、Hyperは〜を超えたと言う意味です。テキストを超えたテキストがハイパーテキストです。

複数の文書を行ったり来たり超えて行くので「テキストを超えた」となります。

どうやってテキストを超えるの?

テキストを超える方法がハイパーリンクです。リンクの正しい言い方はハイパーリンクです。今では誰でも知ってるし使ってます。リンクはつなぐとか結びつけると言う意味です。

ハイパーリンクを使って、文書(テキスト)と文書(テキスト)を結びつける事とハイパーテキストです。

Markup

マークアップは機械にわかりやすいような印をつける事

マークアップは「印をつける」と言う意味です。HTMLを書く事をマークアップすると言う言い方をする事もあります。本や小説だとタイトルや見出しがあります。ホームページも同じでタイトルや見出しがあります。どこがタイトルでどこが見出しかを機械に教えるのがマークアップする(印をつける)と言う事です。

機械は見た目ではタイトルや見出しを判断できない

人間は文字の大きさや改行の仕方。余白の使い方でここがタイトルでここが見出しでと判断する事ができますが、機械は見た目ではわかりませんのでマークアップして教えてあげる必要があります。

Language

ラングエッジは言語と言う意味です。マークアップ言語とかプログラミング言語とかパソコンには言語があります。英語が話せると英語圏の人と話ができるように、パソコンで使う言語を覚えるとコンピューターが正しくわかるホームページが作れるようになります。同じ内容なら正しい言語の方がよりよい検索結果につながりやすいです。

HTML5になってわかりやすくなったポイント!

より明確にわかりやすく文書構造を伝える事ができるようになった

Html5になってわかりやくなったポイント!文書構造がわかりやすくなった事の図での比較。<header>や<section>とわかりやすいタグが増えた!

図のように、HTML4では、ヘッダーやフッターを表す要素がありませんでしたので、<div>と言う意味を持っていない要素を代わりに使っていました。HTML5になって新しい要素を加える事ができるようになりました。

図で紹介したHTML5の文書構造を示す要素

  • <header>
  • <nav>
  • <section>
  • <article>
  • <footer>

<header>はヘッダーである事を示す要素。<nav>はナビゲーションを示す要素。グローバルメニューとかですね。<section>はひとつの文書の中のひとまとまりです。<article>主要なコンテンツを示し、<footer>はフッターです。一つ一つの要素についてはまた別の記事で書きますね。

今までjavascriptを使っていた入力フォームもHTML

HTMLで入力フォームを作れるようになりました。サイトを見た人とのやりとりが行われるのもホームページでは必須の機能です。個人のブログでもやりとりが行われてます。

HTML4までは入力フォームはjavascriptと言う別の言語を使っていたのですが、HTML5からは入力フォームもHTMLを使うようになりました。

HTML5を使った入力フォームは作成する人にも フォームに入力する側にもどちらにもメリットがある大きく変わったポイントです。フォームの作成が簡単になりました。

動画や音声が簡単になったのでFlashが必要なくなった

HTML4まではFlashと言うプラグインを入れて表示させるのが普通だったのですが、すごく面倒でわかりにくいなぁと思っていました。HTML5で動画や音声をひとつの要素で使えるようになったのはすごく画期的な事です。<video>や<audio>と言う要素を使うのですが、写真を入れる感覚で動画や音声を入れれるようになりました。トップページの一番いいところに動画を入れるのも簡単になりました。

HTML5から使えるAPIでウェブアプリケーションが使えるように

API は「Application Programming Interface」の略称でアプリケーションをプログラミングする時の決まりごとの事です。

youtubeの埋め込みや図書館ライブラリを使えたり、ユーザーの位置情報を取得する事ができるのもAPIの力です。たまに、近くの店舗を探す!とかで勝手に近くのお店が出てきたりしますね。カメラのAPIを使うとスマホのカメラから画像を使ったり保存したりする事も可能です。すごく高度な機能を個人が使う事ができる事もすごい魅力です。

HTML5をCSS3と一緒に使ってアニメーションもできる

HTML5ではアニメーションも使えるようになります。アニメーションが使えるとできる事の幅がすごく広がります。

まとめ

HTML5に至るまでの歴史とできる事を中心に作成された記事です。今からはじめる人はHTML5からはじめましょう。HTMLの基本や実際HTMLを使うには、タグの説明は別の記事で紹介していますので、ご覧になられてください。

タイトルとURLをコピーしました