HTML5 태그

WBOY원래의: 2024-09-04 16:36:33577검색

우리 모두는 HTML의 표준 약어인 HyperText Markup Language를 알고 있습니다. 따라서 HTML5는 최신 HTML 버전입니다. 제품이 개발되면; 분명히, 그 과정에서 많은 새로운 개발이 포함된 다양한 버전의 HTML이 있을 것입니다. 따라서 HTML5에는 새로운 속성과 동작이 있습니다. 이 HTML5 태그는 더 이상 프로그래밍 언어가 아니지만 마크업 언어입니다. 그렇다면 마크업 언어란 무엇인가? 문서에서 태그를 사용하여 요소 속성을 정의하는 것은 마크업 언어입니다. 이제 태그를 정의하고 웹페이지를 생성하는 방법을 자세히 알아보겠습니다.

HTML5 태그

태그는 콘텐츠를 표시하기 위한 사양입니다. 일반적으로 시작 태그와 끝 태그가 있습니다. 또한 와 같은 종료 태그가 필요하지 않은 태그도 거의 없습니다. 이는 줄이 바뀌어 다음 줄부터 해당 태그 옆에 데이터가 표시된다는 의미입니다. 이제 HTML5의 새로운 요소 중 일부를 살펴보겠습니다.

HTML5에서는 일반적으로 태그를 두 가지 카테고리로 나눌 수 있습니다.

의미 요소: 이러한 요소에 대한 몇 가지 예는 다음과 같습니다.
,
, 등등
비의미적 요소: 예는 다음과 같습니다.
,
등등
아래에서 설명하는 태그는 HTML5 버전에서만 새롭게 도입된 태그입니다. 모두 분류할 수 있는 다양한 유형의 태그입니다.

1. 구조 태그

다음은 구조 태그 유형과 예시입니다.

아. 기사: head 태그와 유사하게 주로 사용되는 태그입니다. 주로 양식, 블로그, 뉴스 기사 및 모든 예시에서 사용됩니다.

코드:
```
<html>
<article> <h3>The first one </h3></article>
<body>
<h2>Welcome Back</h22>
</body>
</html>
```
출력:

ㄴ. 따로: 기사의 사이드바처럼 콘텐츠를 주변 콘텐츠와 연결하는 일반적인 태그와 유사한 것입니다. 그리고 이 태그는 IE 버전 8 이상을 사용할 때만 의미가 있습니다.

ㄷ. 세부정보: 이 태그는 사용자에게 추가 데이터를 제공하는 데 사용됩니다. 이는 세부 정보를 숨기거나 표시할 수 있는 대화형 플랫폼일 수 있습니다. 요약 태그 아래에서 이 탭의 사용법을 확인할 수 있습니다.

디. 헤더: 헤더 부분과 관련된 태그로 제목 정보가 포함되어 있습니다. 시작 태그와 끝 태그가 모두 있어야 합니다.

코드:
```
<html>
<header>
<h1>Happy Hours</h1>
<nav>
<p><a href="#">Morning</a> | <a href="#">Afternoon</a> | <a href="#">Evening</a></p>
</nav>
</header>
</html>
```
출력:

마. 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>
```
출력:

지. 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. 양식 태그

다음은 예시와 함께 아래에 설명된 다양한 유형의 양식 태그입니다.

아. 데이터 목록: 이 태그는 사용자가 선택할 수 있도록 사전 정의된 값이 있는 드롭다운처럼 사용됩니다. 아래의 작은 예를 살펴보겠습니다.

코드:
```
<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