1. HTML 5
SEMANTIC
ELEMENTS

2. HTML INTRO
HTML(Hypertext Markup Language) is the standard markup language for creating web pages and web applications.
HTML elements are the building blocks of HTML pages.
Original HTML had 20 tags and displayed simple text with basic markup for formatting.

3. HTML5 SEMANTICS ELEMENTS
Semantics is the study of the meanings of words and phrases in a language.
i.e. Semantic elements = elements with a meaning.
A semantic element clearly describes its meaning to both the browser and the developer.
Examples of semantic elements : <img> , <form> , <table>
i.e. these elements define its contents clearly.

4. NON-SEMANTICS ELEMENTS
Non-semantic elements generally tells nothing much about its content.
Traditionally developers have implemented non-semantic elements with a class attribute to define the structure and express the meaning of content.
Examples of non-semantics elements are : <div> and <span>
i.e. these elements tells nothing about its content.

5. HTML4 AND HTML5 COMPARISON

6. SEMANTIC TAGS
Semantic elements are used to clearly define different parts of a web page:
<header>
<nav>
<section>
<article>
<aside>
<footer>
Many more...

7. Why Semantic Elements?
HTML5 semantic elements help structure the code we
create, and therefore making it more readable and easier to maintain.

8. HTML5 <header> ELEMENT
The <header> element specifies a header for a document or a section.
For introductory content <header> element should be used as container.
We can have several <header> elements in one document.

9. HTML5 <footer> ELEMENT
The <footer> element specifies a footer for a document or a section.
A footer typically contains the author of the document, copyright information, links to terms of use, contact information, etc.
We can have several <footer> elements in one document.

10. HTML5 <nav> ELEMENT
The <nav> element define a set of navigation links.
The <nav> element is intended for major block of navigation links.

11. HTML5 <section> ELEMENT
"A section is a thematic grouping of content, typically with a heading."
The <section> element defines a section in a document.
Example: A home page could normally be divided into sections for introduction, content, and contact information.

12. HTML5 <aside> ELEMENT
The <aside> element defines the content which is aside from the content it is placed in.
Example:
(like a sidebar)

13. HTML5 <article> ELEMENT
The <article> element specifies independent, self-contained content.
An article should make sense on its own, and it should be possible to read it independently from the rest of the web site.
Examples of where an <article> element can be used:
Blog post
Newspaper article

14. For queries & information
THANK YOU!
For queries & information