semantic HTML Flashcards
what is semantic HTML
By using Semantic HTML, we select HTML elements based on their meaning, not on how they are presented. Elements such as <div> and <span> are not semantic elements since they provide no context as to what is inside of those tags.</span>
For example, instead of using a <div> element to contain our header information, we could use a <header> element, which is used as a heading section. By using a <header> tag instead of a <div>, we provide context as to what information is inside of the opening and closing tag.
how to use heading in this version
he example below shows <header> in action:
<header>
<h1>
Everything you need to know about pizza!
</h1>
</header>
This can be compared to the code below which uses a <div> tag instead of a <header> tag:
<div>
<h1>
Everything you need to know about pizza!
</h1>
</div>
how to add nav
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.
Let’s take a look at the example below:
<header>
<nav>
<ul>
<li><a>Home</a></li>
<li><a>About</a></li>
</ul>
</nav>
</header>
adding the <main> instead of <div>
By using <main> as opposed to a <div> element, screen readers and web browsers are better able to identify that whatever is inside of the tag is the bulk of the content.
So how does <main> look when incorporated into our code? That’s a great question.
<main>
<header>
<h1>Types of Sports</h1>
</header>
<article>
<h3>Baseball</h3>
<p>
The first game of baseball was played in Cooperstown, New York in the summer of 1839.
</p>
</article>
</main>
adding a <footer> element
he content at the bottom of the subject information is known as the footer, indicated by the <footer> element. The footer contains information such as:
Contact information Copyright information Terms of use Site Map Reference to top of page links
For example:
<footer>
<p>Email me at Codey@Codecademy.com</p>
</footer>
adding <section>
<section> defines elements in a document, such as chapters, headings, or any other area of the document with the same theme. For example, content with the same theme such as articles about cricket can go under a single <section>. A website’s home page could be split into sections for the introduction, news items, and contact information.
<section>
<h2>Fun Facts About Cricket</h2>
</section>
</section></section>
adding <article>
The <article> element holds content that makes sense on its own. <article> can hold content such as articles, blogs, comments, magazines,
<section>
<h2>Fun Facts About Cricket</h2>
<article>
<p>A single match of cricket can last up to 5 days.</p>
</article>
</section>
The Aside <Element></Element>
element is used to mark additional information that can enhance another element but isn’t required in order to understand the main content. This element can be used alongside other elements such as <article> or <section>. Some common uses of the <aside> element are for:
Bibliographies Endnotes Comments Pull quotes Editorial sidebars Additional information
Here’s an example of <aside> being used alongside <article>:
<article>
<p>The first World Series was played between Pittsburgh and Boston in 1903 and was a nine-game series.</p>
</article>
<aside>
<p>
Babe Ruth once stated, “Heroes get remembered, but legends never die.”
</p>
</aside>
what is the <figure> atribute for</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>
<img></img>
</figure>
</figure>
adding figcaption in figure
<figcaption> is an element used to describe the media in the <figure> tag. Usually, <figcaption> will go inside <figure>. This is different than using a <p> element to describe the content; if we decide to change the location of <figure>, the paragraph tag may get displaced from the figure while a <figcaption> will move with the figure. This is useful for grouping an image with a caption.
<figure>
<img></img>
<figcaption>This picture shows characters from Overwatch.</figcaption>
</figure>
</figcaption></figure></p></figure></figcaption></figure></figcaption>
what is the <audio> element for</audio>
The <audio> element is used to embed audio content into a document. Like <video>, <audio> uses src to link the audio source.</audio></video></audio>
<audio>
<source></source>
</audio>
why do you use the <source></source> in the <audio> element</audio>
we created a <source></source> element to encapsulate our audio link. In this case, iAmAnAudioFile.mp3 is our audio file.
why do you also use the <type> in the <audio> element</audio></type>
hen we specified the type by using type and named what kind of audio it is. Although not always necessary, it’s recommended that we state the type of audio as it helps the browser identify it more easily and determine if that type of audio file is supported by the browser.
why do we place controls atrribute in the <audio> element</audio>
controls: automatically displays the audio controls into the browser such as play and mute.
<audio>
</audio>
<video>
</video>
By using a <video> element, we can add videos to our website. The <video> element makes it clear that a developer is attempting to display a video to the user.</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.
Below is an example of <video> being used with the controls attribute:</video>
<video>Video not supported</video>
