【HTML初心者入門】<head>タグとは？使い方も解説！
みなさんはHTMLの学習をしていませんか？
今回の記事では<head>タグの使い方や注意点について紹介していきます！
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 3ヶ月〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
ドキュメント情報を記述する
<head> タグはドキュメント全般の情報 (メタデータ) を内包する要素です。
その文書の作者情報、サーチエンジン向けのキーワードや説明、文書のタイトル利用するスタイルシート等 その文書に関する情報を記述します。
tittle
<title>～</title>で指定する文書のタイトル以外のほとんどの情報は ブラウザ上には表示されません。
HTML文書では<html>、<head>、<body>の3種類のタグで文書の構造を定義します。
html
<html>～</html>はその文書がHTML文書であることを宣言するタグであり、 文書の最初と最後に記述します。
<head>～</head>の間には、文書のタイトル等のヘッダ情報を記述します。
body
そして<body>～</body>の間には、実際にブラウザに表示される文書の本体を記述します。
ほとんどのブラウザーは タグが省略されている場合にも <head> 要素を暗黙に生成し、補完します。
ただし動作保証されたものではありませんので、通常は明確に指定するようにしましょう。
【HTML タグ】タグの使い方を徹底解説 | コピペで動く実行例付き
「今の働き方に不満はあるけど、日々の業務が忙しくてゆっくり考える時間がない…」
そんな悩みを持つ方に向けて【DMM WEBCAMP】では無料のキャリア相談を実施しています。
ビデオ通話で相談をすることができるため、仕事で忙しい方でもスキマ時間に気軽にカウンセリングを受けることも可能です！
プロのキャリアカウンセラーと一緒に、今後のキャリアについて考えてみませんか？
記載できる要素
<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」を使う機会が多いでしょう。こちらも大文字と小文字の違いは区別されません。
文字エンコーディングを指定しないと、英語版のブラウザで日本語で作成されたウェブページにアクセスした場合などに文字化けが起きる可能性があります。忘れずに指定しましょう。
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」として、すべての自動リンクを無効化しています。
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の扱い方。
ウェブブラウザは、ソースを読み込んだ後に上から順番にコードを評価・解釈していきます。
JavaScriptはプログラミングの入門に最適な言語！特徴や記述方法を初心者向けに解説
スクリプトの実行中は次のタグの処理がストップしてしまうので、基本的には <head>～</head> 内には「script」タグは記述しないようにしましょう。
また、少しでもHTTPリクエストを減らすために、CSSもJavaScriptもなるべく1つにまとめるようにします。
サンプル
<!DOCTYPE html>
<html>
<head>
<span><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></span>
<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>
「今の働き方に不満はあるけど、日々の業務が忙しくてゆっくり考える時間がない…」
そんな悩みを持つ方に向けて【DMM WEBCAMP】では無料のキャリア相談を実施しています。
ビデオ通話で相談をすることができるため、仕事で忙しい方でもスキマ時間に気軽にカウンセリングを受けることも可能です！
プロのキャリアカウンセラーと一緒に、今後のキャリアについて考えてみませんか？
まとめ
初心者の方向けにheadタグを紹介していきましたが、いかがでしたか？
headタグはWebサイトを作成する上で基本となるタグですので、しっかり基本を抑えてくださいね！
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 12週間〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
