nav要素[HTML5]

<nav>…… ナビゲーションであることを示す

<nav>は、ナビゲーションであることを示す際に使用します。ナビゲーションとは、ウェブサイト内の他のページへのリンクや、ページ内リンクなどのことです。他のページにリンクした箇所のすべてを<nav>~</nav>で囲む必要はなく、主要なナビゲーションとなるセクションのみを示すのに適しています。

よく、ウェブページの下部に、利用規約ページ、著作権ページ、トップページへ戻る、などのリンクが配置されることがありますが、このような場合には<nav>を使用せず、<footer>のみで十分です。

■HTML4.01からHTML5へのバージョンアップによる変更点

nav要素は、HTML5から新たに追加された要素です。

■HTML5での使用例

[html]
<body>
<header>
<h1>ホームページ作成ならアドワークス</h1>
<p>
<a href="news.html">お知らせ</a>
<a href="blog.html">ブログ</a>
</p>

<nav>
<h1>メニュー</h1>
<ul>
<li><a href="index.html">トップページ</a></li>
<li><a href="service.html">サービス一覧</a></li>
<li><a href="shop.html">店舗紹介</a></li>
</ul>
</nav>

</header>
</body>
[/html]

カテゴリー: HTML5, HTMLの基礎知識, ナレッジノート |

section要素[HTML5]

<section>…… 一つのセクションであることを示す

<section>タグは、ウェブページ内のその部分が、一つのセクションであることを示す際に使用します。セクションとは、文書やアプリケーションの一部分となる、意味や機能のひとまとまりのことです。ウェブページ内のセクションとしては、例えば、導入部分、新着情報、連絡先などが考えられます。

<section>タグは汎用セクションを表しますが、その定義が漠然としていて使いどころが分かりにくいものの一つです。<article>、<aside>、<nav>もセクション要素ですが、それぞれ記事、補足情報、ナビゲーションという、より具体的な意味を持っています。それに対して<section>は一般的なセクションを表します。

<section>は一般的なセクションを定義するタグであるため、要素内容を記事として配信する意味合いが強い場合には、<article>を使用することが推奨されています。

補足情報の場合には<aside>、ナビゲーションの場合には<nav>を使用します。他にも、ヘッダに該当する場合には<header>、フッタの場合には<footer>、などのタグを使用するほうが、ウェブページの文書構造がより明確になるでしょう。

セクションは意味的なひとまとまりなので、その部分の意味を表す見出しを付けることができるはずです。見出しを付けることができない場合には、その部分を<section>~</section>で囲むのは適切ではないかもしれません。もし、<section>タグを使用するべきかどうか迷った際には、その部分に見出しを付けることができるかを考えてみると、セクションとしてふさわしいかどうか判断しやすくなるでしょう。

セクションの見出しは必須ではありませんが、付けるとすれば<section>~</section>の外ではなく中に入れます。また、サンプルでは見出しに<h1>タグを使用していますが、見出しレベルに応じて<h1>から<h6>タグのいずれかを使用することができます。

■HTML5での使用例

[html]
<section>
<h1>セクションの見出し</h1>
セクションの内容
</section>
[/html]

また、セクションは意味や機能のまとまりであるため、<section>をレイアウト目的の単なるコンテナとして用いるべきではありません。 そうした目的には<div>の使用が推奨されています。

<section>タグを使用する際のポイント

  • レイアウト目的のコンテナ要素として用いるなら、<section>ではなく、<div>を使用してください。
  • その部分の意味を表す見出しを付けることができない場合には、<section>~</section>で囲むのは適切ではないかもしれません。
  • 上記二点をクリアしてセクションであることが明確な場合にも、より具体的な意味を持つ<article>、<aside>、<nav>のほうがふさわしい場合には、これらのタグを使用します。

参考:http://www.htmq.com/html5/section.shtml

カテゴリー: HTML5, HTMLの基礎知識, ナレッジノート |

body要素[HTML5]

<body>…… 文書の本体を表す

