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>

The <a> tag can generally be used without an address, in other words, without the attribute href. This tag stands for “stub link”, which under other conditions may become just a regular link. Often, stub links are used to show that we are on 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>

When we remove the href attribute from the link, it is a best practice to leave a tooltip about why we did it. You can leave a tooltip using the title attribute. The tooltip will appear when you hover the cursor over the link for a little while.

Absolute links

If you need to create a link to another website on the Internet, then you need to use a “regular” address. This “normal” or full address is called the absolute address. It looks like the following, for example:

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

Absolute addresses consist of at least three parts: the protocol, server name, and path.

Relative links

When you wish to link to a file that is stored locally on a computer, relative addresses are used. Unlike “regular” addresses, these relative links contain no website address. 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.

If the address does not contain a server name or protocol, then this is a relative address.

Links to the file

Links not only take you places, but they also allow you to download files. To do this, simply write out the link to this file in the href attribute. In order to prevent files from being opened directly in the browser, the <a> tag should use download attribute.

<a href="file.pdf" download>The browser downloads me, but it will not attempt to read me</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

We have several basic image formats: JPEG, PNG, SVG and GIF.

The SVG format is used to present scalable vector graphics. The quality of such images does not change when they are resized, and they also have a small file size. This format is great for graphs, logos and icons that are not color intensive. This format is most often used in cases when it is necessary to scale an image in a lossless way, change the color of image elements, and animate parts of an image.

The JPEG format is suitable for photos, drawings with lots of colorful details, and images with smooth transitions between different brightness and contrast levels. When the image is compressed, its quality deteriorates.

The PNG image format allows you to save images with a high degree of clarity. The main feature of this image format is its support for transparency. It is suitable for images with transparency and translucency when it is necessary to preserve the increased accuracy of full-color images and for images with sharp color transitions.

The GIF image format is used for the simplest animations. Recently, GIF images have started to be used less frequently, since they have been replaced by other, more optimal formats.

Image dimensions

In order to control the width or height of the image, the attributes width and height are used. The dimensions are specified without units in these attributes.

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

If you specify only one of the dimensions, whether width or height, then the browser will calculate the second dimension independently based on the image proportions. If you specify both the height and the width at the same time, then the browser may display the image disproportionally.

The alt attribute

Alternate text is specified for cases where the image cannot be displayed in order to make it clear what is being shown. In addition, alternative text helps websites remain accessible, for example, to the category of users who cannot see images.

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

The <figure> tag is suitable for any illustrative or demonstrative material that may supplement the content of the document, such as graphs, images, code examples, tables, and so on.

We also have the <figcaption> tag that is used to mark up an explanatory comment to this illustrative material. This is placed 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>