Scribd
Upload
5 views

4.learn HTML - Semantic HTML Cheatsheet

Semantic HTML elements introduce meaning and better describe the purpose of content. Key semantic elements include <header> for content at the top of the page, <nav> for navigation links, <main> for main content, and <footer> for footer content. Elements like <video>, <audio>, and <embed> allow embedding of different media types. The <figure> element wraps images and other media, while <figcaption> provides a description. Sections define themed groups with <section>, and independent related content can be wrapped in <article>. The <aside> element marks additional information related to the main content.

Uploaded by

Lucas Lohrmann
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

4.learn HTML - Semantic HTML Cheatsheet

Semantic HTML elements introduce meaning and better describe the purpose of content. Key semantic elements include <header> for content at the top of the page, <nav> for navigation links, <main> for main content, and <footer> for footer content. Elements like <video>, <audio>, and <embed> allow embedding of different media types. The <figure> element wraps images and other media, while <figcaption> provides a description. Sections define themed groups with <section>, and independent related content can be wrapped in <article>. The <aside> element marks additional information related to the main content.

Uploaded by

Lucas Lohrmann
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 <!--Non Semantic HTML-->
write. Before Semantic HTML the elements didn’t have
<div id="footer">
any meaning as to what it does or what content goes in
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
browsers exactly what it does and what content should <!--Semantic HTML-->
go in it. <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> <!--Video Tag-->
and <embed> . <video> allows us to add videos to
<video src="4kvideo.mp4">video not
our website. <audio> allows us to implement audio
into our website. <embed> can be used to implement supported</video>
any type of media. These elements are universal in that
they all use the src attribute to link the source of the <!--Audio Tag-->
content. <video> and <audio> requires a closing
<audio src="koreanhiphop.mp3"></audio>
tag while <embed> is a self-closing tag.

<!--Embed tag-->
<embed src="babyyoda.gif"/>

<figure> and <figcaption>


The <figure> element is used to encapsulate media <figure>
such as an image, diagram. or code snippet. The
<img src="qwerty.jpg">
<figcaption> element is used to describe the media
encapsulated within the <figure> element. <figcaption>The image shows the layout
Developers will normally use <figcaption> within the of a qwerty keyboard.</figcaption>
<figure> element to group the media and </figure>
description. This way, if 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 <section>
chapters, headings, or any other area of the document
<!--defines theme-->
with the same theme. <article> holds content that
makes sense on its own such as articles, blogs, and <h2>Top Sports league in America</h2>
comments. Generally developers will use <section> <!--writes independent content relating
to define a theme for the webpage and use <article>
to that theme-->
to write independent content for that theme. This does
<article>
not 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 <article>
information that can enhance another element but isn’t
<!--Main Content-->
required in order to understand the 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
article an ad would appear advertising a dog grooming </aside>
product.

You might also like