【HTML】HTMLの基礎を解説

こんにちは。パンダのプログラミング研究所（@PandaProgramLab）へようこそ！

今回は、さまざまなウェブサイトで使われているHTMLという言語を紹介します。

HTMLに加え、CSSを追加すれば自分好みのウェブサイトが作れます。

では、プログラミングスタート！

Visual Studio Codeのインストール

HTMLは、独自のコーディングソフトがないので、コーディングソフトをインストールする必要があります。

今回は、「Visual Studio Code」というソフトを使います。

Visual Studio Codeのインストール方法はこちら↓

まず、HTMLの仕組みについて解説していきます。

HTMLでは、テキストを「タグ」で囲むことで、そのテキストが見出しやリンク、ボタンなどを表せる仕組みです。タグは、<>で囲まれています。タグには、タイトルを表す<title>や、テキストを表す<p>などがあります。

タグを記述する際は、<タグ名></タグ名>と記述します。

タグには、開始タグと終了タグがあり、その間にテキストを入れることができます。終了タグには、タグ名の前に /（スラッシュ）があります。

まず、自分好みのサイトを作る第一歩として、h1タグで大きなテキスト（見出し）を入力しましょう。

Visual Studio CodeでHTMLファイルを作ったら、まず、以下の内容を入力します。

<h1></h1>

この時に、入力を短縮する方法があります。

タグ名（<>を除く）を入力して、Tabキーを押すと、自動的に<>がついて、終了タグも記述されます。

次に、開始タグと終了タグの間に好きなタイトルを入力してみてください。

<h1>好きなタイトルを入力してください</h1>

そして、ブラウザで開くと、以下の画像のようになります。

次に、ページにタイトルをつけてみましょう。

タイトルは、以下の画像の部分です。

タイトルは、<title>タグで設定できます。

<title>タイトル</title>

このようにすると、ブラウザに表示されるタイトルが設定できます。

これだけでも、立派なウェブページです。

先ほどの記述だけでも良いですが、HTMLには、決められた型があります。

以下のコードのように、<html>タグ、その中（要素といいます）に<head>要素と<body>要素などが必要です。

多くの場合、<head>要素には、ページに関する情報や対応しているJavaScriptファイル、CSSファイルなどを記述します。<body>要素には、表示する内容を記述します。

<!DOCTYPE html> は、DOCTYPE宣言と呼ばれるもので、HTMLのバージョンを宣言するものです。最新バージョンのHTML5（2021年10月現在）を使うときは、 <!DOCTYPE html> を記述します。

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
    </body>
</html>

この内容が分かれば、HTMLの基礎はOKです。

次回は、CSSについてや、タグのクラスについてを解説する予定です。

今回は、HTMLの基礎について解説しました。

パンダ所長

バイバイ！