最近仕事でHTMLを使用しており、HTMLの早見表を作成してみました。拙い内容ですが、拝見していただけたら幸いです。
なお、内容につきまして上記のHTMLクイックリファレンスを参考にしています。
1.headタグ内で使用するタグ一覧
1.headタグ・・・メタデータの集まりを表します。
<head>
<title>Hello World</title>
</head>
2.titleタグ・・・タイトルを表します。タブの部分に表示されます。
<head>
<title>タイトル名</title>
</head>
3.linkタグ・・・外部のファイル(cssファイル)とリンクする際に使用します。
<link rel=“stylesheet” href=“URL”>
4.metaタグ・・・メタデータを表します。例では文章の文字エンコーディングを指定しています。
<meta charset=“utf-8”>
2.bodyタグ内で使用するタグ一覧
1.bodyタグ・・・文章の内容(本体)を表します。
<body>
<h1>Hello World</h1>
<p>みなさん、こんにちは</p>
</body>
2.headerタグ・・・ヘッダーを表します。
<header>
<h1>Hello World</h1>
<header>
3.footerタグ・・・フッターを表します。
<footer>
<p>Copyright</p>
</footer>
4.mainタグ・・・メインコンテンツを表します。
<main>
<h1>Hello World</h1>
<p>みなさん、こんにちは</p>
</main>
5.asideタグ・・・メインコンテンツではない別のコンテンツを表します。
<aside>
<h1>Hello HTML</h1>
<p>Hello CSS</p>
</aside>
6.articleタグ・・・自己完結する内容を表します。分かりやすく言うと新聞の記事の部分です。
<article>
<h1>2023/12/12</h1>
<p>天気は雪です</p>
</article>
7.section・・・テーマごとに区切られたコンテンツを表します。
<section>
<h1>HTMLとは？</h1>
<p>マークアップ言語です。</p>
</section>
8.h1~h5タグ・・・見出しを表します。
<h1>Hello World</h1>
9.pタグ・・・段落を表します。
<p>Hello World</p>
10.divタグ・・・特別な意味を持たせずに子要素として使えます。最後の手段です。
<div>Hello World</div>
11.ulタグとliタグ・・・リストを表します。
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
ちなみに、ulタグ→olタグに変更すると、順序を表せます。
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
12.hrタグ・・・テーマの区切りを表します。ラインが表示されます。
テーマ1
<hr>
テーマ2
13.brタグ・・・改行を表します。
日本<br>
大阪<br>
お好み焼<br>
タコ焼き
14.aタグ・・・ハイパーリンクを表します。
<a href=“リンク先URL”></a>
15.imgタグ・・・画像を表します。
<img src=“画像のURL”>
3.formタグに使用するタグ一覧
1.formタグ・・・フォームを表します。
<form action="送信先のURL">
<input type=submit value="投稿する">
</form>
2.inputタグ・・・フォームの入力欄を表します。
<form action="送信先のURL">
<input type=submit value="投稿する">
</form>
3.buttonタグ・・・ボタンを表します。
<form action="送信先のURL">
<button type="submit">投稿する</button>
</form>