<body>タグは、文書の本体を表す際に使用します。文書の本体とはブラウザ上に表示されるメインコンテンツのことです。
HTML文書では、<body>要素は<html>~</html>の中に一つだけ配置します。<body>~</body>の中には見出し・段落・表・フォームなどの要素を配置します。

■HTML4.01からHTML5へのバージョンアップによる変更点

HTML4.01ではbody要素には、背景画像を指定するbackground属性や文字色を指定するtext属性・link属性・vlink属性・alink属性が非推奨とされながらも存在していましたが、 HTML5ではこれらスタイルを指定するための属性は廃止されています

■HTML5での使用例

[html]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ホームページ作成ならアドワークス</title>
</head>
<body>
<p>HTML5で作成可能です。</p>
</body>
</html>
[/html]

カテゴリー: HTML5, HTMLの基礎知識, ナレッジノート |

noscript要素[HTML5]

<noscript>…… スクリプトが動作しない環境用の表示内容を指定する

<noscript>タグは、スクリプトが動作しない環境用の表示内容を指定する際に使用します。ユーザーによっては、JavaScriptなどのスクリプトを無効にしていたり、スクリプトをサポートしていないユーザーエージェントを使用している場合があります。こうしたスクリプトが無効な環境ではnoscript要素の内容が表示されます。スクリプトが有効な環境ではnoscript要素の内容は何も表示されません。

尚、XML文書では、noscript要素を使用することはできません。noscript要素は、XHTML構文の中で使用しても有効とはなりません。HTML構文の中でのみ有効となります。

■HTML4.01からHTML5へのバージョンアップによる変更点

HTML4.01ではnoscript要素をhead要素内に配置することは仕様として認められていませんでしたが、HTML5ではhead要素内に配置してもよいことになっています。また、HTML5ではnoscript要素がhead要素内にある場合には、noscript要素の中にlink要素、style要素meta要素を配置してもよいことになっています。

■HTML5での使用例

[html]<script>
today = new Date();
document.write(today);
</script>
<noscript>
<p>このページではJavaScriptを使用しています。</p>
</noscript>[/html]

カテゴリー: HTML5, HTMLの基礎知識, ナレッジノート |

script要素[HTML5]

<script>…… 文書にJavaScriptなどのスクリプトを組み込む

<script>タグは、文書にJavaScriptなどのスクリプトや、データブロックを組み込む際に使用します。<script>タグは、<head>~</head>の中に配置することが多いですが、<body>~</body>の中に配置しても問題ありません。

type属性には、スクリプト言語やデータ形式を指定します。利用するスクリプトがJavaScriptの場合にはtype=”text/javascript”となりますが、type属性の初期値はtype=”text/javascript”なので、JavaScriptの場合にはtype属性の指定を省略することができます。スクリプト言語のタイプがtype=”text/javascript”以外となる場合にはtype属性は必須です。

HTML文書でJavaScriptなどのスクリプトを利用する際には、HTML文書の<script>~</script>の中にスクリプトを記述するか、src属性で外部スクリプトファイルのURIを指定します。src属性でJavaScriptの外部jsファイルを読み込む場合には、例えば以下のように記述します。

[html]
<script src="sample.js"></script>
[/html]

charset属性は、外部スクリプトファイルの文字エンコーディングを指定する際に使用します。スクリプトをHTML文書の<script>~</script>の中に直接記述する場合には、charset属性を使用することはできません。

async属性とdefer属性は、スクリプトをどのように実行するかを指定する属性です。async属性は利用可能な時点でスクリプトを実行するよう指定する際に使用します。また、defer属性はHTML文書の読み込みが完了した時点でスクリプトを実行するよう指定する際に使用します。

script要素の内容はブラウザ上には表示されないことになっていますが、<script>~</script>の中にスクリプトを記述する場合、その内容を<!–と–>でコメントアウトしておくのが一般的です。これは、<script>タグに対応していない旧式のブラウザで、スクリプトの記述がそのままテキストとして表示されてしまうのを防ぐためですが、現在、<script>タグは主要なブラウザでサポートされているので、コメントアウトしなくても問題が起きることはほとんどないでしょう。

