Specifying either a width or a height will cause the other dimension to adjust automatically to maintain the aspect ratio of the image.
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.
<img> element, the
<audio> element requires both opening and closing tags.
The most common
<audio> attributes include
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.
preload attribute helps identify what information about the audio should be loaded before the clip is played. It accepts three values:
- No information is preloaded
- All information is preloaded
- Any available metadata is loaded, such as the length of the file
preload attribute isn’t present, all information is loaded. For this reason, using the
preload attribute with a value of
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
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 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>
<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
height properties of a video element in CSS.
<poster> attribute allows us to specify an image, in the form of a URL, to be shown before a video is played.
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
<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> 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.
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
<figcaption> element may replace an
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.