HTML・メタデータ系
###はじめに
改めて知識を定着させるため、勉強してきたことを過去の自分が読んでもわかりやすいように可能な限り噛み砕いた表現で書いてみる。
まずは表題の通り、HTMLの主な要素について。
html要素 <html>
HTML文書は、１つの<html>要素からなり、<html>要素は、ページ全体を囲んでいます。この要素が全ての要素の先祖（親要素）になるので、「ルート要素」とも呼ばれています。
この要素に直接入れることができるのは、<head>と<body>を各１つずつのみです。
##head要素 <head>
この要素には、html文書に関するメタデータ（機械可読な情報）が入ります。
例えば、題名(title)、スクリプト(JavaScript)、スタイルシート(CSS)、文字コード(charset)などです。
この要素に入れた内容は、ブラウザでWEBページの内容として表示されることはありません。
<html>を直接の親要素とします。
##body要素<body>
<head>とは逆に、ブラウザで表示されるWEBページの内容（コンテンツ）を入れる要素です。
<html>を直接の親要素とします。
##link要素 <link>
<head>内に配置する、外部のリソースとの関係を指定する要素です。
主にCSSスタイルシートへのリンク、アイコンを外部サイトから持ってくる時、JavaScriptのファイルURLを指定する時に使います。
<head>内で何度でも使用できるため、複数のCSSファイルを読み込ませることも可能です。
####<link>要素に指定できる主な属性
-
rel = "ファイルの種類"（必須） -
href = "ファイルのURL"（必須） -
media = "適用対象"
CSSやアイコンを適用する対象の出力媒体（パソコン、プリンタ、テレビなど）を指定したい時に使用する。 -
type = "MIMEタイプ"
関連するファイルのMIMEタイプを指定する。rel = "stylesheet"が指定されている場合は自動的にtype = "text/css"が指定されている状態になります。MIMEタイプに関しては別の記事で参照。
##meta要素 <meta>
他のメタ関連要素(link,title など)で表すことのできないさまざまな情報(メタデータ)を示す要素。
<meta>要素に指定できる主な属性
-
charset = "文字コード"ページで使用している文字エンコーディングの宣言。HTML5では"UFT-8"を指定することを推奨されている。 -
name = "情報の種類"content属性で指定する情報の種類を名前で示します。 -
http-equiv = "情報の種類"役割は前述のnameと同じで、含む情報の種類によって使い分けます。 -
content = "情報"前述のnameやhttp-equivで指定された種類の、具体的な情報を指定。
記述例<meta name ="viewport" content ="width-device-width>"
（このWEBページを小さい画面でみた時に初期状態で縮小された状態にならないようにするための記述）
style要素 <style>
<head>内に配置する、CSSスタイル指定を直接書き込むことができる要素です。
使用するとほかのHTMLファイルやCSSファイルのスタイル指定を共有できなくなってしまうので、この方法で指定する何らかの理由がない限り使用しない方が良いでしょう。
<style>要素に使用できる属性
media = "適用対象"type = "MIMEタイプ"
属性としても使用できる
また、任意の要素（記述例では<div>や、<p>）に属性として指定することもできます。しかし、この方法はHTMLのあちこちにスタイル指定を埋め込むことになりメンテナンス性が低下するため、ちょっとしたテストのために使用すべきものと考えた方が良いでしょう。
記述例
<head>
<style>
body {background: orange;}
</style>
</head>
<body>
<div style="background: #ffe7e8; border: 2px solid #e66465;">
<p style="margin: 15px; line-height: 1.5; text-align: center;">
Well, I am the slime from your video
</p>
</div>
</body>
~~~
## title要素 `<title>`
そのWEBページの目的（タイトル）をテキストで入れる要素です。テキスト以外の要素を入れることはできません。<br>この要素の内容はブラウザウィンドウのタイトルバーやタブに表示され、SEO（GoogleのWebページ検索の、ヒットや表示順）に大きく影響します。<br>一般的なWebページであれば`<head>`内に必ず１つだけ配置します。
_記述例_
```html:HTML
<head>
<title>このページのタイトル</title>
</head>
~~~
##script要素 `<script>`
実行できるコード（スクリプト）やデータを埋め込むために使用します。一般的にJavaScriptのコード埋め込みや参照に使われています。<br>タグ内にコードを書き込むことも、属性`src`を使って外部ファイルを読み込むこともできます。
#### `<script>`要素に使用できる主な属性
- `src = "ファイルのURL"` 外部のファイルからスクリプトを読み込みます。<br>この属性を指定した場合、要素内容は空にしておかなければなりません。
- `type = "MIMEタイプ"` スクリプト言語のタイプを指定できます。<br>この属性を省略（記述しない）した場合、デフォルトで「text/javascript」が指定されています。（JavaScriptを使ってるよ〜ということ）
_記述例（外部ファイル読み込み）_
```html:HTML
<script src="javascript.js"></script>
~~~
<br>
_記述例（コード書き込み）_
```html:HTML
<script>
alert("Hello World!");
</script>
~~~