学科 HTML基礎②【オンライン】

2023年9月5日

イントロ・自分でサイトなどを作り整理する・タグチェッカー必須

斎藤先生作成

(1) 要素名

タグの種別を指定します。タグ名とも言われます。タグの終了（閉じタグ）を示す場合は、要素名の前にスラッシュ（/）を指定することで終了タグを定義することができます。

(2) 属性

要素名に対して設定する属性名を指定します。属性が複数ある場合は、属性と属性値の組合せを空白で区切って複数指定することができます。

(3) 属性値

属性に対する値を指定します。一般的には、ダブルクォーテーション（”）で囲んで指定しますがシングルクォーテーション（’）で囲むことも可能です。属性値がない時は、イコール（=）以降が省略されます。複数の属性を指定する時は、スペースで区切って指定します。

L2.2.2 HTML 例

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="description" content="サイトの説明文">
<meta name="keywords" content="キーワード">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web ページのタイトル</title>
<link href="スタイルシートファイルのパス名" rel="stylesheet"  type="text/css">
<link href="ファビコンファイルのパス名" rel="icon">
</head>
<body>
　Web ページの内容を記述
</body>
</html>

Copy

(1) !DOCTYPE 宣言（ドキュメントタイプ宣言）

ドキュメントタイプ宣言は、この文書のバージョンを宣言するメタ情報です。HTML5 であれば<!DOCTYPE html>と記述します。

(2) html 要素（HTML の文書）

html 要素は、この文書が HTML の文書であることを表します。「lang=”ja”」の “ja” は日本語で書かれた文書であることを表します。

(3) head 要素（文書情報）

head 要素は、この文書のメタデータを記述します。例えば、<title>～</title>でその文書のタイトルを記述することができます。

(4) body 要素（文書本文）

body 要素は、この文書の本文を記述します。この body 要素で囲まれた領域が Web ページとして表示されます。

文書情報

L2.3.1 ページタイトル（title）

(1) title 要素（ページタイトル）

<title>Webページのタイトル</title>

Copy

Web ページのタイトル名を記載します。多くのブラウザではブラウザのタイトルタブに表示される名称となります。

L2.3.2 メタデータ（meta）

(1) meta 要素（文字コード指定/charset）

<meta charset="UTF-8">

Copy

HTML を記述している文字コードを指定します。文字コードが UTF-8 の場合は “UTF-8” と指定します。

(2) meta 要素（ページの説明文/description）

<meta name="description" content="サイトの説明文">

Copy

ページの概要を示す説明文を指定します。一般的には検索サイトでページ概要として表示され、PC は 120 文字程度、スマホは 50 文字程度が表示文字数となります。

検索エンジンの結果に表示されることがある。以前は表示されていたが、最近は、サイトの要約内容が表示されることが多い。

(3) meta 要素（ページのキーワード/keywords）

<meta name="keywords" content="キーワード">

Copy

ページの検索キーワードをカンマ（,）で区切って指定します。キーワードの有効可否は検索サイトに依存します。

(4) meta 要素（ページの作者情報/author）

<meta name="author" content="作者情報">

Copy

Web ページの作成者情報を指定します。
実際にはほとんど使われていない。

(5) meta 要素（ビューポート/viewport）

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Copy

Webページの表示領域を指定します。上記の “width=device-width” デバイスの表示幅に合わせた表示領域を使用することを示し “initial-scale=1.0” は 1.0 倍の倍率で表示することを示します。 viewportを指定していないWebページをスマホで表示するとPC用の画面が縮小されて表示されます。 viewportを指定して複数の装置のデザインを実装することをレスポンシブWebデザインといいますが正しく実装するには、HTML に viewport を記述すると同時に CSS にレイアウト調整を行う記述が必要となります。

L2.3.3 リンク情報（link）

(1) link要素（外部 CSS ファイルの紐付け）

<link href="スタイルシートファイルのパス名" rel="stylesheet"  type="text/css">

Copy

外部のスタイルシートファイルとの紐付けを指定します。

(2) link要素（ファビコンファイルの紐付け）

