HTML5 새 요소

HTML5는 HTML 4.01 버전의 새로운 업그레이드로, 많은 새로운 기능, 고급 기능, 더 나은 페이지 보기 및 증가하는 기술적 요구에 부응하는 기타 여러 개선 사항을 포함하고 있습니다. HTML5에서 가장 많이 사용되고 원하는 요소는

,

,

,

,

,,

,

, 그리고 . HTML 5의 이러한 태그/요소는 더 높은 성능 속도, 효율적인 결과, 더 쉬운 코딩 및 구현을 통해 훨씬 더 사용자 친화적인 인터페이스를 가능하게 하며 전체적으로 레이아웃을 개선하는 데 도움이 됩니다.

HTML5의 새로운 요소 상위 10개

HTML5는 문서 레이아웃을 향상시키는 새로운 요소를 제공합니다.

1.

요소는 문서, 섹션 또는 웹 사이트의 별도 구조를 포함하고 널리 배포되거나 사용 가능하도록 권장되는 페이지의 일부를 지정합니다. 이는 그룹 게시물, 저널 또는 일간 보고서, 온라인 뉴스레터 제출, 고객이 보낸 발언 또는 기타 물질이 없는 대상일 수 있습니다.

예:

<title>Article Element</title>


<article>
<h2 id="EDUCBA">EDUCBA</h2>
<p>EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries. </p>
</article>

출력:

• 위 코드를 확장자가 .html인 파일로 저장하세요.
• 브라우저에서 html 파일을 실행하면 아래 이미지와 같은 결과가 나옵니다.

2.

요소는 분류, 지도, 이미지, 코드 기사 등과 같은 개별 콘텐츠를 나타냅니다.

예:

<title>Figure Element</title>


<p> EDUCBA is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries.
</p>
<figure>
<img  src="/static/imghwm/default1.png" data-src="educba.png" class="lazy" alt="HTML5 새 요소" >
</figure>

출력:

위 코드는 아래 이미지와 같은 출력을 생성합니다.

3.

요소는 이미지에 대한 설명을 추가합니다.

예:

<title>Figure Caption Element</title>


<p> EDUCBA is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries.
</p>
<figure>
<img  src="/static/imghwm/default1.png" data-src="educba.png" class="lazy" alt="HTML5 새 요소" >
<figcaption>EDUCBA (Corporate Bridge Consultancy Pvt Ltd)</figcaption>
</figure>

출력:

위 코드는 아래 이미지와 같이 결과를 표시합니다.

4.

요소는 문서의 헤더나 페이지 섹션을 지정합니다. 단일 문서에서 두 개 이상의 헤더를 정의할 수 있습니다.

예:

<title>Header Element</title>


<article>
<header>
<h1 id="Header-One">Header One</h1>
<h2 id="Header-Two">Header Two</h2>
<h3 id="Header-Three">Header Three</h3>
</header>
<p>The content of the document goes here...</p>
</article>

출력:

위 코드는 아래 이미지와 같이 결과를 표시합니다.

5.

요소는 작성자 정보, 저작권 정보, 연락처, 관련 문서 링크, 사이트맵 등과 같은 정보를 지정합니다.

예:

<title>Footer Element</title>


<footer>
<p>Copyright © 2019 www.educba.com</p>
<p>Contact: <a href="mailto:%5Bemail%C2%A0protected%5D">[email protected]</a>
</p></footer>

출력:

위 코드는 아래 이미지와 같이 결과를 표시합니다.

6.

요소는 문서의 주요 정보, 즉 중요한 정보를 표시하는 데 사용됩니다.

예:

<title>Main Element</title>


<header>
<p>Header information>
</p></header>
<main>
<p>Main Information</p>
<article>
<h2 id="EDUCBA">EDUCBA</h2>
<p>EDUCBA is a leading global provider of skill based education...</p>
</article>
</main>
<footer>
<p>Footer Information>
</p></footer>

출력:

위 코드는 아래 이미지와 같은 출력을 생성합니다.

7.

요소는 사용자를 문서의 특정 텍스트로 끌어들이는 배경색으로 텍스트를 강조하거나 표시합니다.

예:

<title>Mark Element</title>


<article>
<p><mark>EDUCBA</mark> is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries. </p>
</article>

출력:

위 코드는 아래 이미지와 같이 결과를 표시합니다.

8.

요소는 페이지의 탐색 링크를 지정하는 데 사용됩니다. 이러한 링크는 문서의 다른 페이지에 대한 연결을 제공합니다.

예:

<title>Nav Element</title>


<header>
<nav>
<a href="#">HTML</a> |
<a href="#">CSS</a> |
<a href="#">JAVA</a> |
<a href="#">PHP</a> |
<a href="#">PYTHON</a>
</nav>
</header>

출력:

위 코드는 아래 이미지와 같은 출력을 생성합니다.

9.

요소는 문서의 독립형 섹션 또는 특정 영역을 정의합니다.

예:

<title>Section Element</title>


<article>
<h2 id="Main-Article"> Main Article </h2>
<p>Content of the main header will be displayed here...</p>
<section>
<h2 id="Section-One">Section One</h2>
<p>Content of the first section will be displayed...</p>
</section>
<section>
<h2 id="Section-Two">Section Two</h2>
<p>Content of the second section will be displayed...</p>
</section>
</article>

출력:

위 코드는 아래 이미지와 같이 결과를 표시합니다.

10.

The

tag is a subpart of the

tag which provides the text that can be displayed or hidden when the user clicks the heading.

Example:

<title>Summary Element</title>


<details>
<summary>
EDUCBA - Corporate Bridge Consultancy Pvt Ltd
</summary>
<p>It is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries.</p>
</details>

Output:

When you run the above code, it will display the result as shown below,

As shown in the image, click on the heading, and it will display the hidden text shown below the image,

Conclusion

So far, we have seen how new HTML5 elements are useful for various website creation tasks. These new elements read the document in a more accurate & standard way and develop more complex and efficient web apps. The new HTML5 elements give some additional extra features to generate interactive websites.

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