HTMLとは?初心者でも10分で理解出来る知っておくべき基礎知識

こんにちは!侍エンジニア塾ブログ編集部です。

これからプログラミング学習や、HP作成などに取り組んでいこうとしている方が、まず最初に聞く単語といえば、「HTML」だと思います。

しかし、「HTML」を学習する上で

「何から学べばいいかよく分からない・・。」
「結局何が出来るプログラミング言語なの?」

と思う方も多いですよね。

「HTML」は、WEBの世界においては基礎となるものなのですが、調べてみても専門用語が多くてわかりづらいということもあるでしょう。

そこで今回は、なるべく専門用語を使わずに、初心者でも10分で理解できるようにHTMLとはどういうものなのか?を説明していきます!

これからWEBに触れていく方はぜひ参考にしてみてください!

HTMLとは?

shutterstock_549472756
HTMLとは、Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略で、Webページを作成するためのMarkup(マークアップ)言語となります。

リファレンスではHTMLについて、以下のように説明されています。

HTML(エイチティーエムエル、HyperText Markup Language)は、ウェブページを作成するために開発された言語です。 現在、インターネット上で公開されてるウェブページのほとんどは、HTMLで作成されています。

引用元:http://www.htmq.com/htmlkihon/001.shtml

今あなたがスマホやPCでみている画面(WEBページ)は、基本的にはこのHTMLという言語(文字)によって作られています。

「Markup:マークアップ」というのは「印をつける」という意味です。
文字に印(タグという)をつけていくことでそれぞれ意味づけをして、画像や表を見れるようにすることができるのです。

WEBページが言語で作られているとは?

WEBページが言語(文字)で作られていると聞いても、少しイメージがわきづらいかもしれませんね。

例えば、閲覧しているWebページで右クリックをして、「ページのソースを表示」を選択してみてください。

スクリーンショット_2016-06-13_14_41_53

そうすると、このような画面が出ます。

スクリーンショット 2016-06-13 14.42.11

このように、WEBページの正体は、「HTMLでの印づけを使って構成されている文書」であり、これがブラウザで読み込まれることで、Webページが表示されているのです。

ソースコードは、あらゆるWEBページで見ることができるので、好きなページで試しに覗いてみてもいいでしょう。

ハイパーテキストって?

「HyperText:ハイパーテキスト」とは、ハイパーリンクを埋め込むことができる高機能なテキストです。

ハイパーリンクというのは、ウェブページで下線の付いたテキストなどをクリックすると別ページへ移動する、あのリンクのことです。

ハイパーテキストでは、WEBページから別のウェブページにリンクをはったり、 WEBページ内に画像・動画・音声などのデータファイルをリンクで埋め込むことができます。

HTMLには、このハイパーリンク機能で関連する情報同士を結びつけて、情報を整理するという特徴があります。

普通の文字じゃダメなの?

リンクを使ったり、タグで意味づけをしたりと、初めて学んでいく方にとっては少し複雑に感じるかと思います。

なぜこのように一見面倒くさいことをするのかというと、シンプルに言えば、「コンピューターが理解できるようにするため」です。

文書内の各部分に目印をつけて、その部分がどんな要素なのかを明確にすることで、コンピュータがその文書の構造を理解できるようになります。

外国の方と英語でコミュニケーションをとるように、コンピューターとの間にも適したコミュニケーション方法があるということですね。

HTML5とは

そんなHTMLもバージョンアップを繰り返して進化していきます。

2017年時点のHTMLの最新バージョンはHTML5になります。

HTML5については、以下の記事で詳しく解説していますので、合わせて参考にしてみてください。

専門知識なしでもすぐ分かるHTML5とは?

HTMLがわかるとなにが良いの?

shutterstock_354018575

WEBの仕組みがわかる

ほとんどのWEBページはHTMLとCSSで作られています。

そのため、HTMLでWEBページを作成することができれば、WEBの仕組み全般が分かるようになります。

