Semantic html Flashcards
Why use semantic html?
Accessibility: Semantic HTML makes webpages accessible for mobile devices and for people with disabilities as well.
SEO: It improves the website SEO, or Search Engine Optimization, which is the process of increasing the number of people that visit your webpage.
Easy to Understand: Semantic HTML also makes the website’s source code easier to read for other web developers.
What is the difference between semantic elements and non-semantic elements?
<div> </div>
<header> </header>
<div> </div>
<nav> </nav>
<div> </div>
<article> </article>
<div> </div>
<figure> </figure>
<div> </div>
<footer> </footer>
Semantic elements provide information about the content between the opening and closing tags.
Non-semantic elements don’t provide information between the opening and closing tags.
What is the <header> element use for?
A <header> is a container usually for either navigational links or introductory content containing <h1> to <h6> headings.
By using a <header> tag, our code becomes easier to read.
What is <nav> used for?
A <nav> is used to define a block of navigation links such as menus and tables of contents.
It is important to note that <nav> can be used inside of the <header> element but can also be used on its own.
Name two more structural elements?
<main> The element <main> is used to encapsulate the dominant content within a webpage.
<footer> The content at the bottom of the subject information is known as the footer.
The footer contains information such as:
Contact information
Copyright information
Terms of use
</footer></main></main>
What’s the <section> element?
<section> defines elements in a document, such as chapters, headings, or any other area of the document with the same theme.
</section>
What’s the <article> element?
The <article> element holds content that makes sense on its own. <article> can hold content such as articles, blogs, comments, magazines, etc.
What’s the <aside> element?
The <aside> element is used to mark additional information that can enhance another element but isn’t required in order to understand the main content.
e.g. Comments, quotes, additional info.
What’s the <figure> element?</figure>
<figure> is an element used to encapsulate media such as an image, illustration, diagram, code snippet, etc, which is referenced in the main flow of the document.
</figure>
What’s the <figcaption> element?
<figcaption> is an element used to describe the media in the <figure> tag.
e.g.
<figure>
<img></img>
<figcaption>This picture shows characters from Overwatch.</figcaption>
</figure>
</figure></figcaption>
What’s the <audio> element?</audio>
Adding the attribute:
control; automatically displays the audio controls into the browser such as play and mute.
src; specifies the URL of the audio file.
autoplay; plays when browser is loaded.
The <audio> element is used to embed audio content into a document.
Like <video>, <audio> uses src to link the audio source.
Specifying the type=audio/ is not necessary it's recommended as it helps the browser identify it more easily and determine if that type of audio file is supported by the browser.</audio></video></audio>
<video> </video>
Some attributes that can alter a video playback include:
controls: When added in, a play/pause button will be added onto the video along with volume control and a fullscreen option.
autoplay: The attribute which results in a video automatically playing as soon as the page is loaded.
loop: This attribute results in the video continuously playing on repeat.
<embed></embed>
a self closing tag.
“Taught for legacy purposes only.”
Another tag that can be used to incorporate media content into a page is the <embed></embed> tag.
