もくじ
HTMLの基本
HTML（Hyper Text Markup Language: エイチ・ティ・エム・エル）は、ブラウザに表示する文書構造の作成や画像の配置、装飾の指定などを行うための言語です。
普段目にする本にもタイトルや見出し、段落などがあるように、文にも様々な役割があります。
これらの役割をHTMLではタグで囲むことで定義します。
このタグは山括弧（<>）を使用して、次のように使用します。
<h1>最近の出来事</h1>
<p>川に洗濯に行くと、おばあさんとおじいさんが楽しそうに<strong>桃</strong>を拾っていました。<br>桃は「どんぶらこっこ」と流れていたのですが、それはそれは大きな桃でした。</p>
タグには開始タグと終了タグがあり、その中の文にはタグの持つ特徴が適用されます。
例にあるh1は見出しを表すタグで「最近の出来事」が見出しであるということをコンピュータに伝えています。
タグを含む開始タグから終了タグのまとまりを要素（Element: エレメント）と言い、要素の中には複数の要素を記述することができます。
brタグは改行を表すタグですが、それのみで使用できるタグもあります。
HTMLは、これまでにいくつかのアップデートが行われており、現在はHTML5 が使用されています。
どの様なタグがあるかについては、HTML要素リファレンスで確認できます。
- 要素には終了タグが必要なものと不要なものがあります。
理解度チェック
- タグとはなんですか？
- 要素とはなんですか？
- アップデートが行われて現在はHTMLの何が使用されていますか？
入れ子構造（親子関係）
HTMLの要素には他のHTMLの要素を含むことができます。
<section>
<h2>まとめ</h2>
<ul>
<li>川に洗濯に行った。</li>
<li>おじいさんとおばあさんを見かけた。</li>
<li>大きな桃が流れてきた。</li>
</ul>
</section>
この例では、sectionタグの要素の中にはh2とulがあり、ulの中には更にliの要素あります。
sectionを親とすると、子はh2とulで、孫はliです。
この様な関係を入れ子構造（または親子関係）といい、HTMLでは重要な概念になります。
- 子は親を継承するので、もし親のテキストの色を赤色に変えると、子のテキストも赤色になります。
理解度チェック
- HTMLのどのような特徴が入れ子構造（親子関係）となっていますか？
属性について
HTMLの要素に追加の設定を加える場合は属性を使用します。
次のコードを見てください。
<span style="color: red;">こんにちは</span>
span要素のstyle属性には「文字色を赤色にするための値」を設定しています。
<p hidden>こんにちは</p>
p要素にhidden属性を設定しています。hidden属性は要素を隠す場合に使用しますが、「隠す」か「隠さない」かどちらか一つの答えしかない属性になります。このような属性を論理属性といって「この属性が存在するかしないか」で値を設定します。
属性には他にも多くの種類があり、HTML要素で使える属性がそれぞれ異なる場合と、すべての属性で共通して使用できる属性（グローバル属性）があります。
属性については、HTML属性リファレンスで確認できます。
理解度チェック
- 要素と属性の関係を説明できますか？
- グローバル属性とはどのような属性ですか？
HTMLファイルの拡張子
HTMLはファイルに記述します。
ファイルには拡張子があり、音楽ファイルであればmp3、画像ファイルであればjpegやpngなどがあります。
この拡張子はファイル名末尾のドット（.）の後に設定します。
HTMLファイルは、拡張子にhtmlを使用します。
この拡張子を使用すると[ファイル名].htmlのようなファイル名になります。
このファイルはテキストエディタで作成し記述することもできますが、開発者はVisual Studio Codeなどの開発専用のエディタを使用して作成します。
-
拡張子に
htmlを使用することで「このファイルの中身がHTMLで書かれている」ということをコンピュータに知らせることができます。
理解度チェック
- 拡張子について説明できますか？
- HTMLの拡張子はなんでしたか？
VS Codeの拡張機能
VS Codeを使用してHTMLを記述する際に便利な拡張機能を紹介します。
拡張機能の使い方や、その他の拡張機能のインストールについてはVS Codeのダウンロードページをご確認ください。
HTMLHint
この拡張機能をインストールすると、HTMLコードのエラーを探索し、波線やメッセージで教えてくれるようになります。
拡張機能: HTMLHint
HTMLコードのテンプレート
HTMLには多くの役割を持つタグがあります。
ここでは、どのページにも必要なテンプレートとなる次のコードについて説明します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>最近の出来事 - マイブログ</title>
</head>
<body>
</body>
</html>
VS Codeでプロジェクトを作成するチュートリアルを参考にHTML作成を試してみましょう。
「HTML5で記述する」を宣言
これまでHTMLはいくつかの大きな改定（バージョンアップ）が行われており、現在はHTML5が使用されています。
次のコードはHTML5で記述することを宣言する一文となり、コードの一番先頭に記述します。
<!DOCTYPE html>
html要素
このhtml要素は記述するすべてのHTMLの祖先となる要素でルート要素といいます。
ルート要素にlang属性を使用して、このページがどの言語で書かれているかを明示することができます。
<html lang="en">
...
</html>
このlang属性は言語コードがenで設定されているので「英語で書かれているページ」という情報をブラウザに知らせます。
日本語のページを作成する場合はjaを設定します。
- ブラウザのGoogle Chromeでは言語コードによって翻訳ダイアログが開きます。
head要素
head（ヘッド）要素にはコンピュータが読み込んで使用する要素を記述します。ここで記述した要素はブラウザの画面には表示されません。
...
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>最近の出来事 - マイブログ</title>
</head>
...
meta要素
meta（メタ）要素には、このページの情報を設定します。
SEO（検索エンジン最適化: エス・イー・オー）に重要な働きをするデータを設定する要素でもあります。
SNSで記事がシェアされた場合に必要なデータもこのmeta要素に設定します。
多くの役割をもつデータを設定するため、通常は複数のmeta要素を定義することになります。
charset（文字コード）
文字コードとは、コンピュータで扱う文字に割り当てられている符号のことです。
UTF-8は文字コードの一つで、英語や日本語など世界で使用される文字を多くサポートしています。
そのためWebサイトでは最も多く使用される文字コードとなります。
<meta charset="UTF-8">
viewport（表示領域）
ビューポートは、スマートフォンやタブレットの画面に適切なサイズで表示するために必要な設定です。
この設定を書かなければレスポンシブ・デザインに対応できないため忘れずに記述しましょう。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
title要素
このページのタイトルを設定します。
このタイトルは、ブラウザのタブに表示されたり検索エンジンで検索したときの結果などに使用されます。
SEOでも重要度が高いので忘れずに記述しましょう。
-
head要素内にはコンピュータ向けの情報を記述します。
body要素
body（ボディ）要素には、画面に表示するための要素を記述します。
...
<body>
</body>
...
この例では何も要素が記述されていないので、画面には何も表示されません。
...
<body>
こんにちは
</body>
...
この場合は、画面には「こんにちは」が表示されます。
-
body要素内にはユーザー向けの画面に表示される情報を記述します。
理解度チェック
<!DOCTYPE html>は何のために必要ですか？- ルート要素とは何のことですか？
- 主にコンピュータが参照するデータを記述する要素は何ですか？
- 画面に表示する要素を記述するのはどの要素の中ですか？