HTML5 の新しい要素

HTML5 は HTML 4.01 バージョンからの新しいアップグレードであり、多くの新機能、高度な機能、ページビューの向上、および増大する技術的ニーズに合わせたその他の多くの改良点が含まれています。 HTML5 で最も使用され、必要とされる要素は、

、

、

、

、

、、

、

、そして。 HTML 5 のこれらのタグ/要素により、パフォーマンスが向上し、効率的な結果が得られ、コーディングと実装が容易になる、はるかにユーザー フレンドリーなインターフェイスが可能になり、全体としてレイアウトを即興化するのに役立ちます。

HTML5 の新しい要素トップ 10

HTML5 は、ドキュメントのレイアウトを強化するための新しい要素を提供します。

1.

要素は、ドキュメント、セクション、または Web サイト内の別の構造を含むページの一部を指定し、広く配布または使用することが推奨されます。これは、グループ投稿、日記や日刊紙のレポート、オンライン ニュースレターへの投稿、顧客から送られたコメント、またはその他の物質を含まないオブジェクトである可能性があります。

例:

<title>Article Element</title>


<article>
<h2 id="EDUCBA">EDUCBA</h2>
<p>EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries. </p>
</article>

出力:

• 上記のコードを .html 拡張子を付けてファイルに保存します。
• ブラウザで HTML ファイルを実行すると、下の画像に示す出力が表示されます。

2.

要素は、カテゴリ、地図、画像、コード記事などの個々のコンテンツを示します。

例:

<title>Figure Element</title>


<p> EDUCBA is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries.
</p>
<figure>
<img  src="/static/imghwm/default1.png" data-src="educba.png" class="lazy" alt="HTML5 の新しい要素" >
</figure>

出力:

上記のコードは、以下の画像に示すような出力を生成します。

3.

要素は画像の説明を追加します。

例:

<title>Figure Caption Element</title>


<p> EDUCBA is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries.
</p>
<figure>
<img  src="/static/imghwm/default1.png" data-src="educba.png" class="lazy" alt="HTML5 の新しい要素" >
<figcaption>EDUCBA (Corporate Bridge Consultancy Pvt Ltd)</figcaption>
</figure>

出力:

上記のコードは、下の画像に示すような結果を表示します。

4.

要素は、ドキュメントまたはページ上のセクションのヘッダーを指定します。 1 つのドキュメントに複数のヘッダーを定義できます。

例:

<title>Header Element</title>


<article>
<header>
<h1 id="Header-One">Header One</h1>
<h2 id="Header-Two">Header Two</h2>
<h3 id="Header-Three">Header Three</h3>
</header>
<p>The content of the document goes here...</p>
</article>

出力:

上記のコードは、下の画像に示すような結果を表示します。

5.

要素では、作成者情報、著作権情報、連絡先、関連ドキュメントへのリンク、サイトマップなどの情報を指定します。

例:

<title>Footer Element</title>


<footer>
<p>Copyright © 2019 www.educba.com</p>
<p>Contact: <a href="mailto:%5Bemail%C2%A0protected%5D">[email protected]</a>
</p></footer>

出力:

上記のコードは、下の画像に示すような結果を表示します。

6.

要素は、ドキュメントの主要な情報、つまり重要な情報を表示するために使用されます。

例:

<title>Main Element</title>


<header>
<p>Header information>
</p></header>
<main>
<p>Main Information</p>
<article>
<h2 id="EDUCBA">EDUCBA</h2>
<p>EDUCBA is a leading global provider of skill based education...</p>
</article>
</main>
<footer>
<p>Footer Information>
</p></footer>

出力:

上記のコードは、以下の画像に示すような出力を生成します。

7.

要素は、文書上の特定のテキストにユーザーを引き付ける背景色でテキストを強調表示またはマークします。

例:

<title>Mark Element</title>


<article>
<p><mark>EDUCBA</mark> is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries. </p>
</article>

出力:

上記のコードは、下の画像に示すような結果を表示します。

8.

要素は、ページ上のナビゲーション リンクを指定するために使用されます。これらのリンクは、ドキュメント内の他のページへの接続を提供します。

例:

<title>Nav Element</title>


<header>
<nav>
<a href="#">HTML</a> |
<a href="#">CSS</a> |
<a href="#">JAVA</a> |
<a href="#">PHP</a> |
<a href="#">PYTHON</a>
</nav>
</header>

出力:

上記のコードは、以下の画像に示すような出力を生成します。

9.

要素は、ドキュメントのスタンドアロン セクションまたは特定の領域を定義します。

例:

<title>Section Element</title>


<article>
<h2 id="Main-Article"> Main Article </h2>
<p>Content of the main header will be displayed here...</p>
<section>
<h2 id="Section-One">Section One</h2>
<p>Content of the first section will be displayed...</p>
</section>
<section>
<h2 id="Section-Two">Section Two</h2>
<p>Content of the second section will be displayed...</p>
</section>
</article>

出力:

上記のコードは、下の画像に示すような結果を表示します。

10.

The

tag is a subpart of the

tag which provides the text that can be displayed or hidden when the user clicks the heading.

Example:

<title>Summary Element</title>


<details>
<summary>
EDUCBA - Corporate Bridge Consultancy Pvt Ltd
</summary>
<p>It is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries.</p>
</details>

Output:

When you run the above code, it will display the result as shown below,

As shown in the image, click on the heading, and it will display the hidden text shown below the image,

Conclusion

So far, we have seen how new HTML5 elements are useful for various website creation tasks. These new elements read the document in a more accurate & standard way and develop more complex and efficient web apps. The new HTML5 elements give some additional extra features to generate interactive websites.

以上がHTML5 の新しい要素の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。