Html Base Tag: Web Development Tutorial Series Part 17

The Html Base Element

THE HTML BASE TAG

The base tag, aka base ELEMENT, has become increasingly popular in HTML5. Before then, it wasn’t well known. It allows code authors to do two specific things.

  1. Specify any URL as the base for relative URL’s
  2. Specify default target links

The base element is defined in the HEAD section and should be added before any other elements so that they can also use the information provided in it. There can only be one base element per document. It can contain the href or target attribute, or both. It must have at least one of these ATTRIBUTES if it is present in the document. A base element with an href attribute would work well with a web page that has all of its IMAGES stored in one specific folder. Adding a base element with a URL pointing at the image folder would allow any images that we want loaded to be called by the image name.filetype instead of the complete file location. We’ll begin with an example of this. Refer to the images below. NOTE: You can use whatever images you want. A few simple colored squares will work fine for this exercise.

index.html EXAMPLE 1: BASE ELEMENT WITH HREF ATTRIBUTE

base tag with href attribute

DISPLAYED PAGE EXAMPLE 1

base element with href attribute displayed

For this example, we are using a sub-folder named “my-images“. That subfolder is saved in a main folder named “my-website“, and it is located on the desktop. If you would like to set up your folder system in the exact same way, click here to see how: WEBSITE FOLDER SETUP WITH IMAGE FOLDER. In the index.html document, a base tag has been added immediately after the opening <head>. tag. It has one attribute; an href with a value of my-images/ This folder contains all of the images that will be used throughout the lessons found on Clear Coded Programming. The example is set up this way because the my-website folder and all of its sub-folders have not been uploaded to a web host. An example of a base element for ClearCodedProgramming.com would be:


<base href="http://www.clearcodedprogramming.com/media/">

In the above element, the URL would be pointing at the media sub-folder at clearcodedprogramming.com, and would allow all images to be loaded simply by calling them by name.filetype. Filetype being .jpg, .png, etc. We set up the examples for a website that has not been uploaded to a web host in order for you to be able to follow along with the exercises easily. Okay, enough about that. Back to the lesson. In the body element of the index.html document, we are loading 5 images. They are all stored in the my-images sub-folder, so we don’t have to include the full URL because we specified this folder locations in our base URL. NOTE: A HEADING and some CSS has been adding to position the elements a little bit neater.

So now you can see how the base element can come in handy when loading all of the images from a single location. But only one base element can be used in each document. So, what if you wanted to load an image from a different location? Well, you would have to specifically override the base element by entering the full URL in the image src attribute for the new image. Refer to the images below for an example.

index.html EXAMPLE 2: OVERRIDING THE BASE ELEMENT

Overriding the base tag in HTML5

DISPLAYED PAGE EXAMPLE 2

Overriding the base element in HTML

We have added an <img> (image) tag inside of a DIV right before the closing </body> tag. The div is there just to somewhat center the image. The base element information that we defined in the head is being overridden because we have added a full URL. The URL is pulling an image from Clear Coded Programming’s Learn HTML main menu page. You can see the result in the Displayed Page Example 2 image. In the last example, we’ll add a target attribute to the base element. See the images below.

index.html EXAMPLE 3: BASE ELEMENT WITH TARGET ATTRIBUTE

HTML base element with target _blank attribute

DISPLAYED PAGE EXAMPLE 3-1

HTML base element with target attribute

DISPLAYED PAGE EXAMPLE 3-2

HTML base element target="_blank" attribute

In the final example, we have added a target attribute to the base tag with a value of “_blank”. This will make all relative URLs open in a new tab or window. Immediately following the opening <body> tag, we add a LINK to the Google search engine. Some simple CSS style has been added to the link for visual purposes. When the text link is clicked, it automatically opens Google search in a new window because we specified that in the base element. Refer to the list below for more values that can be used with the target attribute.

MORE TARGET ATTRIBUTE VALUES

  • _blank
  • _parent
  • _self
  • _top
  • framename

Web developers have mixed feelings about the base element. Some find it useful, while others feel there are too many drawbacks compared to its advantages. After you define a base element you’re stuck with it and whenever you don’t want to use the defaults that you set; they have to be individually overridden. The best time to use a base is when you know beforehand how the page and URL’s will be set up. If you haven’t planned out the content in advance and the URLs are unknown, then it might be best to leave the base element out. That finishes this lesson on the HTML base element. Thanks for reading, and we’ll see you next lesson.

index.html Source Code


<!doctype html>
<html>
<head>
<base href="my-images/" target="_blank">
<title>The Base Element</title>
</head>
<body>

<a style="font-size: 30px; color: green;" href="http://www.google.com">Google</a>

<h2 style="text-align: center;">The HTML base element</h2>

<div style="margin-left: 250px;">
<img src="red-star.png" />
<img src="yellow-star.png" />
<img src="blue-star.png" />
<img src="purple-star.png" />
<img src="green-star.png" />
</div>

<div style="margin-left: 700px;">
<img src="http://clearcodedprogramming.com/wp-content/uploads/2016/06/html5picturenew.jpg" />
</div>

</body>
</html>

posted by Clear Coded Programming

Please Leave a comment

%d bloggers like this: