Home >Web Front-end >HTML Tutorial >Html5 New Elements

Html5 New Elements

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
2024-09-04 16:36:061350browse

HTML5 is a new upgrade from HTML 4.01 version that has many new features, advanced functional features, better page views, and many other improvements to match the growing technological needs. The most used and desired elements of HTML5 are

,
,
,
,
,,
,

Html5 New Elements

Top 10 HTML5 New Elements

HTML5 provides new elements to enhance the layout of the document.

1.

The

element specifies a portion of a page that includes a separate structure in a document, section, or website and is recommended to be widely distributed or usable. This may be a group post, a journal or daily paper report, a submission to an online newsletter, a remark sent by a customer, or any other substance-free object.

Example:



<title>Article Element</title>


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

Output:

  • Save the above code in a file with a .html extension.
  • Run the html file in a browser, and you will get the output shown in the image below.

Html5 New Elements

2.

The

element indicates individual content, such as categorizations, maps, images, code articles, etc.

Example:



<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 New Elements" >
</figure>

Output:

The above code will produce the output as shown in the below image,

Html5 New Elements

3.

The

element adds a description for the image.

Example:



<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 New Elements" >
<figcaption>EDUCBA (Corporate Bridge Consultancy Pvt Ltd)</figcaption>
</figure>

Output:

The above code displays the result as shown in the below image,

Html5 New Elements

4.

The

element specifies the header for a document or a section on the page. You can define more than one header in a single document.

Example:



<title>Header Element</title>


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

Output:

The above code displays the result as shown in the below image,

Html5 New Elements

5.

The

element specifies information such as author information, copyright information, contact, links to related documents, sitemap, and many more.

Example:



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

Output:

The above code displays the result as shown in the below image,

Html5 New Elements

6.

The

element is used for displaying a document’s main, i.e., important information.

Example:



<title>Main Element</title>


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

Output:

The above code will produce the output as shown in the below image,

Html5 New Elements

7.

The element highlights or marks the text with the background color that attracts the user to a particular text on the document.

Example:



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

Output:

The above code displays the result as shown in the below image,

Html5 New Elements

8.

The

Example:



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

Output:

The above code will produce the output as shown in the below image,

Html5 New Elements

9.

The

element defines the document’s standalone section or specific region.

Example:



<title>Section Element</title>


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

Output:

The above code displays the result as shown in the below image,

Html5 New Elements

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,

Html5 New Elements

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

Html5 New Elements

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.

The above is the detailed content of Html5 New Elements. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article:Scrollbar ColorNext article:Scrollbar Color