【随時更新】Markup記法(HTML)【基本編】

Web制作やプログラミングなどの
全ての基本となるMarkup記法(HTML)について
備忘録を残します

## 基本構造

### DOCTYPEタグ

#### 記述例

```html
<!doctype html>
```



------

### htmlタグ

#### 記述例

```html
<html lang="ja">〜</html>
```



------

### headタグ

#### 記述例

```html
<head>〜<head/>
```



------

### metaタグ

#### 記述例１

```html
<meta charset="UTF-8">
```



#### 記述例２

```html
<meta name="description" content="〜">
```



------

### titleタグ

#### 記述例

```html
<title>〜</title>
```



------

### bodyタグ

#### 記述例

```html
<body>〜</body>
```



## コンテンツ内

### 見出しタグ

#### 記述例

```html
<h1>１番大きな見出し</h1>
<h2>２番目の見出し</h2>
<h3>３番目の見出し</h3>
<h4>４番目の見出し</h4>
<h5>５番目の見出し</h5>
<h6>６番目の見出し</h6>
```

#### 表示例

<h1>１番大きな見出し</h1>
<h2>２番目の見出し</h2>
<h3>３番目の見出し</h3>
<h4>４番目の見出し</h4>
<h5>５番目の見出し</h5>
<h6>６番目の見出し</h6>

------

### pタグ

#### 記述例

```html
<p>これは段落１です。</p>
<p>これは段落２です。</p>
```

#### 表示例

<p>これは段落１です。</p>
<p>これは段落２です。</p>



------

### brタグ

#### 記述例

```html
<p>ここで改行<br>前の行で改行しています</p>
```

#### 表示例

<p>ここで改行<br>前の行で改行しています</p>



------

### imgタグ

#### 記述例

```html
<img src="画像ファイルパス" alt="画像の説明">
```



------

### aタグ

#### 記述例

```html
<a href=https://google.co.jp>>> Google</a>
```

#### 表示例

<a href=https://google.co.jp>>> Google</a>



------

### リストタグ

#### 記述例１

```html
<ul>
  <li>卵</li>
  <li>牛乳</li>
  <li>砂糖</li>
</ul>
```

#### 表示例２

<ul>
  <li>卵</li>
  <li>牛乳</li>
  <li>砂糖</li>
</ul>


#### 記述例２

```html
<ol>
  <li>卵を割る</li>
  <li>砂糖と牛乳を入れてよく混ぜる</li>
  <li>フライパンに流し込み焼く</li>
</ol>
```

#### 表示例２

<ol>
  <li>卵を割る</li>
  <li>砂糖と牛乳を入れてよく混ぜる</li>
  <li>フライパンに流し込み焼く</li>
</ol>



------

### 表タグ

#### 記述例

```html
<table border="1">
  <tr>
    <th>プラン名</th>
    <th>料金</th>
  </tr>
  <tr>
    <td>わくわくプラン</td>
    <td>にこにこプラン</td>
  </tr>
  <tr>
    <td>月額2,980円</td>
    <td>月額1,980円</td>
  </tr>
</table>
```

#### 表示例

<table border="1">
  <tr>
    <th>プラン名</th>
    <th>料金</th>
  </tr>
  <tr>
    <td>わくわくプラン</td>
    <td>にこにこプラン</td>
  </tr>
  <tr>
    <td>月額2,980円</td>
    <td>月額1,980円</td>
  </tr>
</table>


------

### formタグ

#### 記述例

```html
<form action="example.php" method="post" name="contact-form">
ここにフォームの部品が入ります
</form>
```



------

### inputタグ

#### 記述例

```html
名前：<input type="text" placeholder="名字 名前">
<br>
性別：
<input type="radio" name="gender" value="男"> 男
<input type="radio" name="gender" value="女" checked> 女
<input type="radio" name="gender" value="その他"> その他
<br>
好きな色：
<input type="checkbox" name="color" value="赤" checked> 赤
<input type="checkbox" name="color" value="青"> 青
<input type="checkbox" name="color" value="黄"> 黄
<input type="checkbox" name="color" value="緑"> 緑
<br>
<input type="submit" value="送信する">
```

------

### selectタグ

#### 記述例

```html
血液型：
<select name="bloodtype">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="O">O</option>
    <option value="AB">AB</option>
    <option value="不明" selected>不明</option>
</select>
```

------

### textareaタグ

#### 記述例

```html
<textarea name="message" placeholder="メッセージを入力"></textarea>
```

------

## タグによるグループ分け

### headerタグ

#### 記述例

```html
<header>〜</header>
```



### navタグ

#### 記述例

```html
<nav>〜</nav>
```



### articleタグ

#### 記述例

```html
<article>〜</article>
```



### sectionタグ

#### 記述例

```html
<section>〜</section>
```



### mainタグ

#### 記述例

```html
<main>〜</main>
```



### asideタグ

#### 記述例

```html
<aside>〜</aside>
```



### footerタグ

#### 記述例

```html
<footer>〜</footer>
```



### divタグ

#### 記述例

```html
<div>〜</div>
```



## おわりに

以上がMarkup記法(HTML)の基本構文でした
上記を覚えるだけでも
簡単なWebサイトくらいは作れますので
是非一度作成してみてください

またCSSも使用する事で
だいぶ表現の幅も広がりますので
気になる方は調べてみてください