-本日のアジェンダ-
1限目
学科 HTML基礎②
HTMLの基本構造について
2限目
学科 HTML基礎②
HTMLの文書情報について
3限目
学科 HTML基礎②
セクション分類タグについて
4限目
学科 HTML基礎②
コンテンツ分類タグについて
5限目
学科 HTML基礎②
本日の講義のまとめ
本日のテーマ
HTMLの基本構造を理解しましょう
【まとめサイト】
- HTMLとCSSの基礎をまとめたサイト
https://samplesdl.me/training_html-css/
【動画】
- HTMLとCSSのリファレンスサイトとタグチェッカー
https://youtu.be/cqKRlqgMwW0（11分20秒）
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 要素（ページタイトル）
Web ページのタイトル名を記載します。多くのブラウザではブラウザのタイトルタブに表示される名称となります。 - meta 要素（文字コード指定/charset）
HTML を記述している文字コードを指定します。文字コードが UTF-8 の場合は “UTF-8” と指定します。 - meta 要素（ページの説明文/description）
ページの概要を示す説明文を指定します。一般的には検索サイトでページ概要として表示され、PC は 120 文字程度、スマホは 50 文字程度が表示文字数となります。 - meta 要素（ページのキーワード/keywords）
ページの検索キーワードをカンマ（,）で区切って指定します。キーワードの有効可否は検索サイトに依存します。 - meta 要素（ページの作者情報/author）
Web ページの作成者情報を指定します。 - meta 要素（ビューポート/viewport）
Webページの表示領域を指定します。 上記の “width=device-width” デバイスの表示幅に合わせた表示領域を使用することを示し “initial-scale=1.0” は 1.0 倍の倍率で表示することを示します。 viewportを指定していないWebページをスマホで表示するとPC用の画面が縮小されて表示されます。 viewportを指定して複数の装置のデザインを実装することをレスポンシブWebデザインといいますが正しく実装するには、HTML に viewport を記述すると同時に CSS にレイアウト調整を行う記述が必要となります。 - link要素（外部 CSS ファイルの紐付け）
外部のスタイルシートファイルとの紐付けを指定します。 - link要素（ファビコンファイルの紐付け）
ファビコンファイル（Web ページのシンボルアイコンファイル）との紐付けを指定します。一般的なファビコンファイル名は “favicon.ico” になります。
文書本文について
文書本文に記載するタグには、以下の分類があります。
- セクション分類タグ
- コンテンツ分類タグ
- テキスト分類タグ
- コンテンツ埋め込みタグ
- テーブルタグ
- フォームタグ
参考サイト
ブロックレベル要素とインライン要素について
要素の多くは、ブロックレベル要素とインライン要素に分類されます。
ただし、HTML5ではブロックレベル要素とインライン要素という考え方はなくなっていますので、あくまでも性質を持っていると考えておきましょう。
- ブロックレベル要素
文書の骨組みとなる要素です（例えば見出しや段落など）。このタイプの要素は、body要素の直接の子要素として配置することができます。 - インライン要素
文章中の一部として扱われる要素です（例えばリンクや文字の強調など）。このタイプの要素は、通常はブロックレベル要素内で使用します。
参考サイト
セクション分類タグについて
- h1～h6 要素（見出し）
各レベルに従った見出しを指定します。一般的に h1 はページに 1 つだけ指定します - article 要素（アーティクル）
単独で成り立つコンテンツのブロックを定義します。 - section 要素（セクション）
章のブロックを定義します。 - header 要素（ヘッダー）
ページ上部のヘッダーブロックを定義します。セクション要素やアーティクル要素内のヘッダー情報としても使用可能です。 - footer 要素（フッター）
ページ下部のフッターブロックを定義します。セクション要素やアーティクル要素内のフッター情報としても使用可能です。 - nav 要素（ナビ）
グローバルナビゲーションのブロックを定義します。 - aside 要素（アサイド）
ページの内容と関連がないブロックや補足情報のブロックを定義します。
参考サイト
- HTMLをセクション分けするタグの使い方！divタグとの違いも解説
- sectionタグとは？使い方やarticleタグとの違いを徹底解説
- sectionやarticleの使い分け！セクショニング要素とは?
ワンポイントアドバイス
見出し（h1～h6）要素でh1タグ以外は、特に使用回数に制限はありません。h2やh3などは大きな見出しとなることが多いためたくさん使われると思います。「h1タグは1ページで一回の使用で抑え、数字の順序をしっかり守ること」これを守っていれば使用になんら問題はありません。ただ、html5の場合は1ページにh1タグが複数あっても問題ありません。
参考サイト
コンテンツ分類タグについて
- p 要素（段落（パラグラフ））
段落（パラグラフ）を指定します。段落よりもふさわしい要素がある場合には使用するべきではありません。 - hr 要素（区切り）
テーマや話題の区切りを指定します。 - ul/li 要素（順序のないリスト）
順序性のないリスト要素を指定します。 - ol/li 要素（順序のあるリスト）
順序性のあるリスト要素を指定します。 - dl/dt/dd 要素（定義・説明リスト）
説明文リストを指定します。 - div 要素（ひとつのかたまりの範囲）
ひとつのかたまりの範囲を指定します。 - main 要素（メインコンテンツ）
ページのメインコンテンツブロックを定義します。
ワンポイントアドバイス
マークアップに悩んだらとにかく「p」にしましょう。
本日の課題
WordPressサイトに、本日学んだ内容を「投稿ページ」にまとめてください。
投稿日は、本日の日時で設定してください。
※ページタイトルは、投稿内容がわかるような記述にしましょう。