HTMLとは？
HTMLというのは人間のためではなく、ブラウザや検索ロボットのためにあると認識しておきましょう。
私たちが普段みている雑誌や教科書、ブログや企業サイトなどは文書構造化され、私たちが理解しやすいように情報が整理されています。特に意識しなくても、文書の構造や文章の意味や意図を理解しています。しかし、コンピュータや検索ロボットは文書構造を理解することはできませんし、文章を見てもただの文字としてしか認識できません。そこで、コンピュータや検索ロボットでも理解できるようにHTMLのタグを使用して文章を囲っていき、「ここは見出しですよ！」「ここは段落ですよ！」「ここはリストですよ！」という風に教えてあげるのです。
ここでは、そもそもHTMLとは何なのか？どのように使用していくのかという内容を記載しています。今まで何となくでしか理解していなかった方やHTMLを勉強する人は一通り目を通しておくとよいでしょう。
ハイパーテキスト・マークアップ・ランゲージ
HTMLはWebページを作成するために開発された言語となります。 インターネット上で公開されているWebページのほとんどは、HTMLで作成されています。HTML（エイチティーエムエル）はHyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略称です。
ハイパーテキストとは？
テキストはご存知かと思います。テキストエディター（メモ帳など）を使って記述した文字データです。では「ハイパーテキスト」とはどういったものでしょうか？ハイパーテキスト（HyperText）とは、ハイパーリンクを埋め込むことができる高機能なテキストとなります。 ハイパーリンクとは、リンク機能のことを指します。Webページでリンク機能のついたテキストや画像、ボタンをクリックすると別ページへ移動する、あのリンクのことです。
HTMLのタグを使用しマークアップ
HTMLのマークアップとは一体何でしょう？マークアップとは「目印をつける」という意味があります。
HTMLの役割を簡単に説明すると、「ハイパーテキストをつくり役割ごとに目印をつける」作業となります。 すなわち、文書がどのような構造になっているのかを明確化するための作業です。
文書構造については次をご覧ください。
HTML文書の要素
文書構造を理解しよう
普段見ている一般的な文書は、情報を整理して分かりやすくするために、大見出しや中見出し、小見出し、段落を必要に応じて繰り返すという構造をもちます。
さらに文章の中には、箇条書き、引用、表をもつという階層構造になっており、画像や図表などが使用されたりして構成されています。
HTMLでは、文書を構成する大見出しや段落、画像などのさまざまな部品のことを「要素（element:エレメント）」と呼びます。
HTML文書の要素は「タグ」で指定する
HTML文書の中で、さまざまな要素がいったいどんな種類の部品であるか、またその範囲を指定するのが「タグ」となります。
ある1つの要素の範囲の始まりを示す「開始タグ」と終わりを示す「終了タグ」で構成されます。
タグの中には「終了タグ」がないものもあります。
要素を示す「タグ」は「入れ子」の構造を守る
タグを記述するとき、タグを互い違いに記述することができないというルールがあります。
例えば、段落を示す<p>タグの中に強調を示す<em>タグを使用することはできます。しかし、<p>タグが閉じられていない状態で<em>タグを使用することはできません。
属性と値（属性値）
各要素には、その要素の性質や役割など詳細情報を示す「属性」を指定できます。
開始タグの要素名の後に半角スペースを置き、基本的には「属性＝”値”」のかたちで記述します。
「値」には、left、right、centerのように既定のものと、数値などのように文書の製作者が任意で書き込むものの2種類があります。
HTMLの基本構造を理解する
基本的な骨組みの要素、html・head・body
HTML文書の最も基本的な骨組みを形成するのは、<html><head><body>の3つの要素となります。
HTMLではhtml要素（<html>から</html>の間）に、HTML文書全体に関する情報と、HTML文書としてブラウザに表示させたいコンテンツを分けて記述します。
HTML文書全体に関する情報はhead要素（<head>から</head>の間）に。
HTML文書としてブラウザに表示させたいコンテンツはbody要素（<body>から</body>の間）にそれぞれ記述します。
<html>タグ
HTML文書のすべての要素は<html>タグで囲まれる必要があります。つまり、HTML文書の最初に<html>を、HTML文書の最後に</html>を記述することで、その間に書かれた内容がhtml要素となります。
<head>タグ
HTML文書タイトル・概要・キーワード・作者など、文書全体に対する情報をhead要素に記述します。
head要素はbody要素の前に記述します。HTML文書の付加情報という位置づけのため、head要素に記述された内容は基本的にブラウザには表示されません。
<body>タグ
ブラウザで表示させる文字や画像などのコンテンツを、<body>タグの中に記述します。実際のWebページでは、コンテンツとなるさまざまな要素がbody要素の中に含まれます。
HTML文書データを保存する際の拡張子「.html」
拡張子とは、そのデータがどのようなデータなのかを示すものです。ファイル名のあとに「.」ドットをつけてその後に記載される部分が拡張子となります。「.jpg」ならJPEG画像データ、「.gif」ならGIF画像データ、テキストデータなら「.txt」などなど。
HTML文書データを保存する際は、拡張子を「.html」とします。
HTML文書を作成する前に知っておくこと
DOCTYPE宣言（文書型宣言）
HTMLで気をつけなければいけないのは、様々なバージョンが存在するということです。それぞれのバージョンで使用できる要素や文法規則に違いがあります。そこで、つくられている文書がどのバージョンのHTMLに準拠して記述されているのかを宣言する必要がでてきます。この宣言をDOCTYPE宣言（Document Type Definition：DTD）と呼びます。また、文書型宣言ともいいます。
ブラウザは始めにDOCTYPE宣言を読み込み、定義されているバージョンを理解してHTML文書を理解していくので、DOCTYPE宣言はhtml要素の手前に記述し一番はじめに読み込ませる必要があります。最近ではHTML5での記述が一般的ですので、HTML5での文書型宣言を覚えるようにしましょう。
HTML5のDOCTYPE宣言
<!DOCTYPE html>HTML5のDOCTYPE宣言は今までで1番シンプルな記述となります。
記述されていなくても表示されますが、その場合、互換モードで表示されてしまうため、必ず設置しておきます。
今はほとんど使われない、HTML4.01の3種類のDTD
HTML 4.01厳密型DTD（strict）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">厳密型DTDとなります。W3Cが非推奨とする要素と属性は使えません。
したがって、htmlの属性で文字を大きくすることや色を変えることができません。フレームも使うことができません。
文字を大きくしたり色を変えたりなどスタイルを設定する際は、cssを使用しておこないます。
HTML 4.01移行型DTD（Transitional）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">移行型DTDとなります。W3Cが非推奨とする要素と属性が使えますが、フレームは使えません。
htmlの属性でスタイルを追加することがある場合、この宣言を設定しておきましょう。
HTML 4.01 フレーム設定型DTD（Frameset）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">フレーム設定型DTDとなります。フレームを使用したファイルに使います。
ただし、最近ではフレーム分けされたサイトは見かけませんので、ほぼ使わないDTDです。
HTML文書の言語を指定する「lang属性」
lang属性
<html lang="ja">
HTML文書では、どの言語を使った文書であるかを示しておくことが推奨されています。
<html>タグに「lang属性」を記述します。属性値には国ごとの値（日本の場合はja）が決められています。
lang属性を設定する意義
lang属性は記述されていなくても問題なくブラウザで閲覧することができます。
絶対に必要なものではありませんが、下記2つのポイントから記述した方が良いかと思います。
言語をプログラムに識別できる
htmlは世界中の方が開発しています。私たちは見た目で記述されて言語が日本語なのか、英語なのか、中国語なのかなど識別することができます。しかし、プログラムは記述されている言語が何なのか基本わかりません。そこで、lang属性を使用することで私たちだけでなく、プログラムにも要素内で使用されている言語を識別させ理解させることで、文字化けなどの発生を避けられる可能性があります。
文字化けという観点から言うと、一部のブラウザでは言語の指定をしていなければ、文字のフォントを反映させられないという場合があります。もしもの場合を避けるため、lang属性を指定しておくというのはアリです。
自動翻訳時に有効になる
Google Chromeを使用してサイトを見ている人は自動翻訳の機能を使ったことがあるかもしれません。すべてのブラウザが自動翻訳機能を備えているわけでなく、これから対応していくことが考えられます。その場合、lang属性によって使用されている言語をプログラムに対して識別させておけば、自動翻訳をする際にそれを手掛かりにブラウザのプログラムが言語翻訳をしてくれるようになるかもしれません。
Google Chromeでは、lang属性が設定されていなかったとしても自動的に言語を感知して、翻訳することが可能です。
HTML文書の文字コードを指定する「charset属性」
文字コードとは
文字コードとは、コンピュータで文字を処理する際に、文字の種類に固有の番号を割り振ったものです。代表的なものにASCIIやShift_JIS、UnicodeやUTF-8といったものがあります。
詳しく解説すると長くなるので、ここで覚えていてほしいのは、世界で最も対応できている文字コードは「UTF-8」だということです。文字コードに興味のある方は1度調べてみると良いかと思います。
charset属性
<meta charset="UTF-8">
文字コードをHTML文書内に記述することで、文字化けを起こさないようにできます。文字コードを指定するときはmeta要素にcharaset属性を合わせ、属性値に文字コード指定します。
記述する場所は、<head>要素内となります。
HTML5より前の文字コードの指定方法
charset属性はHTML5から追加された属性です。HTML5より前のバージョンのHTML（HTML4）にはありませんでしたので、「http-equiv属性」と「content属性」をペアで使用し記述していました。HTML4で記述する際は注意しましょう。
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>HTML文書に付加情報を加える「name属性とcontent属性」
name属性とcontent属性
付加情報のほとんどは、タグにname属性とcontent属性を付け足して記述します。
name属性に何の情報かを示し、content属性には、その情報に対する具体的な内容を記述します。
content属性の属性値が複数になる場合は、半角カンマ（,）で区切って記述する。
「name属性」の属性値の種類と内容一覧
| name属性値 | 役割 |
|---|---|
| application-name | 制作したページがWebアプリケーションである場合にのみ、アプリケーション名を記述します。 |
| author | ページの著作者の名前を記述するときに指定します。 |
| description | ページの概要を記述するために指定します。 |
| generator | ページがソフトウェアによって記述・作成されている場合、ソフトウェア名を記述することができます。 |
| keywords | ページの内容を表すキーワードを指定できます。 |
| robots | 検索エンジンのクローラーに対して情報を指定できます。 |
| viewport | モバイルデバイスの初期の表示領域を指定できます。 |
「name属性」の属性値の書き方
application-name
<meta name="application-name" content="アプリケーション名">HTML５から追加された属性値です。
制作したページがWebアプリケーションである場合にのみ、アプリケーション名を記述します。
１つのページには1つだけ記述できます。
author
<meta name="author" content="著者名">ページの著作者の名前を記述するときに指定します。
description
<meta name="description" content="説明文テキスト">
ページの概要を記述するために指定します。検索エンジンのクローラーに読み取られ、検索結果などにも表示される情報です。１つのページに1つだけ記述できます。
generator
<meta name="generator" content="WordPress 5.0.3">ページがソフトウェアによって記述・作成されている場合、ソフトウェア名を記述することができます。人の手によって作成された場合は必要ありません。
keywords
<meta name="keywords" content="キーワード1, キーワード2, キーワード3">ページの内容を表すキーワードを指定できます。content属性の値には、キーワードを「,（カンマ）」で区切ることで複数のキーワードを定義できます。
robots
<meta name="robots" content="index, follow">検索エンジンのクローラーに対して情報を指定できます。
content属性の値が複数ある場合、値を「,（カンマ）」で区切り定義します。
「robots」のときの「content属性」の値
| content属性の値 | 役割 |
|---|---|
| index | 検索結果でそのページを表示しても問題ないという設定 |
| noindex | 検索結果でそのページを表示しないようにする設定 |
| follow | ページ内のリンクを全て評価対象にして問題ないという設定 |
| nofollow | ページ内のリンクを全て評価対象にしないという設定 |
viewport
<meta name="viewport" content="width=device-width, initial-scale=1">モバイルデバイスの初期の表示領域を指定できます。content属性の値を複数指定する場合、値を「,（カンマ）」区切りで定義します。
「viewport」のときの「content属性」の値
| content属性の値 | 役割 |
|---|---|
| width | 表示領域の横幅を指定します。 基本はdevice-widthで指定。200px〜10000pxの範囲でも指定できます。（初期値：980px） |
| height | 表示領域の高さを指定します。 使用する際は基本、device-heightで指定。233px〜10000pxの範囲でも指定できます。（初期値：自動） |
| initial-scale | 初期スケールを倍率で指定できます。（最初に開いた時の拡大率。） [minimum-scale, maximum-scale]の範囲で指定します。 |
| minimum-scale | 最小の倍率を指定できます。 0〜10の範囲で指定。（初期値：0.25） |
| maximum-scale | 最大の倍率を指定できます。 0〜10の範囲で指定。（初期値：1.6） |
| user-scalable | ズームの操作の可否を指定できます。 yesまたは、noで指定（初期値：yes） |
ページにタイトルをつけるtitle要素
HTML文書のタイトルは、<head>要素の中に<title>タグを使って指定します。
指定されたタイトルは、タイトルバーやブックマーク、お気に入りの見出しや検索エンジンのサーチ結果、タスクバーなどに表示されます。
コメントの書き方を覚える
コメントタグを使えば、囲まれた部分は無視され実行されません。したがって、ブラウザに表示させたくない部分をコメントにすれば表示されません。また、一度書いたプログラムを消したくないけど実行させたくない場合にも、コメントにしてあげると無視されますのでエラーになりません。
もちろん、プログラムを書いていく中で長くなった場合、記述している内容が何かを記すためにもコメントタグを使ったりします。使い方によっては大変便利なものになりますので覚えておきましょう。
HTMLの基本まとめ
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- head要素内に記述した内容はブラウザに表示されません。 -->
<meta charset="utf-8">
<meta name="description" content="初心者の方向けにHTMLの基本を分かりやすく解説します。">
<meta name="keywords" content="HTMLの基本, HTMLの基本構造, HTML5">
<title>HTMLの基本</title>
</head>
<body>
<!-- body要素内にはブラウザに表示したい内容を記述します。 -->
<h1>HTMLの基本</h1>
<p>Webページを制作するための基本となるHTMLについて解説します。</p>
</body>
</html>長くなりましたが、HTMLを記述するにあたり、最低限最初に記述していた方がよい要素、属性を記述しました。これをベースに適宜制作目的に合わせた内容にカスタマイズしていきましょう。
コメント