Links And Images

1. Core Concept Overview & Intuition

A web page is not an isolated document. When a browser requests a page from a web server, the server returns the page's markup, and the browser then examines that markup for references to other resources — other pages, files on the same server, and images. The browser collects all of this information and displays it to the user as a Web page. Two element families make this collection possible: the anchor element, which creates hyperlinks between documents, and the image element, which embeds pictures into the document.

The anchor element, written $a$, is the mechanism of navigation. Its essential companion is the $href$ attribute (hypertext reference), which specifies the URL — the address of the destination. The destination may be content on the same site (an internal link) or content on another site (an external link). The browser reads the $href$ value and, when the user activates the link, requests that address.

The image element, written $img$, is the mechanism of visual embedding. Its essential companion is the $src$ attribute (source), which references the filename of an uploaded image. Because an image is a separate file, the browser must issue an additional request for it, exactly as it does for linked pages. The $alt$ attribute supplies required alternative text: a textual substitute that the browser presents when the image cannot be displayed, and that conveys the image's meaning when the image is unavailable to the user.

The unifying intuition is that of a reference graph. Each page is a node; each $href$ or $src$ value is a directed edge from the page to another resource. The browser traverses these edges, fetching every referenced file, and assembles the result into the rendered page. Understanding links and images therefore means understanding how references are declared and how the browser resolves them.

2. Mathematical Formalization & Core Definitions

> Definition (Anchor Element). The anchor element $a$ is the HTML element used to create a hyperlink. It encloses the link content (text or other inline content) and carries an $href$ attribute whose value is the URL of the destination resource.

> Definition (href Attribute). The $href$ attribute specifies the URL to which a hyperlink points. It is the attribute that makes an $a$ element functional as a link; without a resolvable $href$ value, the element does not navigate.

> Definition (Same-Site and Cross-Site Linking). A link whose destination lies on the same site as the linking page is a same-site (internal) link. A link whose destination lies on another site is a cross-site (external) link. Both are created identically with the $a$ element and $href$ attribute; only the URL value differs.

> Definition (Image Element). The $img$ element is the HTML element used to insert an image into a document. It references an external image file rather than containing the image data itself.

> Definition (src Attribute). The $src$ attribute references the filename (or path) of an uploaded image file. The browser uses this value to request the image from the server.

> Definition (alt Attribute). The $alt$ attribute provides required alternative text for an image — a short textual description that substitutes for the image when the image is not displayed.

> Definition (Browser Use of alt Text). When an image is not displayed — for example, because the file cannot be loaded — the browser presents the $alt$ text in place of the image, so that the page's meaning is preserved.

The reference structure of a page can be described as a set of directed references. Let $P$ denote the page and let $R(P)$ denote the set of resources it references. Then

$$
R(P) = R_{\text{link}}(P) \cup R_{\text{image}}(P)
$$

where $R_{\text{link}}(P)$ is the set of destinations named by $href$ values and $R_{\text{image}}(P)$ is the set of image files named by $src$ values. Each element of $R(P)$ is a separate resource that the browser must request, which is why a single page can trigger many requests. The browser collects all the information and displays it to the computer in the form of a Web page.