HTML <base> tagS2C Home   « HTML <base> tag

Definition

The <base> tag is a self closing tag that defines a base URL for the links on a page.

This tag is only allowed within the <head> element.

You can have zero or one <base> elements witin a HTML document.

Base URL

The base URL normally consists of the protocol being used, which in our case will be the HTTP protocal and the server name directory which for us will be server2client.com/

This will give us a base URL of http://htmldoctor.info/ (Which is basically the homepage of a site!)

Relative URL

The common use of a relative URL is by omitting the protocol and server name as documents generally reside on the same server. So this would be directoryName/fileName.extension.

For example the relative URL images/chickenpiesmall.jpg

Absolute URL

An absolute URL is the complete address of the resource.

For example the absolute URL http://htmldoctor.info/images/chickenpiesmall.jpg

Example


<!DOCTYPE html>   <!-- The DOCTYPE declaration always comes first in a HTML document --> 
<html  lang="en">
<head>
  <title>HTML Intermediate Tutorials</title>
  <base href="http://htmldoctor.info/">
</head>
<body>
<h3>List OF Images</h3>
<dl>
  <dt>Pie Pictures</dt>
    <dd><img src="images/chickenpiesmall.jpg"
             alt="Chicken Pie" width="75" height="50"></dd> 
</dl>
</body>


relative URL "images/chickenpiesmall.jpg" is attached to the

base URL of http://htmldoctor.info/ giving us the

absolute URL http://htmldoctor.info/images/chickenpiesmall.jpg.


Attributes

The following attributes can be used with the <base> tag.


<base> Specific Attributes
Attribute Value Description Example
hrefurlSpecifies a base URL for the links on a page. 

<base href="http://htmldoctor.info/">
targetSpecifies the default target for the links on a page. 

<base href="http://htmldoctor.info/" target="_blank">
_blankOpens linked resource in new window or tab
_parentOpens linked resource in parent frame.
_self (default)Opens linked resource in same frame as it was clicked in.
_topOpens linked resource in window body.
<base> Global Attributes
Attribute Description Example
Common
classSpecifies a classname for the element allowing you to apply the style of the predefined class to the content. 

<base class="name">
idSpecifies a unique id for the element allowing you to apply the style of the predefined id to the content. 

<base id="name">
styleSpecifies an inline style for the element allowing you to apply the style to the contentt. 

<base style="color:red;">
titleSpecifies an inline style for the element allowing you to apply the style to the content. 

<base title="Content info">
Keyboard
accesskeySpecifies a keyboard shortcut to associate with the element. 

<base accesskey="a">
tabindexSpecifies a tab order for the element. 

<base tabindex="1">
Language
dirSpecifies the directional flow of the content. 

<!-- The text will flow from left to right -->
<base dir="ltr">
<!-- The text will flow from right to left -->
<base dir="rtl">
langSpecifies a language code for the content of the element. 

<base lang="en">
spellcheckSpecifies an inline style for the element allowing you to apply the style to the contentt. 

<!-- Valid values true and false. -->
<!-- Default inherited / browser specific. -->
<base spellcheck="true">
translateSpecifies an inline style for the element allowing you to apply the style to the content. 

<!-- Valid values yes and no. -->
<!-- Default yes. -->
<base translate="no">
Miscellaneous
contenteditableSpecifies whether the content of the element is editable. 

<!-- Valid values true and false. -->
<!-- Default inherited. -->
<base contenteditable="true">
draggableSpecifies whether the element is draggable. 

<!-- Valid values true and false. -->
<!-- Default browser specific. -->
<base draggable="true">
hiddenSpecifies whether the element is not yet, or no longer, relevant. 

<!-- Valid values an empty string or hidden -->
<base hidden> 
<base hidden="hidden">
<base> Event Attributes
Attribute Description Example
Document Element
oncopyThe script to be run when the user copies the content of an element. 

 <!-- Executes go() function -->
<base oncopy="go()">
oncutThe script to be run when the user cuts the content of an element. 

 <!-- Executes go() function -->
<base oncut="go()">
onpasteThe script to be run when the user pastes some content into an element. 

 <!-- Executes go() function -->
<base onpaste="go()">
Drag and Drop
ondragThe script to be run when an element is dragged. 

 <!-- Executes go() function -->
<base ondrag="go()">
ondragendThe script to be run when an element has stopped being dragged. 

 <!-- Executes go() function -->
<base ondragend="go()">
ondragenterThe script to be run when an element has been dragged to a valid drop target. 

 <!-- Executes go() function -->
<base ondragenter="go()">
ondragleaveThe script to be run when an element leaves a valid drop target. 

 <!-- Executes go() function -->
<base ondragleave="go()">
ondragoverThe script to be run when an element is being dragged over a valid drop target. 

 <!-- Executes go() function -->
<base ondragover="go()">
ondragstartThe script to be run at the start of a drag operation. 

 <!-- Executes go() function -->
<base ondragstart="go()">
ondropThe script to be run when a dragged element is being dropped. 

 <!-- Executes go() function -->
<base ondrop="go()">
Form
onblurThe script to be run when the element loses focus. 

 <!-- Executes go() function -->
<base onblur="go()">
onchangeThe script to be run when object changed and attempt to leave field. 

 <!-- Executes go() function -->
<base onchange="go()">
oncontextmenuThe script to be run when a context menu is triggered. 

 <!-- Executes go() function -->