CSSについては以下の記事でおすすめの書籍を紹介していますので、合わせて参考にしてください。

CSSの基本がしっかりわかる!おすすめ書籍10選

WEBデザインもできる

HTMLはWEBデザインの最も基本でもあります。自分でHTMLでWEBページを作成することができれば、WEBサイトやブログのデザインを変更したり、装飾することもできるようになります。

そのためにはHTMLの基本や構成、後述するタグの使い方について、しっかりと理解しておくことが大切です。

HTMLファイルを作ってみよう!

shutterstock_576763348
ここでは、実際にHTMLファイルを作成していきましょう。

HTMLファイルを作成するには、拡張子「.html」をつけてファイルを新規に作成します。

ここではファイル名を「sample.html」とします。

HTMLは以下のように記述します。

このファイルを保存して実行すると、以下のように表示されます!
sample_html_01

このHTMLでは、h1、h2、h3がそれぞれの見出しとなります。

見出しの下の「侍エンジニア」の部分がリンクとなりURLと「侍エンジニア」と記載することで、クリックするとURL先のページへ移動します。

HTML基礎編!よく使うタグを紹介

HTMLはタグというものによって構成されています。

先ほど紹介したサンプルのタイトルや見出し、リンクなどの他にも装飾や画像の表示など、すべてタグによって作られているのです。

WEBサイトを表示するために欠かせない部品と覚えておきましょう。

このタグはめっちゃめちゃ種類があるので、全部覚えるのはなかなか大変です…
今回はそんな中でも、これだけは覚えておくべき基礎中の基礎となるタグをご紹介していきます!

リンクを貼ろう/aタグ

WEBサイトに欠かせない、他ページへのリンクを指定するタグです。

HTML

画面での表示

これで文字をクリックすれば、指定したURLへ移動することができます。

画像を表示する/imgタグ

ただ文字だけのWEBサイトなんてつまらないですよね。
写真などの画像を表示するには、下記のようにimgタグというものを使います。

HTML

画面での表示

画像のパスとは、画像がどのフォルダに入っているのかを指定するものです。

HTMLで画像を表示する際、直接画像のデータを貼り付けるという訳ではありません。
他の場所にある画像のデータを持ってきて、文字などと一緒に表示するという仕組みになっています。

そのため、URLにちょっと似ているパスというものを使って、ファイルの場所を指定してあげるのです。

ここについては下記の記事でも詳しく解説しているので、併せてチェックしてみてください。

HTMLのパスってなに?活用方法をまるっと解説!

これはリストです/ulタグとliタグ

箇条書きのリストにもわざわざタグが用意されています。
下記のように、ulタグの中にliタグを入れて使うようにしましょう。

HTML

    • リスト項目1

 

    • リスト項目2

 

    • リスト項目3

 

    • リスト項目4

 

 

画面での表示

項目の頭に点がついた状態で表示されますね!
リストっぽい感じに表示されて、なかなかいい感じです。

特に意味なし/divタグとspanタグ

見出しを見て、「特に意味ないなら覚えなくてもいいんじゃない?」と思った方、甘い!

実はこのタグがHTMLで一番重要と言っても過言ではないのです。

まずは書き方をチェック!

HTML

テキストが入ります

テキストが入ります

画面での表示

うん、何もおきませんね。
この何もおきないのがとっても大事なんです。

divタグとspanタグには、特に意味づけがされていません。
なので、どんな場面でも使うことができるタグです。

例えば、「見た目を整えるためにいくつか文字のグループを作る必要がでてきた」なんて時、この意味がない2つを使えばうまくグループ分けができるのです!

今はちょっとまだ想像ができないかもしれません。
しかし超重要タグなので、存在だけはしっかり覚えておきましょう!

HTMLタグは他にもたくさん!

もちろん、タグは他にもたくさんの種類があります。
それぞれ必要な場面で活用できると、あなたのHTMLはぐんぐん上がっていくことでしょう!

