HTML5タグ-htmlチュートリアル-php.cn

私たちは皆、HTML の標準的な略語である HyperText Markup Language を知っています。つまり、HTML5 は HTML の最新かつ新しいバージョンです。製品が開発されると、当然のことながら、HTML には多数のバージョンが存在し、その過程で多くの新しい開発が行われることになります。したがって、HTML5 には新しい属性と動作が追加されています。この HTML5 タグはもはやプログラミング言語ではありませんが、マークアップ言語です。さて、マークアップ言語とは何でしょうか?ドキュメント内でタグを使用して要素の属性を定義するのはマークアップ言語です。ここで、タグを定義して Web ページを作成する方法について詳しく説明します。

HTML5のタグ

タグはコンテンツを表示するための仕様です。通常、開始タグと終了タグがあります。また、のような終了タグを必要としないタグもいくつかあります。これは改行を意味し、次の行からそのタグの隣にあるデータを表示します。ここでは、HTML5 の新しい要素をいくつか見てみましょう。

HTML5 では、一般にタグを 2 つのカテゴリに分類できます。

セマンティック要素: これらの要素の例はいくつかあります。 <メイン>、<概要>、<時間>など
非セマンティック要素: ここでの例は次のとおりです。
、
など
以下で説明するタグは、HTML5 バージョンのみで新たに導入されたタグです。これらはさまざまな種類のタグであり、すべて分類できます。

1.構造タグ

以下は構造タグの種類と例です:

a.記事: headタグと同様に主に使われるタグです。主にフォーム、ブログ、ニュース記事などで例として使用されます。

コード:
```
<html>
<article> <h3>The first one </h3></article>
<body>
<h2>Welcome Back</h22>
</body>
</html>
```
ログイン後にコピー
出力:

b.余談: 通常のタグに似たもので、記事のサイドバーなど、コンテンツを周囲のコンテンツに関連付けます。また、このタグは、IE バージョン 8 以降を使用する場合にのみ意味を持ちます。

c.詳細: このタグは、ユーザーに追加データを提供するために使用されます。これは、詳細を非表示または表示できる対話型プラットフォームにすることができます。このタブの使用状況は、概要タグの下で確認できます。

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. Footer: このタグは、ページの最後に配置されるタグです。著作権、歴史関連の情報、データなどを扱います。以下に小さな例を見てみましょう。

コード:
```
<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>
```
ログイン後にコピー
出力:

練習中にコードを書いたら、リンクをクリックして確認してください。

ふ。セクション: 名前がすでに示しているように、このタグは本文、ヘッダー、フッターなどのコードの部分を定義します。ここでは、開始タグと終了タグの両方が必要です。以下に小さな例を見てみましょう:

コード:
```
<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.