おはようございます。
今日も今日とて、学習日和です。
とはいうものの、買った書物とにらめっこ。
分からないところは、AIに訊ねていこう。
どういったことを今日はしよう。
今日はHTMLのタグに関して知識を仕入れる。
そして、実際にそのタグを使用したWEBサイトを簡単に試してみよう。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーー
では、HTMLタグを名前の由来と役割で整理した一覧を作ります。
HTML5の主要タグを中心に、廃止・非推奨タグも最後にまとめています。
1. 文書構造・セクション系
| タグ | 名前の由来 | 役割 |
|---|---|---|
<!DOCTYPE html> |
Document Type Declaration（文書型宣言）の略 | HTML文書の種類とバージョンを宣言する |
<html> |
HyperText Markup Languageの略「HTML」 | HTML文書全体を囲むルート要素 |
<head> |
「頭部」 | 文書のメタ情報（タイトル、CSS、スクリプト等）を格納 |
<title> |
英語「title」（題名） | 文書のタイトル（ブラウザのタブや検索結果に表示） |
<body> |
「本体・本文」 | ユーザーが閲覧する本文部分を格納 |
<main> |
「主要な、本質的な」 | ページ内の主たるコンテンツを示す |
<header> |
「冒頭・見出し部分」 | ページやセクションの冒頭部分を定義 |
<footer> |
「脚注・末尾部分」 | ページやセクションの末尾部分を定義 |
<nav> |
navigation（案内） | ナビゲーションリンク群を表す |
<section> |
「区画・節」 | 関連するコンテンツのまとまりを示す |
<article> |
「記事・論文」 | 独立した内容のまとまりを示す |
<aside> |
「脇に置く・傍注」 | 補足的な内容や関連情報 |
<address> |
「住所・連絡先」 | 連絡先や著者情報 |
2. 見出し・段落・テキスト構造
| タグ | 名前の由来 | 役割 |
|---|---|---|
<h1>～<h6>
|
heading（見出し）＋階層番号 | 文書やセクションの見出し |
<p> |
paragraph（段落） | 段落を定義 |
<hr> |
horizontal rule（水平線） | 区切り線を挿入 |
<br> |
break（改行） | 強制改行 |
<pre> |
preformatted（整形済み） | 改行やスペースをそのまま表示 |
<blockquote> |
block quote（段落引用） | 複数行の引用 |
<q> |
quote（引用） | 短いインライン引用 |
<abbr> |
abbreviation（略語） | 略語の表記 |
<cite> |
cite（引用する） | 出典や作品名 |
<dfn> |
definition（定義） | 用語の定義箇所 |
<time> |
「時」 | 日付や時刻 |
<code> |
code（コード） | プログラムコードの記述 |
<var> |
variable（変数） | 変数名や数式の変数 |
<kbd> |
keyboard（キーボード） | キー入力の表記 |
<samp> |
sample（例） | コンピュータ出力例 |
3. テキスト装飾
| タグ | 名前の由来 | 役割 |
|---|---|---|
<strong> |
「強い」 | 重要性の高い強調 |
<em> |
emphasis（強調） | 文章の意味的強調 |
<b> |
bold（太字） | 見た目だけの太字 |
<i> |
italic（斜体） | 見た目だけの斜体 |
<u> |
underline（下線） | 下線を引く |
<mark> |
mark（印） | 強調表示（ハイライト） |
<small> |
small（小さい） | 小さい文字 |
<del> |
delete（削除） | 削除された内容 |
<ins> |
insert（挿入） | 新しく挿入された内容 |
<sup> |
superscript（上付き） | 上付き文字 |
<sub> |
subscript（下付き） | 下付き文字 |
4. リンク・メディア
| タグ | 名前の由来 | 役割 |
|---|---|---|
<a> |
anchor（錨） | ハイパーリンクを作成 |
<img> |
image（画像） | 画像を表示 |
<picture> |
picture（絵） | 画像のバリエーション指定 |
<source> |
source（情報源） | メディアのソース指定 |
<audio> |
audio（音声） | 音声ファイルの再生 |
<video> |
video（動画） | 動画ファイルの再生 |
<track> |
track（軌道・字幕） | 字幕や音声トラック |
<iframe> |
inline frame（埋め込み枠） | ページ内に別ページを埋め込み |
<embed> |
embed（埋め込む） | 外部コンテンツの埋め込み |
<object> |
object（オブジェクト） | 外部オブジェクトを埋め込み |
<param> |
parameter（パラメータ） |
<object>要素のパラメータ設定 |
<canvas> |
canvas（キャンバス） | 図形や画像を描画する領域 |
<svg> |
Scalable Vector Graphics | ベクター画像の描画 |
5. リスト
| タグ | 名前の由来 | 役割 |
|---|---|---|
<ul> |
unordered list（順序なしリスト） | 箇条書きリスト |
<ol> |
ordered list（順序ありリスト） | 番号付きリスト |
<li> |
list item（リスト項目） | リスト内の項目 |
<dl> |
definition list（定義リスト） | 用語と説明の組 |
<dt> |
definition term（定義語） | 定義リスト内の用語 |
<dd> |
definition description（定義内容） | 定義リスト内の説明 |
6. テーブル
| タグ | 名前の由来 | 役割 |
|---|---|---|
<table> |
table（表） | 表を作成 |
<caption> |
caption（表題） | 表の説明文 |
<thead> |
table head（表の頭部） | 表のヘッダー行 |
<tbody> |
table body（表の本文） | 表の本体部分 |
<tfoot> |
table foot（表の脚部） | 表のフッター行 |
<tr> |
table row（表の行） | 表の行 |
<th> |
table header cell（見出しセル） | 見出しセル |
<td> |
table data cell（データセル） | データセル |
<col> |
column（列） | 列の属性 |
<colgroup> |
column group（列グループ） | 列のグループ化 |
7. フォーム
| タグ | 名前の由来 | 役割 |
|---|---|---|
<form> |
form（用紙） | 入力フォームを定義 |
<input> |
input（入力） | ユーザー入力欄 |
<textarea> |
text area（テキスト領域） | 複数行テキスト入力 |
<button> |
button（ボタン） | ボタン |
<select> |
select（選択する） | ドロップダウン選択 |
<option> |
option（選択肢） | 選択肢 |
<optgroup> |
option group（選択肢グループ） | 選択肢のグループ化 |
<label> |
label（ラベル） | 入力欄の説明 |
<fieldset> |
field set（入力フィールド集合） | 関連する入力欄をグループ化 |
<legend> |
legend（凡例） | フィールドセットの見出し |
<datalist> |
data list（データ候補リスト） | 入力候補のリスト |
<output> |
output（出力） | 計算結果や動的表示 |
<progress> |
progress（進捗） | 進捗状況の表示 |
<meter> |
meter（計量器） | 測定値や割合の表示 |
8. スクリプト・メタ情報
| タグ | 名前の由来 | 役割 |
|---|---|---|
<script> |
script（スクリプト） | JavaScriptコードを埋め込み |
<noscript> |
no script（スクリプトなし） | スクリプト未対応時の代替表示 |
<style> |
style（装飾） | CSSコードを埋め込み |
<link> |
link（リンク） | 外部リソースへのリンク |
<meta> |
metadata（メタ情報） | 文書の追加情報 |
<base> |
base（基準） | 相対URLの基準を設定 |
9. 廃止・非推奨タグ（HTML5以降）
| タグ | 名前の由来 | 役割 |
|---|---|---|
<center> |
center（中央） | 中央寄せ（CSSで代替） |
<font> |
font（書体） | フォント指定（CSSで代替） |
<big> |
big（大きい） | 大きな文字（CSSで代替） |
<strike> |
strike（打ち消し） | 打ち消し線（<del>推奨） |
<marquee> |
marquee（回廊・電光掲示板） | テキストスクロール（非推奨） |
この一覧をそのまま学習用カードやWeb教材にして、タグ名の由来と役割を一緒に覚えることができます。
もしご希望なら、この表をタグのカテゴリごとに色分けして、マウスオーバーで由来をポップアップ表示するHTML版も作れます。
そうすると、インタラクティブに覚えられます。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーー
それぞれを使った簡単な構図を立ち上げていきます。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーー
HTMLタグ 学習用サンプルHTMLタグ一覧デモ
テキストと装飾
強調（重要）
ニュアンス強調
太字
斜体
下線
マーカー
小さい文字
削除
挿入
X2
H2O
引用例: 短い引用
長い引用例。HTMLは面白い！
HTML はマークアップ言語です。
2025年8月15日
整形済みテキスト
スペースも改行もそのまま
console.log("Hello!");
x = 10;
Ctrl + C
出力例
リンク・メディア
リンク例
リスト
- 項目1
- 項目2
- 順序1
- 順序2
- HTML
- マークアップ言語
テーブル
| 見出し1 | 見出し2 |
|---|---|
| データ1 | データ2 |
| フッター | |
フォーム
名前: テキストエリア 送信 選択肢1 選択肢2 入力グループ 出力欄 70%非推奨タグ（参考）
中央寄せテキスト 赤文字 大きい文字© 2025 HTML Demo
ーーーーーーーーーーーーーーーーーーーーーーーーーーーー
軽くコーディングをしてもらいました。
基礎をしっかり固めて、何ができるのか。どんな手法を使うのかを固めていく。考えていかないと、よく分からないことが分かります。
とにかく、一つ一つのタグで出来ることと、なぜそのタグが必要だったのか、を考えていきます。
◆今日のまとめ
・HTMLのタグで何ができるか考えてみよう。
◆課題
・Hyper textの基本概念を知る。