HTMLの基本構造について
<!DOCTYPE html>
<html lang=”ja”>
<head>
（文書の情報を記述）
</head>
<!– （コメント） –>
<body>
（文書の本体を記述）
</body>
</html>
!DOCTYPE 宣言（ドキュメントタイプ宣言）
ドキュメントタイプ宣言は、この文書のバージョンを宣言するメタ情報です。HTML5 であれば<!DOCTYPE html>と記述します。
html 要素（HTML の文書）
html 要素は、この文書が HTML の文書であることを表します。「lang=”ja”」の “ja” は日本語で書かれた文書であることを表します。
head 要素（文書情報）
head 要素は、この文書のメタデータを記述します。例えば、<title>～</title>でその文書のタイトルを記述することができます。
body 要素（文書本文）
body 要素は、この文書の本文を記述します。この body 要素で囲まれた領域が Web ページとして表示されます。
文書情報について
【要参考】HTML での記述を始めましょう | HTML-CSS 入門講座 | 情報デザイン工房 濱屋 ※「L2.3 文書情報」以下が分かりやすい
title 要素（ページタイトル）
<title>Webページのタイトル</title>
Web ページのタイトル名を記載します。多くのブラウザではブラウザのタイトルタブに表示される名称となります。
meta 要素（文字コード指定/charset）キャラセット
<meta charset=”UTF-8″>
HTML を記述している文字コードを指定します。文字コードが UTF-8 の場合は “UTF-8” と指定します。
※UTF-8Nも charsetは“UTF-8”でOK
meta 要素（ページの説明文/description）ディスクリプション
<meta name=”description” content=”サイトの説明文”>
ページの概要を示す説明文を指定します。一般的には検索サイトでページ概要として表示され、PC は 120 文字程度、スマホは 50 文字程度が表示文字数となります。
検索したときにページタイトルの下に表示されるサイトの説明文で、検索エンジンが問題ないと判断すればそのまま表示され、問題ありと判断された場合は説明文ではなく、ページ本文が表示されるとのこと。
meta 要素（ページのキーワード/keywords）
<meta name=”keywords” content=”キーワード”>
ページの検索キーワードをカンマ（,）で区切って指定します。キーワードの有効可否は検索サイトに依存します。
このキーワードで検索したらこのページを見てもらいたい、という希望で記入するとのこと。
何個でもOKだけど、これも反映されるかは検索エンジンの判断によるとのこと。
meta 要素（ページの作者情報/author）オゥサー
<meta name=”author” content=”作者情報”>
Web ページの作成者情報を指定します。
ただ、先生によるとこれを記載しているサイトは見たことがないので、記載しなくてOK。
こういう要素があることだけ知っておけばOKとのこと。
meta 要素（ビューポート/viewport）
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
Webページの表示領域を指定します。 上記の “width=device-width” デバイスの表示幅に合わせた表示領域を使用することを示し “initial-scale=1.0” は 1.0 倍の倍率で表示することを示します。 viewportを指定していないWebページをスマホで表示するとPC用の画面が縮小されて表示されます。 viewportを指定して複数の装置のデザインを実装することをレスポンシブWebデザインといいますが正しく実装するには、HTML に viewport を記述すると同時に CSS にレイアウト調整を行う記述が必要となります。
先生より、これは中身は特に変えずそのまま使用すればOKとのこと。
link要素（外部 CSS ファイルの紐付け）
<link href=”スタイルシートファイルのパス名” rel=”stylesheet” type=”text/css”>
外部のスタイルシートファイルとの紐付けを指定します。
link要素（ファビコンファイルの紐付け）
<link href=”ファビコンファイルのパス名” rel=”icon”>
ファビコンファイル（Web ページのシンボルアイコンファイル）との紐付けを指定します。一般的なファビコンファイル名は “favicon.ico” になります。
ファビコンファイルは、普通のJPGやPNGをファビコン用のicoファイルに変換が必要なので、変換サイトなどを使用するのがおすすめとのこと。
文書本文について
文書本文に記載するタグには、以下の分類があります。
・セクション分類タグ
・コンテンツ分類タグ
・テキスト分類タグ
・コンテンツ埋め込みタグ
・テーブルタグ
・フォームタグ
【参考サイト】
【ブロックレベル要素とインライン要素について】
要素の多くは、ブロックレベル要素とインライン要素に分類されます。
ただし、HTML5ではブロックレベル要素とインライン要素という考え方はなくなっていますので、あくまでも性質を持っていると考えておきましょう。
ブロックレベル要素
文書の骨組みとなる要素です（例えば見出しや段落など）。このタイプの要素は、body要素の直接の子要素として配置することができます。
インライン要素
文章中の一部として扱われる要素です（例えばリンクや文字の強調など）。このタイプの要素は、通常はブロックレベル要素内で使用します。
【参考サイト】
セクション分類タグについて
h1～h6 要素（見出し）
<h1>h1 レベル見出し情報</h1>
<h2>h2 レベル見出し情報</h2>
<h3>h3 レベル見出し情報</h3>
<h4>h4 レベル見出し情報</h4>
<h5>h5 レベル見出し情報</h5>
<h6>h6 レベル見出し情報</h6>
各レベルに従った見出しを指定します。一般的に h1 はページに 1 つだけ指定します。
h1タグ以外は、特に使用回数に制限はありません。
h2やh3などは大きな見出しとなることが多いためたくさん使われると思います。
「h2からh3を飛ばしてh4を使うような、順序を飛ばさないこと」
「h1タグは1ページで一回の使用で抑え、数字の順序をしっかり守ること」
これを守っていれば使用になんら問題はありません。
※html5の場合は1ページにh1タグが複数あっても問題ありませんが、特別な処理？をしないといけないため、現時点ではh1は1回のみと覚えておくこと。
【参考サイト】
article 要素（アーティクル）
<article>アーティクル定義情報</article>
例えば本記事に関連した別のコラムなど、単独で成り立つコンテンツのブロックを定義します。
なしでもOK。
section 要素（セクション）
<section>セクション定義情報</section>
章のブロックを定義します。
1つの章ブロックの範囲・領域を示す（セクションで囲まれた範囲）
header 要素（ヘッダー）
<header>ヘッダー定義情報</header>
ページ上部のヘッダーブロックを定義します。セクション要素やアーティクル要素内のヘッダー情報としても使用可能です。
footer 要素（フッター）
<footer>フッター定義情報</footer>
ページ下部のフッターブロックを定義します。
コピーライトや会社情報などが入っていることが多く、セクション要素やアーティクル要素内のフッター情報としても使用可能です。
nav 要素（ナビ）
<nav>グローバルナビゲーション定義情報</nav>
グローバルナビゲーションのブロックを定義します。
aside 要素（アサイド）
<aside>アサイド定義情報</aside>
サイドバーのこと。
カレンダーや検索フォームなど、ページの内容と関連がないブロックや補足情報のブロックを定義します。
【参考サイト】
コンテンツ分類タグについて
p 要素（段落（パラグラフ））
<p>段落定義情報</p>
段落（パラグラフ）を指定します。（通常状態の文章の段落範囲）
段落よりもふさわしい要素がある場合には使用するべきではありません。
【ワンポイントアドバイス】
マークアップに悩んだらとにかく「p」にしましょう。
hr 要素（区切り）
<hr>
テーマや話題の区切りを指定します。
ul/li 要素（順序のないリスト）
<ul>
<li>リスト要素</li>
<li>リスト要素</li>
</ul>
順序性のないリスト要素を指定します。
ol/li 要素（順序のあるリスト）
<ol>
<li>リスト要素</li>
<li>リスト要素</li>
</ol>
順序性のあるリスト要素を指定します。
dl/dt/dd 要素（定義・説明リスト）
<dl>
<dt>説明する言葉</dt><dd>説明文</dd>
<dt>説明する言葉</dt><dd>説明文</dd>
</dl>
説明文リストを指定します。
div 要素（ひとつのかたまりの範囲）
<div>ひとつのかたまりの範囲定義情報</div>
ひとつのかたまりの範囲を指定します。
<P>（文章段落範囲）とは別で、文章ではないけどひとかたまりの範囲を作りたいとき。
main 要素（メインコンテンツ）
<main>メインコンテンツ定義情報</main>
ページのメインコンテンツブロックを定義します。
メモ
◆先生より、サクラエディタは画面を上下で分けられ、それぞれ見ながら作業できるので操作しやすい。
TeraPadは上下表示できないが、色々なエディタがあるので色々試すと良いとのこと。
◆ナビゲーションについて（おおまかに言うとメニューのこと）
・グローバルナビゲーション＝全ページ共通のナビ
・ナビゲーション＝そのページのみのナビ
◆コピーライトについて
コピーライトはそのまま記号を入力してはいけないルールになっているので注意
入力する際は、© と入れる
コピーライト記載時には、コピーライト表記・制作年・著作者名 の3つの記載が必要
◆エディタでの字下げ（タブキー？）は、中の親子データの振り分けを見やすくするため
例えば、ヘッダーの中にこういうデータ、こういうデータがあります…というのをぱっと見で分かるようにしている
