ホームページは、HTMLというもので作るらしい。それってプログラミング？初心者でも本当にできる？じゃあ何から始めたらいい？HTMLと聞いてもわからないことだらけで不安になっていませんか？
今回は初心者でも失敗なしではじめられるHTML、最初に覚えたい書き方の基本とタグについてゆっくり説明します。
今回の記事はちょっと長く感じるかもしれないので、作業の手順ごとに少しずつ読みながら、休み休み一緒にがんばっていきましょう。
HTMLって何ですか？
HTML（エイチティーエムエル）とは、「Hyper Text Markup Language」の略で、WEBページを作るために使う言語です。
コンピューターが理解できるように「ここはタイトルです」「ここは記事です」というような文章構成を指示するためのものです。（文章構成を指示することをマークアップといいます）
ホームページの制作では、HTMLで文章構成の指示を出して、表示したい情報を作ります。
タグって何ですか？
ホームページで表示したい情報は、「<」「>」で挟まれたタグと呼ばれるもので記述します。タグにはたくさんの種類があり、どのタグで挟むかによって役割が変わります。
「<」「>」で囲まれた最初に書くものを開始タグ、「<」「/」「>」で後から書くものを終了タグといいます。
開始タグと終了タグはセットで使われますが、タグによっては終了タグがないものもあります。
HTMLを書くために使うツール
今回使うツールは次の2つです。
- テキストエディタ：Visual Studio Code
- ブラウザソフト：Google Chrome
テキストエディタやブラウザソフトは、愛用のものを使っていただければ大丈夫です。この後の説明や手順の画像はVisual Studio CodeとGoogle Chromeで進めていきます。
Visual Studio Codeのダウンロードからインストール、ソフトを日本語化するまでの手順を別の記事でまとめました。画像を順番に追うことで手順を進められるようにゆっくり解説しています。Visual Studio Codeの準備がまだの方はぜひ参考にしてみてください。
今の時点では、ドメインやサーバーの契約はしていなくても問題ありません。テキストエディタとブラウザソフトさえあれば、自分が作ったホームページを自分のパソコンで表示することができます。
HTMLを書いてみよう！
Visual Studio Codeを起動してください。
青い枠で囲んだ「ファイル」メニューから「新しいテキストファイル」を選択しましょう。
では、さっそくHTMLを書いてみましょう。
いまはこの画面の状態ですね。この青い枠の中にHTMLを書いていきます。
HTMLの記入には重要なルールがあります。
- アルファベットと記号と数字とスペースはすべて半角で入力
下記の文章をそのままVisual Studio Codeに記載してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>ホームページのタイトル</title>
<meta charset="UTF-8">
</head>
<body>
<h1>はじめてのホームページ</h1>
<p>HTMLについて一緒に覚えていきましょう</p>
</body>
</html>
上記のHTMLを記載した画面はこの状態です。
記入がすべて終わったら保存しましょう。
画像の青い枠で囲んだ「ファイル」メニューから「名前を付けて保存」を選択します。
保存場所はわかりやすいようにデスクトップにして、「ファイル名」はすべて半角で「test.html」にして保存してください。ファイル名の末尾も必ずすべて半角で「.html」にします。これを拡張子といいます。拡張子を「.html」にすることによって、書いたものがHTMLファイルとして保存されます。
作業がうまくいくと、デスクトップ上にこのアイコンができています。
表示されたアイコンを「Google Chrome」で開いてみましょう。Google Chromeを開いたら、デスクトップにある「test.html」のアイコンをブラウザの上までドラッグします。
この画面が表示されたら大成功です！ブラウザではHTMLがWEBページとして表示されます。
ドメインやサーバーの契約をしていなくても、テキストエディタとブラウザソフトさえあれば、何度でも自分のパソコンでホームページを表示して練習することができます。
もし画面表示がうまくいかなかったときは
HTML記載部分の<!DOCTYPE html>から</html>の部分をすべてそのままコピーして、Visual Studio Codeにそのままペーストして上書き保存しましょう。
そして再度、Google Chromeで開いてみましょう。うまくいったでしょうか？
初心者が最初に覚えたいHTML書き方の基本とタグ
見よう見まねではじめて書いてみたHTML、はじめてのホームページがブラウザでうまく表示できたので、次は、今回書いたものにどういう意味があったのかを、ひとつひとつ見ていくことにしましょう。
一番大事なHTML基本のルール
HTMLの記述は以下の文字を半角（直接入力モード）で書くことです。
- 英文字
- 数字
- 記号
- スペース
作業が終わったファイルを保存するときは、必ずファイル名のあとに「.html」の拡張子を記入して保存します。この拡張子の部分も半角で入力します。ファイル名も必ず半角英数字の名前にします。
HTMLの標準仕様について、最新の仕様は「World Wide Web Consortium（W3C）」でインターネット上に公開されており、誰でも閲覧できます。
<!DOCTYPE html>とは？
HTML文書を書くときに、まず先頭に<!DOCTYPE html>と書きます。この記述をすることで「このファイルはHTML文書です」と宣言する役割があります。
<html>～</html>とは？
<html>～</html>のタグで挟まれている部分は、このタグで囲まれている中の文字列がHTML文書ですよということを表しています。
DOCTYPE宣言と同じように決まり文句のようなもので、<!DOCTYPE html>の次に<html>、最後に必ず「/」で閉じる終了タグ</html>を書きます。
<html lang="ja">とは？
<html>タグの中に「lang="ja"」の属性（lang）と属性値（"ja"）を入れることで、language（言語）が「ja（日本語）」だと指定することができます。
主な言語コード
| 言語 | 言語コード |
|---|---|
| 日本語 | ja |
| 英語 | en |
| 中国語 | zh |
| 韓国語 | ko |
| スペイン語 | es |
| ドイツ語 | de |
| フランス語 | fr |
<head>～</head>とは？
<head>タグは<html>タグの次に書きます。文書のヘッダ情報を表すために使用します。ヘッダ情報とはその文書に関する設定情報のことです。
<head>タグで囲まれている中の部分は、<title>タグなどの一部を除いてブラウザ画面上では基本的に直接表示されません。最後に必ず「/」で閉じる終了タグ</head>を書きます。
<title>～</title>とは？
<title>タグはWEBページのタイトルを意味しています。青い枠で囲んだ部分に表示されている場所のように、ブラウザや検索エンジンで表示されるWEBページのタイトルや、SNSでシェアされるWEBページのタイトルになるので必ず設定しましょう。
最後に必ず「/」で閉じる終了タグ</title>を書きます。
<meta charset="UTF-8">とは？
<meta>タグは、その文書に関する情報を指定して、ブラウザに知らせるためのタグです。
<meta charset="UTF-8">でブラウザに用いる文字コードを指定しています。
文字コードの指定「UTF-8」は、ISOの規格で世界標準のものです。HTMLは「UTF-8」で記述します。
<body>～</body>とは？
ブラウザで表示される部分（ふだん目にするホームページの部分）が<body>タグの中身の部分です。HTMLを作成するにあたって必須のタグです。
<body>～</body>の内側に追記していく形で入力していきます。
<body>タグを記述する位置は、</head>のあと、</html>の前です。最後に必ず「/」で閉じる終了タグ</body>を書きます。
<h1>～</h1>とは？
<h1>タグの「h」はheadingの略で、見出しを作るタグです。見出しを作るタグには「h1」から「h6」まであり、数字が大きくなるほど文字が小さくなります。最後に必ず「/」で閉じる終了タグ</h1>を書きます。
<h1>は記事のタイトルを表し、1ページにひとつです。<h2>は見出しを作成し、必要であれば<h2>の下に<h3>を挿入して内容を分割していきます。
見出しで区切ることで、読者が読みやすいWEBページになります。本の目次をイメージして作ってみてください。
<p>～</p>とは？
<p>タグはParagraphの略で、段落を意味します。主に文章の塊を囲みます。<p>～</p>でひとつの段落を囲みます。HTMLタグの中でとてもよく使われるタグです。
最後に必ず「/」で閉じる終了タグ</p>を書きます。
まとめ
今回は、はじめてホームページを作る初心者でも失敗なしで始められるHTML、最初に覚えたい書き方の基本とタグについて解説しました。
HTMLがわかるようになると、ホームページを作るときにできることが増えます。多くのWEBサイトで使われているので、学ぶことは無駄になりません。
今回作ったHTMLは、最初の一歩です！今後も使う基本のHTMLとしてテンプレートにして利用しましょう。
初心者でもホームページを作れるようになれます！一緒に少しずつできることを増やしていきましょう。