<link href="ファビコンファイルのパス名" rel="icon">

Copy

ファビコンファイル（Web ページのシンボルアイコンファイル）との紐付けを指定します。一般的なファビコンファイル名は “favicon.ico” になります。

PNGなどで作成して、ファビコン形式に変換する。

Faviconジェネレーター

Faviconジェネレーター Faviconジェネレーターは、ブラウザ上で、JPEG, PNG, GIF などの画像ファイルから favicon 用の画像(favicon.ico)を生成・変換するサービスです。透過、マルチアイコン、各…

作成するサイズは、４８×４８まで左を全チェック。

文書本文

L2.4.1 文書本文のタグ分類

文書本文に記載するタグには、以下の分類があります。

セクション分類タグ
コンテンツ分類タグ
テキスト分類タグ
コンテンツ埋め込みタグ
テーブルタグ
フォームタグ

注意事項

タグ（要素）の多くは、ブロックレベル要素とインライン要素に分類されます。但し、HTML5 ではブロックレベル要素とインライン要素という考え方はなくなっていますので、あくまでも性質を持っていると考えてください。

ブロックレベル要素　　　　　　　
文書の骨組みとなる要素です。（例えば見出しや段落など）このタイプの要素は、body 要素の直接の子要素として配置することができます。

インライン要素
文章中の一部として扱われる要素です。（例えばリンクや文字の強調など）このタイプの要素は、通常はブロックレベル要素内で使用します。
HTML4.01 までは、ブロックレベル要素とインライン要素に分類されていましたが、HTML5 では、コンテンツの種類の定義をコンテンツ・モデルとして再定義しました。コンテンツ・モデルコンテンツの種類として以下の分類で定義されています。メタデータ・コンテンツ文書情報や他の文書との関係を定義するものを示します。フロー・コンテンツ子孫にテキストなどを持つものを示します。セクショニング・コンテンツ見出しと概要を付けられるものを示します。ヘッディング・コンテンツセクションの見出しとなるものを示します。フレージング・コンテンツ段落などの中に含まれる文節・語句などを示します。エンベッディッド・コンテンツ文書に他のリソースを埋め込むものを示します。インタラクティブ・コンテンツユーザーによる操作に対応するものを示します。
HTML5 の各要素は、上記のコンテンツの種類のいずれか一つのみに分類されるのではなく、一つの要素に対して複数のコンテンツの種類が定義されることもあります。例えば、section 要素はフロー・コンテンツであり、同時にセクショニング・コンテンツでもあります。
特定の属性や属性値を持った場合にだけインタラクティブ・コンテンツになるなど、条件付きで要素の種類が変化することもあります。
HTML5 では、上記のコンテンツの種類に各要素が分類されることで、どの要素の中にどの要素を配置できるかというタグの配置ルールが決まります。
当サイトでは、HTML5 の本来の分類とは異なりますが、セクション分類タグ、コンテンツ分類タグ、テキスト分類タグ、コンテンツ埋め込みタグ、テーブルタグ、フォームタグに分類してタグの説明を実施します。

セクション分類タグ

L2.5.1 セクション分類の構成例

header

nav

main

section

article

aside

footer

L2.5.2 h1～h6 要素（見出し）

<h1>h1 レベル見出し情報</h1>
<h2>h2 レベル見出し情報</h2>
<h3>h3 レベル見出し情報</h3>
<h4>h4 レベル見出し情報</h4>
<h5>h5 レベル見出し情報</h5>
<h6>h6 レベル見出し情報</h6>

Copy

各レベルに従った見出しを指定します。一般的に h1 はページに 1 つだけ指定します。
必ず順番で使うこと。

L2.5.3 article 要素（アーティクル）

<article>アーティクル定義情報</article>

Copy

単独で成り立つコンテンツのブロックを定義します。
HTML5から導入されている。コラムのようなもの。

L2.5.4 section 要素（セクション）

<section>セクション定義情報</section>

Copy

章のブロックを定義します。

L2.5.5 header 要素（ヘッダー）

<header>ヘッダー定義情報</header>

Copy

