Elemen Semantik HTML5-html tutorial-php.cn

Artikel berikut akan memberikan anda pelbagai elemen semantik dalam HTML5. Semantik adalah mengenai pelbagai jenis teg, yang fungsinya akan menggambarkan dan melaksanakan fungsi yang sama seperti nama tegnya. Kefungsian teg akan mudah difahami dengan namanya, iaitu dalam nama/format yang boleh difahami pengguna. Kebanyakan elemen dalam HTML secara amnya adalah elemen semantik.

Kelebihan Elemen Semantik dalam HTML5

Kelebihan unsur semantik adalah seperti berikut:

Pemahaman kod yang mudah.
Penyelenggaraan boleh dilakukan dengan pantas dan sewajarnya.
Tidak perlu menambah sebarang penerangan khusus untuk mana-mana tag.

Pelbagai Elemen Semantik dalam HTML5

Mari kita masuk ke unsur semantik:

1.

Teg ini memberi kita sedikit idea bahawa data di dalam teg ini khusus untuk kandungan yang serupa. Ia bergantung pada jenis artikel yang berbeza yang kami ada juga. Ia boleh menjadi blog, forum, artikel ruangan dalam akhbar, dsb.

Kod:

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

Salin selepas log masuk

Output:

Elemen Semantik HTML5

2.

Teg ini adalah tentang menyediakan kandungan bahagian daripada jumlah data. Untuk mengetahui tentang menggunakan kedua-dua teg artikel dan bahagian, teg tersebut boleh digunakan di dalam setiap teg. Iaitu tag bahagian boleh digunakan di dalam tag artikel dan sebaliknya.

Kod:

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

Salin selepas log masuk

Output:

Elemen Semantik HTML5

3.

Teg ini memberikan semua data pengepala. Sebarang data yang ingin kami letakkan dalam format pengepala digunakan di bawah teg pengepala ini. Dan teg ini boleh digunakan beberapa kali dalam keseluruhan skrip HTML.

Kod:

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

Salin selepas log masuk

Output:

Elemen Semantik HTML5

4.

Ini ialah bahagian pengaki dalam skrip HTML kami. Secara amnya, kami melihat semua data hak cipta dan bahagian kecil yang kami temui di bawah sebarang tawaran seperti "syarat dikenakan" pada sebarang tawaran. Jadi perkara ini ditakrifkan di bawah teg pengaki.

Kod:

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

Salin selepas log masuk

Output:

Elemen Semantik HTML5

5.

Teg ini memberi kita elemen navigasi. URL dalam mana-mana skrip dokumen HTML yang biasanya kita mahu menavigasi dari satu halaman ke halaman lain melalui teg ini. Sebarang data yang diberikan di bawah teg ini tersedia sebagai hiperpautan. Hiperpautan ini boleh berguna dalam menavigasi dari satu bahagian ke bahagian lain.

Kod:

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

Salin selepas log masuk

Output:

Elemen Semantik HTML5

Semasa berlatih, klik pada pautan tersebut dan semak bagaimana warna hiperpautan berubah apabila mengklik.

6.

Ini ialah teg yang digunakan untuk memaparkan data pada sisi dokumen HTML kami. Pada banyak tapak web, kita boleh menemui kandungan yang wujud dalam bar sisi, yang dipaparkan menggunakan teg tepi ini. Kandungan ini hendaklah sejajar dengan data lain yang terdapat dalam dokumen.

Kod:

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

Salin selepas log masuk

Output:

Elemen Semantik HTML5

Kandungan yang tepat tidak boleh dinyatakan sepenuhnya dengan cara yang sama; ia hanya boleh didokumenkan dan difahami dengan jelas semasa menggunakan keseluruhan halaman HTML.

7.

Teg ini menyatakan bahawa kami akan melampirkan imej. Teg ini boleh digunakan untuk menentukan sumber imej dan memaparkan gif atau imej.

Kod:

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

Salin selepas log masuk

Seperti yang dinyatakan di atas, itulah cara kita boleh menentukan tag angka. Di dalam teg angka, kita boleh menentukan arahan imej kita dengan teg sumber. Di dalam teg angka ini, kita boleh pula menggunakan teg kapsyen angka.

8.

Tag ini digunakan untuk memberikan kapsyen di bawah imej yang disediakan. Ia boleh digunakan di dalam tag angka. Penggunaannya boleh dilihat dalam contoh di bawah.

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

Salin selepas log masuk

Anda boleh cuba melaksanakan perkara yang sama dengan memberikan sumber imej dan semak cara output dipaparkan.

9.

Teg ini menentukan semua atribut dan kandungan lengkap tapak HTML. Ia mengandungi semua kandungan unik. Perkara penting yang perlu diperhatikan untuk teg khusus ini ialah teg ini boleh digunakan sekali sahaja dalam jumlah penciptaan halaman. Kami mendapati bahawa teg lain boleh digunakan lebih daripada sekali dalam membuat halaman web, tetapi teg utama ini ialah teg penggunaan masa tunggal.

Kod:

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

Salin selepas log masuk

Output:

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

Salin selepas log masuk

Output:

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

Salin selepas log masuk

Output:

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

Salin selepas log masuk

Output 1:

Elemen Semantik HTML5

Output 2:

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

Salin selepas log masuk

Output 1:

Elemen Semantik HTML5

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

Output 2:

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

Salin selepas log masuk

Output:

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

Salin selepas log masuk

Output:

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

Salin selepas log masuk

Output:

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

Salin selepas log masuk

Output:

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

Salin selepas log masuk

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.

Atas ialah kandungan terperinci Elemen Semantik HTML5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!