Rumah >hujung hadapan web >html tutorial >Teg HTML5

Teg HTML5

WBOYasal: 2024-09-04 16:36:33571semak imbas

Kita semua tahu singkatan standard HTML, iaitu HyperText Markup Language. Jadi, HTML5 ialah versi HTML yang terkini dan baharu. Sebaik sahaja produk dibangunkan; Jelas sekali, terdapat banyak versi HTML dengan banyak perkembangan baharu di sepanjang perjalanan. Jadi, HTML5 mempunyai atribut dan gelagat baharu. Teg HTML5 ini bukan bahasa pengaturcaraan lagi, tetapi ia adalah bahasa penanda. Sekarang, apakah bahasa mark-up? Mentakrifkan atribut elemen menggunakan tag dalam dokumen ialah bahasa Penanda. Sekarang, mari kita perincikan tentang cara kita boleh mentakrifkan teg dan membuat halaman web.

Teg HTML5

Teg ialah spesifikasi untuk memaparkan kandungan. Secara amnya, akan ada teg permulaan dan penamat. Selain itu, beberapa teg tidak memerlukan teg akhir, seperti , yang bermaksud pemutusan baris, yang memaparkan data di sebelah teg itu daripada baris seterusnya. Di sini, mari lihat beberapa elemen baharu dalam HTML5.

Dalam HTML5, kami secara amnya boleh membahagikan teg kepada dua kategori.

Elemen Semantik: Beberapa contoh untuk elemen ini ialah; , , dll.
Elemen Bukan Semantik: Contoh di sini ialah;
, dll.

Teg yang dibincangkan di bawah ialah tag yang baru diperkenalkan secara eksklusif dalam versi HTML5. Ia adalah pelbagai jenis tag yang semuanya boleh dikategorikan.

1. Tag Struktur

Di bawah ialah jenis tag struktur dengan contoh:

a. Artikel: Ini ialah teg yang kebanyakannya digunakan serupa dengan teg kepala. Digunakan terutamanya dalam borang, blog, berita dan semua sebagai contoh.

Kod:

<html>
<article> <h3>The first one </h3></article>
<body>
<h2>Welcome Back</h22>
</body>
</html>

Output:

Teg HTML5

b. Selain: Sesuatu yang serupa dengan teg biasa kami, yang akan mengaitkan kandungan dengan kandungan di sekeliling, seperti bar sisi dalam artikel. Dan teg ini hanya akan masuk akal apabila menggunakan versi IE di atas 8.

c. Butiran: Teg ini digunakan untuk memberikan beberapa data tambahan kepada pengguna. Ini boleh menjadi platform interaktif yang boleh menyembunyikan atau menunjukkan butiran. Kita boleh melihat penggunaan tab ini di bawah teg ringkasan.

d. Pengepala: Teg ini berkaitan dengan bahagian pengepala dan mengandungi maklumat tajuk. Ia mesti mempunyai kedua-dua teg permulaan dan penamat.

Kod:

<html>
<header>
<h1>Happy Hours</h1>
<nav>
<p><a href="#">Morning</a> | <a href="#">Afternoon</a> | <a href="#">Evening</a></p>
</nav>
</header>
</html>

Output:

Teg HTML5

e. hgroup: Teg ini digunakan dalam menerangkan sekumpulan pengepala. Mari lihat contoh.

Kod:

<html>
<body>
<hgroup>
<h1>Let’s check size of this h1 </h1>
<h2> Let’s check size of this h2 </h2>
<h3> Let’s check size of this h3</h3>
<h4> Let’s check size of this h4</h4>
<h5> Let’s check size of this h5</h5>
</hgroup>
</body>
</html>

Output:

Teg HTML5

f. Footer: Tag ini ialah, yang akan diletakkan di hujung halaman. Ia berkaitan dengan sesuatu seperti hak cipta, maklumat atau data berkaitan sejarah. Mari kita lihat contoh kecil di bawah.

Kod:

<html>
<body>
<footer>
<nav>
<p><a href="#">Copy Rights</a> | <a href="#">Come back soon</a></p>
</nav>
<p>Please subsribe for more learning content</p>
</footer>
</body>
</html>

