head タグの中で使用するタグ

概要

ベッド専門通販サイト「イーベッド」をご利用いただきありがとうございます。

前回は“HTML”の基本と作成をしました。
今回は<head>要素の中に入るいくつかのタグを覚えていきます。

head 要素のタグ

head 要素の中には色々なタグがあります。
まず、はdescriptionというタグです。
タイトルタグの下に<meta name="description" content"HTMLの基本。">と入れてみましょう。

このタグは検索エンジンによって確認され、検索結果に表示される文章に使われるので、正確に書きましょう。
せっかくホームページを作成しても、検索エンジンに引っかからないと誰も見に来てくれませんから。


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>HTMLの基本</title>
<meta name="description" content"HTMLの基本。">
</head>
<body>
<p>こんにちは</p>
</body>
</html>
それでは、ここでファイルに上書き保存をしましょう。

styley タグ

styley タグについて、今回は簡単にだけ覚えておきます。

文章の構造を規定するのは“HTML”ですが、見た目を規定していくのはstylesheetというものを使用しています。
そして、このstylesheetの言語をhead 要素の中に書いていくことが可能です。

まずは、<style></style>をmeta タグの下に書いてみましょう。


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>HTMLの基本</title>
<meta name="description" content"HTMLの基本。">
<style>
p{ color:red; }
</style>
</head>
<body>
<!--コメント-->
<p>こんにちは</p>
</body>
</html>
</pre>
</div>
上にソースコードには既に書いてありますがp{ color:red; }を入れることで<p>こんにちは</p>の文字色赤くすることができます。

link タグ

styley タグは長くなってくるとhead タグに書ききれなくなってくるので、別のファイルから読み出すことが多いです。

そんな時に使用するのがlink タグです。
例えば、「mystyle」というファイルを作成して読み出したい時は、<link rel="stylesheet" href="mystyle.css">と書きます。


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>HTMLの基本</title>
<meta name="description" content"HTMLの基本。">
<style>
p{ color:red; }
</style>
<link rel="stylesheet" href="mystyle.css">
<link rel="shortcut icon" href="favicon.ico">
</head>
<body>
<!--コメント-->
<p>こんにちは</p>
</body>
</html>
この他にもブラウザで表示した時、タイトルの横に表示される小さいアイコンのことを favicon と言い、これを表示させることもできます。

こちらもソースコードに既に書いてありますが、書き方としては<link rel="shortcut icon" href="favicon.ico">と書きます。

faviconの作成方法は別の機会があればしてみようと思います。

まとめ

今回は、head タグの中で使えるタグを覚えました。
次回はbody タグの中で使えるタグを覚えていきます。

今後もベッド専門通販サイト「イーベッド」をよろしくお願いします。