HTML cheat sheet 

Hi, there!
This article is for organizing my thoughts through learning HTML from [a book](https://amzn.asia/d/4twGH1F).
Thanks.

# Basic Template
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="oNKzdLx" data-pen-title="html template" data-user="naopon-hamumu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/naopon-hamumu/pen/oNKzdLx">
  html template</a> by Nao (<a href="https://codepen.io/naopon-hamumu">@naopon-hamumu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# Heading
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="vYoXjyx" data-pen-title="header" data-user="naopon-hamumu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/naopon-hamumu/pen/vYoXjyx">
  header</a> by Nao (<a href="https://codepen.io/naopon-hamumu">@naopon-hamumu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# Paragraph
It is better to use one h1 tag per page.
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="oNKzdyZ" data-pen-title="paragraph" data-user="naopon-hamumu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/naopon-hamumu/pen/oNKzdyZ">
  paragraph</a> by Nao (<a href="https://codepen.io/naopon-hamumu">@naopon-hamumu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# Image
`alt` can be set as description which alter the image, when a browser cannot load.
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="BaXLxOO" data-pen-title="image" data-user="naopon-hamumu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/naopon-hamumu/pen/BaXLxOO">
  image</a> by Nao (<a href="https://codepen.io/naopon-hamumu">@naopon-hamumu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# Hypertext Reference
Also, images and email can be link!
Email, then, make your mail client open with email destination.
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="LYwRmoL" data-pen-title="Hypertext Reference" data-user="naopon-hamumu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/naopon-hamumu/pen/LYwRmoL">
  Hypertext Reference</a> by Nao (<a href="https://codepen.io/naopon-hamumu">@naopon-hamumu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# List Item
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="vYoXrXa" data-pen-title="List Item" data-user="naopon-hamumu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/naopon-hamumu/pen/vYoXrXa">
  List Item</a> by Nao (<a href="https://codepen.io/naopon-hamumu">@naopon-hamumu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# Table
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="NWQRzvK" data-pen-title="Table" data-user="naopon-hamumu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/naopon-hamumu/pen/NWQRzvK">
  Table</a> by Nao (<a href="https://codepen.io/naopon-hamumu">@naopon-hamumu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## Table Join
### Horizontally
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="RwXGXjg" data-pen-title="Untitled" data-user="naopon-hamumu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/naopon-hamumu/pen/RwXGXjg">
  Untitled</a> by Nao (<a href="https://codepen.io/naopon-hamumu">@naopon-hamumu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### Vertically
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="gOVwVeo" data-pen-title="Table (Connect Vertically)" data-user="naopon-hamumu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/naopon-hamumu/pen/gOVwVeo">
  Table (Connect Vertically)</a> by Nao (<a href="https://codepen.io/naopon-hamumu">@naopon-hamumu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# Form
## Input
### 1 Line Text
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="ExqgqdP" data-pen-title="Form (Input)" data-user="naopon-hamumu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/naopon-hamumu/pen/ExqgqdP">
  Form (Input)</a> by Nao (<a href="https://codepen.io/naopon-hamumu">@naopon-hamumu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### Radio Button
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="QWeGMZJ" data-pen-title="Input (radio button)" data-user="naopon-hamumu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/naopon-hamumu/pen/QWeGMZJ">
  Input (radio button)</a> by Nao (<a href="https://codepen.io/naopon-hamumu">@naopon-hamumu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### Checkbox
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="OJKbjdZ" data-pen-title="Input (checkbox)" data-user="naopon-hamumu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/naopon-hamumu/pen/OJKbjdZ">
  Input (checkbox)</a> by Nao (<a href="https://codepen.io/naopon-hamumu">@naopon-hamumu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### Submit
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="YzmpxMx" data-pen-title="Input (submit)" data-user="naopon-hamumu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/naopon-hamumu/pen/YzmpxMx">
  Input (submit)</a> by Nao (<a href="https://codepen.io/naopon-hamumu">@naopon-hamumu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## Selectbox
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="PoMbJoa" data-pen-title="Selectbox" data-user="naopon-hamumu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/naopon-hamumu/pen/PoMbJoa">
  Selectbox</a> by Nao (<a href="https://codepen.io/naopon-hamumu">@naopon-hamumu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## Textarea
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="zYgoErB" data-pen-title="Textarea" data-user="naopon-hamumu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/naopon-hamumu/pen/zYgoErB">
  Textarea</a> by Nao (<a href="https://codepen.io/naopon-hamumu">@naopon-hamumu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## Label
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="jOgVGLN" data-pen-title="Form (label)" data-user="naopon-hamumu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/naopon-hamumu/pen/jOgVGLN">
  Form (label)</a> by Nao (<a href="https://codepen.io/naopon-hamumu">@naopon-hamumu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# References:
- [1冊ですべて身につくHTML & CSSとWebデザイン入門講座［第2版］ （DL特典：Webデザイナーのポートフォリオの作り方入門講座） (１冊ですべて身につく)](https://amzn.asia/d/3hOFJpj)