HTML5 의미 요소-HTML 튜토리얼-php.cn

다음 글에서는 HTML5의 다양한 의미 요소에 대해 설명합니다. 의미론은 태그 이름에 따라 동일한 기능을 묘사하고 수행하는 다양한 유형의 태그에 관한 것입니다. 태그의 기능은 사용자가 이해할 수 있는 이름/형식으로 된 이름으로 쉽게 이해할 수 있습니다. HTML의 대부분의 요소는 일반적으로 의미 요소입니다.

HTML5 의미 요소의 장점

의미적 요소의 장점은 다음과 같습니다.

코드 이해가 쉽습니다.
빠르고 적절하게 유지관리가 가능합니다.
태그에 대해 특별히 설명을 추가할 필요는 없습니다.

HTML5의 다양한 의미 요소

이제 의미론적 요소를 살펴보겠습니다.

1.

이 태그를 통해 태그 내부의 데이터가 특히 유사한 콘텐츠에 대한 것임을 알 수 있습니다. 이는 우리가 일반적으로 갖고 있는 다양한 유형의 기사에 따라 달라집니다. 블로그, 포럼, 신문 칼럼 기사 등이 될 수 있습니다.

코드:

<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>

로그인 후 복사

출력:

HTML5 의미 요소

2. <섹션>

전체 데이터의 단면적인 내용을 제공하는 태그입니다. 기사와 섹션 태그를 모두 사용하는 방법을 알고 있으면 해당 태그를 각 태그 내에서 사용할 수 있습니다. 즉, 섹션 태그를 기사 태그 내부에서 사용할 수 있으며 그 반대도 가능합니다.

코드:

<html>
<body>
<section>The section here is about:
<p><h4> Learning and practising</h4> </p>
</section>
</body>
</html>

로그인 후 복사

출력:

HTML5 의미 요소

3. <헤더>

이 태그는 모든 헤더 데이터를 제공합니다. 헤더 형식에 배치하려는 모든 데이터는 이 헤더 태그 아래에 사용됩니다. 그리고 이 태그는 전체 HTML 스크립팅에서 여러 번 사용될 수 있습니다.

코드:

<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>

로그인 후 복사

출력:

HTML5 의미 요소

4. <바닥글>

이것은 HTML 스크립트의 바닥글 섹션입니다. 일반적으로 우리는 모든 제안에 대한 "조건 적용"과 같은 모든 제안에서 찾은 모든 저작권 데이터와 작은 섹션을 볼 수 있습니다. 그래서 이러한 내용은 바닥글 태그 아래에 정의되어 있습니다.

코드:

<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>

로그인 후 복사

출력:

HTML5 의미 요소

5.

이 태그는 탐색 요소를 제공합니다. 일반적으로 이 태그를 통해 한 페이지에서 다른 페이지로 이동하려는 HTML 문서 스크립팅의 URL입니다. 이 태그 아래에 제공되는 모든 데이터는 하이퍼링크로 제공됩니다. 이러한 하이퍼링크는 한 섹션에서 다른 섹션으로 이동하는 데 유용할 수 있습니다.

코드:

<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>

로그인 후 복사

출력:

HTML5 의미 요소

연습하면서 해당 링크를 클릭하고 클릭 시 하이퍼링크 색상이 어떻게 변하는지 확인해 보세요.

6. <제쳐두고>

이것은 HTML 문서의 측면에 데이터를 표시하는 데 사용되는 태그입니다. 많은 웹사이트에서 이 side 태그를 사용하여 표시되는 사이드바에 존재하는 콘텐츠를 찾을 수 있습니다. 이 내용은 문서에 있는 다른 데이터와 일치해야 합니다.

코드:

<html>
<body>
<p>How aside tag is used </p>
<aside>
<h4>Inside aside tag</h4>
<p>Content inside aside tag</p>
</aside>
</body>
</html>

로그인 후 복사

출력:

HTML5 의미 요소

정확한 내용을 완전히 동일한 방식으로 지정할 수는 없습니다. 전체 HTML 페이지를 사용하는 동안에만 명확하게 문서화하고 이해할 수 있습니다.

7.

이 태그는 이미지를 첨부할 것임을 지정합니다. 이 태그를 사용하면 이미지 소스를 지정하고 gif나 이미지를 표시할 수 있습니다.

코드:

<html>
<body>
<figure>
<img src="">
</figure>
</body>
</html>

로그인 후 복사

위에서 언급했듯이 Figure 태그를 이렇게 정의할 수 있습니다. Figure 태그 내에서 source 태그를 사용하여 이미지 명령을 지정할 수 있습니다. 이 그림 태그 안에는 그림 캡션 태그를 사용할 수 있습니다.

8. <그림캡션>

제공되는 이미지 아래에 캡션을 추가하는 데 사용되는 태그입니다. 그림 태그 내부에서 사용할 수 있습니다. 그 사용법은 아래 예에서 볼 수 있습니다.

<html>
<body>
<figure>
<img src="">
<figcaption>This is description of the image attached.</figcaption>
</figure>
</body>
</html>

로그인 후 복사

이미지 소스를 제공하여 동일한 실행을 시도하고 출력이 어떻게 표시되는지 확인할 수 있습니다.

9.

이 태그는 HTML 사이트의 모든 속성과 전체 콘텐츠를 지정합니다. 고유한 내용이 모두 포함되어 있습니다. 이 특정 태그에 대해 주목해야 할 중요한 점은 이 태그가 전체 페이지 생성에서 한 번만 사용될 수 있다는 것입니다. 다른 태그는 웹페이지를 생성할 때 두 번 이상 사용할 수 있지만 이 기본 태그는 일회용 태그입니다.

코드:

<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>

로그인 후 복사

출력:

HTML5 의미 요소

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:

HTML5 의미 요소

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:

HTML5 의미 요소

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:

HTML5 의미 요소

Output 2:

HTML5 의미 요소

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:

HTML5 의미 요소

We had highlighted the arrow in the above output, as we get our output 2 once we expand it.

Output 2:

HTML5 의미 요소

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:

HTML5 의미 요소

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:

HTML5 의미 요소

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:

HTML5 의미 요소

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:

HTML5 의미 요소

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.

위 내용은 HTML5 의미 요소의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!