どんなものがあるのかチェックしたい方は、下記のリファレンスなどを参照してみてくださいね。

HTMLタグリファレンス(ABC順)
HTMLタグ一覧

HTMLを効率よく学習するには?

HTMLが学べる入門サイト

ここまでで、HTMLの内容や書き方についてだいたいのイメージは付きましたでしょうか?

以下のサイトでは初心者の方でも効率よくHTMLが学べるサイトを紹介していますので、ぜひ参考にしてくださいね!

初心者必見!HTML/CSSの基礎が分かる入門サイト7選

HTMLを効率よく学習するための書籍を紹介!

以下のサイトでは入門者向けや、レベル別におすすめの書籍を紹介しています!

合わせて参考にしてください!

HTML学習ならこれ!目的別おすすめ学習本6選

まとめ

ここではHTML入門者に向けて、HTMLの基本から書き方などについて解説しました。

はじめはとっつきにくいかもしれませんが、HTMLはWEBページを作る際に最も基礎的な部分となりますので、使い方についてはよく理解しておきましょう。

これを機に、HTMLを少しずつでも学習していき、WEBの理解を深めていってもらえれば嬉しいです!

おすすめのコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

「何の言語から勉強すればいいかわからない・・・」そんなあなたに質問に答えていくだけで、何の言語を学べば良いのか診断いたします!未経験から6ヶ月でプログラミング習得に向けた学習プランが1分で分かる!

自分にプログラミングなんて・・・と思っていませんか?

今後10年間で今ある職業の『77%』はなくなると言われています。

人工知能や機械学習を筆頭にVR、AR、ドローンなどの最先端技術の発達はこれからのあなたの働き方に間違いなく影響を与えるでしょう。

将来を見据えてプログラミングができるようになってエンジニアになりたい、自分だけにしかできないクリエイティブな仕事がしたい、、、とお考えの方も少なくないでしょう。

と、同時に「難しそう、、自分にはできないだろう、、、」と諦めている方も多いのではないでしょうか。

弊社マンツーマンレッスンは、お一人お一人に専属のインストラクターがつくので、通常のスクールでは難しい、オリジナルアプリ開発や、フリーランスとしての仕事獲得まで支援しています。

まずは『無料体験レッスン』で弊社コンサルタントと一緒にあなた専用の学習カリキュラムを考えてみてはいかがでしょうか?

詳しくは下の画像をクリックしてください。

cta_mtm2

非常識な結果を出す卒業生多数!

エンジニアキャリア戦略

人気記事セレクション

3000名以上来場の人気セミナーが開催決定

18歳で時給6000円だった侍エンジニア塾代表の木内より、『プログラミングで人生を変える』ための学習方法をお教えます。

0からプログラミングを習得し、フリーランスエンジニアになる方法プログラミング学習の効率を劇的に上げる学習メソッドを解説しますので、奮ってご参加ください。

  • 日付:3/30(日)
  • 時間:14:00〜17:00終了予定
  • 場所:当社 道玄坂オフィス
  • 住所:〒150-0043 東京都渋谷区道玄坂2丁目11-1 Gスクエア渋谷道玄坂 4F *Googleマップでは「東京都渋谷区道玄坂2丁目11-1」で検索してください。近隣にスクエア渋谷という別のビルがあるためご留意ください。
  • 参加費:無料
  • URL:https://seminar.sejuku.net/
詳しくは下の画像をクリックして弊社セミナー内容をご確認ください。

LINEで送る
Pocket

この記事が気に入ったら
いいね!をしてフォローしよう

最新情報をお届けします

書いた人

侍エンジニア塾ブログ編集部

侍エンジニア塾ブログ編集部

侍エンジニア塾は「人生を変えるプログラミング学習」をコンセンプトに、過去多くのフリーランスエンジニアを輩出したプログラミングスクールです。プログラミングに役立つ情報や有用な情報を発信していきます。
ホームページはこちら
ツイッターはこちら
フェイスブックはこちら