HTML5は、ウェブ上で最も広く使われているマークアップ言語の最新かつ最高のバージョンです。前バージョンの言語からいくつかの素晴らしい変更があり、もしあなたがそれらを使っていないなら、本当にクールな機能を逃していることになります。

HTMLバージョン5の新要素をすべて網羅することはできませんが、この9つの要素は最も重要な要素の一つです。HTML5の新しい要素やAPIの詳細については、W3 Schoolをぜひご覧ください。

セマンティック要素の紹介

インターネットの多くがそうであるように、HTML5もセマンティクスを重視する方向に進んでいます。現在では、タグは単に書式設定に使われるだけでなく、ブラウザや検索エンジンに周囲の意味を伝えるために使われるようになりました。

例えば、単に「段落が含まれている」と伝えるだけでは、後述するように、「ページの主要な内容が含まれている」とブラウザに伝えることになる。

セマンティックウェブはまだ進化中で、何ができるかの表面を削り始めたに過ぎません。 HTML5は、セマンティックマークアップをインターネットのより大きな部分にもたらすのに役立ち、それはセマンティック処理の未来に恩恵をもたらすだけです。

1

タグは「独立した自己完結型のコンテンツ」を定義しています。もちろん、最もシンプルな例は、記事です。今回は、導入前にタグを開き、導入後にタグを閉じることにします。

<article>
自己完結型のセクションの全テキスト。
</article>。

しかし、他の方法を使うこともできます。例えば、多くの料理ブログでは、レシピがどのように作られたか、なぜそのレシピが作者にとって重要なのか、といった個人的なエピソードが紹介されています。次にレシピそのものです。それぞれの要素が独立しているといってもいいでしょう。

フォーラムでは、それぞれの投稿やスレッドが独立していると考えることができ、それぞれの投稿やスレッドに独自のタグを付けることができます。ほとんどの場合、ページのメインコンテンツに使用されます。しかし、もっとクリエイティブな使い方もあることを、ぜひ覚えておいてください。

2

これは、「通常、タイトルを持つ主題コンテンツのグループ化」を定義していますね。

必ずしもそうではなく、W3はサイトの構造によって異なると指摘しています。ページのさまざまな部分に自己完結型のコンテンツがあるかもしれません（例えば、ニュースサイトのトップページを思い浮かべてください）。そして、その記事の中にセクションがあるかもしれません。

<article>
<section>
<h2>DACが必要な理由</h2>.
<p>すべてにおいて、より良く聞こえます。</p>
</section
<section>
<h2>DACのセットアップ方法</h2>.
<p>ここで必要なのは・・・・・・</p
</section

ページに合わせて、セクションの中にセクションを入れることも可能です。セクションはあくまでも「コンテンツのテーマ別グループ分け」であることを忘れずに、使いどころをたくさん見つけてください。

3つです。

この要素は「導入コンテンツの入れ物として使うべき」、つまり、これから何を読むのかを理解させるための部分です。

しかし、それに騙されないでください。この容器は何度も使うことができます。例えば、ブログ記事のページタイトルや導入段落の目印に使えます。しかし、各セクションのイントロダクション的な内容をマークするのにも使えます。

<article>
<ヘッダー>
<h1>DACのすべてがわかる</h1>。
<p>DACの便利な使い方を紹介します...</p
</header>の
記事の続きはこちら

見出し部分には、通常、H1、H2などの見出しタグが少なくとも1つ含まれます。必ずしもそうである必要はありませんが、一般的に、見出しタグを使用する場合は、見出しの内容を含む可能性が高いです。

4

W3では、フッタータグには通常「文書の著作権、著作権情報、利用規約へのリンク、連絡先情報など」が含まれるとされているので、「家計簿」的なものと考えてもよいでしょう。

<footer>
著作権：MakeUseOf, 2017.
<a href="https://www.makeuseof.com/contact/">お問い合わせ</a
</footer>。

