HTML入門:よく使うタグその2 - 元Webデザイナー兼コーダーの備忘録

headタグの中でよく使うタグ
記述例
まとめ

headタグの中でよく使うタグ

headタグ内の記述はブラウザには表示されませんが、ブラウザやクローラーにそのWebページがどのようなページであるのかを伝えるために必要です。

Webページの制作の話とは離れますが、headタグ内のタグはSEO対策で関係します。SEO対策の目的は、グーグルなどの検索結果で自分のWebサイトを上位に表示させることです。上位に表示されれば、ユーザにサイトを見てもらいやすくなります。検索結果で上位に表示させるためにSEO対策をします。SEO対策のために、headタグ内にmetaタグなどを記述します。

それでは、headタグの中でよく使うタグを見ていきます。

metaタグ

属性は、<meta 属性="属性値">で指定します。contentには、そのWebページにふさわしい文言を記述します。下記の他にも属性があるので、各自で調べてください。

<!-- 文字コードの設定 -->
<meta charset="UTF-8"></meta>

<!-- ページの説明 -->
<meta name="description" content="このページは○○のページです。">

<!-- ページのキーワード -->
<meta name="keywords" content="HTML,HTML入門,タグ">

titleタグ

検索結果に表示されたり、ブックマークに登録するときに表示されます。

<title>HTMLの練習</title>

linkタグ

rel属性は、href属性で読み込むファイルとlinkタグが書かれているページとの間で、どのような関係性があるかを示します。この場合、CSSファイルを読み込むのでstylesheetを指定します。href属性にファイルの場所を指定します。

<link rel="stylesheet" href="./ファイル名.css">

scriptタグ

JavaScriptファイルを読み込む場合と、scriptタグ内にJavaScriptのコードを記述する場合があります。※scriptタグは、</body>タグの直前に書くこともあります。

<!-- JavaScriptファイルを読み込む -->
<script src="./ファイル名.js"></script>

<!-- scriptタグ内にコードを書く -->
<script>
/* この中にJavaScriptのコードを書く */
console.log("hello JavaScript");
</script>

記述例

下記が記述例です。headタグ内に注目してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="description" content="このページは○○のページです。">
  <meta name="keywords" content="HTML,HTML入門,タグ">
  <!-- CSSの読み込み -->
  <link rel="stylesheet" href="./ファイル名.css">
  <!-- JavaScriptファイルの読み込み -->
  <script src="./ファイル名.js"></script>
  <title>HTMLの練習</title>
</head>
<body>
  <!-- bodyタグ内の記述 -->
</body>
</html>

まとめ

headタグ内で使うタグの一部を紹介しました。今回挙げたタグ以外にもタグは沢山あるので、各自で調べて使ってみてください。

HTML入門のまとめ記事なら... » HTML入門まとめ