HTMLの基本

# はじめに
htmlの要素を真面目に勉強したことがないので、一回まとめてみる。
※★は大事・よく使うマーク。
※例では、QuitaのCSSが適用されている。

# 基本構造
基本構造は以下となる。要は、第一改装は必ず`<html>`で括って、第二改装はメタデータとコンテンツになる。

```html
<!-- ルート要素であり必須 -->
<html>
    <!-- メタデータ要素 -->
    <head></head>
    <!-- コンテンツ要素 -->
    <body></body>
</html>
```
# メタデータ
`<head>`に記載する内容。表示はされない。
## ★`<base>`
URLのベース。サンプルを見たほうが早い。

```html
<html>
 <head>
  <base href="http://www.yyy.zzz/">
 </head>
 <body>
  <a href="index.html">XXX</a>
 </body>
</html>
```
## ★`<title>`
ブラウザのタブに表示される内容。

## ★`<link>`と`<style>`
基本はcssの読み込み。`<link>`はcssファイルや外部からとってくるのに対して、`<style>`このhtml内に直接記述する。基本は`<link>`だろう。

## ★`<meta>`
検索エンジンやブラウザ制御のための情報。主要なのは以下。

| 区分         | 内容                                            | 記載例                                                       |
| ------------ | ----------------------------------------------- | ------------------------------------------------------------ |
| 検索         | 検索キーワード                                  | `<meta name="keywords"   content="blackcat,黒猫,ブログ">`    |
|              | 検索エンジン向け説明                            | `<meta name="description"   content="blackcatのブログ。IT関連の情報を発信しています。">` |
| ブラウザ制御 | 言語                                            | `<meta http-equiv="content-language"   content="ja">`        |
|              | コンテンツタイプとエンコード | `<meta http-equiv="content-type"   content="text/html" charset="UTF-8">` |
|              | リダイレクト                                    | `<meta http-equiv="refresh" content="5;   url=newpage.html">` |
|              | 再読み込み                                      | `<meta http-equiv="refresh" content="300">	`              |

# コンテンツセクショニング
`<body>`の中をセクショニングする。htmlを構造化してくれる。CSSは、この単位でレイアウトを定義するとよい。

## ★`<header>`と`<main>`と`<footer>`
そのまま。ヘッダーとメインとフッター。
## ★`<h1>～<h6>`と`<hgroup>`と`<nav>`
見出しレベル。そしてそれを括るもの。ページ頭のナビゲーション。ナビゲーションはいらないからな。
## ★`<section>`
汎用的に括れる。

## `<address>`と`<article>`と`<aside>`

* address
    個人、団体、組織の連絡先

* article
    フォーラムでの投稿、雑誌や新聞の記事、ブログのエントリ、コメントなど

* aside
    本文と関連してはいるけれど区別して掲載するべき内容（印刷物などで本文の補足として欄外に掲載されるようなものなど）

# テキストコンテンツ
テキストの塊を表す。ブロック要素。
## ★`<div>`
汎用。主にCSSによるスタイル付けのために利用される。

## ★`<p>`と`<hr>`
段落。`<hr>`は段落を更に括る。
### 例：
```html
<hr>
    <p>ネコは、狭義には食肉目ネコ科ネコ属に分類されるヨーロッパヤマネコが家畜化されたイエネコに対する通称である。人間によくなつくため、イヌと並ぶ代表的なペットとして日本をはじめ世界中で広く飼われている。`</p>`</p>
    <p>より広義には、ヤマネコやネコ科動物全般を指すこともある（後述）。</p>
</hr>
<hr>
    <p>ネコは、狭義には食肉目ネコ科ネコ属に分類されるヨーロッパヤマネコが家畜化されたイエネコに対する通称である。人間によくなつくため、イヌと並ぶ代表的なペットとして日本をはじめ世界中で広く飼われている。`</p>`</p>
    <p>より広義には、ヤマネコやネコ科動物全般を指すこともある（後述）。</p>
</hr>
```

<hr>
    <p>ネコは、狭義には食肉目ネコ科ネコ属に分類されるヨーロッパヤマネコが家畜化されたイエネコに対する通称である。人間によくなつくため、イヌと並ぶ代表的なペットとして日本をはじめ世界中で広く飼われている。`</p>`</p>
    <p>より広義には、ヤマネコやネコ科動物全般を指すこともある（後述）。</p>