ページ上部のヘッダーブロックを定義します。セクション要素やアーティクル要素内のヘッダー情報としても使用可能です。

L2.5.6 footer 要素（フッター）

<footer>フッター定義情報</footer>

Copy

ページ下部のフッターブロックを定義します。セクション要素やアーティクル要素内のフッター情報としても使用可能です。

L2.5.7 nav 要素（ナビ）

<nav>グローバルナビゲーション定義情報</nav>

Copy

グローバルナビゲーションのブロックを定義します。

L2.5.8 aside 要素（アサイド）

<aside>アサイド定義情報</aside>

Copy

ページの内容と関連がないブロックや補足情報のブロックを定義します。

L2.5.9 表示サンプル

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML セクション サンプル</title>
<style>
body {
	margin: 0;
}
.container {
	border: #ccc 1px solid;
}
</style>
</head>
<body>
	<div class="container">
		<h1>h1 レベル見出し情報</h1>
		<h2>h2 レベル見出し情報</h2>
		<h3>h3 レベル見出し情報</h3>
		<h4>h4 レベル見出し情報</h4>
		<h5>h5 レベル見出し情報</h5>
		<h6>h6 レベル見出し情報</h6>
		<article>アーティクル定義情報</article>
		<section>セクション定義情報</section>
		<header>ヘッダー定義情報</header>
		<footer>フッター定義情報</footer>
		<nav>グローバルナビゲーション定義情報</nav>
		<aside>アサイド定義情報</aside>
	</div>
</body>
</html>

Copy

コンテンツ分類タグ

L2.6.1 p 要素（段落（パラグラフ））

<p>段落定義情報</p>

Copy

段落（パラグラフ）を指定します。

L2.6.2 hr 要素（区切り）

<hr>

Copy

テーマや話題の区切りを指定します。

L2.6.3 ul/li 要素（順序のないリスト）

<ul>
	<li>リスト要素</li>
	<li>リスト要素</li>
</ul>

Copy

順序性のないリスト要素を指定します。

L2.6.4 ol/li 要素（順序のあるリスト）

<ol>
	<li>リスト要素</li>
	<li>リスト要素</li>
</ol>

Copy

順序性のあるリスト要素を指定します。

L2.6.5 dl/dt/dd 要素（定義・説明リスト）

<dl>
	<dt>説明する言葉</dt><dd>説明文</dd>
	<dt>説明する言葉</dt><dd>説明文</dd>
</dl>

Copy

説明文リストを指定します。

L2.6.6 div 要素（ひとつのかたまりの範囲）

<div>ひとつのかたまりの範囲定義情報</div>

Copy

ひとつのかたまりの範囲を指定します。意味はないがかたまりを定義。

なんでこれが必要かというと、後でスタイルを定義するときに意味が出てくる。
スタイルをうまく作るためにDIVを多用する必要性が出てくる。

L2.6.7 main 要素（メインコンテンツ）

<main>メインコンテンツ定義情報</main>

Copy

ページのメインコンテンツブロックを定義します。

L2.6.8 表示サンプル

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML コンテンツ サンプル</title>
<style>
body {
	margin: 0;
}
.container {
	border: #ccc 1px solid;
}
</style>
</head>
<body>
	<div class="container">
		<p>段落定義情報</p>
		<hr>
		<ul>
			<li>リスト要素</li>
			<li>リスト要素</li>
		</ul>
		<hr>
		<ol>
			<li>リスト要素</li>
			<li>リスト要素</li>
		</ol>
		<hr>
		<dl>
			<dt>説明する言葉</dt><dd>説明文</dd>
			<dt>説明する言葉</dt><dd>説明文</dd>
		</dl>
		<hr>
		<div>ひとつのかたまりの範囲定義情報</div>
		<hr>
		<main>メインコンテンツ定義情報</main>
		<hr>
	</div>
</body>
</html>

Copyhttp://html-css.hamaya2020.com/sample/l2-content.html

L2.6.9 表示サンプル（ul/ol タグに CSS でスタイルを設定）

