Ian Marshall

Getting Started with HTML and CSS

Lesson 7: Anchors and Attributes

Sometimes we're gifted with an amazing invention that completely changes human communication: language, writing systems, paper, printing press, telegraph, telephone, and radio, for example. Computers, of course, have played a huge part in modern communication as a requisite for the Internet and social media. I'd like to add to this list the genius invention of the hyperlink, originally known as an "anchor."

The humble HTML <a> element, in my opinion, was the reason the Internet became what it is today. We take for granted the ability to click somewhere in one document and be immediately taken to another, related document. But imagine a time before the Internet. Imagine you're standing in a real library, holding a real book. Imagine being inspired to find a different book on the same subject, but with more detail about what you're currently reading. Imagine then having to go to a card catalog to find what you're looking for—well, as long as you know the name or author of the book. If you don't, you'd probably have to find a paper list of books by subject, or perhaps even speak to a real librarian. Even if the book were available digitally on a computer (probably on microfiche), there still wouldn't be a way to automatically redirect you to additional resources.

The Internet changed all that, of course. Reading books and other content online became a reality, and the hyperlink created a new way to connect online content through a dense, global, user-defined system. The author of each site was able to provide links to other sites, which explicitly contributed to a network of interconnected knowledge, and also implicitly launched a "like" system based on how many people linked back to your own site. (The latter, implicit functionality was foundational for companies like Facebook and Google.)

Images free from Wikimedia

<a>natomy

We've already seen this in action, but let's take a closer look. Here's a link:



On my site, with my custom styling, it looks like this:

Hyperlink

Clicking on the above link will take you to a new web page, the Wikipedia article on Hyperlinks. To return to this site, you can hit your browser's "back" button (usually a left-facing arrow). On an unstyled web page, however, it looks like this:

Let's look at this a little more closely.

<ahref=
"https://en.wikipedia.org
/wiki/Hyperlink">
Hyperlink</a>
opening tagattributeanchor textclosing tag

The entire href="https://en.wikipedia.org/wiki/Hyperlink" is called an attribute. An HTML attribute provides additional data for the browser. Sometimes an attribute is strictly informational (like the class attribute we saw briefly last lesson) but often, including in this case, it is an instruction (as with the <img> src attribute). The https://en.wikipedia.org/wiki/Hyperlink is a URL, or Uniform Resource Locator, more commonly known as a "web address." If you look at the top of your browser, you'll see this as your current URL:

The anchor tag has a built-in functionality: when the user clicks on it the browser will replace its URL at the top with the new one from that anchor's href attribute. This directs the browser to load a new page, replacing the current one (but saving the current page in browser history, so the user can go back to it).

The attribute itself usually has three parts:

href="https://en.wikipedia.org
/wiki/Hyperlink"
attribute nameassignment operatorattribute value

An attribute usually has a name and a value separated by an equal sign. The browser references the attribute by its name. The above is called an "href attribute." An attribute usually also has a value, usually contained within quotation marks. The URL above is called the "href value" or "href attribute value."

Any HTML element can have attributes, but two or more attributes with the same name in the same element will not validate (also, only the last one will keep its value). In other words, an anchor element should have only one href attribute. In fact, the anchor element must have an href attribute in order to function properly. An <a> element without an href attribute will ignore all special functionality of an anchor: clicking on it will do nothing. This makes sense, because the browser wouldn't know what URL to load.

You probably noticed I used the word "usually" a lot above. That's because there are some attributes that don't absolutely need a value or assignment operator. Just their very existence is enough for the browser to know what to do. Here's an example:



    

