032.3 Lesson 1

The most common type of embedded content are images that accompany the text. Images are kept separately and are referenced inside the HTML file with the <img> tag:

The <img> tag does not require a closing tag. The src property indicates the source location for the image file. In this example, the image file logo.png must be located in the same directory as the HTML file, otherwise the browser will not be able to display it. The source location property accepts relative paths, so the dot notation can be used to indicate the path to the image:

The two dots indicate that the image is located inside the parent directory relative to the directory where the HTML file is. If the filename ../logo.png is used inside an HTML file whose URL is http://example.com/library/periodicals/index.html, the browser will request the image file at the address http://example.com/library/logo.png.

The dot notation also applies if the HTML file isn’t an actual file in the filesystem; the HTML browser interprets the URL as if it is a path to a file, but it is the HTTP server’s job to decide whether that path refers to a file or to dynamically generated content. The domain and the proper path are automatically added to all requests to the server, in case the HTML file came from a HTTP request. Likewise, the browser will open the proper image if the HTML file was opened directly from the local filesystem.

Source locations beginning with a forward slash / are treated as absolute paths. Absolute paths have complete information for the image’s locations, so they work regardless of the HTML document’s location. If the image file is located at another server, which will be the case when a Content Delivery Network (CDN) is used, the domain name must also be included.

If the image can’t be loaded, the HTML browser will show the text provided by the alt attribute instead of the image. For example:

The alt attribute is also important for accessibility. Text-only browsers and screen readers use it as a description for the corresponding image.

Audio and video contents may be added to an HTML document in more of less the same way as images. Unsurprisingly, the tag to add audio is <audio> and the tag to add video is <video>. Obviously, text-only browsers aren’t able to play multimedia content, so the <audio> and <video> tags employ the closing tag to hold the text used as a fallback for the element that could not be shown. For example:

If the browser doesn’t support the <audio> tag, the line “Unable to play recording.mp3” will be shown instead. The use of closing </audio> or </video> tags allows a web page to include more elaborate alternative content than the simple line of text permitted by the alt attribute of the <img> tag.

The src attribute for <audio> and <video> tags works in the same way as for the <img> tag, but also accepts URLs pointing to a live stream. The browser takes care of buffering, decoding, and displaying the content as it is received. The controls attribute displays playback controls. Without it, the visitor will not be able to pause, rewind, or otherwise control the playback.

An HTML document can be nested into another HTML document, similarly to the insertion of an image into an HTML document, but using the tag <iframe>:

Simpler text-only browsers don’t support the <iframe> tag and will display the enclosed text instead. As with the multimedia tags, the src attribute sets the source location of the nested document. The width and height attributes can be added to change the default dimensions of the iframe element.

The name attribute allows developers to refer to the iframe and change the nested document. Without this attribute, the nested document cannot be changed. An anchor element can be used to load a document from another location inside an iframe instead of the current browser window.

The address of an HTML document may optionally contain a fragment that can be used to identify a resource inside the document. This fragment, also known as the URL anchor, is a string following a hash sign # at the end of the URL. For example, the word History is the anchor in the URL https://en.wikipedia.org/wiki/Internet#History.

When the URL has an anchor, the browser will scroll to the corresponding element in the document: that is, the element whose id attribute is equal to the anchor in the URL. In the case of the given URL, https://en.wikipedia.org/wiki/Internet#History, the browser will jump straight to the “History” section. Examining the HTML code of the page, we find out that the title of the section has the corresponding id attribute:

URL anchors can be used in the href attribute of the <a> tag, either when they are pointing to external pages or when they are pointing to locations inside the current page. In the latter case, it is enough to put start with just the hash sign with the URL fragment, as in <a href="#History">History</a>.

There are ways to customize how the browser will react to URL anchors. It is possible, for example, to write a JavaScript function that listens to the hashchange window event and triggers a customized action, such as an animation or an HTTP request. It is worth noting, however, that the URL fragment is never sent to the server with the URL, so it cannot be used as an identifier by the HTTP server.