Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
271 views

Learn HTML - Semantic HTML Cheatsheet - Codecademy

Semantic HTML introduces meaning to code elements. Elements like <div> were previously non-semantic, but new elements like <header>, <nav>, <main>, and <footer> describe the purpose and placement of content. Semantic elements also allow embedding media like <video> and <audio>, and grouping related content with <figure> and <figcaption>. Sections <section> define themes while <article> contains independent content, and <aside> marks additional information.

Uploaded by

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

Learn HTML - Semantic HTML Cheatsheet - Codecademy

Semantic HTML introduces meaning to code elements. Elements like <div> were previously non-semantic, but new elements like <header>, <nav>, <main>, and <footer> describe the purpose and placement of content. Semantic elements also allow embedding media like <video> and <audio>, and grouping related content with <figure> and <figcaption>. Sections <section> define themes while <article> contains independent content, and <aside> marks additional information.

Uploaded by

Joe
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.
Before Semantic HTML the elements didn’t have any <!--Non Semantic HTML-->
meaning as to what it does or what content goes in it. An <div id="footer">
element such as <div> was used as a general-purpose <p>this is a footer</p>
element to create things from headers to footers to </div>
articles. With Semantic HTML we were introduced to
elements that tell developers and browsers exactly what it <!--Semantic HTML-->
does and what content should 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> ,
<!--Video Tag-->
<audio> and <embed> . <video> allows us to
<video src="4kvideo.mp4">video not
add videos to our website. <audio> allows us to
supported</video>
implement audio into our website. <embed> can be
used to implement any type of media. These elements are
<!--Audio Tag-->
universal in that they all use the src attribute to link
<audio src="koreanhiphop.mp3"></audio>
the source of the content. <video> and <audio>
requires a closing tag while <embed> is a self-closing <!--Embed tag-->
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 <img src="qwerty.jpg">
<figcaption>The image shows the layout of
media encapsulated within the <figure> element.
a qwerty keyboard.</figcaption>
Developers will normally use <figcaption> within
</figure>
the <figure> element to group the media and
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> de nes 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> <!--writes independent content relating to
to de ne a theme for the webpage and use that theme-->
<article> to write independent content for that <article>
<p>One of the top sports league is the
theme. This does not mean that <article> has to be
nba.</p>
used with <section> .
</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