HTML5-構文

HTML 5言語には、Webで公開されているHTML 4およびXHTML1ドキュメントと互換性のある「カスタム」HTML構文がありますが、HTML4のより難解な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」の値を持つtype属性をスクリプト要素に追加するのが一般的な方法です。

<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、など。

HTML5要素の完全なリストは次のとおりです。

HTML5属性

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

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

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

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

属性は開始タグ内でのみ指定でき、終了タグで使用してはなりません。

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

HTML5属性の完全なリストは次のとおりです。

HTML5ドキュメント

構造を改善するために、次のタグが導入されました-

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

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

<!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.tutorialspoint.com/html">HTML Tutorial</a></li> 
            <li><a href = "https://www.tutorialspoint.com/css">CSS Tutorial</a></li> 
            <li><a href = "https://www.tutorialspoint.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://tutorialspoint.com/">Tutorials Point</a></p> 
      </footer> 
   
   </body> 
</html>

次の結果が得られます-