記事概要
HTMLのhead要素について、まとめる。
まとめ(head要素)
meta要素
HTML文章に関する情報を指定することができる
charset属性
使用する文字コードを指定できる
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
</head>
<body></body>
</html>
property属性
Open Graph Protocol(OGP)を設定する
OGPとは、SNSでWebサイトがシェアされた時にページタイトルや説明文などを表示する仕組み
| 主な設定値 | 設定内容 |
|---|---|
| og:url | WebページのURL |
| og:type | ページの種類。website(Webサイト)またはarticle(記事)を指定 |
| og:title | Webページのタイトル |
| og:description | Webページの説明文 |
| og:image | シェアされた時に表示させたい画像のパス |
title要素
ウェブサイトのタイトルを指定し、タブに表示される
<!DOCTYPE HTML>
<html>
<head>
<title>ココにタイトルを記載</title>
</head>
<body>
<h3>ブラウザ画面に表示される内容</h3>
</body>
</html>
サンプルコードのhtml/index_title.htmlを参照
link要素
- 現在のファイル(HTML)から外部情報を関連付けする要素
- rel属性、href属性と一緒に使用するのが一般的である
rel属性
参照先のファイルが現在のファイルとどのような関係であるのかを明記する
- 属性値
- ”stylesheet”と記述すると、CSSを参照
href属性
参照先の外部ファイルの場所を明記する
- 属性値
- ファイルの場所、ファイル名を記載
<!DOCTYPE HTML>
<html>
<head>
<!-- style.cssを参照 -->
<link rel="stylesheet" href="style.css">
</head>
<body></body>
</html>
script要素
実行できるコードを埋め込んだり、参照したりするために使用される
一般的には、JavaScriptのコードの埋め込みや参照に使用される
<!DOCTYPE HTML>
<html>
<head>
<script src="index.js"></script>
</head>
<body></body>
</html>
type属性
要素の種類を指定する
<!DOCTYPE HTML>
<html>
<head>
<!-- JavaScriptのライブラリを参照 -->
<script type="text/javascript" src="ライブラリのURL"></script>
</head>
<body></body>
</html>