The disabled attribute name alone is enough to inform the browser that the button should be faded and ignore user clicks. Technically, the attribute name carries with it an implied value of true. Strangely, even explicitly setting the attribute value to false will still disable the button, which makes no sense, but eso si que es ("it is what it is" is a useful Spanish phrase for when there's just no explanation why HTML or CSS functions in an illogical way).

Linking to an external page

The href attribute value replaces the browser's current URL. This means that the current page is put into history and the user moves on to the next. Most of the time, this is exactly the behavior you want and the user expects. Although you should use it sparingly and with legitimate purpose, there is another way of opening web pages.



    

The second anchor has an additional attribute, target. Its value "_blank" is a bit strange because it begins with a required underscore (eso si que es). But it will open the URL in a new tab.

There was a time (not so long ago) that it was common to include target="_blank" in every link, annoying users who then needed to close lots of unwanted tabs. Currently, opening a link in a new tab is discouraged, but could still be used with good reason.

Linking to a fragment of an external page

Anchors were also designed to be able to zip right to a relevant part, or fragment, of a document, not just always to its top. To do this, a special character was intended to be used to identify separate fragments of a document: a hashtag (#).

When I was growing up, the # symbol was a "pound sign" and was used on telephones, or to represent actual weight (yes, in pounds). Ever wonder how it came to be called a "hashtag"? The "tag" part comes directly from HTML vernacular, as in an anchor tag. The hash is a computer science term, and in this context is the part of the URL followed by a hashtag. Here's an example:



    
https://en.wikipedia.org/wiki/Hyperlink#HTML

Notice the #HTML at the end. That's the URL hash. (We'll talk about the parts of a URL in a more advanced course.) Clicking the link will not only take you to the Wikipedia page for hyperlinks, but directly to the chapter about HTML in that document. In fact, go ahead and click on that link then look at the URL. It should have the hash #HTML at the end. When you're done, come back.

Here's another one:



    
https://en.wikipedia.org/wiki/Hyperlink#How_hyperlinks_work_in_HTML

This has a longer hash, with words separated by underscores: #How_hyperlinks_work_in_HTML. This Wikipedia chapter is relevant, but I also wanted to point out that spaces are not allowed in URLs. Sometimes you'll see words separated by underscores, like the above, but also sometimes hyphens or even simply squished together as one word without spaces.

Identifying a page fragment

Okay, so how does it work? The magic is in a new attribute, a fragment identifier. It has an attribute name of id and can have an attribute value of nearly anything, as long as it starts with a letter and contains no spaces (underscores, hyphens, and periods are okay). The attribute value must be unique on the page. In other words, no two fragments may have the same id value. That, of course, would defeat the purpose of an identifier.



    

Notes:

  1. The two articles are displayed exactly the same way in the browser. Adding an id attribute does not alter the CSS at all.
  2. There is no hashtag in the id attribute value, which, if you remember, must start with a letter. The hashtag is used only in the anchor, as we saw above.

Linking to an internal page fragment

Once you have identified fragments in your page, you can then create links that jump to that section. To do this, you would create an anchor and use the hash as the href attribute value. For example:



When the user clicks on the "Go to articles" link, the page will automatically scroll to the articles section. This makes it easier to navigate long pages of content. Here's an example:

Click here to jump up to "Identifying a page fragment"

Welcome back! Notice that the URL has changed (assuming you've clicked the link). There's a hash at the end of the URL, #pagefragment. That's exactly the href attribute value for the link above:



And clicking the link goes to the fragment with the id attribute value of pagefragment:



Notes:

  1. Again, notice the actual hashtag (#) only appears in the href attribute value, not the id attribute value. This is a common source of confusion. Think of the id as a label, or identifier, while the href attribute actually changes the URL, including its hash.
  2. Remember also that each id on a single HTML page must be unique. No two elements can have the same id attribute value.

Simulating a multi-page website

There's a "magic" CSS rule that can be leveraged to provide some really cool UI functionality. When the hash changes naturally from the user's clicking on an anchor with an internal page fragment link, CSS can change styling. For example, you can have multiple articles, but only one at a time is revealed, depending on the hash value.

The "Magic" CSS Selector :target

The best way to understand the magic is to see it in action.

Exercise 7.01: Arabic Counting

Instructions:

Using your code editor, create a new document called arabic_counting.html. Type the code below into that document, matching my syntax and line numbers, and check your work in a browser. The Arabic letters may be copied and pasted, unless you know how to type them on your keyboard.

arabic_counting.html


    

Observations:

  • Comments in CSS apparently need to be surrounded with /* and */.
  • The CSS display: none; rule seems to be able to completely remove content from the browser.

Terms:

  • Line 12 above hides all article elements as if they weren't in the HTML document at all. To simulate a multi-page website, set each "page" element (which could be an article or section, or any other element you want to use) to display: none; by default.
  • Line 13 above reveals only one article at a time, specifically the one that has an id attribute value equal to the URL hash. display: block; is one of many options for the display CSS property, which we'll go into more detail in a more advanced course.

Notice:

  • Display this HTML page in your browser. The URL hash changes each time you click on one of the anchors in the nav (#one, #two, etc.). The hash, without the actual hashtag, matches the id attribute value of the article being displayed. This is what the CSS article:target { display: block; } does.

Exercise 7.02: Slideshow

Instructions:

Using your code editor, create a new document called slideshow.html. Type the code below into that document, matching my syntax and line numbers, and check your work in a browser. The Arabic letters may be copied and pasted, unless you know how to type them on your keyboard.

slideshow.html


    

Observations:

  • Comments in CSS apparently need to be surrounded with /* and */.
  • The CSS display: none; rule seems to be able to completely remove content from the browser.

Terms:

  • Line 12 above hides all article elements as if they weren't in the HTML document at all. To simulate a multi-page website, set each "page" element (which could be an article or section, or any other element you want to use) to display: none; by default.
  • Line 13 above reveals only one article at a time, specifically the one that has an id attribute value equal to the URL hash. display: block; is one of many options for the display CSS property, which we'll go into more detail in a more advanced course.

Notice:

  • Display this HTML page in your browser. The URL hash changes each time you click on one of the anchors in the nav (#one, #two, etc.). The hash, without the actual hashtag, matches the id attribute value of the article being displayed. This is what the CSS article:target { display: block; } does.

Review

The hyperlink, the HTML <a> element, is a historical landmark of human communication. But it's also a little finicky in that it's one of the few elements that require an attribute in order to work. The href attribute value holds the external URL or internal hash that informs the browser to load a new page or scroll to a new page fragment when the anchor is clicked.

Page fragments are identified by the id attribute value. Each should be unique on a page.

Using the CSS :target selector, we can simulate a multi-page website with only one HTML document.