プログラミング未経験からでも月50万円達成

HTML とは何か?初心者のためのHTML基礎知識

作成: 2016.10.21 更新: 2019.04.10

>> 世帯年収300万以下限定!
転職成功まで受講料発生なし。詳細はこちら

HTMLとは何か

ここでは、そもそもHTMLとはどのようなものなのか、ということを解説していきます。

HTML一体何者だ という方は必ず読んでください。

プログラミング超入門言語である

HTMLはプログラミング超入門言語です。

結論から言うと本当に簡単です。

知っている方はいるとは思いますが、世の中のwebサイトはほとんどはHTMLで構成されています。

簡単な用語、ルール、あとは多少の慣れでwebサイトなど、簡単にできてしまいます。

実際にこの記事を読み進めていくと、最後の方にはサンプルコードを書くので簡単ということがより実感できます。

見た目の言語

HTMLは見た目を構成するマークアップ言語の一つで、厳密にはプログラミング言語ではありません。

プログラミング言語は主に大きく分けると二種類に分類できます。

  1. バックエンド
  2. フロントエンド

です。

ユーザーなどと直接やり取りをする要素のことをフロントエンドといいます。要するに、読者の皆さんが今見ている画面のことです。

フロントエンドの入力データや指示をもとに、処理を行って結果を出力したり、記録媒体に保存したりする処理をバックエンドといいます。

例えば、twitterなどのSNSで投稿する時を想像してください。

投稿画面ありますよね。その画面は自然に表示されるものではないです。

お気づきかもしれませんが、その画面を構成しているのがまさにフロントエンドの言語であるHMTLです。

以外と身の回りに溢れていますよね。

また、投稿後にデータが保存されタイムラインに表示されます。この一連の流れを処理しているのがバックエンドの言語です。

レイアウトをつくってくれる

22005f315317fc7c39b4fb3e187640e3

上の画像を見ると分かりますが、web上のホームページなどの見た目の部分は大まかに分ける上のようなブロック(箱)で構成されています。

それを作っているのもHTMLです。

後に説明しますが、HTMLのブロックという概念です。

HTMLを実際に見てみよう

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-10-17-53-39

では、実際にどのようにHTMLを使うと上のようなサイトが作れるのでしょうか。見てみましょう。上記画像はTECH::CAMP(テックキャンプ)の旧Webサイトです。

見る方法は簡単です。HTMLを見る機能を使います。

コードを見たいwebサイト上で右クリックをします。そうすると下のような画像になります。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-10-17-56-34

ここでページのソースを表示を選択してください。

そうすると

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-10-17-59-19

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-10-17-59-33

上の画像のようにHTMLを記述するとサイトができます。

すごく難しそうですね。。。

しかしそんなことはありません。HTMLの概念とちょっとしたルールを覚えたら、あとは慣れです。

静的HTMLと動的HTML

これまでHTMLがどのようなものなのかについて解説してきました。

ある程度イメージができてきましたか?

実はHTMLは2種類存在します。静的HTMLと動的HTMLです。

動的とはアニメーションがあったり、動画が埋め込まれていたり。。。

そういったものではありません。

静的とは皆さんが、今見ているtechnoteの記事のようなページです。

今見ている記事は誰がいつ見ても視覚的に何も変化がありませんよね。それが静的HTMLです。

逆に動的HTMLとはSNSなどのユーザーページなど、タイムラインのページです。

ユーザーページは基本的にレイアウトは変わらないですが、細かい部分はそのユーザーの個人情報に依りますよね。

またタイムラインは見る時間によって流れている情報が全く違いますよね。

結論、

静的HTMLとは、初めから決まった・変化することない情報のみで構成されているページのことです。

動的HTMLとは、データーベースなどに保存されている・変化する余地のある情報で構成されているページのことです。

 

就職や転職に有利??

HTMLが書けることは就職や転職に有利なのでしょうか?

おそらくそういったスキルで就職・転職を考えている方もいらっしゃると思います。ぜひ参考にして下さい。

 

HTMLスキルのみでの就職・転職は厳しい

実際は企業によって求められるレベルが異なるので、一概には判断できませんが、おそらく、「HTMLのみ」だと少し厳しいかもしれません。

最初にも解説した通り、HTMLはプログラミング超入門言語です。なので正直できて当たり前の部分があります。

webデザイナーの仕事はかなり裁量になってくるので、逆に実力さえがあれば仕事は沢山あります。

では、何が必要になってくるのでしょうか。

就職・転職に活かすため、もしくは収入アップにつなげるためには自分ができる幅を広げる必要があります。

すなわち、HTMLだけではなくCSSやJavascriptと呼ばれる見た目を構成する言語を習得するといいです。

もちろん、求人募集で未経験可という企業もあるので、全くの未経験の方もその環境に身を置いて成長するのも一つの手かもしれません。

