The elements a, img, audio, and video can be used to insert links, images, audio, and video, respectively, in your webpage. They each require a set of attributes, each of which consists of a name and a value, controlling the how element works.

Links

An a element allows it's content to be clicked, resulting in the web browser visiting the URI specified by the element's href attribute, resulting in the resource identified by that URI being navigated to within the web browser or downloaded; in other words, an a element represents a link (the general term used for referring to a hyperlink).

The HTML code:

<a href="https://www.csusb.edu/">CSUSB website</a>

Displays as:

One need not link to websites, the a element can also link directly to any kind of file such as a video or a PDF document. If capable, the contents of that file will be rendered within the web browser, otherwise the user has the option to download and possibly open that file with another application.

When linking to an external website or resource, it is a good idea to prevent that website from tracking where the user is coming from out of respect for the user's privacy. For example:

<a rel="external noopener noreferrer" href="https://amazon.com/">amazon</a>

This link has a rel attribute which specifies the relationship between this document and the link destination. The value of the rel attribute can be a combination of space-separated sub-values. In this case: external indicates that this link leads to a different website, noopener prevents the destination website from accessing code related to the current website, and noreferrer prevents the destination website from knowing the URI of this website. See HTML 5.2, W3C Recommendation, § 4.8.6 for more detailed information on the rel attribute.

Images

There is an image file named "duck.jpg" on this website, here is example HTML code to embed that image on this page:

<img src="duck.jpg" alt="A yellow duckling" width="300" height="180">

and here is the result:

The attributes of this img element are:

• src: The URI of the image. This is required.
• alt: Alternate text to use if the image cannot be displayed to the user. This is also required.
• width: The width, in pixels, to scale the image to. Not required but highly recommended.
• height: The height, in pixels, to scale the image to. Not required but also highly recommended.

img elements are empty, they have no closing tag.

If the file of the resource (in this case, an image resource) resides in the same file system location as the file of the web page, then the filename of the resource should be sufficient for the src attribute; otherwise, a relative or absolute URI should be used. This applies for all other elements that have a src attribute.

The alt attribute requirement is not just for web browsers that fail to load the image, but also for users who may have visual impairment.

Not specifying a width and height attribute will display the image at full size, possibly altering the layout of the web page if the image is too big.

An image can also be used as a button that links to another page by using it as the content of an a element; example: <a href="index.html"><img src="home.png" alt="Home" width="64" height="64"></a>.