HTML5標籤

WBOY原創: 2024-09-04 16:36:33546瀏覽

我們都知道HTML的標準縮寫，即超文本標記語言。所以，HTML5是HTML的最新版本。產品開發出來後；顯然，HTML 將會有許多版本，並伴隨著許多新的發展。因此，HTML5 具有新的屬性和行為。 HTML5 標籤不再是一種程式語言，而是一種標記語言。現在，什麼是標記語言？使用文件中的標籤定義元素屬性是一種標記語言。現在，讓我們詳細了解如何定義標籤和建立網頁。

HTML5 標籤

標籤是顯示內容的規格。一般來說，會有開始和結束標籤。此外，很少有標籤不需要結束標籤，例如，這意味著換行，顯示下一行中該標籤旁邊的資料。在這裡，讓我們來看看 HTML5 中的一些新元素。

在HTML5中，我們一般可以將標籤分為兩類。

語意元素：這些元素的例子很少；、、等等
非語意元素： 這裡的例子是;
、
等等
下面討論的標籤是 HTML5 版本中新引入的標籤。它們是不同類型的標籤，都可以分類。

1.結構標籤

以下是結構標籤的型別及範例：

a。文章： 這是一個最常用的標籤，類似 head 標籤。主要用於表單、部落格、新聞報導等範例。

代碼：
```
<html>
<article> <h3>The first one </h3></article>
<body>
<h2>Welcome Back</h22>
</body>
</html>
```
輸出：

b。旁白： 類似我們普通標籤的東西，它將內容與周圍的內容相關聯，就像文章中的側邊欄。而且這個標籤只有在使用8以上的IE版本時才有意義。

c.詳細資料：標籤用於提供使用者一些附加資料。這可以是一個可以隱藏或顯示細節的互動平台。我們可以在summary標籤下看到這個tab的用法。

d。標題：此標籤與標題部分相關，包含標題資訊。它必須有開始標籤和結束標籤。

代碼：
```
<html>
<header>
<h1>Happy Hours</h1>
<nav>
<p><a href="#">Morning</a> | <a href="#">Afternoon</a> | <a href="#">Evening</a></p>
</nav>
</header>
</html>
```
輸出：

e。 hgroup: 此標籤用於描述一組標頭。讓我們看一下例子。

代碼：
```
<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>
```
輸出：

f。頁腳： 這個標籤就是那個，它被放置在頁面的末尾。它涉及版權、歷史相關資訊或數據等內容。讓我們來看下面的一個小例子。

代碼：
```
<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>
```
輸出：

g。 nav: 此標籤用於提供所有連結的一部分進行導覽。

代碼：
```
<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>
```
輸出：

在練習時編寫程式碼後，請點擊連結進行檢查。

h。部分： 如名稱所示，該標籤定義了程式碼的正文、頁首、頁尾等部分。這裡，開始標籤和結束標籤都是必要的。讓我們來看下面的一個小例子：

代碼：
```
<html>
<section>
<h1> Welcome </h1>
<h4> See you soon </h4>
<p>Thank You.</p>
</section>
</html>
```
輸出：

我。摘要：此標籤與詳細資訊標籤並行使用。在詳細資訊標籤下，我們有一個摘要標籤來總結概念。以下範例：

代碼：
```
<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>
```
輸出：

現在展開摘要標籤數據，我們得到以下內容。

2.表單標籤

以下是不同類型的表單標籤，並舉例說明：

a。 Datalist： 此標籤的使用方式類似於下拉列表，其中有預先定義的值供使用者選擇。讓我們來看看下面的小例子：

代碼：
```
<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>
```
輸出：

滑鼠懸停時會彈出下拉式選單。

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:

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:

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:

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:

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:

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:

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:

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:

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.

9.

HTML5標籤

HTML5 標籤

1.結構標籤

2.表單標籤

3. Formatting Tags

4. Embedded Content Tags

Input Elements of HTML5 Tags