年収

webデザイナーの収入は下記の通りです。

年収 350万円
収入 30〜40万円

webデザイナーの中でも業種によっても収入が違うようです。

業種 年収
Web制作会社 380万円~
デザイン会社 350万円~
広告代理店 450万円~
人材派遣会社 440万円~
在宅フリーランス 年収250万円~
独立  年収450万円~

また、先ほども述べた通り実力次第でも変化があります。

様々な記事を見ていると、やはり初めはみなさん苦労されます。しかし、厳し環境で揉まれ成長し、自分の経験を生かすようなwebディレクターやwebプロデューサーなどになると大幅な収入アップが見込まれます。

収入に関してはサイトによって異なった意見があったりするので参考に下記にリンクを載せます。是非参考にしてください。

webデザイナー収入

HTMLの様々なバージョン

ここではHMTLに歴史についてさらっと解説します。

より詳しく解説されているリンク先などを下記に紹介します。

HTMLは意外に長い歴史を持っているので興味がある方是非読んでください。

HTMLの歴史

HTMLとは「HyperText Markup Language」の略です。

バージョンの歴史は下記の表のようになってます。

HTML2.0

1995年11月に発表。
HTML Tables 1996年5月に発表。
HTML3.2 HTML3.0 の規格化が検討されましたがまとまらず。。。

3.2は3.0とは別物。

HTML4.0~4.01 1997年12月18日

HTML5

 2008年1月22日

HTML歴史と要点

現在の主流はHTML5

上記の表のようにHTMLは様々な変更を経て最新のHTML5となりました。そして現在の主流はHTML5となります。

では、なぜ現在の主流がHTML5なのでしょうか。

様々な理由がありますが、主に3点挙げられます。

1ブラウザ間の交互性を高めた。

以前のバージョンだと、このブラウザでは思うように表示されるが違うブラウザになってしまうと、レイアウトが崩れてしまったり機能しなくなってしまうことが多々ありました。その状態を、交互性が低い状態と言います。しかしHMTL5ではそのような問題が改善されました。

2文章内に埋め込まれた意味が不明確

極端に言えばどこからどこまでは本文なのかがわからない場合が以前のバージョンでしたらありました。なのでHTML5では、数多くの意味的要素が追加されました。要素は簡単に言えば、それぞれに役割を与えている印です。要素については後ほど解説します。それによって、htmlのどの部分が何を表しているのかがより明確になりました。

3より多くの機能が使えるようになった。

例えば、以前は同時に複数のファイルのアップロードが出来なかったのです。。。今考えると非常に驚きですよね。

他にも様々な要因があるので、少し深い内容にはなりますが、興味のある方は下記のリンクを参考にしてください。

HTML5まとめ

 

この記事のハッシュタグ

HTMLの用語をわかりやすく解説

これまではHTMLの基本的な知識を解説してきました。ここからは、HTMLを使うための実践的な知識になります。

タグ

HTMLの一番の基本となる開始タグと閉じタグ、そしてHTMLの要素のタイプについて解説します。

HTMLは見た目を構成する言語であって、レイアウトを作ります。要するに一つ一つを箱と捉えます。

「この箱に入っているテキストはWebページの中でどのような役割を果たすのか」

ということがとても重要になります。

html04

こちらは実際のHTMLの例です。開始タグと書かれた下にh1と書かれていますね。この部分が、この箱の「役割」を示します。つまり、この箱に入ったテキストはh1という役割を持っている、ということになります(h1が何なのかは後述します)。

基本的には、「開始タグ」から「終了タグ」の中に要素のタイプ(見出し(h1)、段落(p)、リスト(li)など)を入れます。このセットで、ひとつの箱の完成です。

開始タグ

タグの始点(<)からタグの終点(>)の中に、要素のタイプ(ここではh1)が入っています。要素の開始地点を示します。

終了タグ

終了タグはほぼ開始タグと同じ書き方ですが、唯一違うのは要素のタイプの前にスラッシュ(/)を入れることです。これによって、要素の終了地点を示します。

要素

ではここからHTMLの基本的な構造を解説します。

HTMLは大きく分けるとhead要素body要素という部分で構成されています。

head要素は、メタ情報と呼ばれるサイト自体に関する情報を定義する部分です。こちらで定義したものは見た目には大きく影響しません。

body要素は、箱の構成やテキストなど、実際に見た目に大きく反映されるものを定義していく部分です。

HTMLファイルは、基本的に以下のような構造になっています。

html05

要するに

・html要素は、HTML文章の始まりと終わりを示しています。

・head要素は、ページを閲覧する人が知る必要のないHTML文章の情報を記述するものです。例えば、言語の種類などです。 ここに書かれたコードはブラウザ内には表示されません。