※ ul タグも ol タグも同様の表示形態になります。
※ CSS の記述方法については「L5.4.1 リスト関連プロパティ」を参照してください。http://html-css.hamaya2020.com/sample/l5-list-style.html

L2.6.10 表示サンプル（dl タグに CSS でスタイルを設定）

■ 動物写真（名前オーバーレイ）

テキスト分類タグ

L2.7.1 a 要素（ハイパーリンク）

<a href="リンク先情報">ハイパーリンク定義情報</a>

Copy

ハイパーリンクする範囲を指定します。

外部サイトなどにリンクする時は「target=”_blank”」を付けることで新しいタブで開くことができます。

注意事項

「target=”_blank”」使用時に悪意ある外部サイトを指定しまうと外部サイトから自サイトを操作されるという脆弱性があります。これを回避する時に外部サイトを指定する時は「rel=”noopener noreferrer”」を同時に指定するようにしてください。

L2.7.2 em 要素（強調）

<em>強調定義情報</em>

Copy

強調する（アクセントを付ける）範囲をを指定します。

L2.7.3 strong 要素（強い重要性）

<strong>強い重要性定義情報</strong>

Copy

強い重要性を示す範囲を指定します。

L2.7.4 small 要素（免責・警告・著作権など）

<small>免責・警告・著作権など定義情報</small>

Copy

免責・警告・著作権などの注釈や細目する範囲を指定します。

L2.7.5 i 要素（声や心の中で思ったこと）

<i>声や心の中で思ったこと定義情報</i>

Copy

声や心の中で思ったことなど、他と区別したい範囲を指定します。

L2.7.6 b 要素（キーワードや商品名など）

<b>キーワードや商品名など定義情報</b>

Copy

キーワードや商品名など、他と区別したい範囲を指定します。

L2.7.7 span 要素（ひとつの範囲）

<span>ひとつの範囲定義情報</span>

Copy

ひとつの範囲として定義する範囲を指定します。

L2.7.8 br 要素（改行）

<br>

Copy

改行する箇所を指定します。本要素には、終了タグがありません。
ワードプレスで、SHIFT＋ENTER　に相当する。

L2.7.9 表示サンプル

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML テキスト サンプル</title>
<style>
body {
	margin: 0;
}
.container {
	border: #ccc 1px solid;
}
</style>
</head>
<body>
	<div class="container">
		<a href="#">ハイパーリンク定義情報</a>
		<em>強調定義情報</em>
		<strong>強い重要性定義情報</strong>
		<small>免責・警告・著作権など定義情報</small>
		<i>声や心の中で思ったこと定義情報</i>
		<b>キーワードや商品名など定義情報</b>
		<span>ひとつの範囲定義情報</span>
		<hr>
		<a href="#">ハイパーリンク定義情報</a><br>
		<em>強調定義情報</em><br>
		<strong>強い重要性定義情報</strong><br>
		<small>免責・警告・著作権など定義情報</small><br>
		<i>声や心の中で思ったこと定義情報</i><br>
		<b>キーワードや商品名など定義情報</b><br>
		<span>ひとつの範囲定義情報</span><br>
	</div>
</body>
</html>

Copy

※ テキスト分類のタグは文字に対する指定となるので改行する時は「<br>」が必要です。http://html-css.hamaya2020.com/sample/l2-text.html

コンテンツ埋め込みタグ

L2.8.1 img 要素（画像）

<img src="画像パス名" alt="代替テキスト">

Copy

画像の埋め込み表示を指定します。本要素には、終了タグがありません。

「代替テキスト」は、画像が表示できない時に画像の代わりに表示するテキストを指定します。必須項目なので必ず指定してください。

L2.8.2 iframe 要素（インラインフレーム）

よそのサイトを埋め込む場合には、これを使う。

<iframe src="フレーム内に表示する URL" width="フレームの幅" height="フレームの高さ" title="補足情報">フレームが表示できない時のメッセージ</iframe>

Copy

インラインフレーム内に「フレーム内に表示する URL」で指定した URL の内容を表示します。「補足情報」には表示する内容の補足的な情報を指定します。

