metaタグってなに

## 概要
htmlのmetaタグってなんじゃい。

## 目次
- [そもそもmetaってなに？](#そもそもmetaってなに？)
    - [概説(Wikipedia)](#概説(Wikipedia))
    - [狭義のメタ(Wikipedia)](#狭義のメタ(Wikipedia))
    - [広義のメタ(Wikipedia)](#広義のメタ(Wikipedia))
    - [htmlのmetaタグっていう文脈での`meta`とはつまり](#htmlのmetaタグっていう文脈での`meta`とはつまり)
- [結局htmlのmetaタグはなんなの？](#結局htmlのmetaタグはなんなの？)
- [よく使うmetaタグ](#よく使うmetaタグ)
    - [charset](#charset)
    - [name="description"](#name="description")
    - [name="viewport"](#name="viewport")
    - [http-equiv](#http-equiv)
    - [metaタグの詳しい使い方](#metaタグの詳しい使い方)
- [小ネタ](#小ネタ)
- [参考サイト](#参考サイト)
- [最後に](#最後に)

## そもそもmetaってなに？
### 概説(Wikipedia)
>メタ（meta-）とは、「高次な－」「超－」「－間の」「－を含んだ」「ーを入れた」「－の後ろの」等の意味の接頭語。ギリシア語から。
>例えば物質界の現象を超越した世界を取り扱う学問を「形而上学」というが、これは英語でmetaphysicsであり、physics（物理学）の後の学問として存在する（詳しくは「形而上学」の項を参照のこと）。

なに言ってるかよくわからないね。

### 狭義のメタ(Wikipedia)
>ある対象を記述したものがあり、さらにそれを対象として記述するものを、メタな○○、あるいは単にメタ○○と呼ぶ。

ほう

### 広義のメタ(Wikipedia)
>広義に、何かを取り込んだ何か、何かについての何か、といったものがメタと呼ばれる場合がある。たとえば、Wikipediaの記事一覧の一覧などはメタ的な記事の一つだろう。情報理論では、情報に付加されるそれ自身に関する情報がメタデータ（メタ情報）と呼ばれる。

へぇ

### htmlのmetaタグっていう文脈での`meta`とはつまり
>何かについての何か

言い換えると

`情報についての情報`

つまり

`サイト内情報についての情報`

意訳すると(少し違うけど)

**`サイトの付属情報`**

## 結論htmlのmetaタグはなんなの？
`htmlファイルのheadタグ内に記述する、サイトの付属情報`的な感じでしょうか。

``` sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <!-- headタグの中にはWebサイトに関する情報(サイトの付属情報)を記述します -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="desctiption" content="ブラウザで検索したときに検索結果に表示される説明文です">
  <title>This is title.</title>
  <link rel="stylesheet" href="./css/style.css">
</head>
<body>
  <!-- bodyタグの中に記述したものがブラウザに表示されます -->
  Hello, World!
</body>
</html>
```

## よく使うmetaタグ
### charset
[文字エンコーディング](https://developer.mozilla.org/ja/docs/Glossary/character_encoding)の設定。今はもうとりあえず[UTF-8](https://developer.mozilla.org/ja/docs/Glossary/UTF-8)って書けばいいと思います。

``` html
<meta charset="UTF-8">
```
### name="description"
googleの検索結果に表示されたりするページの説明です。

``` html
<meta name="description" content="ページの概説をここに書きます。">
```
この画像の赤く囲まれた部分
<img width="616" alt="スクリーンショット 2020-04-22 16.40.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624786/61a20b5f-a36b-7683-5c6e-8ec5d90f9819.png">

### name="viewport"
[ビューポート](https://developer.mozilla.org/ja/docs/Glossary/Viewport)の初期サイズに関する設定です。(モバイル端末のみで使用されます。)
レスポンシブ化するときとかに使うよ。

``` html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
### http-equiv
>プラグマディレクティブを定義します。属性名が http-equiv(alent) なのは、利用できる値のすべてが特定の HTTP ヘッダーの名前だからです。

``` html
<meta http-equiv="X-UA-Compatible" content="ie=edge">
```
### metaタグの詳しい使い方
[\<meta\>: 文書レベルメタデータ要素 - HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/meta)を参照

## ちなみに
ちなみにエディタ(下のはvscode)でhtmlの雛形一気に生成できるよ。
![ezgif.com-crop.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624786/1f59cb53-25dd-408e-44f3-1bc9f9e951c2.gif)


## 参考サイト
- [メタ - Wikipedia](https://ja.wikipedia.org/wiki/%E3%83%A1%E3%82%BF)
- [\<meta\>: 文書レベルメタデータ要素 - HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/meta)

## 最後に
ここ違うよっていうところがあればいつでもコメントお待ちしております🙇‍♂️🙇‍♂️