HTML/要素一覧
HTMLとは

いま見ているこのページもHTMLを返しています。基本的にはウェブページはHTMLを返します。 静止画・動画・スクリプトやスタイルシートなどの他の構成要素もありますが、多くはHTMLから間接的に参照されます。
HTML基本構成

だいたいこのように表示されます。
HTML基本構成

<!DOCTYPE html>は、DOCTYPE宣言といい、省略することも可能ですが、レイアウトが崩れる可能性もあるため、基本的には宣言しておきましょう。
HTML基本構成

(DOCTYPEは小文字大文字関係ありません)
HTML基本構成

HTML文書であることの宣言です。lang="ja"は言語が日本語であることを宣言しています。lang="ja"は、なくてもいいですが、基本ではある方がいいでしょう。
HTML基本構成

lang属性は、そのページの言語を指定できる属性です。 日本語なら「ja」、英語なら「en」を指定します。
HTML基本構成

ここに、ページの情報を書きます。head要素内には、title要素とmeta要素(meta要素は「<meta charset="UTF-8">」が必須なだけです。)が必須となっています。
HTML基本構成

名前の通り、ページのタイトルを指定します。だいたい30文字以内で収めるようにしましょう。
HTML基本構成

文字コードを「UTF-8」にするものです。その他文字コードは色々ありますが、全世界共通の「UTF-8」にするのが無難です。
HTML基本構成

ページにスタイルを適用したいときに使います。「rel="stylesheet"」は、変更できませんが、hrefには、相対パスを入力します。
HTML基本構成

HTMLをブラウザ上で表示するところです。タグ以外の文が表示されます。これで言うと、<body><h1>テストHTML</h1><p>このページはテストHTMLです。</p><p>pタグで囲った文章</p></body>にあたります。
HTMLの書き方

ここまで説明してきましたが、重要な「HTMLの書き方」について説明していなかったので、説明します。
HTMLの書き方

という順番を意識して、次の解説をお読みください。
HTMLの書き方

今まで、「<body>」とか、「<link>」とか、とにかくタグを「<」「>」ではさみまくっていますが、この「<」で始まり、「>」で終わるタグを、「開始タグ」。
HTMLの書き方

「</」で始まり、「>」で終わるタグを、「終了タグ」と言います。HTMLのタグは、「終了タグ」が無いものもありますが、(例えば「<link>」や「<input>」)絶対に「開始タグ」はあります。
id と classをつける

idとclassをつけると、いいことがたくさんあります。例えば、CSSで特定の修飾をつけることができます。
id と classをつける

id名は少しルールがありますが、自分でつけることができます。
id と classをつける

ルールは、
id と classをつける

説明が難しいので、HTMLコードで説明します。
id と classをつける

上を見たら分かる通り、「id」は使える回数が一つのページで一回。「class」は使える回数が無いのでどこでも使うことができます。
id と classをつける

idとclassは、開始タグの「>」の前にスペースを入れて記述します。
id と classをつける

よく、ページでリンクを見かけることがあると思います。その中でも「目次」とかでまとめられているものは、同じページの中で「スー」と移動しています。これは、a要素のhref属性を「#id名」にしているからです。もしリンクを作って同じid名が複数存在したら、どこにリンクしたらいいのかブラウザは判別できないから、「id名を使うのは一回」と決まっているわけです。
id と classをつける

複数使う場合は、「class」を使用してください。
よく使うHTML要素(body要素内)

ここにしるしている要素は、全てbody要素内で使う要素です。注意してください。
よく使うHTML要素(body要素内)

ページの段落をつくるのに使われる。 p要素の上下に少し余白ができる。
よく使うHTML要素(body要素内)

見出しを作成する要素。 h1はメインとなる見出し。それ以降は主にサブの見出しで使われる。
よく使うHTML要素(body要素内)

ハイパーリンク(つまりリンク)を作成する要素。 <a href="ページへのパス">テキスト</a>と入力するとリンクが作成できる。
よく使うHTML要素(body要素内)

ul要素の子要素としてliを使う。なので構成は、
よく使うHTML要素(body要素内)

というふうになる。
よく使うHTML要素(body要素内)

この場合、「コンテンツ」の前に「・」がつく。
よく使うHTML要素(body要素内)

ol要素の子要素としてliを使う。なので構成は、
よく使うHTML要素(body要素内)

というふうになる。
よく使うHTML要素(body要素内)

この場合、「コンテンツ」の前に「1からの番号」がつく。
よく使うHTML要素(body要素内)

画像を表示させるときに使う要素。要素の属性に「src」と「alt」があり、中でも「src」は必須の属性。altは画像がうまく読み込まれなかったときのテキストを設定する。
よく使うHTML要素(body要素内)

表を作成する要素。子要素は、caption, colgroup, thead, tbody, tfoot あるいは tr(thead, tbody, tfoot が省略された場合)。
よく使うHTML要素(body要素内)

表のキャプションを記述します。
よく使うHTML要素(body要素内)

テーブルのセル行を定義する。 子要素は、th要素あるいはtd要素。
よく使うHTML要素(body要素内)

セルをテーブル・セル群のヘッダーとして定義する表の見出しを作成する要素。 終了タグ省略可。
よく使うHTML要素(body要素内)

データを含むテーブルのセルを定義する。 終了タグ省略可。
よく使うHTML要素(body要素内)

それだけでは確立できないことをまとめるのに使います。sectionには、「章」といった意味があり、複数の項目があります。基本的に「h1 ~ h6要素」が入ります。
よく使うHTML要素(body要素内)

それだけで独立できる内容のときに使います。中に、「h1 ~ h6要素」が入ります。
よく使うHTML要素(body要素内)

なにかの要素にはまとめるのは難しいときに使います。子要素をグループ化してくれますが、全くCSSなどは無いため必要に応じて追加する必要があります。
よく使うHTML要素(body要素内)

div要素と同じようになにかの要素にはまとめるのは難しいときに使います。span要素はインライン要素のため、p要素等と同じように扱われますが、 全くCSSなどは無いため必要に応じて追加する必要があります。
よく使うHTML要素(body要素内)

主に、ページのタイトルやナビゲーションを囲むのに使われます。
よく使うHTML要素(body要素内)

ページのナビゲーション(メニュー部分)を囲むのに使われます。
よく使うHTML要素(body要素内)

「main」という言葉でも分かるように、ページの一番重要な部分を記述するのに使います。中に、div・article要素などを使ってコンテンツを構造化します。
よく使うHTML要素(body要素内)

ページの未尾に配置され、主に著作権やページに関する情報、連絡先など入れます。
よく使うHTML要素(body要素内)

改行するための要素。終了タグは必要ない。
よく使うHTML要素(body要素内)

重要なところに使われ、太字で表示される。
よく使うHTML要素(body要素内)

フォームを作成する。「id」を付与しJavaScriptで実行すると、フォーム内の情報が取得できる。中には「input要素」などが子要素になる。
よく使うHTML要素(body要素内)

input要素のtype属性がtextのときよりも横縦に長い入力欄を作る。cols属性とrows属性で、この要素の大きさを指定できます。colsは平均的な文字幅で、一行に入る文字数を設定します。
よく使うHTML要素(body要素内)

CSSを直接HTMLに記述するときに使う要素。この要素内で記述したCSSは、そのHTMLでしか適用できない。
参照してほしいページ

(ただし、最近のWindowsには「Microsoft Edge」が搭載されています)