こんにちは、でじぼうです。
この記事では、<head>タグ内で必要なタグと属性の使い方を解説します。正しいタグと属性を活用して、ウェブページの最適化やパフォーマンス向上を目指しましょう。
この記事は下記のような方におすすめ！
・HTMLの<head>の書き方がわからない
・<head>で必要なタグを知りたい
<head>タグとは？
HTML文書の<head>タグは、ページの情報や設定を書く場所です。
このタグの中身は、直接的には見えませんが、ブラウザに大切な情報を伝えます。<head>タグは、ページの見た目や検索エンジンに表示される情報に影響します。
「大切な情報」がこれから説明するタグのことだよ！
<head>タグ内に入れるタグ一覧
<meta>タグ
<meta>タグは、HTML文書に関するメタデータを設定するために使用されます。
一般的な<meta>タグの属性と用途は以下の通りです。
| 属性 | 用途 |
| charset | ウェブページに使われる文字の種類や取り扱い方を指定 |
| name | 特定のメタデータを指定 例） description：ウェブページの説明文を指定 keywords：ウェブページのキーワードを指定、検索結果に影響を与える viewport：モバイルデバイスでの画面のサイズや解像度の表示を制御 |
| content | name属性で指定したメタデータの内容を指定 |
html
<meta charset=“UTF-8”>
<meta name=“description” content=“このウェブページの説明文”>
<meta name=“keywords” content=“キーワード1, キーワード2”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>タグ
<title>タグは、ウェブページのタイトルを指定します。
ブラウザのタイトルバーに表示されたり、検索結果のタイトルとして利用されたりします。
html
<title>ウェブページのタイトル</title>
<link>タグ
<link>タグは、外部リソースとの関連付けやスタイルシートの読み込みに使用されます。
一般的な属性としては、rel属性とhref属性があります。
| 属性 | 用途 |
| rel | リンクの種類を指定 例） stylesheet：外部のCSSファイルをウェブページに結び付ける icon：ウェブページのアイコン（ファビコン）を指定 |
| href | リンク先のURLを指定 |
html
<link rel=“stylesheet” href=“styles.css”>
<link rel=“icon” href=“favicon.ico”>
<script>タグ
<script>タグは、JavaScriptコードの埋め込みや外部スクリプトの読み込みに使用されます。
主な属性としては、src属性やtype属性があります。
| 属性 | 用途 |
| src | 外部スクリプトのURLを指定 |
| type | スクリプトの種類を指定 例） text/javascript：デフォルトのスクリプトタイプで、最も一般的 application/javascript：text/javascriptと同様の意味を持つが、より厳密 module：モジュール間での依存関係やエクスポート/インポートを宣言する text/css：CSSスタイルシートを示す、スクリプトではなくスタイルシートを指定する際に使用 |
html
<script src=“script.js”></script>
<script type=“text/javascript”>
// JavaScriptコードの埋め込み
</script>
<style>タグ
<style>タグは、CSSスタイルシートを直接HTML文書内に埋め込むために使用されます。
スタイルシートの定義やスタイルの設定に使用します。
html
<style>
body {
background-color: #f1f1f1;
font-family: Arial, sans-serif;
}
h1 {
font-size: 24px;
}
</style>
おわりに
上記の例は一般的な使用例であり、実際のウェブページに合わせて適切な値やスタイルを指定する必要があります。
それぞれのタグや属性の詳細な使用方法やオプションについては、HTMLのリファレンスやドキュメントを参照してください。
コメント