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

Introduction To HTML - Learn Semantic HTML Reference Guide - Codecademy

Semantic HTML introduces meaningful elements that describe the purpose of content, rather than just how it looks. Key semantic elements include <header> for introductory content, <nav> for navigation, <main> for the main content area, and <footer> for concluding content. Additional elements like <video>, <audio>, <figure>, and <article> provide semantic tags for embedding media and grouping related content. Semantic HTML helps both developers and browsers understand the structure and meaning of a web page.

Uploaded by

Denisa Popescu
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
28 views

Introduction To HTML - Learn Semantic HTML Reference Guide - Codecademy

Semantic HTML introduces meaningful elements that describe the purpose of content, rather than just how it looks. Key semantic elements include <header> for introductory content, <nav> for navigation, <main> for the main content area, and <footer> for concluding content. Additional elements like <video>, <audio>, <figure>, and <article> provide semantic tags for embedding media and grouping related content. Semantic HTML helps both developers and browsers understand the structure and meaning of a web page.

Uploaded by

Denisa Popescu
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

23.03.

2020 Introduction to HTML: Learn Semantic HTML Reference Guide | Codecademy

Introduction to HTML
Learn Semantic HTML
Print cheatsheet

Semantic HTML
Semantic HTML introduces meaning to the code we write. Before Semantic
HTML the elements didn’t have any meaning 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 things from headers to footers to 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.

<!--Non Semantic HTML-->


<div id="footer">
<p>this is a footer</p>
</div>

<!--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> .

https://www.codecademy.com/learn/learn-html/modules/learn-semantic-html/cheatsheet 1/4
23.03.2020 Introduction to HTML: Learn Semantic HTML Reference Guide | Codecademy

Embedding media
Semantic HTML introduces us to <video> , <audio> and <embed> . <video>
allows us to add videos to our website. <audio> allows us to 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 closing tag while <embed> is a
self-closing tag.

<!--Video Tag-->
<video src="4kvideo.mp4">video not supported</video>

<!--Audio 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. or code snippet. The <figcaption> element is used to describe the
media encapsulated within the <figure> element. Developers will normally use
<figcaption> within 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.

<figure>
<img src="qwerty.jpg">
<figcaption>The image shows the layout of a qwerty keyboard.</figcaption>
</figure>

and
<section> de nes elements in a document, such as chapters, headings, or any
https://www.codecademy.com/learn/learn-html/modules/learn-semantic-html/cheatsheet 2/4
23.03.2020 Introduction to HTML: Learn Semantic HTML Reference Guide | Codecademy

other area of the document with the same theme. <article> holds content that
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
<article> to write independent content for that theme. This does not mean
that <article> has to be used with <section> .

<section>
<!--defines theme-->
<h2>Top Sports league in America</h2>
<!--writes independent content relating to that theme-->
<article>
<p>One of the top sports league is the nba.</p>
</article>
</section>

Aside Element
<aside> is used to mark additional information that can enhance another
element but isn’t required in order to understand the 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 discusses
how to take care of a dog and next to the article an ad would appear
advertising a dog grooming product.

<article>
<!--Main Content-->
</article>
<aside>
<!--Additional information-->
</aside>

Related Courses

Course

https://www.codecademy.com/learn/learn-html/modules/learn-semantic-html/cheatsheet 3/4
23.03.2020 Introduction to HTML: Learn Semantic HTML Reference Guide | Codecademy

Introduction to HTML
Learn the basics of HTML5 and start
building & editing web pages.

https://www.codecademy.com/learn/learn-html/modules/learn-semantic-html/cheatsheet 4/4

You might also like