100日後にエンジニアになるキミ - 7日目 - HTML - HTMLの基礎2

HTMLの基礎の続きです

## タグについて

前回はHTMLの構成要素についてやりました。
今回はタグについてのお話です。

HTML要素を表現するのにHTMLのタグを用います。

HTMLのタグはかなり沢山の種類がありますが
主要な部分を覚えれば
全てを覚えなくてもHTMLファイルを作ることができます。

まずは主要なタグを抑えていきましょう。

## HTMLタグ

`<!DOCTYPE html>`
`<html></html>`

htmlタグはHTML文書の冒頭に記述し
HTML文書であることを示すために使います。

`<!DOCTYPE html>`は
この文書がHTML5で作成されたものであることを宣言するために
文書の先頭（`<html>`タグよりも上）に記述するDOCTYPE宣言です。


`<html></html>`のタグ直下には
`<head>タグ` と `<body>タグ` がそれぞれ一つづつ必要です。

htmlタグでは , lang属性で言語を指定することができ
日本語の場合はlang="ja" , 英語はlang="en"を指定します。

```
<!DOCTYPE html>
<html lang="ja">
    <head></head>
    <body></body>
</html>
```

終了タグで閉じるのを忘れないようにしましょう。

## HEADタグ

`<head></head>`
コンテンツに表示しない文書情報で
metaやtitleなどを記述できます。

```
<head>
<title>乙py<title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="description" content="乙py">
<meta name="keywords" content="乙py">
<script type="text/javascript" src="sample.js">< script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
```

headタグの中で用いることのできるタグは
以下のようなものがあります。

`<title>`
タイトルを指定,ブラウザのタイトルバーに表示される

`<meta>`
文書の情報を定義する

`<link>`
href属性で指定したファイルとの関係を定義する

`<style>`
スタイル情報を記述,type属性の記述が必要(text/css等)

`<script>`
スクリプト を記述,type属性(text/javascript)とmeta要素でスクリプトタイプの宣言をする

# titleタグ

`<title>タイトル<title>`

ブラウザーの上部に表示される情報を記述するタグです。
タグの要素がブラウザーのタブ部分に表示されます。

`<title>乙py<title>`


# metaタグ

`<meta>`
HTML文書というよりは、WEBサイトの情報を記述する部分です。

metaタグは開始タグのみで終了タグが不要ですが
複数の要素を記述することができます。

書き方は
`<meta name="属性名" content="属性値"`

というように書きます。

```
<head>
    <title>タイトルを記述</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <meta name="keywords" content="キーワード,内容">
    <meta name="description" content="説明文">
    <meta name="author" content="作者名とか">
    <meta name="robots" content="noindex,nofollow">
</head>
```

`<meta http-equiv="content-type" content="text/html;charset=utf-8">`
これはこの文書の文字コードをさしていて、utf-8を指定しています。

属性名としては他に

keywords
description
author
robots

などがあります。

keywordsではこのページの内容で重要なワードなどを書き込みます。
`<meta name="keywords" content="キーワード,内容">`

descriptionはこのサイトの説明文を書くところです。
`<meta name="description" content="説明文">`

authorはこのサイトの作者名などを記載します。
`<meta name="author" content="作者名とか">`

robotsはクローラー(検索エンジンのWEB巡回プログラム)に対する指定です。
`<meta name="robots" content="noindex,nofollow">`

noindexとは、検索エンジンにページを認識（インデックス）させないために指定する値です。
nofollowとは、クローラーにページ内のリンクを辿らせず
リンク先にページの評価を渡さないために指定する値です。

metaタグを書く順番には特に決まりはなく、書かなくてもそこまで問題はありません。
検索エンジンにに認識してもらうためにはmetaタグを整備しないと
読み取られないため、検索にひっかからなかったするので、整備した方が良いでしょう。

## linkタグ

`<link>`
主にCSSなどのファイルを紐づけるために記述するタグです。
linkタグは終了タグが不要です。

`<link rel="stylesheet" href="./style.css">`

外部のファイルを読み込みしたければlinkタグを用います。
CSSファイルの場合はrel属性に`stylesheet`を指定します。

linkタグはrel属性で何のファイルであるのかを指定し
href属性でリンク先(パス)を指定します。

リンク先は相対リンク、もしくは絶対リンクで書くことになります。

相対リンクはこのHTMLファイルから見たファイルの場所になり
絶対リンクはWEBサイトの構造から見たファイルの場所を記述することになります。

外部のWEBサイトからのlinkはそのファイルのURLを指定します。

faviconというブラウザーのタグの部分につく小さな画像がありますが
それをきちんと表示させたい場合はheadタグ内で指定が必要です。

<link rel="shortcut icon" href="/path/favicon.ico">

rel属性で`shortcut icon`を指定します。
ファビコンの拡張子は`.ico`となります。

## styleタグ

このページ全体のスタイルをまとめて記述することができます。

`<style></style>`

```
<style>
    body {background-color: #00ff00}
    .container {width: 90% ; text-align: center;}
    .first-sentence {font-weight: bold;}
</style>
```

タグの固有のstyle属性とは別物になります。
全体のスタイルを記述できますが、通常はスタイルシートをファイルで分けますので
そこまで多用することはありません。

## scriptタグ

`<script></script>`
文書にJavaScriptなどのスクリプトを組み込む際に使用します。

```
<script type="text/javascript" src="sample.js"></script>
```

type属性では`text/javascript`を指定し
src属性でファイルのパスを指定し
外部サイトからのファイル読み込みの場合はサイトのURLを記述します。

またscriptタグはheadタグ以外にbodyタグ内でも書くことができます。

外部ファイルを先に読み込んでおかないと
外部ファイルの関数は動かないので、headタグで読み込んでおきましょう。

## noscriptタグ

`<noscript></noscript>`

あまりなじみのないものかもしれませんが
javascriptが働かない場合に動作するタグになります。

javascriptはブラウザーの方でOn,OFFを切り替えることができます。
javascriptOFFの状態ではjavascriptは動作しません。

javasciprtを動作させる前提でいた場合何もおきない事になり
画面表示がおかしくなったりするケースがあります。

その場合に代わりに動作させるタグを記述できます。

```
<script type="text/javascript">
    (function () {
        var tagjs = document.createElement("script");
        var s = document.getElementsByTagName("script")[0];
        tagjs.async = true;
        tagjs.src = "//s.yjtag.jp/tag.js#site= AAABBBCCC";
        s.parentNode.insertBefore(tagjs, s);
    }());
</script>
<noscript>
<iframe src="//b.yjtag.jp/iframe?c=AAABBBCCC" width="1" height="1" 
 frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
</noscript>
```

最後の部分がnoscriptタグの記述です。

広告用のタグはjavascriptが働くことが前提で書かれているため
javascriptが働かないと画面崩れが起きることがあります。

それを防ぐためにnoscriptタグを併せて記述しています。


## まとめ

本日は主にhead内で使用されるタグについて
説明しました。

WEBサイトの情報や外部ファイルの読み込みは
HTMLを構成するのに欠かせないものですので
書き方は押さえておきましょう。


君がエンジニアになるまであと93日

## 作者の情報

乙pyのHP：
http://www.otupy.net/

Youtube：
https://www.youtube.com/channel/UCaT7xpeq8n1G_HcJKKSOXMw

Twitter：
https://twitter.com/otupython