「フレームの幅」と「フレームの高さ」には、作成するフレームの大きさを指定します。幅の初期値は 300、高さの初期値は 150 です。

L2.8.3 表示サンプル

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML テキスト サンプル</title>
<style>
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	margin: 0;
}
.container {
	border: #ccc 1px solid;
}
</style>
</head>
<body>
	<div class="container">
		<img src="images/sample1.jpg" alt="赤べこ">
		<img src="images/sample2.jpg" alt="うさぎ">
		<iframe src="https://sl-gallery.hamaya2020.com/" width="640" height="900" title="フレームサンプル">インラインフレームがサポートされているブラウザで見てください。</iframe>
	</div>
</body>
</html>

Copyhttp://html-css.hamaya2020.com/sample/l2-embedded.html

マークアップ作成の手順

STEP

フォルダ作成

STEP

テンプレートをコピペ

STEP

UTFＢＯＭなしを指定

STEP

TERA PADの場合は、上記操作で、分類したハイライト表示になる。

targetを指定すると、別ページで開く。そうしないと戻ってこれなくなる。

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

この記事を書いた人

adminken

学科 HTML基礎②【オンライン】

イントロ・自分でサイトなどを作り整理する・タグチェッカー必須

斎藤先生作成

(1) 要素名

(2) 属性

(3) 属性値

L2.2.2 HTML 例

(1) !DOCTYPE 宣言（ドキュメントタイプ宣言）

(2) html 要素（HTML の文書）

(3) head 要素（文書情報）

(4) body 要素（文書本文）

文書情報

L2.3.1 ページタイトル（title）

(1) title 要素（ページタイトル）

L2.3.2 メタデータ（meta）

(1) meta 要素（文字コード指定/charset）

(2) meta 要素（ページの説明文/description）

(3) meta 要素（ページのキーワード/keywords）

(4) meta 要素（ページの作者情報/author）

(5) meta 要素（ビューポート/viewport）

L2.3.3 リンク情報（link）

(1) link要素（外部 CSS ファイルの紐付け）

(2) link要素（ファビコンファイルの紐付け）

文書本文

L2.4.1 文書本文のタグ分類

注意事項

セクション分類タグ

L2.5.1 セクション分類の構成例

L2.5.2 h1～h6 要素（見出し）

L2.5.3 article 要素（アーティクル）

L2.5.4 section 要素（セクション）

L2.5.5 header 要素（ヘッダー）

L2.5.6 footer 要素（フッター）

L2.5.7 nav 要素（ナビ）

L2.5.8 aside 要素（アサイド）

L2.5.9 表示サンプル

コンテンツ分類タグ

L2.6.1 p 要素（段落（パラグラフ））

L2.6.2 hr 要素（区切り）

L2.6.3 ul/li 要素（順序のないリスト）

L2.6.4 ol/li 要素（順序のあるリスト）

L2.6.5 dl/dt/dd 要素（定義・説明リスト）

L2.6.6 div 要素（ひとつのかたまりの範囲）

L2.6.7 main 要素（メインコンテンツ）

L2.6.8 表示サンプル

L2.6.9 表示サンプル（ul/ol タグに CSS でスタイルを設定）

L2.6.10 表示サンプル（dl タグに CSS でスタイルを設定）

テキスト分類タグ

L2.7.1 a 要素（ハイパーリンク）

注意事項

L2.7.2 em 要素（強調）

L2.7.3 strong 要素（強い重要性）

L2.7.4 small 要素（免責・警告・著作権など）

L2.7.5 i 要素（声や心の中で思ったこと）

L2.7.6 b 要素（キーワードや商品名など）

L2.7.7 span 要素（ひとつの範囲）

L2.7.8 br 要素（改行）

L2.7.9 表示サンプル

コンテンツ埋め込みタグ

L2.8.1 img 要素（画像）

L2.8.2 iframe 要素（インラインフレーム）

L2.8.3 表示サンプル

マークアップ作成の手順

この記事を書いた人

関連記事

コメント

コメントする コメントをキャンセル

コメントするコメントをキャンセル