Semantic HTML

Unleashing the Power of HTML Semantic Elements

Table of Content
●
What Is Semantic HTML ?

●
Why to use Semantic HTML ?

●
Structure / Text elements .

●
Common Semantic Elements & Tags.

●
Best practices for Semantic HTML.

●
Activity : Semantics Vs. Divs
What is Semantic HTML ?

●
Semantic :
Semantics is like the hidden meaning behind words and symbols. It's what
makes us understand what someone is trying to say or what a sign is telling
us.

●
Semantic HTML :
Semantic HTML, also known as semantic markup, refers to the use of
HTML tags that convey the meaning—or semantics—of the content
contained within them
By adding semantic HTML tags to your pages, you provide additional
information that helps define the roles and relative importance of the
different parts of your page.
Improve Accessibility
Why we use it ?
Semantic tags allow readers with disabilities
to understand content better because their
screen readers will communicate content
more accurately.

Enhance SEO Code Maintainability

It offer a clear content structure that helps It Provide a logical structure that developers
search engines rank and display the website can quickly maintain , this make code easier.
effectively.

Future Compatibility
It ensures website remains adaptable to
new technologies and devices, thanks to its
content-focused structure.
Structure Elements Text Elements

1) Many semantic HTML tags

1) The semantic HTML tags for text are
communicate the layout of a page.
HTML tags that—besides the formatting
2) These “structural” tags were
2) Also convey the semantic function of
introduced in HTML5.
the text they contain.
3) known as semantic HTML5 tags or
elements. 3) From previous versions of HTML

4) Example : <main> , <nav> , <footer> 4) Example : <em> , <p> , <q>, <code>

Common HTML Semantics
<header> : Defines the header section of a webpage.

<nav> : Represents a navigation menu on a webpage.

<main> : Contains the primary content of the webpage.

<article> : Self-contained piece of content that could be distributed

<section> : Defines a thematic section of content within a webpage.

<aside> : Represents content related to the main content, like sidebars

<footer> : Defines the footer section of a webpage

<time> : Represents a specific time or a range of time.

<figure> : is used to encapsulate media content

<figcaption> : provides a caption for the media.

 Best Practices

01 02 03 04 05

Use Semantic elements Keep your code clean

Make sure to use
to structure your HTML and maintainable
appropriate tag for
code (without repetition)
each type of content

Avoid using Non-

Semantic elements like Test your HTML file for
<div> or <span>for accessibility , and on
structure different browsers
Activity Time

1) Kindly , every 2 sit into Pairs.

2) We have an HTML file.

3) It contains only <div>...</div> elements.

4) Every pair should discuss one part of it.

5) Then you should tell me which <div> is wrong and why

6) And tell me in which Semantic element we should replace it.

 In conclusion, using semantic HTML enriches web content by
providing structure, accessibility, and context, leading to a more
user-friendly and inclusive online experience.