ドキュメントには、1つのページに複数のフッターセクションを設けることができるとも書かれていますが、これらの情報を1つの場所にまとめておくのは良いアイデアかもしれません。

5

このタグは、与えられたページのためのナビゲーションリンクを含む。このタグが付くのはナビゲーションセクションだけで、ページ上のすべてのリンクではないことに注意してください。ナビゲーションバーなどに使用されます。

<nav>
<a href="https://www.makeuseof.com/">ホーム</a
<a href="https://www.makeuseof.com/about">会社概要</a
</nav

ナビゲーション・セクションを定義するために使用し、ページ上では二度と使用しないようにします。

6

HTML5で最も興味深い新要素の1つがナレーターです。W3では、ナレーターを "配置されたコンテンツ以外のもの "と、やや不親切に定義しています。

つまり、サイドバーとは、周囲の情報に関連するもの（ただし、それとは別のもの）です。コンテンツにディテールを追加するサイドバーにもなります。タグのグループで使用される場合、メインのコンテンツを理解するのに必要ない追加情報を提供します。

例えば、この記事の中で、HTML5の歴史に関する情報を提供するサイドバーを設けるとしたら、それはサイドバーとなります。

しかし、このタグは記事の内容以外でも使用することができます。この場合、通常はサイト関連情報に使用されます。サイドバーを入れることができる、など。

<article>
記事本文はこちらへ
<aside>MakeUseOfは、ユーザー間の橋渡しをすることに重点を置いています。
</aside> 教育を通じて、コンピュータ、デバイス、インターネットを活用する。
記事の続きはこちら

このタブは複数の用途があるため、混乱することがあります。あくまで「二次コンテンツ」であり、必ずしもサイドバーが必要なわけではないことを念頭に置いていただければ、使い方のイメージが湧くのではないでしょうか。

7

多くのWebサイトでは、表示すべき情報があるにもかかわらず、それが目立っていません。写真の著作権情報かもしれませんね。あるいは、コンペティションで素敵なプリントをすることかもしれません。このような情報は、まさにディテールタグのためにあるのです。

詳細 "タグを使用すると、簡単に表示できる隠しテキストが作成されます。

情報はこちら。より詳細な情報はこちら、すぐに必要ではありません。

矢印をクリックすると、その詳細を見ることができます。

<details>
<summary>は
情報はこちらからご覧ください。
</summary>。
ここでは、今すぐには必要ない詳細な情報をお伝えします。
</details

タグは表示される文章を定義し、残りのコンテンツは非表示になります。なお、詳細欄には、見出し、sectioni***など、他のタグを使用することができます。

CSSやJSONをあまり知らなくても、HTMLでできるクールなことは他にもあります。

8-9.そして

長年使ってきたタグは消えませんので、ご安心ください。imageタグを繰り返し、それが自己完結した画像、チャート、コードリスト、その他のグラフィックであることをブラウザに知らせます。

ページ内のグラフィックが削除されても、コンテンツの流れに影響はありません。

フィーチャーマーカーで画像にタイトルを付けると、次のようになります。

<figure>
<img src="makeuseoflogo.png" width="800px">.
<figcaption>これは私たちのロゴです！</figcaption>。
</figure>。

これにより、画像にキャプションを追加する方法が組み込まれ、CMSをチェックする必要がなくなります。

html5の力を利用する

HTML5の新要素は、特にセマンティクスの面で多くの機能を追加しています。また、フォーマット、スカラーメトリクス、タスクの進捗状況など、さまざまな要素が追加されています。学校の中にある新しい要素をすべて見ることができます。

しかし、この9つをマスターすれば、HTML5を上手に使いこなすことができるようになります。HTMLを初めて学ぶ方は、ぜひこちらのコード例をご覧ください。

HTML5を使い始めて、どの要素が最も便利だと感じますか？あなたの考えを以下のコメントで共有してください。