/*サーチコンソール*/ /*google adcense*/

初心者向け HTMLの基本構造

2020年1月7日

こんにちは、Kosei(https://twitter.com/pompom_stk)です。

「Webプログラミングを始めたい」と思い、まず始めに訪れる壁は「HTML」というあまり聞きなれない言語です。今回はこのHTMLがどういったものなのかを解説していきます。

この記事の要点まとめ
HTMLってなに?

ハイパーリンク
HTML=「Hyper text markup language」の略で、Webサイトを作成する上で欠かせない言語。「Hyper text」の意味でもあるハイパーリンクの仕組みについて図で説明。
HTMLのバージョン
HTMLにはバージョンという概念があり、現在は「HTML5」。HTMLを書き始める際は、1行目にどのバージョンを使っているかを示す「DOCTYPE宣言」を記述する。
HTMLはプログラミング言語ではない?
HTMLはプログラミング言語ではなく、「マークアップ言語」。
HTMLの基本構造
HTMLの基本構造をこのサイトを例に説明。
基本構造と要素の親子関係
「DOCTYPE宣言」以降はタグを使いながらHTMLを書き始める。「html」というタグの中に「head」と「body」という要素が入る。「htmlタグの中にあるhead要素」のような関係を親子と呼び、外側の要素を親、その中に入っている要素を子とする。
head要素とbody要素

head要素
ページに関する情報を示したもので、ブラウザや検索エンジンに情報を伝える。
body要素
ページを表示するもので、人に対して情報を伝える。
HTMLは難しくないがそれだけでは意味がない
HTMLを使うこと自体はそこまで難しくないが、Webサイトを作るなどの目標があるなら他の言語も習得する必要がある。

HTMLってなに?

HTMLはWeb系のプログラミングをしたい人がまず始めに訪れる壁だよ。ブログをする人も通る道だよ。

ヒナ
ヒナ
ハリボー
ハリボー

えいちてーえむえる?名前からしてもう難しそうじゃん。

実はそこまで難しくないんだよ。この記事には難しそうな言葉もでてくるけど、完璧に理解しなくてもなんとなーくわかればそれでいいよ。

ヒナ
ヒナ

ハイパーリンク

HTMLとは、「Hyper text markup language(ハイパーテキストマークアップランゲージ)」の略称で、Webサイトを作成するうえで欠かせない言語です。分解して考えると、「Hyper text」は文書間をリンクするハイパーリンク、「Markup」は文書が段落なのか見出しなのかなど各部分の働きに対して目印をつけるものです。このHyper textとMarkupを組み合わせたLanguage(言語)が、「HTML」と呼ばれます。

現在インターネット上で公開されているWebページのほとんどは、この「HTML」で構成されたものです。もちろん、このサイトもHTMLで構成されています。

ハイパーリンクの仕組み
クリックで拡大

HTMLのバージョン

HTMLには、PCやスマホのように「バージョン」という概念があります。「HTML1」というものが1993年に誕生し、2019年12月現在の最新バージョンは「HTML5」で、2014年に実装されました。

HTMLはこのバージョンによって、使用できる要素や記述のルールが異なります。そのためHTMLを書く際は、1行目にどのバージョンを使っているかを表す「DOCTYPE宣言」を必ず書く必要があります。僕はHTML5になってから始めたのであまり知りませんが、前のバージョンであるHTML4.01ではとても長いDOCTYPE宣言をする必要があったそうです。対して今のバージョンではとても短く簡単なものになっています。

どちらにしても、中身まで覚える必要はありません。「HTMLでサイトを作成するときはまずDOCTYPE宣言をする必要がある」ということだけ覚えていれば問題ありません。

HTML4.01のDOCTYPE宣言(例)

<!DOCTYPE HTML PUBLIC 
"-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">

HTML5以降のDOCTYPE宣言

<!DOCTYPE html>

HTMLはプログラミング言語ではない?

ハリボー
ハリボー

DOCTYPE宣言が書けたし、これで僕も立派なプログラマーだね!

DOCTYPE宣言が書けても何もできないよ、、それにHTMLはプログラミング言語ではないんだよ。

ヒナ
ヒナ

HTMLは厳密に言うとプログラミング言語ではありません。HTMLを習得したからといってハリボーみたいに「よっしゃこれで俺もプログラマーや!」と言わないようにしましょう。プログラミングができると言ってHTMLしか理解していないと、恥ずかしい思いをしてしまいます。

HTMLは「タグによって文書の情報を出力する言語」です。このような言語を「マークアップ言語」と呼び、HTMLは最も基本的なマークアップ言語です。

ではプログラミング言語とは何かというと、簡単に言うと「動作処理を行うことができるもの」です。身近な例で行くとゲーム・電卓・自動販売機などです。

身近に使われているプログラミング言語
クリックで拡大

このように「私たちが動作を行うことでコンピュータが動作処理を行ってくれるもの」がプログラミング言語です。

HTMLの基本構造

HTMLとはWebページを作成する上で必要な言語ということがわかったと思います。このWebページは、異なる役割を持ったさまざまな要素を組み合わせていくことで、作成することができます。例として、このサイトを構成する要素( PC画面レイアウト)をみてみましょう。

(このサイトの全体スクリーンショットを取ったのですが、「↑PAGE TOP」と書かれたボタンが大量生産されてしまいました。気にしないでください。)

HTMLの基本構造
クリックで拡大

基本構造と要素の親子関係

HTMLを書き始める際、前項でも説明した通り一番始めに書くものは「DOCTYPE宣言」です。2行目からは、「タグ」と呼ばれるものを使いながらHTMLを書き始めます。大まかな構造として、「html」という大きな要素の中に「head」と「body」という要素が入ります。さらにそれぞれの中に、Webページを構成する要素が入ります。

このような「htmlタグの中にあるhead要素」のような関係を「親子」と呼びます。外側の要素(html)が親、その中に入っている要素(head)が子となります。この親子関係は、よくツリー形式で表されます。

HTMLの親子ツリー
クリックで拡大

head要素とbody要素の役割

html要素に入るhead要素とbody要素は、それぞれ異なる役割を持っています。

head要素

head要素は、それぞれのページに関する情報を示します。サイトのタイトルや文字コード、CSSなどの読み込みなど基本的に目に見えない情報を記述します。

「見えないなら別に書かなくてもいいのか」と言えばそうではありません。この記事では詳しく書きませんが、ここを適当にしてしまうと正しく文字が表示されなかったりスマホでのデザインが崩れたりしてしまいます。head要素の内容はWebページには表示されませんが、ブラウザや検索エンジンなどに情報を伝える大切な要素です。

body要素

body要素は、それぞれのページを表示するものです。この記事の本文(見出し・段落)、画像などがbody要素の中に書きます。

これは検索エンジンに伝えるhead要素と異なり、人に対して情報を伝える要素です。

HTMLは難しくないがそれだけでは意味がない

ここまでを読むと「HTMLってなんだか難しそう」だと思うかもしれません。もちろん追求していくと、奥が深いですし僕も全ての要素を知り尽くしているわけではありません。

ですが、HTMLを使うこと自体はそこまで難しくはありません。別の記事でまた紹介しますが、タグとタグとで囲めばいいだけなので、そこさえ理解できれば問題ありません。何を目的にHTMLを習得したいかにもよりますが、僕のように「Webサイトを作りたい」という目標でしたら、これもまたいずれ紹介しますが「Progate」などのオンライン学習サービスがおすすめです。

忘れてはいけないことが、「HTMLだけができても意味がない」ということです。HTMLはあくまで「文章を表示する言語」です。これにデザインを付け加える「CSS」や、動きを付け加える「Java Script」などの言語も合わせて覚える必要があります。

これから転職・独立のためにプログラミングを勉強しようかな」という人は、まずHTMLだけを勉強してみましょう。仕事上どうしてもHTMLが必要だという人は別ですが、勉強してみて全く理解できない・おもしろくないと思う人は、プログラミングを諦めるのも手だと思います。勉強してみて面白いと感じたなら、ある程度勉強してから他の言語も勉強することをおすすめします。

間違ってもHTMLだけを何ヶ月もかけて勉強しないようにしましょう。