HTML初心者入門headタグの使い方

HTMLの「head」タグ内ではブラウザに情報を送信したり指示を出すときに
「head」タグ内に必要なタグを使って書きます。

【目次】

スポンサーリンク

headタグの意味や使い方

headタグの書き方について覚えておくことは
htmlタグの後 / bodyタグの前に記述するだけです。

headタグ 記述場所
<!DOCTYPEhtml>
<htmllang="ja">
<html>
<head>
ここに記述します
</head>
<body>
 
</body>
</html>

headタグは、HTMLで作成された文章に関するメタ情報を
記述するためのタグです。


主に検索エンジンやブラウザなどのシステムに対して情報を
提供する役割があります。

Webページでは見えませんが
SEO対策に有効なものもあるので重要な部分です。

headタグ内に記述する要素タグ

  • title   (タイトルタグ)
  • meta (メタタグ)
  • link    (リンクタグ)
  • style   (スタイルタグ)
  • script  (スクリプトタグ)

などがあります。

titleタグ
<title>タイトル</title>
webブラウザ上のタグに表示されるタイトルを表示させるためのタグです。
ページタイトルと間違えやすいので、注意が必要です。
ページタイトルの場合は<h1>や<h2>などのタグを使用します。

mataタグ
<meta charset="utf-8">などあります
charset(キャラセット)は文字コードの設定という意味になります。

UTF-8とは、世界的にも最もポピュラーな文字コードで
文字コードはUTF-8(Unicode)にすればよいでしょう。
UTF-8以外には

ASCIIコード Shift- UTF-16などがあります。

name属性は必ずcontent属性とセットで記述するルールになっています。

<meta name=author content=ブログなどの作者の名前>
<meta name="descripton"content="ページの内容を表す文章">

linkタグ
<linkrel="stylesheet"href="cssファイルのURL">などがあります。
リンクタグでよく使われるもの
  • rel
  • href
  • type

linkタグは、Webサイトの見栄えに直接関係することはありません。
基本的HTMLから他のファイルを読み込みたい場合はlinkタグを使いましょう。

スポンサーリンク

headの書き方のサンプル

head サンプル
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>タイトル</title>
    <meta name=”author” content=”ブログなどの作者の名前”>
    <meta name="descripton"content="ページの内容を表す文章">

    <link rel="stylesheet"href="cssファイルのURL">
    <script src="JavaScriptファイルのURL"></script>
  </head>
 <body>
  
    
  </body> 
  
   
<head>に書くことのできるタグにはたくさんの種類があります。
これはその中の一部です。

【関連記事】

HTML入門リンクを表すa(アンカー)タグの使い方

スポンサーリンク
おすすめの記事