Scribd
Upload
3 views

html 4

Uploaded by

ningirl.1ng
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

html 4

Uploaded by

ningirl.1ng
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Firefox about:srcdoc

Cheatsheets / Learn HTML

Semantic HTML

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

1 of 3 3/26/2023, 4:51 PM
Firefox about:srcdoc

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

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

<figure> and <figcaption>


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

<section> and <article>


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

2 of 3 3/26/2023, 4:51 PM
Firefox about:srcdoc

<aside> Aside Element


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

Print Share

3 of 3 3/26/2023, 4:51 PM

You might also like