Things I Learned from Learn to Code HTML & CSS, Lesson 9

Here are some things I learned from Lesson 9: Adding Media of Learn to Code HTML & CSS by Shay Howe.

Adding Images

Sizing Images

Specifying either a width or a height will cause the other dimension to adjust automatically to maintain the aspect ratio of the image.

Positioning Images

By default, images arepositioned as inline-level elements.

Inline Positioning Images

The height of the line in which an image appears will be changed to match the height of the image.

Adding Audio

Unlike the <img> element, the <audio> element requires both opening and closing tags.

Audio Attributes

The most common <audio> attributes include autoplay, controls, loop, and preload.

The first three are Boolean attributes, so they don’t require a stated value.

By default, the <audio> element isn’t displayed on a page. To display the element, the controls Boolean attribute is necessary.

The preload attribute helps identify what information about the audio should be loaded before the clip is played. It accepts three values:

none
No information is preloaded
auto
All information is preloaded
metadata
Any available metadata is loaded, such as the length of the file

When the preload attribute isn’t present, all information is loaded. For this reason, using the preload attribute with a value of metadata or none is a good idea when an audio file is not essential to the page. It’ll help to conserve bandwidth and allow pages to load faster.

Audio Fallbacks & Multiple Sources

Different browsers support different audio file formats, the three most popular of which are ogg, mp3, and wav. For the best browser support we’ll need to use a handful of audio fallbacks, which will be included inside an <audio> element’s opening and closing tags.

To begin, we’ll remove the src attribute from the <audio> element. Intead, we’ll use the <source> element, with a src attribute, nested inside the <audio> element to define a new source.

We can list one audio file format after the other. We’ll use the type attribute to quickly help the browser identify which audio types are available. When a browser recognizes an audio file format it will load that file and ignore all the others.

For browsers that do not support HTML5, we can provide a link to download the audio file after any <source> elements within the <audio> element.

<audio controls>
  <source src="jazz.ogg" type="audio/ogg">
  <source src="jazz.mp3" type="audio/mp3">
  <source src="jazz.wav" type="audio/wav">
  Please <a href="jazz.mp3" download>download</a> the audio file.
</audio>

Adding Video

Unlike <audio> elements, the video will display even if the controls Boolean attribute is not specified. However, the best practice is to include the controls Boolean attribute unless there is a good reason not to allow users to start, stop, or replay the video.

It’s good to specify the width and height properties of a video element in CSS.

Poster Attribute

The <poster> attribute allows us to specify an image, in the form of a URL, to be shown before a video is played.

Video Fallbacks

Video fallbacks work the same way as audio fallbacks.

One additional fallback option that could be used in place of a plain text fallback is to use a YouTube or Vimeo embedded video.

Adding Inline Frames

Pages referenced within the src attribute of an <iframe> element play by their own rules, as they don’t inherit any styles or behaviors from the page they are referenced on. Additionally, links within the page referenced within the <iframe> element will open inside that frame, leaving the page that contains the <iframe> element unchanged.

Semantically Identifying Figures & Captions

With HTML5 also came the introduction of the <figure> and <figcaption> elements. These were created to semantically mark up self-contained content or media, commonly with a caption. Before HTML5 this used to be done using an ordered list, but that was not semantically correct.

Figure

The <figure> block-level element is used to identify and wrap self-contained content, often in the form of media. It may surround images, audio clips, videos, blocks of code, diagrams, illustrations, or other self-contained media. More than one item of self-contained content may be contained within the <figure> element. If the <figure> element is moved from the main portion of a page to another location, it should not disrupt the content or legibility of the page.

Figure Caption

To add a caption or legend to the <figure> element, the <figcaption> element is used. It may appear at the top of, bottom of, or anywhere within the <figure> element; however, it may only appear once. It will serve as the caption for all content within the <figure> element.

Additionally, the <figcaption> element may replace an <img> element’s alt attribute if its content provides a useful description of the visual content of the image.

Not all forms of media need to be included within a <figure> element or include a <figcaption> element; only those that are self-contained and belong together as a group.

Leave a Reply

Your email address will not be published. Required fields are marked *