ほんっとにはじめてのHTML5とCSS3：[40] メタデータ・コンテンツって何？

[40] メタデータ・コンテンツって何？

最終更新日：2017年11月12日　（初回投稿日：2012年03月13日）

メタデータ・コンテンツ は、HTML文書の情報を指定する要素群です。
<title> <base> <link> <style> <meta> <script> <noscript> <template>があります。

メタデータ・コンテンツは、たいてい <head>内に書き（<body>の中に書く要素もあり）ます。
これらは HTML文書全体の動作や機能、スタイルなどを指定するもので、ブラウザで直接コンテンツが表示されるモノではありません。

これらをきちんと書かないと、
「外部CSSのリンク切れで見た目が変」「Javascriptが動作しない」「検索しても出てこない」など、根本的な悩み（？笑）の原因になってしまいます。

[37] HTML5要素の「カテゴリー」を見てみよう の、図に「メタデータ・コンテンツ」がありましたね。

これまでに2回ほどメタデータ・コンテンツを使ってます

このブログの初期の段階で、メタデータ・コンテンツの <title>要素をすでに紹介しています。
→ [2] タイトル（title要素）を設定しよう　
<title>とはサイトのタイトル。SEO的に重要です。

そしてそのすぐ次の回に、<meta>要素を少しだけ紹介ています。
→ [3] !DOCTYPE宣言をしようの後半で、下記のような指定をしました。

<head>
<meta charset="UTF-8">
</head>

<meta charset=" ">と<title>が最低限必要 なメタデータ・コンテンツなので、当時はこれだけ紹介しました。
ほかにも重要な要素があります。まずは下記の一覧をご覧ください。

メタデータ・コンテンツの一覧

各メタデータ・コンテンツ要素の役割をざっと一覧にしました。

<title>	HTML文書のタイトルを示す要素。 SEO (Search Engine Optimization)的に重要。<h1>より上位。ブラウザのブックマークやヒストリーにも表示される。1HTMLに1個だけ。 [2] タイトル<title>を設定しよう
<base>	そのHTMLファイルの相対URLのベースとなる絶対URLを指定。 [41] base でベースの URL を示そう
<link>	外部ファイル（css, pdf, html）を読み込ませる。 [42-1] link で外部CSSファイルの読み込み、グループ化をしよう [42-2] link media=" " で外部CSSをメディア別に切り替えよう（ちょっとメモ）link よりスマートな CSSの @import と @media [42-3] link rel="alternate" で他言語サイトやモバイル版へ導こう [42-4] link で「ショートカットアイコン」を付けよう
<style>	CSSを直接HTMLに書く。 [43] style で CSS を HTML内に書いてみよう
<script>	外部スクリプト（主に Javascript）を読み込ませる。 [44] scriptでスクリプトを読み込む or HTMLに直接書く
<noscript>	ブラウザが<script>をOFFにしているとき、代替コンテンツを表示する。 [44] scriptでスクリプトを読み込む or HTMLに直接書く
<meta>	上記の要素で指定できないものを担当。 [45-1] metaで基本情報を指定しよう [45-2] <meta charset=" ">の設定で文字コードを指定しよう [45-3] <meta name=" " content=" ">でサイトの情報を書こう [45-4] <meta http-equiv=" " content=" ">で動作を指示しよう
<template>	テンプレートとなる部分を指定する。 <template>要素内のコンテンツは、読み込み時にはレンダリングされず、後で JavaScript での操作で本文へ挿入・レンダリングさせられます。

● 2017年11月：HTML5.1 から仕様に追加された template要素を追加記載しました。

次回予告

というわけで今回はインデックスだけ。
次回から「メタデータ・コンテンツ」の要素を順に見て行きます。
次回はまず、<base>要素で、HTMLファイル内の「リンクの基準（ベース）」を作りましょう。

関連記事

やる気を保つためにランキングに参加しています。
応援してくださるとすっごいやる気を出します！ (笑)

初心者にも使いやすい（と思う）レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーや ロリポップ！です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。