HTML5 セマンティック要素-htmlチュートリアル-php.cn

HTML5 セマンティック要素

WBOY

リリース： 2024-09-04 16:37:21

オリジナル

853 人が閲覧しました

次の記事では、HTML5 のさまざまなセマンティック要素について説明します。セマンティクスはさまざまなタイプのタグに関するものであり、その機能はタグ名に従って同じ機能を表し、実行します。タグの機能は、ユーザーが理解できる名前/形式になっているその名前によって簡単に理解できます。 HTML の要素のほとんどは一般にセマンティック要素です。

HTML5 のセマンティック要素の利点

セマンティック要素の利点は次のとおりです:

コードを簡単に理解できます。
メンテナンスを迅速かつ適切に行うことができます。
どのタグについても、特に説明を追加する必要はありません。

HTML5 のさまざまなセマンティック要素

セマンティック要素を見てみましょう:

1. <記事>

このタグは、このタグ内のデータが特に同様のコンテンツに関するものであるという考えを与えてくれます。それは、私たちが通常持っているさまざまなタイプの記事にも依存します。ブログ、フォーラム、新聞のコラム記事などです。

コード:

<html>
<body>
<article>
<h2>HTML5</h2>
<p>New Updated version of HTML</p>
</article>
<article>
<h2>Learning HTML</h2>
<p> We are learning through EDUCBA</p>
</article>
</body>
</html>

ログイン後にコピー

出力:

HTML5 セマンティック要素

2. <セクション>

このタグは、合計データのセクションの内容を提供するためのものです。記事タグとセクションタグの両方の使用について理解すると、これらのタグを各タグ内で使用できます。つまり、セクションタグは記事タグ内で使用でき、その逆も可能です。

コード:

<html>
<body>
<section>The section here is about:
<p><h4> Learning and practising</h4> </p>
</section>
</body>
</html>

ログイン後にコピー

出力:

HTML5 セマンティック要素

3. <ヘッダー>

このタグはすべてのヘッダーデータを提供します。ヘッダー形式に配置したいデータはすべて、このヘッダータグの下で使用されます。そして、このタグは HTML スクリプト全体で何度も使用できます。

コード:

<html>
<body>
<header>
<h3>This is header #1</h3>
<p> First one</p>
</header>
<p> next one ...</p>
<header>
<h3>This is header #2</h3>
<p> Second one </p>
</header>
</body>
</html>

ログイン後にコピー

出力:

HTML5 セマンティック要素

4. <フッター>

これは HTML スクリプトのフッターセクションです。通常、すべての著作権データと、オファーの「条件が適用される」などの小さなセクションが表示されます。したがって、これらはフッタータグの下で定義されます。

コード:

<html>
<body>
<p> Inside Body and above footer tag</p>
<footer>
<p> Inside footer tag.</p>
</footer>
<footer>
<p><h4> Another footer tag</h4></p>
<p><h6>Conditions Apply</h6> </p>
</footer>
</body>
</html>

ログイン後にコピー

出力:

HTML5 セマンティック要素

5. <ナビ>

このタグはナビゲーション要素を提供します。通常、このタグを通じてあるページから別のページに移動する HTML ドキュメントスクリプト内の URL。このタグの下にあるデータはすべてハイパーリンクとして利用できます。これらのハイパーリンクは、あるセクションから別のセクションに移動するのに役立ちます。

コード:

<html>
<body>
<h4> About </h4>
<nav><a href="#"> About link 1</a>
<a href="#"> About link 1</a>
</nav>
<h4> Contact </h4>
<nav>
<a href="#"> Contact Link 1</a>
<a href="#"> Contact Link 2</a>
</nav>
</body>
</html>

ログイン後にコピー

出力:

HTML5 セマンティック要素

練習中に、これらのリンクをクリックし、クリックしたときにハイパーリンクの色がどのように変化するかを確認してください。

6. <余談>

これは、HTML ドキュメントの側面にデータを表示するために使用されるタグです。多くの Web サイトでは、この Side タグを使用して表示されるサイドバーにコンテンツが存在します。このコンテンツは、ドキュメント内に存在する他のデータと一致している必要があります。

コード:

<html>
<body>
<p>How aside tag is used </p>
<aside>
<h4>Inside aside tag</h4>
<p>Content inside aside tag</p>
</aside>
</body>
</html>

ログイン後にコピー

出力:

HTML5 セマンティック要素

正確な内容を同じ方法で完全に指定することはできません。 HTML ページ全体を使用する場合にのみ、文書化して明確に理解することができます。

7.

このタグは、画像を添付することを指定します。このタグを使用して、画像ソースを指定し、GIF または画像を表示できます。

コード:

<html>
<body>
<figure>
<img src="">
</figure>
</body>
</html>

ログイン後にコピー

上で述べたように、これが Figure タグを定義する方法です。 Figure タグ内で、source タグを使用してイメージコマンドを指定できます。この図タグ内で、図のキャプションタグを使用できます。

8. <図キャプション>

このタグは、提供された画像の下にキャプションを付けるために使用されます。 Figure タグ内で使用できます。その使用法は以下の例で見ることができます。

