【HTML基礎】ヘッダ内に入力する情報

今回は、現時点で知っているHTMLのヘッダ内に入力する情報を整理メモ。

まず、ヘッダを書く前に指定するものたち。

①<!DOCTYPE html>

　「これはHTMLである。」という宣言。

　まずは、この記述がないと何も始まらない。

②<html lang="ja">

　このHTML内の言語を設定するコード。

　この ja は日本語の事を示しており、

　他にも　zh(中国語)、en(英語)、fr(仏語)、it(伊語)　などがある。

ここから、ヘッダ内での情報。

①<meta charset="utf-8">

ぶっちゃけ、ここはあまりよくわかってないけど、とりあえず上記で大丈夫らしい。

勉強次第、追記します。

②<title>たぬきのブログ</title>

　サイトの名前をここで決める。

　<title>で囲った中が反映される。上記だと、「たぬきのブログ」部分。

③<meta name="description" content="">

　ここでは、サイトに関連する説明を入力する。

　検索エンジンでサイトが表示された際に、下にでる説明文となる。

④<meta name="author" content="">

　ここでは、作成者の情報（名前）を入力する。

⑤<meta name="viewport" content="width=device-width, initial-scale=1">

　ここではビューポートの設定をしている。

　閲覧するデバイスによって表示サイズがバラバラになってしまうのを防ぐ。

　上記は　width=device-width デバイスの横幅に対して、

　　　　　initial-scale=1 １倍を最大倍率の表示にする、という指定。

　　　　　
⑥<link rel="stylesheet" href="css/normalize.css">
　<link rel="stylesheet" href="css/style.css">
　ここでCSSの指定をしている。

　上段のCSSが、ブラウザ特有のデザインを打ち消すCSSで、

　下段がユーザー指定のCSSとなる。

　HTMLの特性で、下段にあるコードの方が優先度が高いため、

　必ずこの順番で記入しないと、いつまでたってもデザインが反映されない。

⑦<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

　jQueryの使用をする際は必ず使用するjQueryを引用しないと動かない。

⑧<link rel="icon" type="image/png" href="images/favicon.png">

　ファビコンの設定。

　ファビコンとはサイトのアイコンみたいなもの。

　無くてもいいが、あると印象が華やかになる。

現時点ではこんな感じ。

また新しいことを学び次第追記していこうと思います。

tanuki_designのブログ