Learning HTML
- Part 1: Headings and Paragraphs
- Part 2: HTML Anatomy and Nesting Elements
- Part 3: Attributes
- Part 4: Layout
- Part 5: Links and Document Structures
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.
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.
CodePen Example:
See the Pen Learning HTML: Links and Document Structures by Dan Cox (@videlais) on CodePen.
Digital Ephemera 