<base oncontextmenu="go()">
onfocusThe script to be run when the element gets focus. 

 <!-- Executes go() function -->
<base onfocus="go()">
oninputThe script to be run when an element gets user input. 

 <!-- Executes go() function -->
<base oninput="go()">
oninvalidThe script to be run when an element is invalid. 

 <!-- Executes go() function -->
<base oninvalid="go()">
onresetThe script to be run when a dragged element is being dropped. 

 <!-- Executes go() function -->
<base onreset="go()">
onselectThe script to be run when some or all of the contents of an object are selected. 

 <!-- Executes go() function -->
<base onselect="go()">
onsubmitThe script to be run when a form is submitted. 

 <!-- Executes go() function -->
<base onsubmit="go()">
Keyboard
onkeydownThe script to be run when an element is in focus and keyboard key is pressed down. 

 <!-- Executes go() function -->
<base onkeydown="go()">
onkeypressThe script to be run when an element is in focus and keyboard key is pressed down and released. 

 <!-- Executes go() function -->
<base onkeypress="go()">
onkeyupThe script to be run when an element is in focus and keyboard key is released. 

 <!-- Executes go() function -->
<base onkeyup="go()">
Media
onabortThe script code to be run on abort. 

 <!-- Executes go() function -->
<base onabort="go()">
oncanplayThe script to be run when a file has buffered enough so it is ready to start playing. 

 <!-- Executes go() function -->
<base oncanplay="go()">
oncanplaythroughThe script to be run when a file can be played all the way to the end without further need of buffering. 

 <!-- Executes go() function -->
<base oncanplaythrough="go()">
oncuechangeThe script to be run when the cue changes when using the track element. 

 <!-- Executes go() function -->
<base oncuechange="go()">
ondurationchangeThe script to be run when the length of the media is changed. 

 <!-- Executes go() function -->
<base ondurationchange="go()">
onemptiedThe script to be run when a media resource element suddenly becomes empty, usually due to an error. 

 <!-- Executes go() function -->
<base onemptied="go()">
onendedThe script to be run when the media has reach the end. 

 <!-- Executes go() function -->
<base onended="go()">
onloadeddataThe script to be run when media data is loaded and playback can start. 

 <!-- Executes go() function -->
<base onloadeddata="go()">
onloadedmetadataThe script to be run when metadata has been loaded. 

 <!-- Executes go() function -->
<base onloadedmetadata="go()">
onloadstartThe script to be run whenthe media resource has started loading. 

 <!-- Executes go() function -->
<base onloadstart="go()">
onpauseThe script to be run when the media resource has been paused. 

 <!-- Executes go() function -->
<base onpause="go()">
onplayThe script to be run when the media resource starts playback. 

 <!-- Executes go() function -->
<base onplay="go()">
onplayingThe script to be run when when playback has already begun. 

 <!-- Executes go() function -->
<base onplaying="go()">
onprogressThe script to be run when the browser is fetching the media data. 

 <!-- Executes go() function -->
<base onprogress="go()">
onratechangeThe script to be run when the playback rate changes. 

 <!-- Executes go() function -->
<base onratechange="go()">
onseekedThe script to be run when the seeking attribute is set to false indicating that seeking has finished. 

 <!-- Executes go() function -->
<base onseeked="go()">
onseekingThe script to be run when the seeking attribute is set to true indicating that seeking is currently active. 

 <!-- Executes go() function -->
<base onseeking="go()">
onstalledThe script to be run when the browser is unable to continue fetching media data. 

 <!-- Executes go() function -->
<base onstalled="go()">
onsuspendThe script to be run when media data has stopped before being completely loaded. 

 <!-- Executes go() function -->
<base onsuspend="go()">
ontimeupdateThe script to be run when the media resources current playback position has changed. 

 <!-- Executes go() function -->
<base ontimeupdate="go()">
onvolumechangeThe script to be run when the volume has changed or been muted. 

 <!-- Executes go() function -->
<base onvolumechange="go()">
onwaitingThe script to be run when the media resource has paused but is expected to resume. 

 <!-- Executes go() function -->
<base onwaiting="go()">
Mouse
onclickThe script to be run when when a mouse is clicked on an element. 

 <!-- Executes go() function -->
<base onclick="go()">
ondblclickThe script to be run when a mouse is double clicked on an element. 

 <!-- Executes go() function -->
<base ondblclick="go()">
onmousedownThe script to be run when he mouse button is pressed down while the cursor is over an element. 

 <!-- Executes go() function -->
<base onmousedown="go()">
onmousemoveThe script to be run when the mouse button is moved. 

 <!-- Executes go() function -->
<base onmousemove="go()">
onmouseoutThe script to be run when the mouse cursor moves off an element. 

 <!-- Executes go() function -->
<base onmouseout="go()">
onmouseoverThe script to be run when the mouse cursor moves over an element. 

 <!-- Executes go() function -->
<base onmouseover="go()">
onmouseupThe script to be run when the mouse button is released while the cursor is over the element. 

 <!-- Executes go() function -->
<base onmouseup="go()">
onwheelThe script to be run when the mouse wheel rolls up or down over an element. 

 <!-- Executes go() function -->
<base onwheel="go()">
Scroll
onscrollThe script code to be run when the scrollbar of an element is being scrolled. 

 <!-- Executes go() function -->
<base onscroll="go()">
Window - NONE

Relevant HTML Tutorials

HTML Intermediate - More About Links