w Trusted engineering partner for digital transformation

w
w
. Semantic elements in HTML
g
r
i
d Presenter- Shivang Pandey
d
y
n
a
m
i
c
s
.
c
o
m
 What is semantic tags in HTML?
w
w
w Give meaning to our web content, making it more
. accessible and understandable both to users and
g
r search engines.
i
d
d
y
n
a
m
i
c
s
.
c
o
m
Semantic HTML vs. Non-Semantic HTML

Semantic Non-Semantic

Semantic HTML tags describe the Non-semantic HTML tags are generic and
meaning of content. primarily used for styling and layout
purposes.
Semantic HTML code provides clear
descriptions that even non-coders can Non-semantic HTML tags don’t convey
understand. any specific meaning about the content
itself.

3
This is a simple text slide

4
 Why Are Semantic HTML Tags Important?

Better user experience and Better SEO performance

accessibility
∙ Semantic layouts help screen readers understand and ∙ Semantic tags help search engines understand what
read the content clearly. each part of your webpage means.
∙ They make it easier for people with disabilities to ∙ This can improve how our site shows up in search
navigate the website. results.

Future-proof code Clear communication

∙ Semantic HTML follows standard rules that make your ∙ Semantic HTML makes it easier for developers,
code cleaner and easier to understand. designers, and SEOs to understand each section of the
∙ This helps your website work better with new website.
technologies in the future. ∙ This helps in maintaining and updating the site more
efficiently.

5
Semantic HTML Tags for Structure
<header> -Indicates the introductory or navigational content <nav> -Defines a block of navigation links.
of a webpage or a section. It often includes elements like
headings, navigation menus, search bars, and logo.

6
Semantic HTML Tags for Structure
<article> - Defines standalone content that we can reuse or <section> -Groups related content that shares a common
distribute separately, like blog posts, product reviews, and theme or purpose.
news articles.

7
Semantic HTML Tags for Structure
<aside> -Shows extra or side content that adds more <footer> -Shows the bottom part of a page or section, usually
information to the main part of the page. with links, contact details, or copyright info.

<aside>
<p>This is a sidebar, or
example a terminology
definition or a short
background to a historical
figure. </p>

</aside>

8
Semantic HTML Tags for Structure
<details> - Creates a collapsible section that users can expand to view more info.

<figure> -Used for media content (like images, charts, or code snippets) that’s referenced in the main content.

<figcaption> -Gives a caption or description for a <figure> element.

<main> -Contains the main content of the page, unique and central to that page only.

<mark> - Highlights or marks text as important or relevant (usually with a yellow background by default).

<summary>A visible label for the <details> element — users click it to show or hide content.

<time> - Represents a specific time or date, useful for events, posts, or scheduling.

9
Semantic HTML Tags for Text
<small> - Displays less important or fine print text (e.g., disclaimers, copyright).

<strong> - Indicates strong importance (bold by default).

<em> - Emphasizes text (italic by default).

<abbr>- Defines an abbreviation.

<address> - Provides contact information.

<code>- Represents a piece of computer code.

<blockquote> - Indicates a longer quoted section.

<q>- Short inline quote.

10
Semantic HTML Tags Layout

11
HTML Code block using Semantic Elements

12
Semantic HTML Best Practices

Use the Right Elements for the Right Don't Use Semantic HTML Tags for
Purpose Styling
∙ Always use semantic elements that clearly ∙ Use them only when the tag matches the
show the meaning and role of the content. meaning or role of the content.
∙ They make it easier for people with ∙ For example, don’t use <h1> to <h6> tags just
disabilities to navigate the website. to make text large.

Nest tags correctly

∙ Make sure to nest the semantic tags in the

correct order to maintain a logical structure.
∙ use the <main>element only once per page.
And make sure not to nest it within other
semantic tags like <header>, <footer>,
<article>, or <aside>.
13
Conclusion
Semantic HTML clearly defines the purpose of each part of a webpage.

It improves accessibility for screen readers and assistive tools.

Helps search engines better understand and index content (improves SEO).

Makes code more readable and easier to maintain for developers.

Follows web standards, ensuring future compatibility.

Encourages better team collaboration between developers, designers, and

SEOs.

Even without content, semantic tags provide a meaningful page structure.

trusted engineering partner for digital transformation

Thank you!
Grid Dynamics Holdings, Inc.

5000 Executive Parkway,

Suite 520 / San Ramon, CA
+1 650-523-5000
[email protected]
www.griddynamics.com
Q&A