Cot6d

1. 1
What are Semantic Elements?
● Clearly describe their meaning in a human- and machine-readable way.
● A semantic Web allows data to be shared and reused across applications, enterprises, and
communities.

2. 2
Non-semantic elements
● Tells nothing about its content.
● E.g. <div>, <span>

3. 3
Non Semantic code
● <div id="nav">
● <div class="header">
● <div id="footer">

4. 4
Semantic elements
● Clearly define what kind of content is present inside
● E.g. <form>, <table>, and <article>

5. 5
HTML <section> Element
styles
● Defines a section in a document.
● Typically a container with some content and a heading
● E.g.
<section>
<h1>About us</h1>
<p>At Newton School, we are empowering people to become amazing full-stack
developers that allow them to earn 5-40 Lakh per annum salary in top-notch
companies in India.</p>
</section>

6. 6
HTML <article> Element
styles
● Defines an independent, self-contained content.
● Something that can exist independently from the rest of the web site.
● E.g.
<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla.
Firefox has been the second most popular web browser since January,
2018.</p>
</article>

7. 7
HTML <header> Element
styles
● A container for header of a web application
● Usually has a logo, headings, set of navigational links etc.
● E.g.
<header>
<h1>Newton School</h1>
<ul>
<li><a href="/home">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact us</a></li>
</ul>
</header>

8. 8
HTML <footer> Element
styles
● Defines a footer for a document or section
● Usually contains copyright information, contact information, related links, back to top links etc.
● E.g.
<footer>
<p>Author: Hege Refsnes</p>
<p><a href="mailto:hege@example.com">hege@example.com</a></p>
<p>&copy;Company A</p>
</footer>

9. 9
HTML <nav> Element
styles
● Defines a set of navigation links.
● Usually the links to different pages/sections of the website.
● E.g.
<nav>
<a href="/home">Home</a> |
<a href="/about">About us</a> |
<a href="/pricing">Pricing</a> |
<a href="/contact">Contact us</a>
</nav>

10. 10
HTML <aside> Element
styles
● Content that is not part of the flow of the text in which it appears
● However still related in some way
● E.g.
<aside>
<p>This is a sidebar, for example a terminology definition or a short
background to a historical figure.</p>
</aside>

11. 11
Semantic elements overview
styles

12. 12
HTML <time> Element
styles
● 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.
● E.g.
<time datetime="2017-10-31T11:21:00+02:00">Tuesday, 31 October 2017</time>

13. Thank
You