Links and Document Structures
Learning Objectives:
In this section, students will:
- Learn the differences between absolute and relative links.
- Begin to understand how HTML documents are connected to each other through linking practices.
- Review how documents are structured in regard to internal and external links.
Links
When interacting with a HTML document, most of the actions have to do with what are called links. Designed as the connections between documents, links in HTML are at the core of how one webpage leads to another.
To mark links as a unique tag, they start with an A and have an attribute called “href”. They are read, left to right, as “a hyper-reference to” and then a location.
The text between the opening and closing tag of a link is what is shown to the user. While a link may point to one place, what is shown to a user might be something else.
Uniform Resource Locators
Links point to uniform resource locators (URLs). Common called “web addresses,” these are the locations where another resource is found. They are categorized into two types: absolute and relative.
Absolute Locations
An absolute location in which includes the protocol and the exact location of some resource. A URL written with a HTTP or HTTPS in front of a web address are example of absolute locations. To exactly locate some resource, it be can be written with its site, directory, and even file name to absolutely define its placement.
Relative Locations
A relative location is one which does not include a protocol. Often, these are written simply using a filename relative to the current location. For example, if two files, index.html and page.html, were in the same folder or directory, they could reference each other through their filenames.
Using Dots
URL can include the use of one or two periods. Dating back decades to early programming practices, these have special meaning in understanding the structure of folders or directories.
Because slashes represent folders or directories, a single period in front of a slash indicates the current folder or directory. The use of two indicates the folder “above” (containing the current location). Multiple uses of slashes and two periods can move “up” a series of folders or directories from the current location.
Document Structures
Links need not refer to other resources outside of itself. Links used in a HTML document can also link to itself.
When an element has an ID, it can be used as an anchor. Links written in the document or in others can point to a location with ID by referring to the location of the file and an ID.
By using a hash, #, a link can use that ID as a location. In the same document, a link to another part need only include something like “#lists” to link to the part in the document that uses that ID.
Play with the Code:
Take a moment to play with the code and concepts in the embedded viewer below. Watch how code added in the HTML window is updated in the Result window.
Try it Yourself:
Based on the ongoing CV example from previous modules, add links to external resources that support the skills, materials, and other sections of the CV.
- For each skill (and where appropriate in other places), link out to websites and other resources that support your claim of having that skill or match the section.
Test your response on Mozilla Thimble Links to an external site..