HTMLとは┃HTMLってどうやって書くの？ HTMLの役割について解説┃HTMLを学習するための準備をしましょう

それでは実際にWEBサイト作りを始めていきましょう。WEBサイトを作成するには『HTML』と『CSS』という言語を使用します。言語って聞くと難しそうと思われるかもしれませんが、意味や役割、書き方のルールを理解すれば初心者の方でも問題なく作成できます。

WEBサイトを作成するにはHTMLとCSSという言語が必要です。

HTMLとは何か

HTML（エイチティーエムエル）とは『Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）』の略称です。Hyper Textとは、画像やリンクを埋め込むことができるテキストのことで、Markupはそれらのテキストをタグと呼ばれる特殊な記号を用いて配置することを意味しています。

要約すると、HTMLの役割は画像や写真、見出しや文章、リンクなどをタグを使用してページのどこに何を表示させるを明示することです。そのため世の中にあるほとんどのWEBサイトではHTMLが使用されています。

HTMLはWEBサイトを閲覧する私達だけでなく、コンピュータがページの情報を正しく理解できるように書く必要があります。コンピューターは記載されているタグでその文字列が何を表示させているかを確認します。そのためタグの意味や役割を理解することが非常に重要です。

HTMLはタグという特殊な記号を使用して書いていきます。

HTMLにはバージョンがある?

HTMLは1980年代に後半に誕生し2022年現在までにいくつものバージョンアップを繰り返しています。2022年現在の最新バージョンはHTML Living Standardという名称です。

一つ前のバージョンであるHTML5からHTML Living Standardへの変更については、いくつかのタグの扱いが変更になりましたが、大きな仕様変更はありません。

私が利用しているドットインストールやProgateなどのオンライン学習サイトや書店で販売されている参考書はHTML5を使用した説明が多いですが、それらをもとに学習することは問題ありません。

HTMLの最新バージョンはHTML Living Standardです！

HTMLの基本の書き方

HTMLはタグと呼ばれる「<」や「>」「/」といった記号と英数字を組み合わせてページい表示させる文字列を囲みます。一例として<h1>タグを使用した場合の書き方を見てみましょう。

<h1>はタグは大見出しを意味するタグです。ページに表示させたい文字列を<h1>と</h1>で囲むことでその文字列を大見出しとして表示できます。

また、「<」と「>」で囲んだ最初の部分を開始タグ、「<」と「/>」で囲んだ終わりの部分を終了タグと言い、開始タグと終了タグで囲んだ文字列をコンテンツ、それら全てを要素と言います。そしてコンテンツ（ページに表示させる部分）をタグで囲んで要素を作ることをマークアップするといいます。

HTMLの基本の書き方は、表示させたい文字を開始タグと終了タグで囲みます！

HTMLの属性とは

タグによっては追加の情報を加えることができます。この追加の情報のことを属性と言い、開始タグの中に半角スペースを空けて書きます。そして追加する情報の値を属性の値と言い“（ダブルクォーテーション）で囲みます。

例えば<img>タグは画像を表示させるためのタグですが、画像のファイル名をsrc属性を使用して指定します。

属性はどのタグにもつけられるものと特定のタグにしかつけられないものがあります。よく使用する属性については今後紹介していきます。

属性とは追加情報やオプションを設定することです！

CSSとは何か

CSSとは、HTMLで配置した見出しや文章などの見た目を整える役割をもっています。CSSを利用することで、見出しや文章の文字を大きくしたり、色を変えることができます。CSSについてはHTMLの説明が済んだら行っていきます。

ページの見た目に関わる装飾やデザインはCSSでおこないます！

学習するための準備をしましょう

ここからは準備編で紹介したVSCode使用して実際に記入するために、作業するためのフォルダーやファイルを用意していきましょう。VSCodeをまだイストールされていない方は下記の記事をご参照ください。

WEBサイト作成に必要な環境を構築しよう！準備-後編

準備編後編では、WEBサイトを作成するための環境構築についての備忘録です。「インターネット通信環境」「ブラウザのインストール」「エディタのインストール・設定」「参考サイト」について順にまとめていますので、何から始めたらいいか困っているかたはぜにご参照ください。

1フォルダーの作成

デスクトップの何もないところで右クリックして新規作成からフォルダーを作成しましょう。フォルダー名は分かりやすいもので構いませんが、私と同じ環境で行う場合はMyHTMLと付けてください。この中にファイルや別途フォルダーを作成していきます。

2VSコードから作成したフォルダーを開く

VSCodeを起動させて、画面左側にあるフォルダーを開くからさきほど作成したMyHTMLフォルダーを開きましょう。フォルダーを開くが表示されていない場合は、左上のアイコン（青で囲ったところ）をクリックしましょう。

3新しいファイルを作成する

先ほど開いたMyHTMLフォルダーの右側にあるアイコン（新しいファイル）をクリックして、ファイル名をindex.htmlと入力しましょう。HTMLファイルの拡張子は必ず.htmlとつけます。

また、フォルダー内で一番最初に見せるhtmlファイルはindex.htmlと付けるのが一般的です。

4新しいフォルダーを作成する

次に画像を保存するフォルダーを用意します。手順3で使用したアイコンの右横のアイコン（新しいフォルダー）をクリックしてimgまたはimagesと名前を入力しましょう。

画像を保管するフォルダーには上記の名前がよく使われています。今回はimgと入力しました。

5imgフォルダーに2つのファイルを用意する

作成したimgフォルダーに2点（縦横16pxの画像と縦横256pxの画像）の画像を準備します。画像の準備が難しい場合はサンプル画像の文字をクリックしてzipファイル（MyHTML-image.zip）をダウンロードしましょう。

Google Chromeでファイルをダウンロードすると画面左下にファイル名が表示されますので、右クリックでフォルダーを開く、表示されたファイル名をクリックしてフォルダを開くを選択、ダウンロードしたファイルを右クリックで、表示された項目から場所を指定して解凍で、さきほど作成したMyHTMLフォルダーを選択しましょう。

表示されている2つのファイルを選択してコピー（ショートカットはCtrl+C）、MyHTMLフォルダー内のimgフォルダーに貼り付け（ショートカットはCtrl+V）ます。貼り付けが完了したらMyHTML-imgeフォルダーは削除、フォルダーやGoogle Chromeも右上の×で閉じれば準備完了です。