diff --git a/src/pages/html/01-my-first-html.mdx b/src/pages/html/01-my-first-html.mdx
index 000281d..cf3246b 100644
--- a/src/pages/html/01-my-first-html.mdx
+++ b/src/pages/html/01-my-first-html.mdx
@@ -36,10 +36,14 @@
なにやら非常に簡素な見た目ですね、どうやら改行もされていないようです。
-## タグ
+## タグ (Element)
ここでHTMLのタグについて触れていきます。
-タグとは、ウェブページに**意味**、**構造**、**見た目**の情報を与えるための要素です。
+タグとは、ウェブページに**構造**や**見た目**などの情報を与えるための要素です。
+
+なお、英語圏ではタグのことをElement(エレメント)と呼びます。
+別の単語でややこしいですが、両方とも同じ意味ですので覚えておきましょう。
+ここでは基本的に、タグという呼び方で統一します。
ところで前回用意した例では、改行が反映されていませんでした。
ここに、改行という見た目を与えるための`
`タグを追加してみました。
@@ -73,6 +77,16 @@
<タグ名>範囲
```
+ここで、さっきの`
`には閉じタグが無いことに気が付きましたか？
+このような、閉じタグを持たないタグも存在し、これを空要素(Void Element)と呼んだりします。
+
+このような空要素の書き方として、末尾にスラッシュ`/`を付ける書き方があるので覚えておきましょう。
+
+```html
+
+
+```
+
---
ついでに色もつけちゃいましょう、``タグを使って赤色にしてみました。
@@ -90,7 +104,7 @@
このfontタグにはcolorという**属性**が用意されており、これを使うことで色を指定できるのです。
```html
-<タグ名 属性名="値">範囲
+<タグ名 属性名="値">対象
```
```html
@@ -99,19 +113,16 @@
暗めの緑
```
-export function SampleColor() {
- return (
-
- 赤
- 青
- 暗めの緑
-
- )
-}
-
-
+赤
+青
+暗めの緑
:::note info
今回説明のためにfontタグを使いましたが、fontタグは現在非推奨となっています。
実際に色を指定する場合は、後述する`CSS`を使うなどの方法を使用しましょう。
:::
+
+今回登場したタグの他にも、様々なタグが存在します。
+主要なものをTipsにまとめてありますので、ぜひ参考にしてください。
+
+[いろいろなタグ](../tips/tag)
diff --git a/src/pages/html/02-css.mdx b/src/pages/html/02-css.mdx
new file mode 100644
index 0000000..e71f439
--- /dev/null
+++ b/src/pages/html/02-css.mdx
@@ -0,0 +1,7 @@
+---
+layout: "@/layouts/MarkdownLayout.astro"
+---
+
+export const title = "HTMLを装飾するCSS";
+
+# {title}
diff --git a/src/pages/tips/tag.mdx b/src/pages/tips/tag.mdx
new file mode 100644
index 0000000..285c735
--- /dev/null
+++ b/src/pages/tips/tag.mdx
@@ -0,0 +1,240 @@
+---
+layout: "@/layouts/MarkdownLayout.astro"
+---
+
+export const title = "いろいろなタグ";
+
+# {title}
+
+HTMLにはたくさんのタグが用意されています。
+これを書いている人も全部を覚えているわけではありません。
+
+ただ暗記するのではなくなにができるのかを把握して、必要なときに調べられるようにしましょう。
+
+正しくタグを使いこなすようになると、ウェブページを公開したときに優位な評価を受けやすくなります。
+
+## このページの読み方
+
+以前、fontタグで色を変える方法を以下のように紹介しました。
+
+> 赤色にしたい範囲を``と``で囲みました。
+>
+> よく見ると、開始のタグには`color="red"`という部分がありますね。
+> このfontタグにはcolorという**属性**が用意されており、これを使うことで色を指定できるのです。
+>
+> ```html
+> <タグ名 属性名="値">対象
+> ```
+
+このページでは、属性の説明をするときに以下のような表記を使います。
+
+例: fontタグのcolor属性を説明したいとき (``)
+
+| 要素 | 説明 | 取りうる値 | 省略 |
+| :-- | :-- | :-- | :-: |
+| `font` | 中身の文字の見た目を変えるタグ | - | - |
+| `font[color]` | 文字の色を指定する属性 | `red`のような色の名前、`#ff0000`のようなカラーコードなど | OK |
+
+## 見た目を変えるタグ
+
+### テーブル table
+
+| 要素 | 説明 | 取りうる値 | 省略 |
+| :-- | :-- | :-- | :-: |
+| `table` | 表を作成するタグ | 直下に`tr`タグを配置 | - |
+| `tr` | テーブルの行を作成するタグ | 直下に`th`または`td`タグを配置 | - |
+| `th` | テーブルの見出しセルを作成するタグ | - | - |
+| `td` | テーブルのデータセルを作成するタグ | - | - |
+
+```html
+
+
+ | 名前 |
+ 年齢 |
+
+
+ | 山田太郎 |
+ 25 |
+
+
+ | 鈴木花子 |
+ 30 |
+
+
+```
+
+
+
+ | 名前 |
+ 年齢 |
+
+
+ | 山田太郎 |
+ 25 |
+
+
+ | 鈴木花子 |
+ 30 |
+
+
+
+### 画像 img
+
+| 要素 | 説明 | 取りうる値 | 省略 |
+| :-- | :-- | :-- | :-: |
+| `img[src]` | 表示する対象の画像 | 画像のURLなど | 不可 |
+| `img[alt]` | 画像が表示できない場合に代わりに表示するテキスト | 任意 | 可 |
+
+`
`
+
+
+### 入力
+
+| 要素 | 説明 | 取りうる値 | 省略 |
+| :-- | :-- | :-- | :-: |
+| `input[type="text]` | テキスト入力欄を作成するタグ | - | - |
+| `input[type="password"]` | パスワード入力欄を作成するタグ | - | - |
+| `input[type="checkbox"]` | チェックボックスを作成するタグ | - | - |
+| `input[type="checkbox"][name]` | 同じname属性を持つチェックボックス同士はグループ化される属性 | 任意の文字列 | 可 |
+| `input[type="radio"]` | ラジオボタンを作成するタグ | - | - |
+| `input[type="radio"][name]` | 同じname属性を持つラジオボタン同士はグループ化される属性 | 任意の文字列 | 可 |
+| `input[type="file"]` | ファイル選択欄を作成するタグ | - | - |
+| `button` | ボタンを作成するタグ | - | - |
+| `select` | ドロップダウンリストを作成するタグ | 直下に`option`タグを配置 | - |
+| `option` | ドロップダウンリストの選択肢を作成するタグ | - | - |
+| `textarea` | 複数行のテキスト入力欄を作成するタグ | - | - |
+
+```html
+
+```
+
+
+
+
+
+
+
+```html
+
+```
+
+
+
+
+
+
+
+```html
+リンゴ
+バナナ
+オレンジ
+```
+
+リンゴ
+バナナ
+オレンジ
+
+
+
+
+```html
+男性
+女性
+```
+
+男性
+女性
+
+
+
+
+```html
+
+```
+
+
+
+
+
+
+
+```html
+
+```
+
+
+
+
+
+
+
+```html
+
+```
+
+
+
+## リスト
+
+| 要素 | 説明 | 取りうる値 | 省略 |
+| :-- | :-- | :-- | :-: |
+| `ul` | 順不同リストを作成するタグ | 直下に`li`タグを配置 | - |
+| `ol` | 順序付きリストを作成するタグ | 直下に`li`タグを配置 | - |
+| `li` | リストの項目を作成するタグ | - | - |
+
+```html
+
+```
+
+
+
+
+
+
+```html
+
+ - りんご
+ - バナナ
+ - オレンジ
+
+```
+
+
+ - りんご
+ - バナナ
+ - オレンジ
+
+
+## 区切りを作るタグ
+
+| 要素 | 説明 | 取りうる値 | 省略 |
+| :-- | :-- | :-- | :-: |
+| `div` | ただ区切りを作るタグ | - | - |
+| `span` | ただ文中の区切りを作るタグ | - | - |
+
+## ブラウザに情報を与えるためのタグ
+
+| 要素 | 説明 | 取りうる値 | 省略 |
+| :-- | :-- | :-- | :-: |
+| `html` | HTML文書全体を囲むタグ | 直下に`head`タグと`body`タグを配置 | - |
+| `head` | HTML文書の情報を記述するタグ | 直下に`title`タグや`meta`タグなどを配置 | - |
+| `title` | HTML文書のタイトルを指定するタグ | - | - |
+| `body` | HTML文書の本文を記述するタグ | 直下に見た目を変えるタグや区切りタグなどを配置 | - |
+| `script[src]` | 外部のJavaScriptファイルを読み込むタグ | JavaScriptファイルのURLなど | 不可 |
+| `link[rel="stylesheet"][href]` | 外部のCSSファイルを読み込むタグ | CSSファイルのURLなど | 不可 |