4月生募集中!当社人気の転職保証コース
プログラミング学習から転職成功まで導く、当社人気のDMM WEBCAMP(旧WEBCAMP PRO)。
3月生は満員となっております。4月生募集に向け、お早めの申込みをオススメします。
プログラミング未経験でもエンジニア転職を絶対成功させたい
スキルを身に着けて人生を自ら切り開きたい
上記にあてはまる方は、ぜひご検討ください!

みなさんはHTMLの学習をしていませんか?

今回の記事では<head>タグの使い方や注意点について紹介していきます!

・学習ステップを確認したい方は、【入門者向け】プログラミング初心者がHTMLを学ぶ6つのステップ」の記事を参考にしてください。

ドキュメント情報を記述する

<head> タグはドキュメント全般の情報 (メタデータ) を内包する要素です。

その文書の作者情報、サーチエンジン向けのキーワードや説明、文書のタイトル利用するスタイルシート等 その文書に関する情報を記述します。

tittle

<title>~</title>で指定する文書のタイトル以外のほとんどの情報は ブラウザ上には表示されません。

HTML文書では<html>、<head>、<body>の3種類のタグで文書の構造を定義します。

html

<html>~</html>はその文書がHTML文書であることを宣言するタグであり、 文書の最初と最後に記述します。

<head>~</head>の間には、文書のタイトル等のヘッダ情報を記述します。

body

そして<body>~</body>の間には、実際にブラウザに表示される文書の本体を記述します。

ほとんどのブラウザーは タグが省略されている場合にも <head> 要素を暗黙に生成し、補完します。

ただし動作保証されたものではありませんので、通常は明確に指定するようにしましょう。

・HTMLタグを一覧から探したい方は、「【初心者向け】htmlで使う主要なタグ一覧を解説」の記事を参考にしてください。

記載できる要素

<head>内に記載できる<meta>用語で、主なものをご紹介します。

1. <!DOCTYPE html>

HTML5でマークアップするための「DOCTYPE宣言」です。HTML文書では必ず最初に「DOCTYPE宣言」を記述する必要があります。

大文字と小文字は区別されないので <!doctype html> などと記述してもOKです。

HTML4.01では、<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">などと記述します。

2. <html lang="ja">

lang属性で『"ja"』を指定することで「このHTML文書は日本語で書かれていますよ」という意味を与えています。

3. <meta charset="UTF-8">

文字エンコーディングの指定です。日本語の文字コードの値としては「UTF-8」の他に「SHIFT_JIS」と「EUC-JP」を使う機会が多いでしょう。こちらも大文字と小文字の違いは区別されません。

文字エンコーディングを指定しないと、英語版のブラウザで日本語で作成されたウェブページにアクセスした場合などに文字化けが起きる可能性があります。忘れずに指定しましょう。

・多くのテンプレートを知りたい方は、「【初心者向け】おすすのhtmlのテンプレート7選!」の記事を参考にしてください。

4. <meta name="author" content="//test.com">

著者情報です。特に重要ではありませんが、ページ作成者の個人名や企業名を書いたりします。

5. <meta name="description" content="...">

検索エンジンの検索結果にも引用される重要なmeta要素で、キーワードを効果的に散りばめて記述すればそれだけでもSEO的な効果が期待できます。検索結果の説明文となる文章なので、クリック率を上げるような文章にしましょう。

字数は可能な限り120文字以内に収めます。

記載していない場合は、検索エンジンはページの本文テキストや画像のalt属性から検索ワードに関する単語部分を抽出して検索結果に反映させます。

6. <meta name="format-detection" content="telephone=no,address=no,email=no">

各種スマートフォンやタブレット端末では、電話番号や住所またはメールアドレスだと推測される文字列があると自動でリンクが貼られます。

この機能を制御するのが「format-detection」タグです。

「telephone=no,address=no,email=no」として、すべての自動リンクを無効化しています。

・ホームページ作成を勉強する時に参考にしたい記事を集めてみました。

【初心者入門】HTMLの学習で参考になるおすすめのブログ8選!を参考にしてみてください。

7. <meta name="viewport" content="width=device-width,initial-scale=1.0">

各種ブラウザのウィンドウサイズにデザインを最適化させるための設定です。

ここでは「width=device-width」を指定しているのでviewportの幅は端末や各種ブラウザのウィンドウの横幅に依存します。

8. <link rel="apple-touch-icon" href="/icon/icon.png">

こちらは iPhone や iPad などのiOS端末で、ウェブサイトを「ホーム画面に追加」したときに表示されるアイコンを指定します。

9.<link rel="alternate" type="application/rss+xml" href="http://on-ze.com/feed">

RSSフィードのURLです。

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

読み込むスタイルシートを指定します。

11. <title></title>

タイトルです。<head>内では最後尾に書くことが良いと思われます。

要素の記載順について<head>~</head> 内で使われるタグは、主に「meta」「link」「title」「script」の4つです。
このうち、文字コードを指定する「meta charset」以外はどんな順番で書いても差し支えありません。

しかし、どうせなら最適なパフォーマンスを発揮できる順序で記述したいものです。

そこで重要なのがJavaScriptの扱い方。
ウェブブラウザは、ソースを読み込んだ後に上から順番にコードを評価・解釈していきます。

スクリプトの実行中は次のタグの処理がストップしてしまうので、基本的には <head>~</head> 内には「script」タグは記述しないようにしましょう。

また、少しでもHTTPリクエストを減らすために、CSSもJavaScriptもなるべく1つにまとめるようにします。

・HTMLのコーディングの概要をまとめてみたので、
HTMLのコーディングの仕方を解説を参考にしてみてください。

サンプル

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta name="author" content="HOGE">
<meta name="keywords" content="HTML,スタイルシート,リファレンス">
<meta name="description" content="headタグ演習">
<title>文書のタイトル</title>
<link rel="stylesheet" href="style.css">
</head>
<head>
</head>
<body>
文書の本体
</body>
</html>

・プログラミングは8割はerrorとの戦いです。そんな時に役立つよくある間違いをまとめてみました。こちらのよくある間違いを紹介!【HTML初心者入門】を参考にしてみてください。

まとめ

初心者の方向けにheadタグを紹介していきましたが、いかがでしたか?

headタグはWebサイトを作成する上で基本となるタグですので、しっかり基本を抑えてくださいね!

1ヶ月でHTML・CSSができる!「WebCamp」とは?

WebCampは1ヶ月でプログラミング・Webデザインスキルを学ぶ通い放題のプログラミングスクールです。

参加する方の90%は未経験者です!

短期集中型のスクールなので、期間を決めて圧倒的に効率よくサイト制作スキルを身に着けたい方におすすめです!

わからないことを講師にすぐ質問できたり、通い放題で自分のスケジュールに合わせて来校することができるので、独学で学習するよりも早く確実にスキルが身につきます。

学習の疑問点やWebスキルのマスターの仕方がわかる無料説明会も開催しています。ぜひお気軽にお申込みください!

4月枠も残りわずか当社人気の転職保証コース
プログラミング学習から転職成功まで導く、当社人気のDMM WEBCAMP(旧WEBCAMP PRO)。
3月受入枠は満員となっております。4月枠に向け、お早めの申込みをオススメします。
プログラミング未経験でもエンジニア転職を絶対成功させたい
スキルを身に着けて人生を自ら切り開きたい
上記にあてはまる方は、ぜひご検討ください!

▼未経験から1ヶ月でWEBデザイン・プログラミングを学びたい方はこちら!

おすすめの記事