【HTML】汎用HTML5基本テンプレート（翻訳）_html/css

原文。

HTML5 を学習し、新しいテクノロジーをスキルのリストに追加すると、簡単な HTML5 プロジェクトを開始するために使用できる独自のテンプレートを作成したくなる場合があります。これをお勧めします。HTML5 開発用にオンラインで入手可能なテンプレートリソースの 1 つを使用することを検討してください。

ただし、このプロジェクトでは、独自のコードを構築し、各部分を説明するというゼロからのスタートとなります。もちろん、さまざまなプロジェクトにすべての新しい要素やテクノロジーを組み込むことはできません。そのため、プロジェクトと一致しないいくつかの新機能についても説明する必要があります。このようにして、HTML5 および CSS3 の Web サイトと Web アプリケーションを構築する方法を決定するための幅広いオプションに慣れることができるため、この記事をクイックリファレンス技術書として使用できます。

簡単に始めましょう。これが簡単な HTML5 ページです:

<!doctypehtml> <htmllang="en"><head>  <metacharset="utf-8">   <title>TheHTML5Herald</title>  <metaname="description" content="The HTML5 Herald">  <metaname="author" content="SitePoint">   <linkrel="stylesheet" href="css/styles.css?v=1.0">   <!--[if lt IE 9]>    <scriptsrc="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>  <![endif]--></head> <body>  <scriptsrc="js/scripts.js"></script></body></html>

ログイン後にコピー

この基本的なテンプレートを手に入れて、マークアップの重要なコンポーネントのいくつかと、それらが HTML5 以前の言語の違いにどのように関連しているかを見てみましょう。

Doctype

まず、ドキュメントタイプ宣言、つまりドキュメントタイプがあります。これは、ブラウザ (または他のパーサー) に、どの種類のファイルを見ているのかを伝える簡単な方法です。 HTML ファイルの場合、これは HTML の特定のバージョンとスタイルを意味します。ドキュメントタイプは常に HTML ファイルの最初の項目として、ファイルの先頭に配置する必要があります。何年も前、文書型宣言は醜く、覚えにくく、混乱を招くものでした。たとえば、XHTML 1.0 では Strict:

<!DOCTYPEhtmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

ログイン後にコピー

HTML5 ではこれらの判読できない文字列が廃止され、必要なのはこれだけです:

<!DOCTYPEhtmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

ログイン後にコピー

シンプルかつ要点を絞ったものです。この文書タイプには、大文字、小文字、またはその混合を使用できます。このステートメントには数字「5」が欠落していることがわかります。現在の Web のバージョンは「HTML5」と呼ばれていますが、これは以前の HTML 標準の進化にすぎず、将来的には仕様も今日と同様に進化するでしょう。

通常、ブラウザは Web サイト上のすべてのコンテンツをサポートする必要があるため、特定のドキュメントのドキュメントタイプについて、どの機能をサポートする必要があるかをブラウザに伝える情報は提供されません。言い換えれば、ドキュメントタイプ自体は、ページが HTML5 に準拠する必要があることを示しているわけではありません。ブラウザによって異なります。実際、これら 2 つの古い doctype 宣言を使用してページ内で HTML5 要素を使用すると、ページは新しい doctype 宣言を使用した場合と同じように表示されます。

HTML 要素

HTML ドキュメントの次は html 要素です。これは HTML5 で大きく変更されていません。この例では、ドキュメント言語が英語であることを指定するために、lang 属性と en 属性値を含めています。 XHTML の基本構文では、xmlns 属性を含める必要があります。 XML5 では、これは必要なくなり、ドキュメントの検証や実行に lang 属性さえも必要なくなりました。

