Summary of “Links and Images”

Links

What is a link?

A typical link is a fragment of text. When you click on it, you go to another page, open an image, start downloading a file, or move to some place on the current page.

You create links using the <a> tag. For example:

<a href="https://htmlacademy.org">HTML Academy</a>

An <a> element without href is a placeholder rather than an active link. Adding href makes it a link to a destination. A placeholder can be used for a navigation item with no destination or for an item representing the current page:

<ul>
  <li><a>Page 1</a></li>
  <li><a href="2">Page 2</a></li>
  <li><a href="3">Page 3</a></li>
</ul>

The title attribute provides an additional hint. Many desktop browsers show it as a tooltip when the pointer rests over the element. Keep important explanations visible on the page, since title tooltips are not reliably available to keyboard, touch or screen-reader users.

Absolute links

To link to another website, you can use its complete URL, called an absolute address. It gives the browser the information needed to find the destination without relying on the current page’s address. For example:

https://site.com/blog/index.html

In this web address, the three parts shown are the protocol, server name, and path.

Relative links

A relative address gives a destination in relation to the current page. It is useful for links between files on your computer or between pages on your website. For example:

day-2.html

Relative addresses work not only for files on a computer, but also for pages on a network. If you place two files on the Internet (without changing their location relative to each other), then the relative links between them will still work.

A relative address is resolved using the current page’s address. It does not specify its own protocol.

Links to files

Links can open files as well as pages. Put the file’s URL in the href attribute of <a>. Add the download attribute to ask the browser to download the file instead of displaying it.

<a href="file.pdf" download>Download this PDF instead of opening it</a>

In-page links

An in-page link is a regular link whose address contains the # character, which is immediately followed by the element id. The ID is created using the id attribute. It specifies where on the page you are taken when you click on the link.

<a href="#part1">Chapter 1</a>

The anchor link is used to scroll to a specified part of the page. It can also be used in absolute addresses.

Images

Displaying images

The <img> tag is used to load images. It has no closing tag, and the path to the image is assigned using the src attribute. For example:

<img src="logo.png">

Image formats

This chapter covers four image formats: JPEG, PNG, SVG and GIF.

SVG stands for “scalable vector graphics.” Vector graphics stay sharp when resized. Simple SVG graphics can also be small files, making them useful for graphs, logos and icons. Suitability depends on the image’s complexity rather than simply on its number of colors. SVG is useful when you need to resize vector graphics, change the colors of individual elements or animate parts of an image.

JPEG is suitable for photographs and other detailed full-color images with smooth transitions in color and brightness. It uses lossy compression: stronger compression can reduce file size at the cost of image detail.

PNG uses lossless compression to preserve image detail. It also supports transparency, including partially transparent pixels. This makes it useful for images that need transparent backgrounds, full-color images whose detail must be preserved, and images with sharp color boundaries, such as screenshots or diagrams.

GIF remains useful for simple animations, though other formats can offer better compression and color support.

Image dimensions

Use the width and height attributes to set an image’s dimensions in HTML. Write pixel values as numbers without the px unit.

<img src="logo.png" width="200" height="100">

If you set only width or height, the browser calculates the other dimension using the image’s original aspect ratio. If you set both, keep that ratio to avoid stretching or squashing the image.

The alt attribute

Alternative text provides the image’s information when the image cannot be displayed. It also helps people who cannot see the image, including those using screen readers.

The alternate text for the image is assigned using the attribute alt. For example:

<img src="cat.png" alt="A cat that walks by himself">

Figure and figcaption

Use <figure> for self-contained content, optionally with a caption, that is referred to from the surrounding text. Examples include graphs, images, code samples and tables.

Use <figcaption> to mark up the figure’s caption. Place it as the first or last element inside <figure>. For example:

<figure>
  Graph, image, diagram or code
  <figcaption>Caption for the content</figcaption>
</figure>

Image link

You can create more than just text links. You can also format images as links. To do this, you need to wrap the <img> tag in the <a> tag. For example:

<a href="http://keksby.ru">
  <img src="cat.png" alt="Muffin">
</a>