HTML universal declarations

There can sometimes be so much text and/or so many links on a webpage that it can get tedious assigning the same properties to them. If for example, you want all your text to be the same color, or all your links are internal (within your own domain).

This lesson focuses on:

Universal declarations?
The <base> tag
The <basefont> tag
CSS

Universal declarations?

'Universal declarations' refers to the ability given by some tags in HTML to assign a certain value to them and have it affect the rest of the webpage in some way. There are not many such tags in HTML, but the ones that do exist do make things easier.

It is a convenient and practical thing to assign a value in one place and have it referenced when needed instead of reassigning that value many times over.

The <base> tag

The <base> tag acts as a reference point for all the links on a page. This reference point is specified with the <base> tag's href attribute.

NOTE: The <base> tag must be placed in the head section of an HTML document. Also, the <base> tag has no end tag.

Example:

Lets say you run the website www.somewebsite.com, and you have a page on this website whose absolute URL is http://www.somewebsite.com/page1.php. On this page, you have seven images displayed and their absolute location is http://www.somewebsite.com/images/. When you try to display these images on your page, you can do so by specifying their location as in <img src="/images/img1.jpg" />, <img src="/images/img2.jpg" />, and so on, OR you can use the <base> tag to specify a reference point for all the images to simplify displaying them on your page.

The <base> tag to be used in this situation would look like this:

Now whenever you need to display an image on your page, you can do so by specifying the name of the image by its name alone, as in <img src="img1.jpg" />, <img src="img2.jpg" />, and so on, and the browser will automatically look for it in http://www.somewebsite.com/images/.

Another attribute of the <base> tag is target. The target attribute specifies where to open the links on a webpage. The target attribute should be used in the <base> tag when you are using it for links.

Possible values for the target attribute

_blank - all links on a webpage should open in a new window
_self - all links on a webpage should open in the same frame they were clicked on (if you're using a frameset)
_parent - all links on a webpage should open in the parent frame (if you're using a frameset)
_top - all links on a webpage should open in the same window (will break out of a frameset if you're using frames)

Example:

<html> <head> <title>Base target attribute</title> <base href="http://www.somewebsite.com" target="_blank" /> </head> <body> <a href="page1.php">Link will open in a new page</a> <a href="page2.php">This one too</a> <a href="page3.php">And this one</a> <a href="page4.php">And this one too</a> </body> </html>

In the above example, the target attribute specifies that all the links on the page will open in a new window.

Is the <base> tag really necessary?

There are those who would say that the <base> tag is necessary, and there are those who would say it is not. The <base> tag is efficient in that it makes links work from anywhere. Suppose that someone downloads a page onto their hard drive -- without the <base> tag, or without specifying absolute URL's, the link(s) on the page will not work. Essentialy, the <base> tag is used to insure that a link is going to work. While it is not absolutely necessary, the <base> tag makes it possible for links to work from anywhere, and for this reason serves an important purpose in HTML.

The <basefont> tag

The <basefont> tag is used to set the font style for all the text on a webpage.

Using the <basefont> tag you can set the size, color, and font of all the text on a webpage.

The <basefont> tag should be placed right after the <body> tag.

<basefont> tag attributes:

size - Sets the size of text.
Possible values: a number from 1 to 7, +number (increases the default size), -number (decreases the default size)
face - Sets the font of text.
Possible values: a font name such as Arial, Verdana, Helvetica
color - Sets the color of text.
Possible values: a color name, hexadecimal value, or RGB value.
If you are not familiar with color naming convention in HTML, read our HTML colors page.

NOTE: Notice how the <basefont> tag has the same attributes as the tag.

Example:

<html> <head> <title>Basefont</title> </head> <body> <basefont size="3" face="Courier, Helvetica, Tahoma" color="#008000" /> This text will be in a size of 3, have a Courier font, and will be green </body> </html>

Output:

This text will be in a size 3, have a Courier font, and will be green

NOTE: If you specify a list of fonts with the face attribute like in the above example, the visitor's web browser will use the first font in the list that is available on the visitor's computer. Meaning, if someone is viewing a webpage and their computer does not support the first font you specify, the browser will try the second font and so on until it gets to a font that is supported. This applies to the <basefont> tag as well as the  tag.

The <basefont> tag:

Does not have a closing tag.
Is deprecated in HTML 4.01 and above (CSS should be used instead)
Should be used just once in an HTML document
Does not affect text in headings, tables, or text within  tags

CSS

HTML allows for universal declarations, but they are few and one of them is a deprecated tag. The <basefont> tag does make things easier. Since it dictates a universal style, it is easier to change things with it when necessary, but still requires editing HTML files. For a much bigger possibility of universal declarations for webpages, CSS should be used instead.

With CSS, you can set much more universal declarations such as the color of non-visited links, visited links, font of text, padding and margin of elements, and more.

Visit our CSS section to learn CSS.