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 62 times, 1 visits today)
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

エヌ・キャリア・アカデミーは「21世紀のこれからの激変する社会を生き抜き、第一線で活躍することのできる人材を世に送り出していく」ことを教育理念にかかげ、IT系の職業訓練を実施している職業訓練校です。

この記事は、エヌ・キャリア・アカデミーのスタッフが執筆しています。

企業ホームページ:https://n-career.jp/

コメント

コメントする

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

目次