・body要素の開始タグと閉じタグのあいだには、HTMLを記述していきます。 ここに記述されたものがブラウザ内に表示されます。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-10-17-45-24

具体的には上の画像のように書きます。なんだかすっきりしていますね。

しかし、基本的な構造はこれで完成です。

以下、その他重要な内容について説明します。ただし、今はほとんど「決まり文句として書くのだ」という認識で十分です。

<!DOCTYPE HTML>について

この <!DOCTYPE HTML> は、この文章がHTML文章であることを宣言する要素です。HTMLを書くときには、必要になるものです。

記述をしない場合、レイアウトが崩れたり、表示がされない場合があります。

<meta charset=”UTF-8″ />について

meta要素は、文章に関する情報を指定する時に使用します。また、charset=に続く文字は文書の「文字コード」を指定します。文字コードとは、コンピュータでの文字の処理の仕方を指定するものです。他にもSHIFT-JISなどがありますが、主流はUTF-8なので、UTF-8を指定しましょう。

記述しない場合、文章が文字化けをしてしまって読めなくなってしまいます。

属性

先ほど解説したmeta要素を例に属性という概念を解説していきます。

属性とは、HTML要素の役割を細かく定義するための付加的な情報のことです。属性を含むHTMLタグは、以下の図のような構成になっています。

html06

では実際によく使われるものを例に使ってもう少し理解を深めましょう。

リンクを作成するa要素の場合

例えばa要素は「クリックされると別のページに移動させる」という役割を持つ文字を作成する要素です。ということは、この要素自体が別ページのURLを持っていなければいけません。こんな時に属性を利用します。

html07

上記の図のように、a要素は「href」という属性を持ち、その値がリンク先のURLになります。これがなければ、リンクさせることができません。

画像を表示するimg要素の場合

img要素は、画像を表示するための要素です。ということは、画像自体の在り処をimg要素自身が持っている必要がありますね。こんな時も、属性を利用します。

html08

img要素は、srcという要素に画像の在り処を示す値を持っています。また、altという属性も持ちます。このように、特定の要素は属性を何個ももつことがあります。

属性の記入方法は以下です。

・属性名は開始タグの中で、要素名の後に半角スペースで区切って記述します。

・基本的に属性値は「=」の後に、””(ダブルクォーテーション)で囲んで記述します。

・複数の属性を記述するには、半角スペースで区切って記述します。

TECH::EXPERT 東京・名古屋・大阪・福岡

プログラミング未経験からWebエンジニアとして転職成功まで導くスクール TECH::EXPERT は、挫折しない環境を提供いたします。すべて駅から通いやすい便利な場所。いつでも質問できるメンター(講師)、一緒に頑張る同期がいるから頑張れる。そんな教室を是非見にきてください!

実際にHTMLを書いてみよう

ここでは実際にHTMLを書いてみましょう。まずはテキストエディタが必要です。簡単に言えばテキストエディタは、プログラムを書くためのアプリケーションです。

テキストエディタは様々な種類のものがあります。下記に参考リンクを貼るので、興味のある方は是非参考にしてください。

基本的な手順は以下の通りです。

1テキストエディタを開く。

2新規ファイルを作成する。

ただし、〇〇〇〇.htmlのように拡張子は.htmlとしてください。

あとは作成したファイルに書き込んでいくだけです。あとはそれをブラウザに反映させるだけです。非常に簡単です。今回、ブラウザはgoogle chromeを利用します。

初心者おすすめテキストエディタ

HTMLで自己紹介しよう

HTMLを用いて構造的な自己紹介を作成してみましょう。(普段することはないと思いますが。。。笑)

まずは慣れることが大事です。

作成の手順は以下のようになります。

1、見出し「〇〇の自己紹介」(〇〇の部分は自由)

2、「経歴」

3、「自己紹介文」

では取り掛かりましょう。

まずはHTMLの基本的な準備です。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-10-17-45-24

上の画像のように、編集してください。先ほどの画像と全く一緒です。(使っているテキストエディタによって文字の色は異なってきます。)

一点注意としてはtitleタグの中身はなんでも構いません。

titleタグの中の文字が実際にこのHTMLをブラウザに反映させた時にタブの部分に表示される文字となります。

ブラウザにHTMLファイルを反映させる方法は、保存したHTMLファイルをブラウザ上でドラック&ドロップするだけです。今回は以下のようになります。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-11-4-07-38

ではbody要素の中身を書いていきましょう。

まずは、1、見出し「〇〇の自己紹介」(〇〇の部分は自由)の部分です。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-11-4-11-29

このように見出しを作成すると。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-11-4-13-18

このように見出しができました。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-11-4-14-48

また上の画像のようにalign属性にcenterという属性値を加えると、%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-11-4-16-14

このように見出しが真ん中に配置されました。このように自由にアレンジを利かすこともできます。

次に経歴を書いてみましょう。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-11-4-26-45

