This document answers questions asked frequently by web authors. While its focus is on HTML-related questions, this FAQ also answers some questions related to CSS, HTTP, JavaScript, server configuration, etc.
This document is maintained by Darin McGrew <darin@htmlhelp.com> of the Web Design Group, and is posted regularly to the newsgroup comp.infosystems.www.authoring.html. It was last updated on April 26, 2007.
The following questions have moved to other sections of the FAQ.
Use an anchor element. The HREF attribute specifies the URL of the document that you want to link to. The following example links the text "Web Authoring FAQ" to <URL:http://www.htmlhelp.com/faq/html/>:
<A HREF="http://www.htmlhelp.com/faq/html/">Web Authoring
FAQ</A>
First, label the destination of the link.
The old way to label the destination of the link was with an anchor
using the NAME attribute.
For example:
<h2><a name="section2">Section 2: Beyond
Introductions</a></h2>
The modern way to label the destination of the link is with an ID
attribute.
For example:
<h2 id="section2">Section 2: Beyond
Introductions</h2>
Second, link to the labeled destination.
The URL is the URL of the document, with "#" and the value of the NAME
or ID attribute appended.
Continuing the above examples, elsewhere in the same document you could
use:
<a href="#section2">go to Section 2</a>
Similarly, in another document you could use:
<a href="thesis.html#section2">go to Section 2 of my
thesis</a>
<a target="_blank" href=...> opens a new, unnamed
window.
<a target="example" href=...> opens a new window named
"example", provided that a window or frame by that name does not already
exist.
Note that the TARGET attribute is not part of HTML 4 Strict. In HTML 4 Strict, new windows can be created only with JavaScript. (See next Q&A.) Also, links that open new windows can be annoying to your readers if there is not a good reason (from the reader's perspective) for them.
With HTML, there is no way to control the size (or window decoration, or
other features) of a new window.
However, in JavaScript you can specify such details when using the
window.open() function.
Start with a normal HTML link (possibly one that opens in a new window as described in the answer to the previous question). Then use the ONCLICK attribute to open a window with the desired appearance for those readers with JavaScript supported and enabled. The following example specifies a window named "popup" that is 300 pixels by 150 pixels.
<a href="example.html" target="popup"
onclick="window.open('example.html', 'popup', 'width=300,height=150');
return false">View Foo</a>
Used in this manner, JavaScript can specify a new window with the desired appearance, without blocking access when JavaScript is unsupported/disabled.
In addition to the parameters height and
width (which take a pixel count as a value), the third
argument to the window.open() can include the following
booloean parameters (which take "yes" or "no" as
a value):
directories, location, menubar, resizable, scrollbars, status, and toolbar.
These boolean parameters control the presence of the corresponding window
decorations in the resulting window.
Once the file is uploaded to the server, you need only use an anchor reference tag to link to it. An example would be:
<a href="../files/foo.zip">Download Foo Now! (100kb ZIP)</a>
It is possible that the server might need to be configured for some different file types. (See the next Q&A.)
You can't do any of these things reliably, because the Web doesn't work that way.
When the browser requests a document (hypertext, image, audio, multimedia, etc.), the server tells the browser what type of file it is. The server should be configured to identify a document's media type properly.
The browser then decides what to do with it. Different browsers are able to and are configured to display different types of documents themselves. Browsers are usually configured to handle other file types by using appropriate helper applications or by offering to save the document to the filesystem.
RFC 2183 describes the Content-disposition header, which can be used to suggest how the browser should handle documents. The value "inline" suggests that the document should be displayed automatically, and the value "attachment" suggests that the user should be prompted before the document is displayed (or saved). Note that this mechanism has significant security implications, which are described in the RFC.
Most browsers allow users to download to disk if they want to. If the file must be saved to disk, if there is absolutely no other way to handle it, then the MIME type could be "application/octet-stream". However, this essentially says, "I can't or won't tell you what this is." Furthermore, the MIME type "application/octet-stream" provokes incorrect behavior in MSIE's HTTP implementation. A better alternative would be a custom MIME type like "application/x-some-explanation", which avoids these problems.
This is best done with a small form:
<FORM ACTION="[URL]" METHOD=GET>
<INPUT TYPE=submit VALUE="Text on button">
</FORM>
If you want to line up buttons next to each other, you will have to put them in a one-row table, with each button in a separate cell.
Note that search engines might not find the target document unless there is a normal link somewhere else on the page.
A go-to-other-page button can also be coded in JavaScript, but the above is standard HTML and works for more readers.
You cannot do this with HTML. Going "back" means going to the previous location in your history. You could create a link to the URL specifed in the HTTP Referer header (available in the HTTP_REFERER environment variable in CGI programs), but that creates a link forward to a new location in your history. Even then, the information in the Referer header can be wrong. Some browsers incorrectly send the Referer header when the user enters a URL manually or uses a bookmark. Some never send the Referer header (which is optional).
You could use JavaScript's history.back() to create a back
button (or link).
Naturally, this only works when JavaScript is supported and enabled.
Also, it is worth noting that the only navigation tool used more frequently than the "back" function is the hyperlink. Your readers almost certainly know how to use their browsers' "back" function. Users who don't know how to use basic functions of their browsers will only be confused when various pages imitate those functions in different ways.
You cannot do this with HTML.
However, Internet Explorer 4+ supports the
window.external.AddFavorite() method, a proprietary extension
to JavaScript that opens an "Add to Favorites" dialog.
The following example avoids creating a non-functional button for those
with other browsers, or for those with JavaScript disabled:
<script type="text/javascript">
function addf() {
window.external.AddFavorite('http://www.htmlhelp.com/',
'Web Design Group'); }
if (window.external &&
typeof window.external.AddFavorite != 'undefined'){
document.write('<input type="button" ' +
'onclick="addf()" value="Bookmark WDG">'); }
</script>It is worth noting that readers who know how to use bookmarks almost certainly know how to bookmark your site independently. Likewise, the few readers who don't know how to bookmark your site probably won't know how to use bookmarks that you create for them. Users who don't know how to use basic functions of their browsers will only be confused when various pages imitate those functions in different ways.
You cannot do this with HTML.
However, some browsers support the JavaScript window.print()
method, which opens a "Print" dialog.
The following example avoids creating a non-functional button for those
with other browsers, or for those with JavaScript disabled:
<script type="text/javascript">
if (window.print) {
document.write('<input type="button" onclick="window.print()"'+
' value="Print This Page">'); }
</script>It is worth noting that readers who have printers almost certainly know how to use their browsers' print function. Users who don't know how to use basic functions of their browsers will only be confused when various pages imitate those functions in different ways.
You cannot do this with HTML. However, the JavaScript method window.close() will close a window. The following example avoids creating a non-functional button for those with JavaScript disabled:
<script type="text/javascript">
if(self.close) {
document.write('<input type="button" onclick="self.close()"'+
' value="Close This Window">'); }
</script>It is worth noting that your readers are probably familiar with their systems' standard mechanisms for closing windows. Users who don't know how to use basic functions of their browsers will only be confused when various pages imitate those functions in different ways.
Use a mailto link, for example
Send me email at
<A HREF="mailto:me@mydomain.com">me@mydomain.com</A>.
Note that any email address that you publish on the WWW like this will probably start receiving unsolicited commercial email (UCE, junk email). It's a good idea to protect your real email address (e.g., by filtering incoming email, or by using a separate address only for mailto links).
You can't, not in any reliable way. The methods that are frequently posted are not effective on all combinations of browser and email software (not even on all common combinations), and many of them have an important drawback: when they fail, the email will be lost.
If you really need a subject, you can do it by providing a form on your page, which submits data to a CGI program that emails the form data to you with your desired subject line. However, the form must have an input field for the visitor's email address, and you must hope that the visitor enters it correctly.
Here are some other ways to transmit subject-type information:
<a href="mailto:user@site" title="Your Subject">.
Most browsers will ignore the TITLE attribute, but some minor
browsers will use it as a subject for the email message. All browsers will
send the mail.
<a href="mailto:user@site?subject=Your%20Subject">,
which puts "Your Subject" (the space is encoded as "%20") in
the "Subject" header field of the email message in most current browsers.
Note however that you will lose mail from users of older browsers, so you
should consider whether the pre-filled subject is worth lost mail.
If you want to turn off link underlining when you're looking at pages in your browser, check your browser's configuration options. For example, in Mozilla Firefox see Tools > Options... > Fonts & Colors... for the Underline links option, in Opera see Tools > Preferences... > Web pages for the Underline normal links and Underline visited links options, and in MSIE 6 see Tools > Internet Options > Advanced > Browsing for the Underline links option.
If you want to prevent links on your page being underlined when your visitors see them, there's no way in HTML to accomplish this. You can suggest this presentation using style sheets by defining
a:link, a:visited, a:active {text-decoration: none}
You can suggest this presentation in a style sheet. First, specify colors for normal links, like this:
a:link {color: blue; background: white}
a:visited {color: purple; background: white}
a:active {color: red; background: white}Next, identify the links that you want to have different colors. You can use the CLASS attribute in your HTML, like this:
<a class="example1" href="[URL]">[link text]</a>
Then, in your style sheet, use a selector for links with this CLASS attribute, like this:
a.example1:link {color: yellow; background: black}
a.example1:visited {color: white; background: black}
a.example1:active {color: red; background: black}Alternatively, you can identify an element that contains the links that you want to have different colors, like this:
<div class="example2">...
<a href="[URL]">[link text]</a>...
<a href="[URL]">[link text]</a>...
<a href="[URL]">[link text]</a>...
</div>
Then, in your style sheet, use a selector for links in this containing element, like this:
.example2 a:link {color: yellow; background: black}
.example2 a:visited {color: white; background: black}
.example2 a:active {color: red; background: black}In your style sheet, use the hover pseudo-class to specify
a different appearance for links when the cursor is over them.
Specify the hover pseudo-class after the link and
visited pseudo-classes.
For example:
A:link { color: blue ; background: white }
A:visited { color: purple ; background: white }
A:hover { color: red ; background: white }
Your markup may include HTML syntax errors that affect links. For example, there may not be quotes around attribute values that require quotes, or there may be a missing closing quote at the end of the HREF attribute value.
Perfectly valid markup may trigger common browser bugs. For example, even though a ">" character is valid inside (quoted) attribute values, several older browsers will think the tag ends there, so the rest of the tag's attributes are displayed as normal text. Likewise, ">" characters inside comments can trigger similar browser bugs.
As another example, older versions of Netscape Navigator are known to have problems with links to named anchors when the anchors are within a table that uses the ALIGN attribute.
It is also possible that your URLs are incorrect. For example, your web authoring software may have used file URLs (e.g., file:C:\path\file.html). If so, then you should replace them with relative URLs (e.g., file.html) or http URLs (e.g., http://example.com/path/file.html).
HTML validators will find syntax errors in your markup. HTML checkers/linters can find some syntax errors and valid markup that is known to trigger some common browser bugs. Link checkers can find links to incorrect URLs.
Is there a space, #, ?, or other special character in the path or filename? Spaces are not legal in URLs. If you encode the space by replacing it with %20, your link will work.
You can encode any character in a URL as % plus the two-digit hex value of the character. (Hex digits A-F can be in upper or lower case.) According to the specification, only alphanumerics and the special characters -_.!*'() never need to be encoded.
You should encode all other characters when they occur in a URL, except when they're used for their reserved purposes. For example, if you wanted to pass the value "Jack&Jill" to a CGI script, you would need to encode the "&" character as "%26", which might give you a URL like the following: http://www.foo.com/foo.cgi?rhyme=Jack%26Jill&audience=child
Note that the "?" and other "&" character in this URL are not
encoded since they're used for their reserved purposes.
However, when this URL is used as an attribute value in an HTML
document, the "&" character must be encoded as "&", like the
following:
<a href="http://www.foo.com/foo.cgi?rhyme=Jack%26Jill&audience=child">
If you are trying to link to a particular type of file and it is not returning your desired response, chances are that the server needs to have the type configured. Talk to your system administrator about getting them to add the content type. Here is a list of common types that may need configuring:
| Content Type | Description |
|---|---|
| application/msword | Microsoft Word Document |
| application/octet-stream | Unclassified binary data (often used for compressed file or executable) |
| application/pdf | PDF Document |
| application/vnd.ms-excel | Microsoft Excel spreadsheet |
| application/zip | ZIP archive |
| audio/x-wav | WAV audio format |
| audio/midi | MIDI audio format |
| audio/x-pn-realaudio | RealAudio |
| image/gif | GIF image format |
| image/jpeg | JPEG image format |
| image/png | PNG image format |
| text/css | CSS style sheet |
| text/html | HTML document |
| text/plain | Plain text |
| video/mpeg | MPEG video format |
| video/quicktime | QuickTime video format |
| video/x-msvideo | AVI video format |
Another method of ensuring that your file is properly sent to the client is to compress it into a standard compression format. Virtually all servers are set to handle the .zip extension and it is widely recognized by users.
Some servers (NCSA, Apache, and others) can be configured to support user-configured content types. Details are server dependent, so consult your server admin or documentation.
Note that Internet Explorer incorrectly ignores server-provided MIME types, so it sometimes "does the right thing" when the server is misconfigured. Other browsers correctly heed the server-provided MIME types, so they will reveal server misconfigurations.
All rights reserved.