■HTML4.01からHTML5へのバージョンアップによる変更点

HTML4.01では<script>タグにはtype属性が必須でしたが、HTML5ではtype属性の初期値はtype=”text/javascript”とされており、スクリプト言語のタイプがtype=”text/javascript”となる場合には、type属性を省略してもよいことになっています。

■使用できる属性

  • src属性 …… 外部スクリプトファイルのURLを指定
  • async属性 …… 利用可能な時点でスクリプトを実行
  • defer属性 …… HTML文書を読み込んだ時点でスクリプトを実行
  • type属性 …… スクリプトのMIMEタイプを指定(初期値は”text/javascript”)
  • charset属性 …… 外部スクリプトファイルの文字エンコーディングを指定
カテゴリー: HTML5, HTMLの基礎知識, ナレッジノート |

style要素[HTML5]

<style>…… スタイルシートを記述する

<style>タグは、スタイルシートを記述する際に使用します。通常は<head>~</head>の中に配置しますが、head要素内に記述することで文書単位でスタイルを指定することができます。style要素のtype属性は、スタイリング言語(スタイルシートのMIMEタイプ)を指定します。例えば、CSSの場合にはtype=”text/css”となります。type属性は必須属性ではなく、指定しない場合にはtype=”text/css”がデフォルトで適用されます。

style要素のmedia属性は、どのメディアにどのスタイルを適用するかを指定します。media属性でメディアの種類を指定することで、例えば、パソコンのスクリーンで表示される場合のスタイル、プリンタで印刷される場合のスタイル、読み上げブラウザで再生される場合のスタイルなどを指定し分けることができます。W3Cの仕様で規定されているmedia属性の値は以下の通りです。

  • all …… すべてのメディア(初期値)
  • screen …… 一般的なディスプレイ
  • print …… 通常のプリンタ
  • projection …… プロジェクタ
  • tv …… テレビ
  • handheld …… ハンドヘルドデバイス
  • tty …… 固定文字サイズの端末
  • embossed …… 点字プリンタ
  • braille …… 点字の触角デバイス
  • speech …… 読み上げブラウザ

<style>~</style>の中にスタイルシートを記述する場合、その内容を<!–と–>でコメントアウトしておくのが一般的です。これは、<style>タグに対応していない旧式のブラウザで、スタイルシートの記述がそのままテキストとして表示されてしまうのを防ぐためですが、現在、<style>タグは主要なブラウザでサポートされているので、コメントアウトしなくても問題が起きることはほとんどないでしょう。

■HTML4.01からHTML5へのバージョンアップによる変更点

HTML5ではstyle要素にscoped属性が追加されています。scoped属性を指定すると文書全体ではなく、style要素の親要素、および、その子孫要素に対してのみスタイルが適用されます。

カテゴリー: HTML5, HTMLの基礎知識, ナレッジノート |

meta要素[HTML5]

<meta>…… その文書に関する情報(メタデータ)を指定する

<meta>タグは、その文書に関する情報(メタデータ)を指定する際に使用します。メタデータとは、“情報に関する情報”のことですが、HTMLの仕様では“その文書に関する様々な情報”を意味します。

HTML文書のメタデータは<head>~</head>の中に、<title>(タイトル)・<base>(基準URL)・<link>(リンク情報)・<style>(スタイルシート)・<script>(スクリプト)などのタグで指定しますが、これらのタグで表現できないその他の様々なメタデータは<meta>で表します。

<meta>タグは<head>~</head>の中に配置します。meta要素を指定する際には、name属性、http-equiv属性、charset属性のうち、少なくとも一つを指定する必要があります。また、name属性、http-equiv属性を指定する際には、必ずcontent属性とセットで利用します。セットで利用することでメタデータの定義(名前)とその内容が関連付けられます。

メタデータには様々なものがありますが、以下に使用頻度の高いメタデータの指定方法を紹介します。