これは、終了タグ ` を含むこれまでのテンプレートです:

<!doctypehtml>

ログイン後にコピー

Head 要素

次のセクションは、ページのセクションです。 head の要素の最初の行は、ドキュメントの文字エンコーディングを定義するために使用されます。これは、XHTML および HTML4 以降のもう 1 つの簡素化された要素であり、オプションの機能ですが、推奨されます。以前は、次のように記述したかもしれません:

<!doctypehtml><htmllang="en"> </html>

ログイン後にコピー

HTML5 では、タグを使用して文字エンコーディング宣言の長さを最小限に抑えることができます:

<metahttp-equiv="Content-Type" content="text/html; charset=utf-8">

ログイン後にコピー

ほとんどの場合、utf- が使用されます。使用するドキュメント値として。文字エンコーディングの詳細な分析はこのテキストの範囲を超えているため、興味がないかもしれません。さらに詳しく知りたい場合は、W3C または WHATWG でこのトピックについて読むことができます。

注: エンコーディング宣言

すべてのブラウザが文字エンコーディングタイプを正しく読み取ることができるようにするには、完全な文字エンコーディング宣言全体を 512 個の基本文字を使用してドキュメント内のどこかに記述する必要があります。また、コンテンツの基本要素 (この例の title 要素など) の前にも表示する必要があります。

このトピックについてもっと詳しく書くこともできますが、眠らずに起きていてほしいと思います。したがって、いくつかの詳細は省略しました。現在のところ。私たちのコンテンツはこの単純なステートメントを受け入れ、ドキュメントの残りの部分を続けます:

<metacharset="utf-8">

ログイン後にコピー

上記の行では、HTML5 と以前の構文の間にほとんど違いはありません。ページタイトル (head セクションの唯一の必須要素) は前と同様に宣言されており、この例のメタタグは、配置方法を示すためのオプションにすぎません。メタ要素は好きなだけ入力できます。

这一部分关键的标记是样式表，用 link元素来表示。对于 link元素只有 href和 rel属性是必需的。而 type属性（在以前的 HTML 中很常见）不仅不再是必须的，而且也不再需要用来表示样式表的内容类型。

Leveling the Playing Field

接下来我们要介绍的元素需要先了解一些背景信息。HTML5 包含许多新的元素，比如 article和 section，将会在以后介绍到。你可能会想这对于旧的浏览器来说可能会造成无法识别元素的问题，但你错了。这是因为大多数的浏览器并不在意你用什么标签。如果你有一个 HTML 文档使用了 recipe标签（甚至 ziggy标签），且你的 CSS 中的某些样式和这个标签相关联了，但是几乎每一个浏览器都会把这当成正常的样式，并且会严格遵守你的样式。

当然，这样一个假设的文档可能会造成无法验证并造成可访问性的问题，但在几乎所有的浏览器中它都能正确呈现，唯一的例外是旧版本的 IE 浏览器。在版本 9 之前，IE 会阻止样式表中的未识别元素。这些神秘的元素会被渲染为“未知元素”，所以你无法改变它们的表现或行为。这不仅包括了我们假想的元素，也包含了开发那个版本浏览器之前未被定义的元素。这意味着 HTML5 中的新元素也无法被识别。

好消息是，在写这篇文章的时候，大多数人已经使用了 IE9 或以上的版本，其中很少人是 IE9，所以对于绝大数开发者来说这不再是问题；但是，如果你的访问者仍然使用 IE8 或之前的版本，你必须采取行动确保你的设计不会崩溃。

幸运的是有一个解决方案：一个由 John Resig 开发的 JavaScript 模板。灵感来自于 Sjoerd Visscher 提出的一个想法，这个模板可以使 HTML5 中的元素兼容旧版本的 IE。

在我们的文档中已经使用 script标签把这个“HTML5 shiv”模板引入，并把 script标签放入了条件语句中。实现条件是只有在 IE9 或之前的浏览器版本才会触发。这些语句提供浏览器访问特定的样式或脚本的能力。接下来的条件语句告诉浏览器必和标签仅仅只有在用户使用 IE9 之前的浏览器访问时才会显示。

<!--[if lt IE 9]><scriptsrc="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

ログイン後にコピー

应该注意的是如果你使用的 JavaScript 库是用 HTML5 新特性或者新 Apis 的话，可能会提示已经存在 HTML5 脚本；这种情况下，你可以移除你脚本的引用。一个例子是 Modernizr，一个 JavaScript 库使用了最新的 HTML 和 CSS 特性。Modernizr 已经提供给你是否允许在 IE 旧版本中使用 HTML5 元素的选项，所以 shiv 会是多余的。我们可以在 Modernizr 的附录 A 中查看。

注意：不是每个人都可以从”HTML5 Shiv“中获益。

当然，还有许多用户无法从“HTML5 Shiv”中获益：那些出于某些原因禁用 JavaScript 并且使用 IE8 或之前版本的用户。作为一个网页开发者，我们应该做到网站中的全部内容应该可以被用户完全访问，甚至在没有 JavaScript 的情况下。但情况可能没有那么糟糕。许多调查表明，那些禁用 JavaScript 的用户数量比例十分低，特别是在那些使用 IE8 或之前版本的用户群体中。

在一份 2013 年 10 月份发表的一份调查中，英国国家数据服务发现那些禁用 JavaScript 或者无法使用的用户比例不到 1.1%。而在另外一份雅虎开发者网络的调查显示（发表于 2010 年 10 月），全球用户中禁用 JavaScript 的比例在大约接近 1%。