上の画像を参考に編集してみましょう。白い文字の部分はなんでも構いません。

上のコードについて説明を加えます。

table要素

表を作成するブロック要素です。この要素と以下に記述するth要素、tr要素、td要素を組み合わせることによって、表構造を作成することができます。

th要素

表の見出しを作成するブロック要素です。

tr要素

表の横方向の一行を定義するブロック要素です。

 td要素

表のデータを入れるブロック要素です。

こうすることによって、

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-11-4-28-32

上の画像のように履歴の表ができます。

最後に自己紹介の部分です。こちらではpタグを使います。

pタグはひと塊りの段落を作ってくれます。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-11-4-36-55

上の画像のように編集すると

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-11-4-40-53

 

このように自己紹介文が追加されます。

どうでしょうか。

HTMLではこのような単なる組み合わせで簡単にwebサイトが作れてしまうのです。

相方のCSS

どうやって文字に色つけるの?

と疑問に思った方も少なくないと思います。確かにHTMLだけでは素っ気ないwebサイトになってしまいます。

 

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-10-17-53-39

実は上のテックキャンプのwebサイトのようなカラフルなページを作る時に活躍するのがCSSです。

HTMLとCSSを組み合わせれば、様々なサイトが作れるようになります。

全ての属性やタグを覚えるのは不可のなので自分で作る際には、その都度目的に合わせて調べて進めるのが有効です。

bf8dbdb5fb396abefc03e5234322272b

HTMLのエラー対処法

プログラミングではエラーがつきものです。HTMLで何かを作成する際に、自分の思ったようにいかない場合に役立つエラーの対処法をご紹介ます。

サイト・ツールを利用する方法

HTMLのエラーに関しては数多くのエラーチェックサイトやツールが用意されているのでその一部をご紹介します。

1、The W3C Markup Validation Service

W3Cとは、World Wide Web Consortiumの略称でインターネットで使用される技術の標準化を推進するための団体です。W3Cは正しいHTLMソースコードについても勧告しています。

サイトに調査したいIRLを入力すると、W3Cが勧告するHTMLソースコードでサイトが作られているかをチェックすることができます。

チェックはページ単位で行われ、チェック結果はすぐにわかります。

エラーがない場合

w3c01_thumb

エラーがある場合

w3c02_thumb

上の画像のように問題箇所を勧告してくれます。

Another HTML-lint gateway

こちらは日本語サイトになっています。

機能としては1番目と変わりません。

したの画像のようにエラー箇所を勧告してくれます。

gateway_thumb

拡張機能を利用する方法

次はgoogle chrom拡張機能を利用した方法をご紹介します。

「HTMLエラーチェッカー」という名前の拡張機能です。

インストールはこちら↓からできます。

HTMLエラーチェッカー

こちらの機能もどの箇所に、どれだけのエラーがあるのかをチェックしてくれるので非常に便利です。

chrome-html-error-checker01

まとめ

どうだったでしょうか?

最初ソースコードを見たときはただの文字であったものが今では、少しサイトのイメージができるようになってきていませんか?

難しいことは一つもありません。HTMLの概念を理解し、あとは自分で作るなり、遊んでみるなり、実践あるのみです。

知識としてはとても膨大な量になるので、忘れてしまったときは調べればいいだけです。プログラミング学習は調べて実践するの繰り返しです。

わからないからと臆する必要はありません。

安心してください。あなたはもうHTML脱初心者できています。

今日得た知識をアウトプットしてみましょう。

 

こちらの記事もご参考ください。

【学生初心者必見】初めに覚える!HTMLタグ16選

TECH::CAMPについて

TECH::CAMPはあなたを最先端のスキルと知識を身に着けたテクノロジー人材に変えます。
講義形式で知識だけを学ぶのではなく、実際にサービスを作りながら実践的に学んでいきます。
独学では、わからないことを調べることに膨大な時間がかかりますが、TECH::CAMPは教室やオンラインでメンター(講師)へ質問し放題。

プログラミングが「なんとなく分かる」ではなく「形になるものを作る」にコミットします。
プログラミング以外もデザインやVR・3Dゲームなどコンテンツが多数あり、月額で全て受講可能です。
無料プログラミング体験会・説明会のお申し込みはこちら
お待ちしています!

未経験からエンジニア・Webデザイナーを目指すならTECH::EXPERT

TECH::EXPERTは未経験からのエンジニア・Webデザイナー転職を実現するスクールです。

転職成功率は98.5%(2019年1月時点)。確実に使えるスキルを身につけるための教育と、徹底した就職サポートであなたの転職を叶えます。

無理な勧誘は一切ありません。まずは無料キャリア相談(カウンセリング)にぜひお越しください。

無料キャリア相談の日程を見る

この記事を書いた人

Avatar
shimohirahiroaki