Cheat Sheets are in BETA. Give us your feedback.

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>

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>