HTML
Semantic
Elements
-DISCUSSED BY:
MR. MARK BAZAR
First, what is a
semantic elements
really is?...
“Semantic
element is
an element
with a
meaning.”
Contents…..
What are Semantic Elements?
HTML <section> Element
HTML <figure> and <figcaption>
Elements
Why Semantic Elements?
HTML <summary> Tag
What are
Semantic
Elements?
What are Semantic Elements?
Many web sites contain HTML code
like: <div id="nav"> <div
class="header"> <div id="footer"> to
indicate navigation, header, and footer.
In HTML there are some semantic
elements that can be used to define
different parts of a web page:
Semantic Elements &
Non-Semantic Elements
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.
HTML
<section>
Element
HTML <section> Element
The <section> element defines a section
in a document.
According to W3C's HTML
documentation: "A section is a thematic
grouping of content, typically with a
heading."
LET’S TRY CODING
THIS ONE….
THE OUTCOME
SHOULD BE LIKE THIS!
HTML
Semantic
<figure> and
Elements
<figcaption>
in HTML
Elements
HTML <figure> and
<figcaption> Elements
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.
HTML
<summary>
Tag
HTML <summary> Tag
The <summary> tag defines a
visible heading for the <details>
element. The heading can be
clicked to view/hide the details.
Y <!DOCTYPE html>
<html>
O <head>
<style>
U
details > summary {
padding: 4px;
width: 200px;
R background-color: #eeeeee;
border: none;
box-shadow: 1px 1px 2px #bbbbbb;
cursor: pointer;
T }
details > p {
U background-color: #eeeeee;
padding: 4px;
R
margin: 0;
box-shadow: 1px 1px 2px #bbbbbb;
}
N </style>
Y
O
</head>
U <body>
<h1>The details and summary elements + CSS</h1>
R <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
T events.</p>
</details>
U </body>
</html>
R
N
XPECTED OUTPUT
HTML
<main>
Tag
HTML <main> Tag
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.
<!DOCTYPE html>
Y <html>
<head>
O <style>
main {
U
margin: 0;
padding: 5px;
background-color: lightgray;
R }
main > h1, p, .browser {
margin: 10px;
padding: 5px;
}
T .browser {
background: white;
U }
.browser > h2, p {
margin: 4px;
R }
font-size: 90%;
N </style>
</head>
Y <body>
<h1>The main element - Styled with CSS</h1>
O <main>
<h1>Most Popular Browsers</h1>
U <p>dummy text dummy text dummy text.</p>
<article class="browser">
<h2>Google Chrome</h2>
R <p>dummy text dummy text dummy text.</p>
</article>
<article class="browser">
<h2>Mozilla Firefox</h2>
T
<p>dummy text dummy text dummy text.</p>
</article>
<article class="browser">
U <h2>Microsoft Edge</h2>
<p>dummy text dummy text dummy text.</p>
R </article>
</main>
</body>
N </html>
XPECTED OUTPUT
Anyone?...
So, why semantic elements is better
than the non-semantic elements??
~End of lesson~
