-本日のアジェンダ-
1限目
学科 HTML基礎②
文書情報（ヘッダー領域）について
2限目
学科 HTML基礎②
セクション分類タグについて
3限目
学科 HTML基礎②
コンテンツ分類タグについて
4限目
学科 HTML基礎②
HTMLのまとめ
5限目
学科 HTML基礎②
HTMLのまとめ
本日のテーマ
文書情報と文書構造を意識しましょう
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 ページとして表示されます。
文書情報について
title 要素（ページタイトル）
<title>Webページのタイトル</title>
Web ページのタイトル名を記載します。多くのブラウザではブラウザのタイトルタブに表示される名称となります。
meta 要素（文字コード指定/charset）
<meta charset=”UTF-8″>
HTML を記述している文字コードを指定します。文字コードが UTF-8 の場合は “UTF-8” と指定します。
meta 要素（ページの説明文/description）
<meta name=”description” content=”サイトの説明文”>
ページの概要を示す説明文を指定します。一般的には検索サイトでページ概要として表示され、PC は 120 文字程度、スマホは 50 文字程度が表示文字数となります。
meta 要素（ページのキーワード/keywords）
<meta name=”keywords” content=”キーワード”>
ページの検索キーワードをカンマ（,）で区切って指定します。キーワードの有効可否は検索サイトに依存します。
meta 要素（ページの作者情報/author）
<meta name=”author” content=”作者情報”>
Web ページの作成者情報を指定します。
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 にレイアウト調整を行う記述が必要となります。
link要素（外部 CSS ファイルの紐付け）
<link href=”スタイルシートファイルのパス名” rel=”stylesheet” type=”text/css”>
外部のスタイルシートファイルとの紐付けを指定します。
link要素（ファビコンファイルの紐付け）
<link href=”ファビコンファイルのパス名” rel=”icon”>
ファビコンファイル（Web ページのシンボルアイコンファイル）との紐付けを指定します。一般的なファビコンファイル名は “favicon.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などは大きな見出しとなることが多いためたくさん使われると思います。「h1タグは1ページで一回の使用で抑え、数字の順序をしっかり守ること」これを守っていれば使用になんら問題はありません。ただ、html5の場合は1ページにh1タグが複数あっても問題ありません。
参考サイト
article 要素（アーティクル）
<article>アーティクル定義情報</article>
単独で成り立つコンテンツのブロックを定義します。
section 要素（セクション）
<section>セクション定義情報</section>
章のブロックを定義します。
header 要素（ヘッダー）
<header>ヘッダー定義情報</header>
ページ上部のヘッダーブロックを定義します。セクション要素やアーティクル要素内のヘッダー情報としても使用可能です。
footer 要素（フッター）
<footer>フッター定義情報</footer>
ページ下部のフッターブロックを定義します。セクション要素やアーティクル要素内のフッター情報としても使用可能です。
nav 要素（ナビ）
<nav>グローバルナビゲーション定義情報</nav>
グローバルナビゲーションのブロックを定義します。
aside 要素（アサイド）
<aside>アサイド定義情報</aside>
ページの内容と関連がないブロックや補足情報のブロックを定義します。
参考サイト
- HTMLをセクション分けするタグの使い方！divタグとの違いも解説
- sectionタグとは？使い方やarticleタグとの違いを徹底解説
- sectionやarticleの使い分け！セクショニング要素とは?
コンテンツ分類タグについて
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>
ひとつのかたまりの範囲を指定します。
main 要素（メインコンテンツ）
<main>メインコンテンツ定義情報</main>
ページのメインコンテンツブロックを定義します。
本日の課題①
WordPressサイトに、本日学んだ内容を「投稿ページ」にまとめてください。
投稿日は、本日の日時で設定してください。
※ページタイトルは、投稿内容がわかるような記述にしましょう。