[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属性」をつけて文字のエンコーディング(ここでは UTF-8 )を指定しています。

<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ファイル内の「リンクの基準(ベース)」を作りましょう。

関連記事
この記事をはてなブックマークに追加

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

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

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
06 | 2018/07 | 08
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.