HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML5セマンティクス

HTML5セマンティクスは、HTMLページに意味を提供するセマンティックタグを指します。 HTML5では、タグはセマンティックと非セマンティックの2つのカテゴリに分類されます。 HTML5は、HTMLにいくつかの新しいセマンティックタグをもたらします。

一部のHTML5セマンティックタグは-

です
タグ 説明
図 さまざまな形式の画像を指定します。
記事 独立した自己完結型の記事を指定します。
nav ナビゲーションリンクのコンテナを指定します。
脇 メインコンテンツ以外のコンテンツ（サイドバーなど）のタグを指定します。
セクション ドキュメント内のセクションを表します。
詳細 追加の詳細のタグを指定します。
ヘッダー セクションまたはドキュメントのヘッダーを指定します。
フッター セクションまたはドキュメントのフッターを指定します
figcaption HTMLドキュメント上の画像の簡単な説明を指定します。
メイン ページのメインコンテンツを指定し、一意である必要があります。
概要
要素のヘッダーを指定します。
マーク 強調表示されたテキストを指定します。

HTML5セマンティクスの例を見てみましょう-

例

<!DOCTYPE html>
<html>
<style>
   * {
      box-sizing: border-box;
   }
   body {
      color: #000;
      background-color: #8BC6EC;
      background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
      text-align: center;
   }
   header {
      background-color: #000;
      padding: 20px;
      text-align: center;
      color: white;
   }
   nav {
      float: left;
      width: 20%;
      height: 200px;
      background: #282828;
      padding: 60px 10px;
   }
   nav ul {
      list-style-type: none;
      padding: 0;
   }
   nav ul li a {
      text-decoration: none;
      color: #fff;
   }
   article {
      float: left;
      padding: 80px 10px;
      width: 80%;
      background-color: #fff;
      height: 200px;
      text-align: center;
   }
   section:after {
      content: "";
      display: table;
      clear: both;
   }
   footer {
      background-color: #000;
      padding: 20px;
      text-align: center;
      color: white;
   }
</style>
<body>
<h1>HTML Semantics Demo</h1>
<header>This is Header</header>
<section>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<article>This is an article element.</article>
</section>
<footer>This is Footer</footer>
</body>
</html>

出力

HTML5セマンティクス


  1. HTML5数学演算子

    HTML5数学演算子は、HTMLドキュメントでの数学および技術演算子の表現に使用されます。したがって、このような演算子をWebページに使用するには、HTMLエンティティ名を使用します。エンティティ名が存在しない場合は、10進数または16進数の参照であるエンティティ番号を使用できます。 構文 以下は構文です- &operatorName; または &#operatorHexcode; または &#operatorHexadecimalcode; HTML5数学演算子の例を見てみましょう- 例 <!DOCTYPE html> <html> &

  2. WebのHtml5応答性

    最新で人気のあるウェブデザイン言語であるHTML5は、突然デザインの世界に波を起こしました。以前はHTMLでしたが、現在はHTML5があります。ただし、両者の主な違いを見ると、実際にHTML5がHTMLとは異なり、HTMLよりも優れている点の1つは、応答性であることがわかります。 。 Webページの応答性とは、メディアごとにブラウザにロードされた後にWebページから受信した出力または応答を意味します。 HTMLでは、以前は多くの制限があり、新しいバージョンが必要になりました。 Webデザイナーには、テクノロジーの変化に合わせてWebページを作成する柔軟性がありませんでした。 最新の