Semantische HTML5-Elemente

Der folgende Artikel stellt Ihnen verschiedene semantische Elemente in HTML5 vor. Bei der Semantik geht es um verschiedene Arten von Tags, deren Funktionalität die gleiche Funktion gemäß ihrem Tag-Namen darstellen und ausführen würde. Die Funktionalität des Tags lässt sich leicht anhand seines Namens verstehen, der in einem für den Benutzer verständlichen Namen/Format vorliegt. Die meisten Elemente in HTML sind im Allgemeinen semantische Elemente.

Vorteile semantischer Elemente in HTML5

Die Vorteile semantischer Elemente sind wie folgt:

• Einfaches Code-Verständnis.
• Die Wartung kann schnell und angemessen durchgeführt werden.
• Es ist nicht erforderlich, eine Beschreibung speziell für ein Tag hinzuzufügen.

Verschiedene semantische Elemente in HTML5

Kommen wir nun zu den semantischen Elementen:

1.

Dieses Tag gibt uns eine Vorstellung davon, dass die Daten in diesem Tag speziell für ähnliche Inhalte bestimmt sind. Es hängt auch von den verschiedenen Arten von Artikeln ab, die wir im Allgemeinen haben. Es kann ein Blog, Foren, Kolumnenartikel in Zeitungen usw. sein.

Code:

<article>
<h2 id="HTML">HTML5</h2>
<p>New Updated version of HTML</p>
</article>
<article>
<h2 id="Learning-HTML">Learning HTML</h2>
<p> We are learning through EDUCBA</p>
</article>

Ausgabe:

2.

Bei diesem Tag geht es darum, einen Teilinhalt der Gesamtdaten bereitzustellen. Wenn Sie sich mit der Verwendung von Artikel- und Abschnitts-Tags auskennen, können diese Tags in jedem Tag verwendet werden. Das heißt, das Abschnitts-Tag kann innerhalb des Artikel-Tags verwendet werden und umgekehrt.

Code:

<section>The section here is about:
<p></p>
<h4 id="Learning-and-practising"> Learning and practising</h4> 
</section>

Ausgabe:

3.

Dieses Tag enthält alle Header-Daten. Alle Daten, die wir im Header-Format platzieren möchten, werden unter diesem Header-Tag verwendet. Und dieses Tag kann im gesamten HTML-Skript mehrmals verwendet werden.

Code:

<header>
<h3 id="This-is-header">This is header #1</h3>
<p> First one</p>
</header>
<p> next one ...</p>
<header>
<h3 id="This-is-header">This is header #2</h3>
<p> Second one </p>
</header>

Ausgabe:

4.

Dies ist der Fußzeilenabschnitt in unserem HTML-Skript. Im Allgemeinen sehen wir alle Copyright-Daten und den kleinen Abschnitt, den wir unter allen Angeboten finden, wie zum Beispiel „Es gelten die Geschäftsbedingungen“ für alle Angebote. Diese Dinge werden also unter dem Footer-Tag definiert.

Code:

<p> Inside Body and above footer tag</p>
<footer>
<p> Inside footer tag.</p>
</footer>
<footer>
<p></p>
<h4 id="Another-footer-tag"> Another footer tag</h4>
<p></p>
<h6 id="Conditions-Apply">Conditions Apply</h6> 
</footer>

Ausgabe:

5.

Dieses Tag gibt uns die Navigationselemente. Die URL in jedem HTML-Dokument-Skript, bei dem wir im Allgemeinen über dieses Tag von einer Seite zur anderen navigieren möchten. Alle unter diesem Tag angegebenen Daten sind als Hyperlinks verfügbar. Diese Hyperlinks können beim Navigieren von einem Abschnitt zum anderen hilfreich sein.

Code:

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

Ausgabe:

Klicken Sie beim Üben auf diese Links und prüfen Sie, wie sich die Farbe des Hyperlinks beim Klicken ändert.

6.

Dies ist ein Tag, der verwendet wird, um die Daten auf den Seiten unseres HTML-Dokuments anzuzeigen. Auf vielen Websites können wir Inhalte finden, die in einer Seitenleiste vorhanden sind und mit diesem Aside-Tag angezeigt werden. Dieser Inhalt sollte mit den anderen im Dokument vorhandenen Daten übereinstimmen.

Code:

<p>How aside tag is used </p>
<aside>
<h4 id="Inside-aside-tag">Inside aside tag</h4>
<p>Content inside aside tag</p>
</aside>

Ausgabe:

Der genaue Inhalt kann nicht vollständig auf die gleiche Weise angegeben werden; es kann nur klar dokumentiert und verstanden werden, wenn die gesamte HTML-Seite verwendet wird.

7.

Dieses Tag gibt an, dass wir ein Bild anhängen werden. Mit diesem Tag kann eine Bildquelle angegeben und ein GIF oder Bild angezeigt werden.

Code:

<figure>
<img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543905337030.png?x-oss-process=image/resize,p_40" class="lazy" alt="Semantische HTML5-Elemente" >
</figure>

Wie oben erwähnt, können wir das Figure-Tag auf diese Weise definieren. Innerhalb des Figure-Tags können wir unseren Bildbefehl mit einem Source-Tag angeben. Innerhalb dieses Abbildungs-Tags können wir wiederum das Abbildungstitel-Tag verwenden.

8.

Dieses Tag wird verwendet, um eine Beschriftung unter dem bereitgestellten Bild anzugeben. Es kann innerhalb des Figure-Tags verwendet werden. Die Verwendung davon ist im folgenden Beispiel zu sehen.

<figure>
<img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543905337030.png?x-oss-process=image/resize,p_40" class="lazy" alt="Semantische HTML5-Elemente" >
<figcaption>This is description of the image attached.</figcaption>
</figure>

Sie können versuchen, dasselbe auszuführen, indem Sie eine Bildquelle angeben und prüfen, wie die Ausgabe angezeigt wird.

9.

Dieses Tag spezifiziert alle Attribute und den vollständigen Inhalt der HTML-Site. Es enthält alle einzigartigen Inhalte. Bei diesem speziellen Tag ist zu beachten, dass dieses Tag bei der gesamten Seitenerstellung nur einmal verwendet werden kann. Wir stellen fest, dass andere Tags beim Erstellen einer Webseite mehr als einmal verwendet werden können, dieses Haupt-Tag ist jedoch ein Tag zur einmaligen Verwendung.

Code:

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

Ausgabe:

10.

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

Code:

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

Output:

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:

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

Output:

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

Code:

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

Output 1:

Output 2:

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:

<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>

Output 1:

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

Output 2:

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:

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

Output:

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:

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

Output:

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:

<h1 id="EDUCBA">EDUCBA</h1>
Your learning progress is:
<progress value="72" max="100">
</progress>

Output:

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:

<h2 id="EDCUBA">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>

Output:

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:

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

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.

Das obige ist der detaillierte Inhalt vonSemantische HTML5-Elemente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!