Scribd
Upload
7 views2 pages

Semantic HTML

The document explains the concept of Semantic HTML, which provides meaning to HTML elements, making them more descriptive and organized. It covers various semantic elements such as <header>, <nav>, <main>, <footer>, <figure>, <figcaption>, <section>, <article>, and <aside>, detailing their purposes and proper usage. Additionally, it discusses how to embed media using <video>, <audio>, and <embed> tags.

Uploaded by

Rupesh Saha
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views2 pages

Semantic HTML

The document explains the concept of Semantic HTML, which provides meaning to HTML elements, making them more descriptive and organized. It covers various semantic elements such as <header>, <nav>, <main>, <footer>, <figure>, <figcaption>, <section>, <article>, and <aside>, detailing their purposes and proper usage. Additionally, it discusses how to embed media using <video>, <audio>, and <embed> tags.

Uploaded by

Rupesh Saha
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Cheatsheets / Learn HTML

Semantic HTML
Semantic HTML
Semantic HTML introduces meaning to the code we
write. Before Semantic HTML the elements didn’t have <!--Non Semantic HTML-->
any meaning as to what it does or what content goes in <div id="footer">
it. An element such as <div> was used as a general- <p>this is a footer</p>
purpose element to create things from headers to </div>
footers to articles. With Semantic HTML we were
introduced to elements that tell developers and
<!--Semantic HTML-->
browsers exactly what it does and what content should
<footer>
go in it.
<p>this is a footer</p>
</footer>

Element Placement
Semantic HTML introduces elements that can tell
developers exactly what the element does or where it’s
placed based on the name of that element. Some of
these elements are <header> , <nav> , <main> , and
<footer> . <header> describes the content at the top of
the page <body> . It may include a logo, navigational links
or a search bar. <nav> encapsulates the page’s
navigational links. It is often placed inside the <header>
or <footer> . <main> encapsulates the main content of a
page between the header/navigation and the footer
areas. <footer> includes the page’s footer content at
the bottom of the <body> .

Embedding media
Semantic HTML introduces us to <video> , <audio> and
<embed> . <video> allows us to add videos to our website. <!--Video Tag-->
<audio> allows us to implement audio into our website. <video src="4kvideo.mp4">video not
<embed> can be used to implement any type of media. supported</video>
These elements are universal in that they all use the
src attribute to link the source of the content. <video>
<!--Audio Tag-->
and <audio> requires a closing tag while <embed> is a
<audio src="koreanhiphop.mp3"></audio>
self-closing tag.

<!--Embed tag-->
<embed src="babyyoda.gif"/>
<figure> and <figcaption>
The <figure> element is used to encapsulate media
such as an image, diagram. or code snippet. The <figure>
<figcaption> element is used to describe the media <img src="qwerty.jpg">
encapsulated within the <figure> element. Developers <figcaption>The image shows the layout
will normally use <figcaption> within the <figure> of a qwerty keyboard.</figcaption>
element to group the media and description. This way, if
</figure>
a developer decides to change the position of the
media, the description will follow along with it.

<section> and <article>


<section> defines elements in a document, such as
chapters, headings, or any other area of the document <section>
with the same theme. <article> holds content that <!--defines theme-->
makes sense on its own such as articles, blogs, and <h2>Top Sports league in America</h2>
comments. Generally developers will use <section> to <!--writes independent content relating
define a theme for the webpage and use <article> to
to that theme-->
write independent content for that theme. This does not
<article>
mean that <article> has to be used with <section> .
<p>One of the top sports league is
the nba.</p>
</article>
</section>

<aside> Aside Element


The <aside> element is used to mark additional
information that can enhance another element but isn’t <article>
required in order to understand the main content. <!--Main Content-->
Usually, this information would be in a sidebar or a </article>
location where it doesn’t obstruct the main piece of <aside>
content. An example of this would be an article that
<!--Additional information-->
discusses how to take care of a dog and next to the
</aside>
article an ad would appear advertising a dog grooming
product.

You might also like