3.4    Defining the Base URL of a Web Page Using <base>

The base element allows you to define a base URL or destination for all files referenced in the HTML document. By defining such a base URL, you can use a relative or absolute address to the file in the document as if this file were located on the same host or computer as the HTML document.

It sounds more complicated than it actually is. For this reason, let’s take a look at the following simple example that demonstrates the base element in practice:

<!doctype html>
<html lang="en">
  <head>
    <title>Defining a Base URL</title>
    <base href="https://static.sap-press.com/img/"
          target="_blank">
    <meta charset="UTF-8">
  </head>
  <body>
    <img src="rheinwerk-sappress-logo-header.svg" alt="Logo">
  </body>
</html>

Listing 3.2     /examples/chapter003/3_4/index.html

By specifying href="https://static.sap-press.com/img/", the web browser will replace all URLs that weren’t fully referenced with https:// with the base URL https://static. sap-press.com/img/. In this example, the image source of src (here with rheinwerk-sappress-logo-header.svg) is therefore supplemented by https://static.sap-press.com/img/rheinwerk-sappress-logo-header.svg in the line that contains the img element, so that the Rheinwerk Publishing logo gets displayed in the web browser, which you can see in Figure 3.4.

Thanks to the Base URL Defined in <base> in the “href” Attribute, the Image File That’s Not Fully Referenced Is Supplemented by the Base URL of the Browser and Displayed

Figure 3.4     Thanks to the Base URL Defined in <base> in the “href” Attribute, the Image File That’s Not Fully Referenced Is Supplemented by the Base URL of the Browser and Displayed

Internet Connection Required for Local Testing

For the example shown in Figure 3.4 to work on the local computer, you need a connection to the internet because when the file (here, rheinwerk-sappress-logo-header.svg) is called, an attempt is always made to fetch the file from the base URL (here, https://static.sap-press.com/img/). Thus, when you use the base element, it isn’t possible to test a website offline on a local computer. If there’s no connection to the internet in the example just shown, only the alternative text of the alt attribute gets displayed in the img element (here, "Logo").

The target attribute, on the other hand, enables you to specify the target where each reference should be opened and displayed. The _blank value allows you to make sure in this example that a new window or tab is addressed. In our example, this has no effect because only one image is displayed. For other possible values for the target attribute, see Table 3.3.

There can be only one base element in an HTML document, and it must be written between <head> and </head>. If you define multiple base elements nevertheless, the web browser will usually use only the first href and the first target attribute. All the others will be ignored. However, the HTML validity check would return an error if more than one base element was used. Furthermore, you must define the href, the target attribute, or both in the base element.

In old HTML 4.01, the attribute value of target was a name or keyword for a frame. In current HTML, it’s now the keyword for a browsing context, which can be a browser window, a browser tab, or even an inline frame (iframe).

Attribute

Description

href

Defines the base URL. This URL is used by the web browser as the base address for relative or absolute path specifications in the document and is supplemented with this base URL.

target

Specifies the target window in which the link target should be displayed. Possible values and their meaning are as follows:

  • _self: Opens the reference in the current window. This is the default setting if target hasn’t been used.

  • _blank: Opens the reference in a new window or tab.

  • _parent: Opens the reference in the parent window. The parent window is the window from which the current window was opened. If there’s no parent window, this option behaves like _self.

  • _top: Loads the reference of the file in the window that’s highest in the hierarchy. If there’s no higher parent window at all, this option behaves like _self.

Table 3.3     Attributes for the <base> Element

Frames and Framesets

A frame is a section of an HTML page into which another HTML page can be included. The combination of multiple frames used to be referred to as a frameset. Framesets with the old HTML element <frameset>...</frameset> are no longer supported in the current HTML and are obsolete. Alternatives include inline frames with the iframe element, CSS, or other server-side techniques.