Learning HTML: Part 5: Links and Document Structures

Learning HTML

HyperText Markup Language (HTML) is the de facto language of web documents. Created in part from existing languages and tools in 1991, it first became standardized in 1995 and has grown in popularity and usage over the last decades. Nearly all webpages are now written in HTML, and it is understood by all major web browsers.


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.

Screenshot 2018-09-09 13.58.19

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

Screenshot 2018-09-09 13.58.19

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

Screenshot 2018-09-09 14.06.56

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.

Screenshot 2018-09-09 14.12.53

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.

Screenshot 2018-09-09 14.24.38

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.

CodePen Example:

See the Pen Learning HTML: Links and Document Structures by Dan Cox (@videlais) on CodePen.

Mozilla Thimble Example:

Remix on Mozilla Thimble!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s