What is the purpose of the Base Element

HTML & CSS
1

I can’t seem to wrap my head around what the <base> element really does, and what its purpose is. Can anyone explain in laymans terms “what” and “why”. I am new to webdesign and just trying to understand all the elements. I would appreciate any help. Thanks:eek:

2

Hi wwwebster. Welcome to SitePoint. :slight_smile:

The base element isn’t used much, and is rarely needed. Here is some more info on it:

base (HTML element)

Basically, it can make writing out URLs a bit simpler. If you, say, have lots of images on a page, instead of doing something like this:

<body>
<img src="../../images/image1.gif" alt="">
<img src="../../images/image2.gif" alt="">
<img src="../../images/image3.gif" alt="">
</body>

you could instead do this:


<head>
<base href="http://mysite.com/images/">
</head>

<body>
<img src="image1.gif" alt="">
<img src="image2.gif" alt="">
<img src="image3.gif" alt="">
</body>

But really, I prefer to do something like this without the base element:

<body>
<img src="/images/image1.gif" alt="">
<img src="/images/image2.gif" alt="">
<img src="/images/image3.gif" alt="">
</body>

The / at the start of the URL is a root-relative URL, and is much more straightforward. It won’t work in testing on you own computer, though, unless you use a virtual server environment, such as is offered by MAMP (for Mac) ow XAMPP (for PC).

3

Thanks for the help. It makes perfect sense to me now. Thanks for the info on the VSE. I am really starting to love this stuff.