charset属性で文字エンコーディングを指定

charset属性は、文書の文字エンコーディングを指定する際に使用します。 日本語の文字エンコーディングの値としては、”utf-8″・”shift_jis”・”euc-jp”などが挙げられます。大文字と小文字の違いは区別されません。 charset属性を指定したmeta要素は、一つの文書に一つだけしか配置できません。 尚、XML文書にmeta要素のcharset属性を指定する場合には、値には”utf-8″を指定します。

meta要素で文字エンコーディングを指定する場合、HTML 4では以下のように記述していました。
[html]<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">[/html]

HTML5でも上の記述方法のままで問題ありませんが、charset属性を使用すれば以下のように短くすることができます。
[html]<meta charset="UTF-8">[/html]

文字エンコーディングを指定しないと、例えば、日本語で作成されたウェブページに英語版のブラウザでアクセスした場合などに文字化けが起きることがあります。 必須ではありませんが、できるだけ指定したほうが良いでしょう。

name属性でメタデータ名を定義、content属性でその内容を指定

検索エンジン向けのキーワード・説明・インデックスの指定
name=”keywords”は、そのHTML文書がどのような内容を示したものかキーワードで指定します。 複数のキーワードを指定する場合には、半角カンマ(,)区切りで指定します。

[html]<meta name="keywords" content="アドワークス,ホームページ作成">[/html]

name=”description”は、その文書の説明を短文で指定します。 ここで指定する値は、Googleの検索結果に表示されるなど、多くの検索エンジンで利用されるので慎重に言葉を選んでください。
[html]<meta name="description" content="アドワークスでは無料見積もり実施中!!">[/html]

また、name=”robots” content=”noindex,nofollow”は、検索エンジンのクローラ(ロボット)に対して URLをインデックスしないように(noindex)、 文書内のリンクをたどらないように(nofollow)知らせるための指定です。 この指定はすべての検索エンジンに対して有効ではなく、 この情報を参照する検索エンジンに対してのみ有効となる指定なので注意してください。 検索エンジン対策として一般的に利用されていますが、W3Cの仕様には記載されていません。
[html]<meta name="robots" content="noindex,nofollow">[/html]

文書の作者・著作権情報の指定
name=”author”は、その文書の作者を示す際に指定します。 また、name=”copyright”は、著作権に関する情報を指定します。
[html]<meta name="author" content="adworks">
<meta name="copyright" content="Copyright adworks">[/html]

文書作成に使用したツールやソフトウェアの指定
name=”generator”は、文書作成に使用したツールやソフトウェアを示すものです。 これは、ツールやソフトウェアを使用してウェブページが自動生成された際に、 そのツール自身がウェブページを出力する際にhead要素内に挿入するものです。 手作りしたウェブページに使用するものではないので注意してください。
[html]<meta name="generator" content="Dreamweaver 11.0">[/html]

http-equiv属性を指定すると、meta要素がプラグマ指示子となる

meta要素にhttp-equiv属性を指定すると、そのmeta要素はプラグマ指示子(pragma directive)となります。 プラグマ指示子とは“実行命令を指示するもの”のことで、ユーザーエージェント(ブラウザ)に対して文書の“状態・挙動”を指示する役割があります。 http-equiv属性の値には、以下の4つのキーワードを指定することができます。

  • content-language …… コンテンツ言語の指定
  • content-type …… ファイルタイプや文字エンコーディングの指定
  • default-style …… デフォルトスタイルの指定
  • refresh …… リダイレクト・再読み込みの指定

コンテンツ言語の指定
http-equiv=”content-language”は、文書の主言語を指定します。 言語はcontent属性で指定します。例えば、日本語ならcontent=”ja”、英語ならcontent=”en”となります。 その他の主な言語には、 zh(中国語)、ko(韓国語)、de(ドイツ語)、fr(フランス語)、it(イタリア語)、es(スペイン語)、ru(ロシア語)、ar(アラビア語) などがあります。
[html]<meta http-equiv="content-language" content="ja">[/html]

ファイルタイプや文字エンコーディングを指定をする
http-equiv=”content-type”は、ファイルタイプや文字エンコーディングを指定します。 ファイルタイプを指定する場合には、例えばHTML文書ならcontent=”text/html”と指定します。 また、文字エンコーディングを指定すれば、charset属性の代わりとして機能します。
[html]<meta http-equiv="content-type" content="text/html" charset="UTF-8">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">[/html]

デフォルトスタイルの指定
http-equiv=”default-style”は、デフォルトスタイルを指定します。 具体的には、例えば、content=”default.css”のように記述して、デフォルトスタイルとなるCSSファイルのURIを指定します。 この指定をすると、link要素で複数のCSSファイルを指定している場合に、 その中で優先して利用するCSSファイルをブラウザに伝えることができます。
[html]<meta http-equiv="default-style" content="default.css">[/html]

リダイレクト・再読み込みの指定
http-equiv=”refresh”は、別のURLへのリダイレクトや現在ページの再読み込みを指定します。 content属性には何秒後にリフレッシュするかを、 url属性にはジャンプする先のURLを指定します。 例えば、5秒後にnewpage.htmlというページにリダイレクトする場合には以下のように記述します。
[html]<meta http-equiv="refresh" content="5" url="newpage.html">[/html]

■HTML4.01からHTML5へのバージョンアップによる変更点

HTML5では、name属性の値として”application-name”が追加されています。 name=”application-name”は、ウェブアプリケーションの名前を示すものです。 これはウェブアプリケーションを作成する場合に利用する値であり、 ページがウェブアプリケーションでない場合には使用してはいけません。 また、使用する場合には一つの文書に一つだけ指定します。
[html]<meta name="application-name" content="Gmail">[/html]

参考:http://www.htmq.com/html5/meta.shtml

カテゴリー: HTML5, HTMLの基礎知識, ナレッジノート |

link要素[HTML5]

<link>…… リンクする外部リソースを指定する

<link>タグは、リンクする外部リソースを指定する際に使用します。外部リソースとは、例えば、HTMLファイル、CSSファイル、RSSファイルなど、現在の文書ファイルに関連している外部ファイルのことです。<link>タグは、<head>~</head>の中に記述します。

<link>タグを指定する場合には、href属性とref属性が必須です。href属性とref属性が指定されていない場合には、<link>タグの指定は無効となります。href属性には、リンクする外部ファイルのURLを指定します。

rel属性にはリンクタイプを指定します。具体的には、現在のファイルとリンク先の外部ファイルとの関係性を表すキーワードを指定します。リンクタイプには以下の値などがあります。以下の値のうち、よく使用されているのはstylesheetやalternateなどです。現在のところ、それ以外の値は実際にはあまり使用されておらず、Opera以外の一般的なブラウザではサポートされていません。

  • alternate ……代替文書
  • archives ……参考出典・関連書籍
  • author ……作者
  • first ……最初の文書
  • help ……ヘルプ
  • icon ……アイコン
  • index ……索引
  • last ……最後の文書
  • license ……著作権
  • next ……次の文書
  • pingback ……pingbackサーバのアドレス
  • prefetch ……先読みする文書
  • prev ……前の文書
  • search ……検索
  • stylesheet ……スタイルシート
  • sidebar ……ブラウザのサイドバー
  • tag ……文書に適用されるタグ
  • up ……上の階層へのリンク

link要素には、href属性とref属性以外の属性として、title属性(外部リソースのタイトル)、hreflang属性(外部リソースの言語)、media属性(外部リソースの対象メディア)、が用意されています。HTML文書以外の外部ファイルを指定する際には、type属性やmedia属性を指定します。

<link>タグは一つの文書内に複数記述することができます。例えば、rel=”stylesheet”を指定された複数の<link>タグで、複数の外部CSSファイルを指定することも可能です。この場合、リンクしている複数の外部CSSファイルのスタイル指定がすべて有効となります。スタイル指定が競合した場合には、より後から読み込まれたCSSファイルのスタイル指定が優先されます。