Output:

Teg HTML5

g. nav: Teg ini adalah untuk menyediakan bahagian semua pautan untuk navigasi.

Kod:

<html>
<body>
<nav>
<ul>
<li><a href="https://www.educba.com/">EDUCBA Home</a></li>
<li><a href="https://www.educba.com/about-us/">About EDUCBA</a></li>
<li><a href="https://www.educba.com/courses/">Courses in EDUCBA</a></li>
</ul>
</nav>
</body>
</html>

Output:

Teg HTML5

Semak dengan mengklik pada pautan sebaik sahaja anda menulis kod anda semasa berlatih.

h. Bahagian: Seperti namanya sudah dinyatakan, teg ini mentakrifkan bahagian kod seperti badan, pengepala, pengaki, dsb. Di sini, kedua-dua teg permulaan dan penamat diperlukan. Mari kita lihat contoh kecil di bawah:

Kod:

<html>
<section>
<h1> Welcome </h1>
<h4> See you soon </h4>
<p>Thank You.</p>
</section>
</html>

Output:

Teg HTML5

i. Ringkasan: Teg ini digunakan selari dengan tab butiran. Di bawah teg butiran, kami mempunyai teg ringkasan ini untuk meringkaskan konsep. Contoh di bawah:

Kod:

<html>
<body>
<details>
<summary>How is this Summary tag defined?</summary>
<p>By clicking the arrow beside the Summary question I got displayed</p>
</details>
<p> The data after the display tag is displayed like this.</p>
</body>
</html>

Output:

Teg HTML5

Sekarang mengembangkan data teg ringkasan, kami mendapat yang di bawah.

Teg HTML5

2. Teg Borang

Berikut ialah jenis teg borang yang diterangkan di bawah dengan contoh:

a. Senarai Data: Teg ini digunakan seperti lungsur turun yang mempunyai nilai yang telah ditetapkan untuk dipilih oleh pengguna. Mari kita lihat contoh kecil di bawah:

Kod:

<html>
<body>
<p>Enter your favorite browser name:</p>
<input type="text" list="browsers">
<datalist id="browsers">
<option value="Firefox">
<option value="Chrome">
<option value="Internet Explorer">
<option value="Opera">
<option value="Safari">
</datalist>
</body>
</html>

Output:

Teg HTML5

Titik lungsur muncul apabila tetikus telah melayang di atas.

Teg HTML5

b. Keygen: This is for the encryption. It is for generating an encrypted key for passing the data in an encrypted format. Only the start tag is enough/required for this element, and the end tag is not mandatory.

c. Meter: This tag would give us the measurement of the data which is present in a given range.

Code:

<html>
<body>
<meter value="25" min="0" max="100">25 out of 100</meter><p> This is 25 out of 100 </p><br>
<meter value="0.7">70%</meter><p> This is the range for 70%</p>
</body>
</html>

Output:

Teg HTML5

3. Formatting Tags

Below are the types of formatting tag with examples:

a. BDI: This is Bi-directional isolation. As the name already suggests, this tag can be used to isolate a part of the text and give it different styles from that of other text.

b. Mark: This tag can help us highlight a specific text.

Code:

<html>
<body>
<p>This is how you can <mark>mark or highlight</mark> a text.</p>
</body>
</html>

Output:

Teg HTML5

c. Output: As the name already shows us, it gives the result of any calculation.

Code:

<html>
<body>
<form oninput="sum.value=parseInt(x.value)+parseInt(y.value)">
<input type="number" id="x”> +
<input type="number" id="y" value="350"> =
<output name="sum" for="x y"></output>
</form>
</body>
</html>

Output:

Teg HTML5

Make sure that you notice the form attribute of oninput. Once you input the attribute ‘x’ value, then the output gets displayed.

d. Progress: This tag gives us the progress of a particular task.

Code:

<html>
<body>
<progress value="80" max="100"></progress><p> This progress bar is 80% completed</p>
</body>
</html>