</hr>
<hr>
    <p>ネコは、狭義には食肉目ネコ科ネコ属に分類されるヨーロッパヤマネコが家畜化されたイエネコに対する通称である。人間によくなつくため、イヌと並ぶ代表的なペットとして日本をはじめ世界中で広く飼われている。`</p>`</p>
    <p>より広義には、ヤマネコやネコ科動物全般を指すこともある（後述）。</p>
</hr>

## ★`<ol>`と`<ul>`と`<li>`
順序付きリスト`<ol>`と順序なしリスト`<ul>`。その中で`<li>`を使う。
### 例：
```html
<ol>
    <li>黒猫</li>
    <li>白猫</li>
</ol>
<ul>
    <li>赤猫</li>
    <li>青猫</li>
</ul>
```
<ol>
    <li>黒猫</li>
    <li>白猫</li>
</ol>
<ul>
    <li>赤猫</li>
    <li>青猫</li>
</ul>

## ★`<figure>`と`<figcaption>`
図表であることを示す。`<figcaption>`はタイトル。
### 例：
```html
<figure>
   <img src="https://qiita-image-store.s3.amazonaws.com/0/269452/profile-images/1530975594" />
    <figcaption>blackcat</figcaption>
</figure>
```
<figure>
   <img src="https://qiita-image-store.s3.amazonaws.com/0/269452/profile-images/1530975594" />
    <figcaption>blackcat</figcaption>
</figure>

## `<dl>`と`<dt>`,`<dd>`
説明リスト。`<dt>`Keyと`<dd>`のvalueの組みあわせ。
### 例：
<dl>
    <dt>犬</dt><dd>わんわん</dd>
    <dt>猫</dt><dd>にゃーにゃー</dd>
</dl>

## `<blockquote>`
引用文。
例：
```html
<blockquote>いろはにほへと　ちりぬるを　わかよたれそ　つねならむ　うゐのおくやま　けふこえて　あさきゆめみ　しゑひもせす</blockquote>
```

<blockquote>いろはにほへと　ちりぬるを　わかよたれそ　つねならむ　うゐのおくやま　けふこえて　あさきゆめみ　しゑひもせす</blockquote>

## `<pre>`
中身をそのまま表示する。（空白、改行などがすべて反映される。）
###例：
```html
<pre>いろはにほへと　ちりぬるを　わかよたれそ　つねならむ　うゐのおくやま　けふこえて　あさきゆめみ　しゑひもせす</pre>
```
<pre>いろはにほへと　ちりぬるを　わかよたれそ　つねならむ　うゐのおくやま　けふこえて　あさきゆめみ　しゑひもせす</pre>

#文字列意味付け
文字を装飾する。インライン要素。
※文字の装飾はスタイルシートでやるべき。

## ★`<a>`
リンク。外部ページへのリンクや、ページ内のリンクもできる。

### 例：
```html
<a href="https://qiita.com/blackcat5016">blackcat</a>
```
<a href="https://qiita.com/blackcat5016">blackcat</a>

## ★`<br>`
改行。

## ★`<span>`
汎用。

# `<em>`,`<strong>`,`<b>`,`<i>`
強調。見た目としては太文字になる。実用的な使い方は以下。

* 意味として強調したい部分はstrongタグを使う
* 太字にしたいだけならbタグは使わずスタイルシートを使う
* emタグやiタグは使う必要はない

## `<mark>`
目立たせたいテキストを示す要素。ハイライトされる。

##`
`
見え消し線。
### 例：

blackcat



## `<sub>`,`<sup>`,`<small>`
下寄り、上寄り、1サイズ小さく。
### 例：
<sub>下寄り</sub>普通<sup>上より</sup><small>小さく<small>

## `<abbr>`
略語。

## `<bdi>`と`<bdo>`
右読み、左読み。

##`<cite>`,`<def>`
`<cite>`は出典・参照先。`<def>`は定義後。イタリック体。

## `<code>`,`<kbd>`,`<samp>`,`<var>`
コードとキーボード入力、画面出力。
### 例：
<code>printf("Hello world!")</code>
<kbd>Hello world!</kbd>
<samp>Hello world!</samp>
<var>var</var>

## `<data>`,`<time>`
人間とコンピュータで見るものが違う。
例：

```html
<data value="398">三百九十八</data>
<time datetime="2018-07-07">July 7</time>
```

## `<ruby>`,`<rtc>`,`<rt>`,`<rp>`,`<rb>`
ルビ関連。

## `<q>`
引用。ダブルクォート。

## `<nobr>`,`<wbr>`
改行位置指定。