■HTML4.01からHTML5へのバージョンアップによる変更点

link要素は、HTML4.01からHTML5へのバージョンアップで大きな変更はありません。

■html5での使用例

[html]
<!DOCTYPE html>
<html>
<head>
<title>link要素の使用例</title>
<link rel="stylesheet" href="default.css">
<link rel="stylesheet" href="green.css" title="Green styles">
<link rel="alternate stylesheet" href="contrast.css" title="High contrast">
<link rel="alternate stylesheet" href="big.css" title="Big fonts">
<link rel="alternate stylesheet" href="wide.css" title="Wide screen">
</head>
<body>
<p>link要素の使用例です。</p>
</body>
</html>
[/html]

カテゴリー: HTML5, HTMLの基礎知識, ナレッジノート |

base要素[HTML5]

<base>…… 相対パスの基準URIを指定する

<base>タグは、相対パスの基準URIを指定する際に使用します。<base>タグを使用する場合には、一つの文書に一つだけ<head>~</head>の中に配置します。一つの文書内で複数の<base>を指定することはできません。

<base>タグを使用する場合には、href属性とtarget属性のどちらか、または、両方を指定する必要があります。href属性には基準URIを、target属性にはリンク先ターゲットを指定します。

base要素にhref属性を指定する場合、他の要素でURLが指定されているものより前に記述する必要があります。ただし、HTML要素は除きます。html要素のmanifest属性で指定するURIは、base要素で基準URIをした場合にもその影響を受けません。

■HTML4.01からHTML5へのバージョンアップによる変更点

base要素は、HTML4.01からHTML5へのバージョンアップで大きな変更はありません。

■html5での使用例

[html]
<!DOCTYPE html>
<html>
<head>
<title>HTML5のbase要素</title>
<base href="http://www.adworks24.co.jp/">
</head>
<body>
<p>ここに文章が入ります。</p>
</body>
</html>[/html]

参考:http://www.htmq.com/html5/base.shtml

カテゴリー: HTML5, HTMLの基礎知識, ナレッジノート |

title要素[HTML5]

<title>…… 文書にタイトルをつける

<title>タグは、文書にタイトルをつける際に使用します。<title>タグで文書のタイトルを指定する場合には、一つの文書に一つだけ、<head>~</head>の中に配置します。一つの文書内で複数の<title>を指定することはできません。

<title>~</title>に指定する文書のタイトルは、検索エンジンの検索結果画面やユーザーの利用するブラウザのブックマーク欄などに表示されるので、文書の内容を表すものを指定する必要があります。

また、title要素はSEO対策としても大変重要な意味を持ちます。検索結果で上位表示させたいキーワードがある場合には、<title>~</title>の中に自然な形でキーワードを配置しておくべきでしょう。

文書のタイトルは、<h1>タグなどで指定する文書の最初の見出しと同じである必要はありません。 文書の最初の見出しは、文書の流れの中で理解されるためです。以下のサンプルでは、タイトルで「告発サイトによる政府や企業への影響」に関する文書であることを示しています。最初の見出し「影響の拡大」は、読者がこの文書が何に関するものであるかを知っていることを前提として付けています。

■HTML4.01からHTML5へのバージョンアップによる変更点

HTML5では、title要素は必須要素ではありません。ほとんどの場合、title要素はhead要素の子要素として必須ですが、より高いレベルのプロトコルでタイトル情報が提供される場合には、title要素を省略することができます。例えば、HTMLが電子メール編集フォーマットとして使用される場合には、電子メールの件名がタイトル情報を提供します。

■html5での使用例

[html]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>html5文書のサンプル</title>
</head>
<body>
<h1>キーワードを含めた見出し</h1>
<p>ここには文章が入ります。</p>
</body>
</html>
[/html]

参考:http://www.htmq.com/html5/title.shtml

カテゴリー: HTML5, HTMLの基礎知識, ナレッジノート |