HTML5-構文

HTML 5言語には、Webで公開されているHTML 4およびXHTML1ドキュメントと互換性のある「カスタム」HTML構文がありますが、HTML 4のより難解なSGML機能とは互換性がありません。

HTML 5には、小文字のタグ名が必要なXHTMLと同じ構文規則がありません。属性を引用し、属性に値を設定し、空の要素をすべて閉じる必要がありました。

HTML5には多くの柔軟性があり、次の機能をサポートしています-

大文字のタグ名。
属性の引用符はオプションです。
属性値はオプションです。
空の要素を閉じることはオプションです。

DOCTYPE

HTML言語はSGMLベースであり、したがってDTDへの参照が必要だったため、古いバージョンのHTMLのDOCTYPEは長くなりました。

HTML 5の作成者は、次のように単純な構文を使用してDOCTYPEを指定します-

<!DOCTYPE html>

上記の構文は大文字と小文字を区別しません。

文字コード

HTML 5の作成者は、次のように単純な構文を使用して文字エンコードを指定できます-

<meta charset = "UTF-8">

上記の構文は大文字と小文字を区別しません。

<script>タグ

次のように、「text/javascript」の値を持つタイプ属性をスクリプト要素に追加するのが一般的な方法です-

<script type = "text/javascript" src = "scriptfile.js"></script>

HTML 5は必要な余分な情報を削除し、単に次の構文を使用することができます-

<script src = "scriptfile.js"></script>

<link>タグ

これまでは、次のように<link>を書いていました-

<link rel = "stylesheet" type = "text/css" href = "stylefile.css">

HTML 5は必要な追加情報を削除し、次の構文を使用することができます-

<link rel = "stylesheet" href = "stylefile.css">

HTML5要素

HTML5要素は、開始タグと終了タグを使用してマークアップされます。タグは、タグ名を間に挟んで山括弧を使用して区切られます。

開始タグと終了タグの違いは、終了タグではタグ名の前にスラッシュが含まれることです。

以下は、HTML5要素の例です-

<p>...</p>

HTML5タグ名は大文字と小文字が区別されず、すべて大文字または大文字と小文字が混在する場合がありますが、最も一般的な規則は小文字を使用することです。

ほとんどの要素には、<p> … </p>に段落が含まれるなどのコンテンツが含まれています。ただし、一部の要素はコンテンツを一切含むことを禁じられており、これらはvoid要素として知られています。たとえば、 br、hr、link、meta など。

link：/html5/html5_tags [HTML5要素]の完全なリストを次に示します。

HTML5属性

要素には、要素のさまざまなプロパティを設定するために使用される属性が含まれる場合があります。

一部の属性はグローバルに定義され、任意の要素で使用できますが、他の属性は特定の要素に対してのみ定義されます。すべての属性には名前と値があり、以下の例のようになります。

以下は、「example」の値を使用してclassという名前の属性でdiv要素をマークアップする方法を示すHTML5属性の例です-

<div class = "example">...</div>

属性は開始タグ内でのみ指定でき、終了タグでは使用しないでください。

HTML5属性は大文字と小文字を区別せず、すべて大文字または大文字と小文字を混在させて記述できますが、最も一般的な規則は小文字を使用することです。

link：/html5/html5_attributes [HTML5属性]の完全なリストを次に示します。

HTML5ドキュメント

次のタグは、より良い構造のために導入されています-

section -このタグは、一般的なドキュメントまたはアプリケーションセクションを表します。ドキュメント構造を示すためにh1-h6と一緒に使用できます。
article -このタグは、ブログエントリや新聞記事など、ドキュメントのコンテンツの独立した部分を表します。
aside -このタグは、ページの残りの部分にわずかに関連するコンテンツを表します。
header -このタグはセクションのヘッダーを表します。
footer -このタグはセクションのフッターを表し、著者に関する情報、著作権情報などを含めることができます。
nav -このタグは、ナビゲーションを目的としたドキュメントのセクションを表します。
dialog -このタグは、会話をマークアップするために使用できます。
図-このタグは、グラフィックやビデオなどの埋め込みコンテンツにキャプションを関連付けるために使用できます。

HTML 5ドキュメントのマークアップは次のようになります-

<!DOCTYPE html>

<html>
   <head>
      <meta charset = "utf-8">
      <title>...</title>
   </head>

   <body>
      <header>...</header>
      <nav>...</nav>

      <article>
         <section>
            ...
         </section>
      </article>
      <aside>...</aside>

      <footer>...</footer>
   </body>
</html>

<!DOCTYPE html>

<html>
   <head>
      <meta charset = "utf-8">
      <title>...</title>
   </head>

   <body>
      <header role = "banner">
         <h1>HTML5 Document Structure Example</h1>
         <p>This page should be tried in safari, chrome or Mozila.</p>
      </header>

      <nav>
         <ul>
            <li><a href = "https://www.finddevguides.com/html">HTML Tutorial</a></li>
            <li><a href = "https://www.finddevguides.com/css">CSS Tutorial</a></li>
            <li><a href = "https://www.finddevguides.com/javascript">
            JavaScript Tutorial</a></li>
         </ul>
      </nav>

      <article>
         <section>
            <p>Once article can have multiple sections</p>
         </section>
      </article>

      <aside>
         <p>This is  aside part of the web page</p>
      </aside>

      <footer>
         <p>Created by <a href = "https://finddevguides.com/">Tutorials Point</a></p>
      </footer>

   </body>
</html>

それは次の結果を生成します-

Html5-syntax