23_ HTMLタグとは？【超入門・体系化ノート】～小学生でもわかるWebページの部品～
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
04_HTMLタグとは？【超入門・体系化ノート】
～小学生でもわかるWebページの部品～
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
# 1. HTMLタグって何？
前回は、
はじめてのHTMLを書いて、
画面へ文字を表示しました。
でも、
HTMLには、
<h1>
<p>
の他にも、
たくさんのタグがあります。
タグとは、
「Webページを作るための部品」
です。
レゴブロックのように、
いろいろなタグを組み合わせて、
一つのWebページを作っています。
━━━━━━━━━━━━━━━━━━
# タグは命令を書く目印
HTMLでは、
タグを使って、
「これは見出しですよ。」
「これは文章ですよ。」
とブラウザへ教えています。
例えば、
```html
<h1>Hello World</h1>
```
なら、
大きな見出しになります。
━━━━━━━━━━━━━━━━━━
# タグの基本形
タグは、
ほとんどが
始まり
↓
終わり
があります。
例えば、
```html
<p>こんにちは</p>
```
最初の
<p>
を
開始タグ
最後の
</p>
を
終了タグ
と呼びます。
━━━━━━━━━━━━━━━━━━
# よく使うHTMLタグ
最初に覚えるタグは、
これだけで十分です。
<html>
↓
HTML全体
<head>
↓
設定
<title>
↓
タイトル
<body>
↓
画面
<h1>
↓
大見出し
<h2>
↓
中見出し
<p>
↓
文章
<img>
↓
画像
<a>
↓
リンク
<br>
↓
改行
━━━━━━━━━━━━━━━━━━
# 見出しを書いてみよう
例えば、
```html
<h1>私のホームページ</h1>
<h2>自己紹介</h2>
```
すると、
大きなタイトルと、
少し小さい見出しが表示されます。
━━━━━━━━━━━━━━━━━━
# 文章を書こう
文章を書くときは、
```html
<p>こんにちは。</p>
<p>HTMLを勉強しています。</p>
```
このように書きます。
━━━━━━━━━━━━━━━━━━
# 改行してみよう
途中で改行したいときは、
```html
こんにちは。<br>
よろしくお願いします。
```
と書きます。
━━━━━━━━━━━━━━━━━━
# 画像を表示しよう
画像を表示するときは、
```html
<img src="images/cat.jpg">
```
と書きます。
画像は、
imagesフォルダへ入れておきます。
━━━━━━━━━━━━━━━━━━
# リンクを作ろう
ホームページから、
別のページへ移動するときは、
```html
<a href="https://www.google.com">
Google
</a>
```
と書きます。
クリックすると、
Googleが開きます。
━━━━━━━━━━━━━━━━━━
# タグを組み合わせる
例えば、
```html
<h1>動物紹介</h1>
<p>かわいい猫です。</p>
<img src="images/cat.jpg">
<a href="https://www.google.com">
Google
</a>
```
このように、
タグを組み合わせるだけで、
Webページになります。
━━━━━━━━━━━━━━━━━━
# HTMLを書く流れ
HTMLを書く
↓
タグを書く
↓
保存する
↓
ブラウザで見る
↓
修正する
↓
完成
━━━━━━━━━━━━━━━━━━
# 今日覚えること
□ タグはWebページの部品
□ 開始タグと終了タグがある
□ h1は見出し
□ pは文章
□ imgは画像
□ aはリンク
□ brは改行
━━━━━━━━━━━━━━━━━━
# HTMLツリー
HTML
│
├ head
│ └ title
│
└ body
│
├ h1
│
├ p
│
├ img
│
└ a
━━━━━━━━━━━━━━━━━━
# 家で例えると
家
↓
玄関
↓
リビング
↓
キッチン
↓
お風呂
のように、
家はいろいろな部屋で
できています。
HTMLも、
タグという部品を
組み合わせて、
一つのWebページを
作っています。
━━━━━━━━━━━━━━━━━━
# 最後に一言でまとめる
HTMLタグとは、
「Webページを作るための部品」
です。
もっとかんたんに言うと、
「レゴブロック」
です。
タグを一つずつ組み合わせることで、
文字・画像・リンクなど、
自由にホームページを作ることができます。
━━━━━━━━━━━━━━━━━━
# よく使うHTMLタグ一覧
HTMLでは、
たくさんのタグがありますが、
最初は次のタグだけ覚えれば十分です。
━━━━━━━━━━━━━━━━━━
見出し
<h1>
↓
一番大きな見出し
<h2>
↓
少し小さい見出し
<h3>
↓
さらに小さい見出し
━━━━━━━━━━━━━━━━━━
文章
<p>
↓
文章を書く
━━━━━━━━━━━━━━━━━━
改行
<br>
↓
改行する
━━━━━━━━━━━━━━━━━━
区切り線
<hr>
↓
横線を表示する
━━━━━━━━━━━━━━━━━━
画像
<img>
↓
画像を表示する
━━━━━━━━━━━━━━━━━━
リンク
<a>
↓
別ページへ移動する
━━━━━━━━━━━━━━━━━━
ボタン
<button>
↓
ボタンを表示する
━━━━━━━━━━━━━━━━━━
入力欄
<input>
↓
文字を入力する
━━━━━━━━━━━━━━━━━━
複数行入力
<textarea>
↓
長い文章を書く
━━━━━━━━━━━━━━━━━━
選択メニュー
<select>
↓
選択肢を表示する
━━━━━━━━━━━━━━━━━━
番号なしリスト
<ul>
↓
箇条書き
━━━━━━━━━━━━━━━━━━
番号付きリスト
<ol>
↓
番号付き一覧
━━━━━━━━━━━━━━━━━━
リストの項目
<li>
↓
リストの中身
━━━━━━━━━━━━━━━━━━
表（テーブル）
<table>
↓
表を作る
━━━━━━━━━━━━━━━━━━
行
<tr>
↓
表の横一列
━━━━━━━━━━━━━━━━━━
見出しセル
<th>
↓
表の見出し
━━━━━━━━━━━━━━━━━━
データセル
<td>
↓
表のデータ
━━━━━━━━━━━━━━━━━━
区切り（箱）
<div>
↓
大きな箱を作る
━━━━━━━━━━━━━━━━━━
小さな区切り
<span>
↓
文章の一部を囲む
━━━━━━━━━━━━━━━━━━
フォーム
<form>
↓
入力画面全体
━━━━━━━━━━━━━━━━━━
HTML全体
<html>
↓
HTMLの始まり
━━━━━━━━━━━━━━━━━━
設定
<head>
↓
画面には表示されない設定
━━━━━━━━━━━━━━━━━━
タイトル
<title>
↓
ブラウザのタイトル
━━━━━━━━━━━━━━━━━━
画面
<body>
↓
画面に表示する内容
━━━━━━━━━━━━━━━━━━
# HTMLタグツリー
HTML
│
├ html（HTML全体）
│
├ head（設定）
│ │
│ └ title（タイトル）
│
└ body（画面）
│
├ h1～h6（見出し）
│
├ p（文章）
│
├ br（改行）
│
├ hr（横線）
│
├ img（画像）
│
├ a（リンク）
│
├ button（ボタン）
│
├ input（入力）
│
├ textarea（文章入力）
│
├ select（選択）
│
├ ul
│ └ li
│
├ ol
│ └ li
│
├ table
│ ├ tr
│ ├ th
│ └ td
│
├ div（箱）
│
└ span（小さな箱）
━━━━━━━━━━━━━━━━━━
# 初心者が最初に覚えるタグランキング
★★★★★（最優先）
□ html
□ head
□ title
□ body
□ h1
□ p
□ img
□ a
━━━━━━━━━━━━━━━━━━
★★★★☆
□ div
□ br
□ button
□ input
━━━━━━━━━━━━━━━━━━
★★★☆☆
□ ul
□ ol
□ li
□ table
□ tr
□ th
□ td
□ textarea
□ select
━━━━━━━━━━━━━━━━━━
# 一言でまとめる
HTMLタグとは、
「Webページを作るための部品」
です。
最初は全部覚える必要はありません。
まずは、
html
body
h1
p
img
a
この6〜8個くらい使えるだけで、
ほとんどのホームページは作れるようになります。
必要になったら、
少しずつ新しいタグを覚えていけば大丈夫です。
━━━━━━━━━━━━━━━━━━
# 次回予告
次は、
**「05_HTML属性（Attribute）とは？【超入門・体系化ノート】」**
を学びます。
HTMLタグに、
色や画像の場所、
リンク先などの情報を追加する
「属性（Attribute）」について、
小学生でも分かるように学んでいきましょう。
#HTML
#HTMLタグ
#VSCode
#Webページ
#img
#a
#h1
#p
#初心者
#超入門
🔷次の記事はこちらから⇩
