Scribd
Upload
15 views

Learn HTML - Semantic HTML Cheatsheet - Codecademy

Semantic HTML introduces elements that provide meaning about the content and purpose of elements. Some key semantic elements are <header>, <nav>, <main>, and <footer> which describe the main sections of a page. Media elements like <video>, <audio>, and <embed> can be used to include different media types. Grouping elements <figure> and <figcaption> can encapsulate and describe images and other media. Sections <section> and articles <article> define themes and independent content within a page.

Uploaded by

Von
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
15 views

Learn HTML - Semantic HTML Cheatsheet - Codecademy

Semantic HTML introduces elements that provide meaning about the content and purpose of elements. Some key semantic elements are <header>, <nav>, <main>, and <footer> which describe the main sections of a page. Media elements like <video>, <audio>, and <embed> can be used to include different media types. Grouping elements <figure> and <figcaption> can encapsulate and describe images and other media. Sections <section> and articles <article> define themes and independent content within a page.

Uploaded by

Von
Copyright
© © All Rights Reserved
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. <!--Non Semantic HTML-->
Before Semantic HTML the elements didn’t have any meaning
<div id="footer">
as to what it does or what content goes in it. An element such
as <div> was used as a general-purpose element to create <p>this is a footer</p>
things from headers to footers to articles. With Semantic </div>
HTML we were introduced to elements that tell developers
and browsers exactly what it does and what content should
go in it. <!--Semantic HTML-->
<footer>
<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 <!--Video Tag-->


<embed> . <video> allows us to add videos to our
<video src="4kvideo.mp4">video not
website. <audio> allows us to implement audio into our
website. <embed> can be used to implement any type of
supported</video>
media. 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 <figure>


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

<section> and <article>

<section> defines elements in a document, such as <section>


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


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

Print Share

You might also like