HTML 5
HTML 5
A semantic element clearly describes its meaning to both the browser and the developer.
Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.
Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its content
In HTML5 there are some semantic elements that can be used to define different parts of a
web page:
• <article>
• <aside>
• <details>
• <figcaption>
• <figure>
• <footer>
• <header>
• <main>
• <mark>
• <nav>
• <section>
• <summary>
• <time>
1)<section>
The <section> element defines a section in a document.
Examples of where a <section> element can be used:
• Chapters
• Introduction
• News items
• Contact information
A web page could normally be split into sections for introduction, content, and contact
information.
Ex.
<!DOCTYPE html>
<html>
<body>
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an international organization working on issues
regarding the conservation, research and restoration of the environment, formerly named the World
Wildlife Fund. WWF was founded in 1961.</p>
</section>
<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated
from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same
year of the establishment of WWF.</p>
</section>
</body>
</html>
2) <article>
An article should make sense on its own, and it should be possible to distribute it
independently from the rest of the web site.
• Forum posts
• Blog posts
• User comments
• Product cards
• Newspaper articles
Ex.
<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's
most popular web browser today!</p>
</article>
3) <header>
The <header> element represents a container for introductory content or a set of navigational
links.
<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation of our planet's natural environment,
and build a future in which humans live in harmony with nature.</p>
</article>
4) <footer>
• authorship information
• copyright information
• contact information
• sitemap
• back to top links
• related documents
Ex.
<footer>
<p>Author: Hege Refsnes</p>
<p><a href="mailto:[email protected]">[email protected]</a></p>
</footer>
5) <nav>
Ex.
<nav>
<a href=" ">HTML</a> |
<a href=" ">CSS</a> |
<a href=" ">JavaScript</a> |
<a href=" ">jQuery</a>
</nav>
6) <aside>
The <aside> element defines some content aside from the content it is placed in (like a
sidebar).
Ex.
<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions,
international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>
The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code
listings, etc.
The <figcaption> tag defines a caption for a <figure> element. The <figcaption>
element can be placed as the first or as the last child of a <figure> element.
Ex.
<figure>
<img src="pic_trulli.jpg" alt="Trulli">
<figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>
The <summary> tag defines a visible heading for the <details> element. The heading can be
clicked to view/hide the details.
Ex.
<details>
<summary>Epcot Center</summary>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions,
international pavilions, award-winning fireworks and seasonal special events.</p>
</details>
9)<main>
The content inside the <main> element should be unique to the document. It should not
contain any content that is repeated across documents such as sidebars, navigation links,
copyright information, site logos, and search forms.
Ex.
<main>
<h1>Most Popular Browsers</h1>
<p>Chrome, Firefox, and Edge are the most used browsers today.</p>
<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the
world's most popular web browser today!</p>
</article>
</main>
10) <mark>
Ex.
11)<time>
The <time> tag defines a specific time (or datetime).
The datetime attribute of this element is used translate the time into a machine-readable
format so that browsers can offer to add date reminders through the user's calendar, and
search engines can produce smarter search results.
Ex.
<p>Open from <time>10:00</time> to <time>21:00</time> every weekday.</p>