Scribd
Upload
15 views

Learn HTML_ Semantic HTML Cheatsheet _ Codecademy

The document explains the concept of Semantic HTML, which provides meaning to HTML elements, making it easier for developers and browsers to understand the structure and purpose of the content. It highlights key semantic elements such as <header>, <nav>, <main>, <footer>, <figure>, <figcaption>, <section>, <article>, and <aside>, detailing their specific roles in web development. Additionally, it covers how to embed media using <video>, <audio>, and <embed> tags.

Uploaded by

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

Learn HTML_ Semantic HTML Cheatsheet _ Codecademy

The document explains the concept of Semantic HTML, which provides meaning to HTML elements, making it easier for developers and browsers to understand the structure and purpose of the content. It highlights key semantic elements such as <header>, <nav>, <main>, <footer>, <figure>, <figcaption>, <section>, <article>, and <aside>, detailing their specific roles in web development. Additionally, it covers how to embed media using <video>, <audio>, and <embed> tags.

Uploaded by

Abhilash R Sivadas
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

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
<div id="footer">
meaning as to what it does or what content goes in it. An
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
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> , <!--Video Tag-->


<audio> and <embed> . <video> allows us to
<video src="4kvideo.mp4">video not
add videos to our website. <audio> allows us to
implement audio into our website. <embed> can be supported</video>
used to implement any type of media. These elements are
universal in that they all use the src attribute to link <!--Audio Tag-->
the source of the content. <video> and <audio>
<audio src="koreanhiphop.mp3"></audio>
requires a closing 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 of
Developers will normally use <figcaption> within a qwerty keyboard.</figcaption>
the <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
to define a theme for the webpage and use
that theme-->
<article> to write independent content for that
theme. This does not mean that <article> has to
<article>
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.

Print Share

You might also like