HTMLとは？
HTML (ハイパーテキストマークアップ言語、HyperText Markup Language) は、訪れたウェブサイトの構成をブラウザーに対して伝えるために使うマークアップ言語です。
<p>My cat is very grumpy</p>通常、タグは小文字で表現されます。
HTMLはファイル（拡張子 .html）として保存して、サーバーへ配置して利用します。
HTMLはWebページを表示する際にどのような働きをするのか
ブラウザでURLを入力すると、ページが表示されます。
インターネット上には、URLのドメインに対応した「Webサーバー」が存在しており、Webサーバーからの各種データが送信されて、ブラウザが受け取って、ページが表示されます。
HTMLをベースとして作成されたWebサイトでは、1つのURLに対して1つのHTMLファイルを用意します。
https:// の「s」はセキュアを意味し、暗号化通信によってデータが送受信されます。
frog-eight.com は「ドメイン名」で、ドメイン名に対応した「ルートディレクトリ（＝フォルダ）」がWebサーバー上に存在します。
https://frog-eight.com/contact/ というURLの場合、「ルートディレクトリ」の中に「contact」という名前のフォルダがあり、その中に「index.html」というファイルがある場合にページが表示されます。
index.htmlというファイル名は「インデックスファイル」と呼ばれ、フォルダの代表として使用され、URL上では省略可能です。
インデックスファイルにはindex.htmlの他、PHP（＝プログラムの種類）で作成されたindex.phpなどもあります。
HTMLの標準化とブラウザの対応状況
ウェブ標準は、私たちがウェブサイトを構築するために使用する技術です。これらの標準は、仕様書と呼ばれる長い技術文書として存在し、この技術がどのように動作すべきかを詳細に記述しています。
参考）ウェブ標準
ウェブ標準は標準化団体によって作成されています。標準化団体は、さまざまな技術企業の人々からなるグループを招き、すべての用途を満たすために技術がどのように動作するのが最善であるかについて合意させる機関です。
参考）標準化団体
ウェブ標準が策定され、その仕様は順次ブラウザへ実装されていきます。
HTMLの規格として「HTML Living Standard」があります。CSS標準もあります。
HTMLやCSSなどの各機能が現在ブラウザで使えるかどうかは、以下のサイトにて確認ができます。
Can I use
HTMLで使えるタグについて
かつて広く参照された HTML5 の仕様では、約110種類程度の要素が定義されていました。しかし、HTML5は2021年に廃止され、HTML Living Standardが唯一の標準となっています。
よく使われるタグは、以下の通りです。
| タグ名 | 直接の親要素 | 意味 |
| html | 一番外側、ルート要素 | |
| head | html | HTMLの設定を含む |
| meta | HTMLの設定 | |
| link | CSSファイル、ファビコンなど | |
| style | CSSをHTML内に直接記述する | |
| script | JavaScriptファイル、直接記述 | |
| body | html | ページに表示する内容 |
| header | body | ヘッダー |
| main | body | メインコンテンツ |
| footer | body | フッター |
| aside | body | サイドバー、サブコンテンツ |
| article | 記事（ブログやニュースの1記事） | |
| section | 章、セクション（ネスト可） | |
| h1 | ページタイトル（ページに1つ） | |
| h2 | (section) | セクションタイトル |
| h3～h6 | セクション内の子要素のタイトル | |
| p | 段落、文章 | |
| br | 改行 | |
| img | 画像 | |
| ul | 箇条書き一式 | |
| li | ul, ol | 箇条書きの項目 |
| a | リンク要素（クリックでジャンプ） | |
| div | 汎用的に使えるブロック要素 | |
| span | 汎用的に使えるインライン要素 | |
| table | 表一式 | |
| tr | table | 表内の行 |
| th | tr | 行内の見出しセル |
| td | tr | 行内のデータセル |
| form | 送信可能なフォーム一式 （別途、送信先のプログラム必要） | |
| input | form | テキスト、ラジオ、チェックボックス、送信ボタンなど |
| textarea | form | テキストエリア |
| button | form | ボタン |
| svg | SVG画像タグ |
HTMLを簡単に書くための補完機能、emmetとは
Emmet（エメット）とは、HTMLやCSSのコーディングを高速化するためのテキストエディタ用のプラグインまたは機能です。以前は「Zen Coding（ゼン・コーディング）」という名称で知られていました。
Emmet を使うと、特定の省略記法（アブリビエーション）を入力するだけで、複雑なHTML構造やCSSプロパティを瞬時に展開できます。
例えば、! や ul>li*5>a のような短い文字列を入力して特定のキー（通常はTabキー）を押すだけで、以下のようなHTMLコードが自動的に生成されます。
例：ul>li*5>a と入力して展開
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>※このようなタグ構造は通常、メニュー項目（リンクつき）で使用します。
参考）
Emmet
Visual Studio Code の Emmet
HTMLの基本構造
HTML要素の構成
開始タグ、コンテンツ、終了タグで構成されます。
コンテンツがなく終了タグがない場合もありますが、自己判断ではなく、タグの種類によって予め決まっています。
（img, br などは終了タグがありません）
属性
属性は実際のコンテンツの中で表示させたくない、要素に関する追加情報を保有します。
属性名＝”内容” という形で記述します。複数の属性を設定する場合は半角スペースで区切ります。
例では、hrefという属性名の内容として「css/style.css」というファイルが指定されていますが、ファイル名やフォルダ名には日本語を指定しないよう、注意しましょう。（サーバーにて文字化けが発生する場合があります）
HTML文書の構造の例
以下の例では、ブラウザで表示すると、「This is my page」だけが表示されます。
headタグ内の内容は表示されないので、titleタグに書かれたものはブラウザのページ内には表示されませんが、ブラウザのタブ部分には表示されます。
<!doctype html>
<html lang="ja">
<head>
<title>My test page</title>
</head>
<body>
<p>This is my page</p>
</body>
</html>コメント
<!– と、–> で囲まれた部分は、ブラウザで表示されません。（＝コメントアウトされます）
<p>コメントの外にいます。</p>
<!-- <p>コメントの中にいます。</p> -->HTMLを作成してみましょう
以下の記事で作成したindex.htmlを開きましょう。
「HTML文書の構造の例」や「コメント」の例を実際に書いて保存し、ブラウザで表示してみましょう。
ulタグ、liタグは、コンテンツがないタグだけの状態なので、削除してOKです。
以下の3つを、適切な場所へ記載してみましょう。
titleタグは、headタグの内側に記載します。（ページに１つのみ記載します）
<title>My test page</title>pタグは、bodyの内側に記載しましょう。
<p>This is my page</p><p>コメントの外にいます。</p>
<!-- <p>コメントの中にいます。</p> -->Cmd+Sで保存しましょう。
ブラウザで表示する
index.htmlを右クリックして、chromeで開いてみましょう。
ブラウザのタブ、ページの表示内容を確認しましょう。
コメントアウトした部分は、表示されませんでしたよね？
文字の色を変更してみましょう
一般的にはスタイルシートの記述量は多いので、CSSファイルとして独立させて、HTMLのheadタグ内のlinkタグで設定して読み込みます。
今回は簡単にスタイルを追加するだけなので、headタグ内にstyleタグを追加して、テキストの色を変えてみましょう。
pタグにクラス名を追加しましょう
スタイルを設定する際は、タグ要素にクラス名を追加し、そのクラス名に対してスタイルを設定しましょう。
（1つのクラス名は複数の要素に設定可能）
1つ目のpタグに、redという名前をつけます。
styleタグを追加して、redクラスに対して赤色を設定してみましょう
headタグ内に、styleタグを追加します。
style<Tabキー>でemmet展開します。
改行します。
.red という「セレクタ（＝「どの部分に対して」という命令）」を記載します。
波カッコを書いて改行し、その中に、colorプロパティを書きます。
colorと出てきたらEnterして、: (コロン)のあとに「値＝red」を書きます。行の最後は; (セミコロン)で終わります。
redの左側にあるカラーチップをクリックすると、色変更のパレットが表示されます。
ブラウザで表示してみましょう
拡張機能「Live Server」がインストールされている場合は、ファイル名で右クリックすると、「Open with Live Server」が一番上に表示されるので、クリックします。
（インストールされていない場合は、Finderやエクスプローラーなどのファイル名から、Chromeで表示します）
liveサーバーを使った表示の場合、URLの表示に「127.0.0.1:5500」と表示されていますね。これは、VS Code側のWebサーバー機能が働き、IPアドレスとしてローカルを表す127.0.0.1（＝使っているデバイス）、5500番ポートを使っている、という意味になります。
開発者ツールでのぞいてみよう
Chromeのページ内で右クリックし、「検証」をクリックします。（メニューの下側にあります）
右上の「縦ドット3つ」のメニューアイコンから、固定サイド（＝ページのどこに表示するか）を選べます。
以下の例は、右端を選んでいます。
検証ウィンドウ内の左上にある矢印アイコンをクリックし、「This is my page」をクリックしてみましょう。
htmlではredクラスの箇所がフォーカスされ、CSSのエリアでは、この要素にかかるセレクタが表示されます。
.redというセレクタに、colorプロパティ＝redが指定されているのがわかります。
redの右側にある四角いカラーチップをクリックすると、ブラウザ上で一時的に他の色へ変更することもできます。
ここまでで、VS CodeでHTMLの新規作成と保存、styleタグによるCSS設定、ブラウザでの表示、検証ツールの開き方まで学びました。
次回は、よく使うHTML要素について学んでいきましょう。