<html>
<body>
<figure>
<img src="">
<figcaption>This is description of the image attached.</figcaption>
</figure>
</body>
</html>

ログイン後にコピー

画像ソースを指定して同じことを実行して、出力がどのように表示されるかを確認できます。

9. <メイン>

このタグは、HTML サイトのすべての属性と完全なコンテンツを指定します。ユニークなコンテンツがすべて含まれています。この特定のタグに関して注意すべき重要な点は、このタグはページ作成全体で 1 回しか使用できないということです。他のタグは Web ページの作成時に複数回使用できることがわかりましたが、このメインタグは 1 回限りの使用タグです。

コード:

<html>
<body>
<main>
<h1>Learning HTML Semantic Tags</h1>
<article>
<h4>Studying</h4>
<p> Reading would help to understand different topics</p>
</article>
<article>
<h4>Practising</h4>
<p> With Studying , Practising is a must thing to do in learning</p>
</article>
</main>
</body>
</html>

ログイン後にコピー

出力:

HTML5 セマンティック要素

10.

This tag is for highlighting specific content or data. In other words, this tag is helpful in marking data.

Code:

<html>
<body>
<p> In this whole text which I am writing now, <mark> I want to mark this text </mark></p>
</body>
</html>

ログイン後にコピー

Output:

HTML5 セマンティック要素

11.

This tag contains additional details that users can hide any details on their wish. Through this tag, users can open/close any content which they need. If we want that tag to disclose its details at the start itself, then the attribute “open” can be used.

Code:

<html>
<body>
<details open="true">
<p>Is this displayed?</p>
</details>
</body>
</html>

ログイン後にコピー

Output:

HTML5 セマンティック要素

Now, what would be the output if we did not use the open attribute?

Code:

<html>
<body>
<details>
<p>Is this displayed?</p>
</details>
</body>
</html>

ログイン後にコピー

Output 1:

HTML5 セマンティック要素

Output 2:

HTML5 セマンティック要素

12.

This tag is used inside the details tag. Under the details tag, we can have a summary tag that specifies the entire summary of the web page or the HTML document. An important thing to note here is that the summary tag is the first child tag that has to come under the details tag.

Code:

<html>
<body>
<details>
<summary> Have written this inside summary tag which is inside details tag</summary>
<p>This text only comes under details tag</p>
</details>
<p> This text data is written after completion of details tag</p>
</body>
</html>

ログイン後にコピー

Output 1:

HTML5 セマンティック要素

We had highlighted the arrow in the above output, as we get our output 2 once we expand it.

Output 2:

HTML5 セマンティック要素

This tag might not be giving out any difference

13.

This tag defines date/time in such a format that users can easily understand. But a thing to note is that this tag may not give us a changed output in many of the browsers.

Code:

<html>
<body>
<p>At present time is <time>11:00</time> pm in the night.</p>
</body>
</html>

ログイン後にコピー

Output:

HTML5 セマンティック要素

14.

As the name already suggests, this tag is for writing any content in a box. This tag should have an open attribute for displaying the dialog box once the source code is executed.

Code:

<html>
<body>
<dialog open=true>
<p> The data written here gets displayed in a dialog box </p>
</dialog>
</body>
</html>

ログイン後にコピー

Output:

HTML5 セマンティック要素

15.

This tag gives the progress of a certain task in a graphical representation. We here need to have the maximum number for which the progress has to be represented. This tag mainly consists of two attributes. Max and value are the two attributes. Max represents the total count that has to be completed, and Value gives us the count percent that is finished with respect to the maximum count value.

Code:

<html>
<body>
<h1 style="color:red;">EDUCBA</h1>
Your learning progress is:
<progress value="72" max="100">
</progress>
</body>
</html>

ログイン後にコピー

Output:

HTML5 セマンティック要素

16.

This tag is for measurement. This can be utilized for the space taken by a query or usage of disk space also. There are a few attributes that are to be used with this tag. The attributes are max, min, and value. Based on their usage, we can definitely figure out their purpose and usage.

Code:

<html>
<body>
<h2>EDCUBA</h2>
<p>Usage of Meter tag</p>
In a 6 floors apartment, I live in 2nd floor:
<meter value="2" min="0" max="6">2 out of 6</meter>
</body>
</html>

ログイン後にコピー

Output:

HTML5 セマンティック要素

17.

This is a tag that has been introduced to add video files to our HTML page. Until this tag was introduced, developers used plugins to introduce video files into HTML page content. There are a few attributes that can be used along with the tag. Autoplay, Preload, Muted are some of these.

Code:

<html>
<body>
<video>
<source src="video_name.mp4" type="video/mp4">
</video>
</body>
</html>

ログイン後にコピー

We just need a source tag to give the source from where we need to upload the video content to our page.

18.

This tag is for adding audio files to our Html page. The usage and the source tag would be the same as that of the video tag. As an exercise, try using all the semantic elements and create e HTML 5 version web page to learn better and faster.

Conclusion

In this article, we have got to see many semantic elements and their usage in HTML5. One important thing to note here is, many of these tags are supported by internet explorer versions greater than 9 and chrome versions greater than 3.

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