Web製作をする上で避けては通れないのがHTML。今回はHTMLについて、基礎から徹底的に分かりやすく解説していきたいと思います！
HTMLとは？
HTMLとは、webページを作成するために開発された言語です。
HTML（エイチティーエムエル）の正式名称はHyperText Markup Language（ハイパーテキストマークアップランゲージ）です。ハイパーテキスト、つまりこういうリンクを使い、関連した情報同士をつなぎ合わせ、文章をマークアップしている言語です。
インターネット上で公開されてるwebページのほとんどは、HTMLを使って作成されています。あなたが今見ているこのページにもHTMLが使用されているんですよ！
HTMLの仕組み
Webページを作成する時、「これは文字」「こっちは画像だよ」とコンピュータに対して教えることができるのがHTMLです。
コンピュータに指示するために使うのがタグと呼ばれるものです。
<h1>ウェブモエ</h1>
<p>初心者〜中級者向けのブログです</p>左のコードで言うと、<h1>や<p>がタグです。文章をタグで挟むことによって、コンピュータに「間に挟まったものは何か」を伝えることができるのがHTMLです！
<h1>は見出し、<p>は文章を表すタグなので、それぞれ「間に挟まれたものを適切に表示してね」とコンピュータ側に伝えているというわけです。
</h1>や</p>のように、スラッシュが入っているものは閉じタグと呼ばれているものです。開始タグのみで閉じタグがないタグもあり、そういったタグは単体で意味を持つタグです。例：<br>…改行
何十行〜何百行のHTMLコードが重なって、Webページができているということです！
HTMLだけでWebページは作れる？
あなたが、「ただ文字と画像が並んだ見辛い白黒のWebページ」を作りたいのであれば答えはYESです。しかし、「カラフルで分かりやすいWebページ」を作りたいなら答えはNOです。なぜなら、HTMLは見た目を変える指示ができない言語だからです。
HTMLだけでWebページを作成すると、このように真っ黒で見辛いページができあがってしまいます。
画像の大きさも元のサイズのままです。
では、見た目を変えるにはどうすればいいのでしょうか。それは、CSSと呼ばれるHTMLを装飾できる言語を使うことによって、よりカラフルでリッチなWebページを作成することができます！
CSSを使えば、装飾して分かりやすいWebページを作成することができます！
HTMLだけで作成したWebページと比べると、その差は一目瞭然ではないでしょうか。
HTML/CSSを書くときに必要なもの
テキストエディタと呼ばれるプログラミング専用のソフトが必要です。
- コードを補完してくれる
- 見やすく色分けしてくれる
- 間違いがあったときに教えてくれる
と良いこと尽くしですので、ぜひこの機会にインストールしてみましょう！
テキストエディタ：VSCode
無料のテキストエディタにもいくつか種類がありますが、私自身がいろいろなテキストエディタを使った結果、一番使いやすかったのはVSCodeでした。ですので、当ブログではVSCode中心でお伝えしたいと思います。
まだインストールしていない方は、下記の記事を参考にインストールしてください！
ブラウザ：Google Chrome
GoogleChromeはあのGoogleが開発したブラウザです。シェア率が高く、拡張機能も豊富でWeb製作に一番向いているブラウザなのではないでしょうか。
当ブログではブラウザは基本的にGoogle Chromeを使用する前提でお伝えしていこうと思います。
まだインストールしていない方は、下記リンクからインストールしてください！
HTMLを書いてみよう！
ここからは実際にテキストエディタにHTMLを書き、Webブラウザで表示させてみましょう。
まずはダウンロードしたVSCodeを開いてみましょう。
「新しいファイル」をクリックし、何も書かれていないファイルを作成します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストページです</title>
</head>
<body>
<h1>今からHTMLを勉強します！</h1>
<p>素敵なWebページを作りたいな〜</p>
</body>
</html>左のコードをコピーし、テキストエディタへ貼り付けてください。
このコードはHTMLを書く上で最低限必要なコードです。
初めて見た方は暗号のように感じてしまうかもしれませんが、細かな内容については後ほど説明いたしますのでご安心ください。
先ほど入力したHTMLを保存しましょう。
| 名前 | test.html |
| 保存場所 | デスクトップ |
この時、拡張子を必ず「.html」としてください。
デスクトップにある先ほど保存したtest.htmlファイルをダブルクリックで開いてみましょう。
すると、ブラウザが立ち上がり、HTMLファイルが表示されました！
先ほど入力した内容がそのまま反映されていますね。
HTMLの中身を解説！
それでは、ここからは先ほどの暗号のようなコードを一つずつ紐解いていきます。
!DOCTYPE html
文書がHTML5で作成されたものであることを宣言するために、 先頭に記述するものです。深く考えず、HTMLを書く際に必ず必要なおまじないだと思ってください。
html
HTML文書であることを示す際に使用します。コンピューターに対して「今から書くのはHTML文書だよー！」ということを伝えるために必要です。
head
Webページの情報を<head>~</head>に入れます。このタグの中に書いたものは情報のみですので、ブラウザには表示されません。
- 検索エンジンに伝えたいこと
- コンピューターに伝えたいこと
など、Webページの情報をここに記述します。
body
実際にWebページに表示される部分を<body>~</body>に記述します。
<body>
<h1>今からHTMLを勉強します！</h1>
<p>素敵なWebページを作りたいな〜</p>
</body>先ほどtest.htmlに書いてもらったHTMLです。
それぞれ、<h1>と<p>には文章としての意味があり、それに応じてWebページで表示されます。
| <h1>~</h1> | 見出し |
| <p>~</p> | 段落 |
<h1>で囲った部分は見出し（タイトル）として、<p>で囲った部分は文章としてそれぞれ認識されています。
このように、HTMLではbody部分に表示したい内容を記入します！
HTML基本 まとめ
少し難しく、分かりづらいことばかりだったかと思いますので、最後に総まとめといきましょう。
HTMLとCSSとは？
- HTML：文章を書く言語
- CSS：見た目を整える言語
HTMLの中身
- HTMLには書き方のルールがある
- head：Webページの情報を書く場所、ブラウザには表示されない
- body：ブラウザに表示される
さいごに
HTMLについて基本的な解説は以上です。少し小難しい話が多くなってしまいましたが、Webページを制作する上で必要な基礎知識ですので、焦らずじっくり噛み砕いて理解してください。
また、全てを暗記する必要はありません！分からなくなったらこのページを見に来ていただければと思います。
