Elemen Semantik HTML5
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>
Output:
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>
Output:
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>
Output:
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>
Output:
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>
Output:
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>
Output:
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>
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>
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>
Output:
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:
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:
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:
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:
<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:
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:
<html> <body> <p>At present time is <time>11:00</time> pm in the night.</p> </body> </html>
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:
<html> <body> <dialog open=true> <p> The data written here gets displayed in a dialog box </p> </dialog> </body> </html>
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:
<html> <body> <h1 style="color:red;">EDUCBA</h1> Your learning progress is: <progress value="72" max="100"> </progress> </body> </html>
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:
<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:
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.
Atas ialah kandungan terperinci Elemen Semantik HTML5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1381
52
Sempadan Jadual dalam HTML
Sep 04, 2024 pm 04:49 PM
Panduan untuk Sempadan Jadual dalam HTML. Di sini kita membincangkan pelbagai cara untuk menentukan sempadan jadual dengan contoh Sempadan Jadual dalam HTML.
HTML jidar-kiri
Sep 04, 2024 pm 04:48 PM
Panduan untuk HTML margin-kiri. Di sini kita membincangkan gambaran keseluruhan ringkas tentang HTML margin-left dan Contoh-contohnya bersama-sama dengan Pelaksanaan Kodnya.
Jadual Bersarang dalam HTML
Sep 04, 2024 pm 04:49 PM
Ini ialah panduan untuk Nested Table dalam HTML. Di sini kita membincangkan cara membuat jadual dalam jadual bersama-sama dengan contoh masing-masing.
Susun Atur Jadual HTML
Sep 04, 2024 pm 04:54 PM
Panduan untuk Susun Atur Jadual HTML. Di sini kita membincangkan Nilai Susun Atur Jadual HTML bersama-sama dengan contoh dan output n perincian.
Pemegang Tempat Input HTML
Sep 04, 2024 pm 04:54 PM
Panduan untuk Pemegang Tempat Input HTML. Di sini kita membincangkan Contoh Pemegang Tempat Input HTML bersama-sama dengan kod dan output.
Senarai Tertib HTML
Sep 04, 2024 pm 04:43 PM
Panduan kepada Senarai Tertib HTML. Di sini kami juga membincangkan pengenalan senarai dan jenis Tertib HTML bersama-sama dengan contoh mereka masing-masing
Memindahkan Teks dalam HTML
Sep 04, 2024 pm 04:45 PM
Panduan untuk Memindahkan Teks dalam HTML. Di sini kita membincangkan pengenalan, cara teg marquee berfungsi dengan sintaks dan contoh untuk dilaksanakan.
Butang onclick HTML
Sep 04, 2024 pm 04:49 PM
Panduan untuk Butang onclick HTML. Di sini kita membincangkan pengenalan, kerja, contoh dan onclick Event masing-masing dalam pelbagai acara.
