超初心者向け!HTMLとは何か?基礎から使い方まで徹底解説!

侍エンジニア塾ブログ編集部
侍エンジニア塾ブログは、未経験からWebアプリ開発と仕事獲得をサポートする
侍エンジニア塾のオウンドメディアです。
プログラミング学習を覗き見

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

これからプログラミング学習や、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については、以下の記事で詳しく解説していますので、合わせて参考にしてみてください。

>>【10分でわかる】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にちょっと似ているパスというものを使って、ファイルの場所を指定してあげるのです。

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

>>パスって何?どんな風に指定すればいいのかもしっかり解説!

これはリストです/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入門】初心者でもホームページ作成が学べるサイト5選

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

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

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

>>HTMLを学ぶのに最適な本を5冊紹介する
>>その本で大丈夫?目的別「HTML」おすすめ学習本6選

まとめ

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

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

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


33歳、未経験だった僕がフリーエンジニアになれた理由
現在フリーランスをされている市川友哉さん。33歳で、プログラミングを学び始め、4ヶ月という短い期間でフリーランスエンジニアとして独立までされた学習ログを余すことなくインタビューさせていただきました。

プログラミングを学習中の方はもちろん、独立をお考えの方まで幅広く活用できる記事になっています。この機会に是非活用していただければと思います。


未経験者でも安心の徹底サポート!まずは完全無料の体験レッスン!

「プログラミングに興味があるけど未経験だし、、、」とお悩みの方はご安心ください。

  • 24時間質問し放題
  • あなただけのオーダーメイドカリキュラムで学習の効率化
  • 仕事獲得方法からオリジナルアプリ開発方法

侍エンジニア塾では徹底したサポートによる「オーダーメイドカリキュラム」を作成しています。

まずは無料体験レッスンで、「挫折しない学習方法」や「あなただけの学習ロードマップ」を知り、学習の効率化をしましょう。独学の難点である「オリジナルアプリの作り方やエラーの対処法」についてもアドバイスさせていただきます。

詳しいサービス内容は、下記よりご参照ください。

cta_mtm1

非常識な結果を出した卒業生

活躍する現役エンジニア

人気記事セレクション

LINEで送る
Pocket

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

最新情報をお届けします

書いた人

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

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

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