Resource paths in HTML

In HTML, you can specify paths to resources in several different ways.

Types of resources

Typical resources include:

• External style sheets
• External JavaScript files
• Web images

Absolute paths

Absolute paths are one of several ways to specify a path from a web page to an external resource.

This applies to external style sheets, and external JavaScript files.

• Only style sheets and JavaScript files which you host on your own web site
• This does not apply to style sheets or JavaScript files you access via Content delivery networks

Absolute paths begin with a forward slash (/) character.

Example: making a link to an external style sheet:

<link href="/bootstrap/css/bootstrap.css" rel="stylesheet" />

Custom CSS:

<link href="/mgdp2050.css" rel="stylesheet" />

I recommend absolute paths as easier to use (as compared with relative paths).

A relative path looks something like this:

<link href="../bootstrap/css/bootstrap.css" rel="stylesheet" />

Custom CSS (if in subfolder):

<link href="../mgdp2050.css" rel="stylesheet" />

Custom CSS (if in home page):

<link href="mgdp2050.css" rel="stylesheet" />

The "../" indicates "move one level closer to the root."

Fully-qualified URL

A fully-qualified URL specifies the protocol and the full path.

Example:

http://htcwebcreative.com

In the above example, the protocol is "http://"

See also

• Cascading style sheet
• Hyperlink