Output:

Teg HTML5

e. Rp: This is used when the ruby tags are not supported.

f. Rt: It is used with the tag ruby. Mostly this is used in pronunciation in both Japanese and Chinese languages.

g. Ruby: This tag is used with the rt and rp tags where the annotations with respect to the two languages, Chinese and Japanese, are pronounced.

h. Wbr: This tag is for the word break. It is mainly used to check how a word breaks when the window size is resized.

4. Embedded Content Tags

Here are the types of embedded content tag explained below with examples:

a. Audio: As the name already suggests, this tag would help us to incorporate audio files in the HTML document.

b. Canvas: Defines a place on the web page where graphics or shapes, or graphs are present or can be defined. Here is an example.

Code:

<html>
<body>
<canvas id="run" ></canvas>
<script type="text/javascript">
window.onload = function(){
var can = document.getElementById("run");
var context = can.getContext("2d");
context.moveTo(30, 60);
context.lineTo(150, 30);
context.stroke();
};
</script>
</body>
</html>

Output:

Teg HTML5

c. Dialog: This tag gives us a default box, especially if we wanted to have data in a box.

Code:

<html>
<body>
<p> Trying dialog here <dialog open>How does dialog box come up?</dialog> </p>
</body>
</html>

Output:

Teg HTML5

d. Embed: This tag can be used for getting in any external file to the HTML file. We can have only the start tag, and the end tag is not mandatory here. There are different attributes that can be used with this tag, namely, width, height, src, and type.

e. Figure and Figcaption: This, as already in its name, can incorporate the images and can give a caption to that image.

f. Source: This tag can implement multiple audio and video files by providing the location of the files using this source tag.

g. Time: This tag, as the name already notifies, is a tag for displaying the time. And note that this tag is not functional in the cases of internet explorer version 8 and below.

h. Video: With the name of the tag, we can obviously get to know where this tag is used. For specifying the video files, we have this tag. Inside this Audio/Video tags, we define the source tags in specifying the files and their locations.

Input Elements of HTML5 Tags

Here are some input elements which we are using in HTML5 tags:

1. Email: This is one of the input elements in HTML5. This element takes in only email addresses as the input.

2. Number: This input element only accepts the number.

3. Range: As the name already explains, this tag contains a range of numbers.

4. URL: This input tag accepts the input field for the URL address. In this input type, we can only enter the URL.

5. Placeholder: This is one of the attributes for the input type as text or text area or any number. This place holder value shows the value to be given as the input.

Code:

<html>
<body>
Enter Date of birth : <input type = "text" name = "dob"
placeholder = "dd/mm/yyyy"/>
</body>
</html>

Output:

Teg HTML5

6. Autofocus: This attribute automatically focuses on a particular field where this element has been declared inside the input tag. This attribute is supported only by the latest versions of Chrome, Safari, and Mozilla only. The syntax is like this:

<input type = “textarea” name=”focus” autofocus/>
Tag <dd>: This tag represents a description of a definition.
Tag <del>: This tag deletes a specified text.
Tag <marquee>: This tag helps to display data in a scrolling manner.
<html>
<body>
<marquee> This texxt is in a scrolling manner </marquee>
</body>
</html>

Output:

Teg HTML5

7. : This is one of the basic tags that would help the browser understand the HTML version in which the program is being written. The declaration of this tag is to be written before the HTML tag.

8. : This Meta tag describes the description of the HTML document. It contains the author’s name, date, and modifications, etc.

In this HTML5, we even have an opportunity to get the GeoLocation of a device. There are different methods that can be helpful in making this location tagging easy. There are also different fonts and colors available in HTML5. Below are the few tags that are removed from the HTML usage from this HTML5 version.

Acronym, Applet, big, dir, font, frameset, center, tt (TeleType text), basefont, center, strike, frame, u (underlined text), isindex, noframes, etc. Few attributes that are removed are below:

Align, bgcolor, cellpadding, cellspacing, border, link, shape, charset, archive, codebase, scope, alink, vlink, link, background, border, clear, scrolling, size, width, etc.