HTML/CSS基礎 第4回 『タグ』

今回は<head>タグの中に記載する事項について解説させていただきます。

目次

そもそもタグとは

HTMLにおいて、<head>や</head>など<>で囲まれたものをタグと呼びます。<>内に「/」(スラッシュ)のないものを開始タグ、「/」のあるものを終了タグといいます。基本的にはセットで使用しますが、他によっては終了タグのないものもあります。

属性とは

また、開始タグの中に属性というものを記述することもあります。属性を記述することで、タグで囲まれた要素の役割をさらに細かく指定することができます。

HTML/CSS基礎

上記は<a>タグに属性を指定した際の例となります。「href」はリンクを指定することができ、上記のコードをブラウザで表示すると、「menu」をクリックすることで「menu.html」に移動することができるようになります。

<head>タグとは

<head>タグには、ブラウザには表示されない、HTMLファイルの様々な情報を指定していきます。第3回で紹介したコードのうち、以下の部分が<head>タグとなります。

<head>
    <meta carset="UTF-8">
    <title>MY HOMEPAGE</title>
    <meta name = "description" content="私のホームページです">
</head>

上記コードの<meta>タグは、Webサイトの情報を記載するためのタグで、必ず<head>タグの中に記述します。「charset」文字コードを指定(基本的には「UTF-8」)し、「name = “description” content=”〇〇”」とすることで、検索時に表示される説明文を指定しています。他にも「サイトの制作者」や「検索エンジンの回避」、「SNS向けの表示調整」などを行うことができます。

また、<title>タグでページのタイトルを記述することができます。ここで記入したタイトルは、ブラウザのタブやブックマークをした際に表示されます。

上記コードにはありませんが、CSSファイルの指定やJavaScriptの指定なども<head>タグの中に記述することができます。

まずは・・・

色々と情報量が多いかもしれませんが、まずは上記サンプルコードのように、「文字コード」「タイトル」「ページの説明」を記入しておけば大丈夫。いきなり完璧を目指すのではなく、分かるところから書き進めていきましょう。必要に応じて検索サイトを使用し、実装すればいいのです。

今回はここまで。次回はコードを書き進めることをいったんお休みし、Webサイトを制作していく上で欠かせないページを紹介させていただきます。

(Visited 43 times, 1 visits today)
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

株式会社NEUGATEは、都内で企業研修や職業訓練を運営している会社です。主に、IT系の教育事業に力を入れています。
この記事は、株式会社NEUGATEの教育事業部が執筆をしています。

企業ホームページ:https://neugate.co.jp/

コメント

コメントする

目次