Scribd
Upload
12 views

HTML 5

The document discusses various semantic HTML5 elements such as <section>, <article>, <header>, <footer>, <nav>, <aside>, <figure>, <figcaption>, <details>, <summary>, <main>, <mark>, and <time>. It provides the definition and purpose of each element along with examples of proper usage.

Uploaded by

siddhiarjunshinde5
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
12 views

HTML 5

The document discusses various semantic HTML5 elements such as <section>, <article>, <header>, <footer>, <nav>, <aside>, <figure>, <figcaption>, <details>, <summary>, <main>, <mark>, and <time>. It provides the definition and purpose of each element along with examples of proper usage.

Uploaded by

siddhiarjunshinde5
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

Semantic Elements

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

Semantic Elements in HTML5


Many web sites contain HTML code like: <div id="nav"> <div class="header"> <div
id="footer"> to indicate navigation, header, and footer.

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>

The <article> element specifies independent, self-contained content.

An article should make sense on its own, and it should be possible to distribute it
independently from the rest of the web site.

Examples of where the <article> element can be used:

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

A <header> element typically contains:

• one or more heading elements (<h1> - <h6>)


• logo or icon
• authorship information

Ex. A header for an <article>:

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

The <footer> element defines a footer for a document or section.

A <footer> element typically contains:

• authorship information
• copyright information
• contact information
• sitemap
• back to top links
• related documents

You can have several <footer> elements in one document.

Ex.
<footer>
<p>Author: Hege Refsnes</p>
<p><a href="mailto:[email protected]">[email protected]</a></p>
</footer>

5) <nav>

The <nav> element defines a set of navigation links.

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

The <aside> content should be indirectly related to the surrounding content.

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>

7) <figure> & <figcaption>

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.

The <img> element defines the actual image/illustration.

Ex.
<figure>
<img src="pic_trulli.jpg" alt="Trulli">
<figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>

8) <summary> & <details>

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 <main> tag specifies the main content of a document.

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>

The <mark> tag defines text that should be marked or highlighted.

Ex.

<p>Do not forget to buy <mark>milk</mark> today.</p>

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>

<p>I have a date on <time datetime="2008-11-14 20:00">Children’s day</time>.</p>

You might also like