Anchor Tags explained by a language teacher.

kdickso · ‎01-22-2017

In the endless quest to declutter my Canvas course sites and eliminate unnecessary "call-outs" to separate pages I've been playing with HTML, specifically Anchor Tags.

For the unaware, Anchor Tags are essentially hyperlinks that allow you to jump from one place to another WITHIN a page instead of jumping to a separate page. (Experts please forgive me, I'm trying to keep things low key here).

After looking in several excellent discussions here on Canvas, most especially Damon Ellis' expert summary drawn from other work by Stefanie Sanders here, I figured out Anchor Tags, but it wasn't easy. Most examples other than Damon's (including this example of how to do it on the syllabus page from UW) have extraneous bits of formatting that aren't part of the essential Anchor Tag itself. Damon's explanation is wonderfully divorced from extraneous code, but expects knowledge of HTML/coding language that still might be beyond some of us beginners. I realized that the problems I was having are similar to those that my own students have in introductory Latin and I'll philosophize at the end of the post, but in the mean time I offer an explanation of Anchor Tags that might be easier for the non-expert HTML dabblers like myself to use. (I've also included some Best Practice Suggestions after the philosophizing).

To create an Anchor Tag you have to be working inside the HTML editor, not the Rich Content Editor.

There are two basic elements when using an Anchor Tag:

The place FROM which you are jumping (the FROM text).
The place TO which you are jumping (your destination).

Step-by-step instructions:

The DEPARTURE POINT!

Locate/Create the text for the place FROM which you want to jump.
Think of an easy to remember "shorthand" name (unique identifier) for your anchor—each anchor needs a unique identifier so that it will find its destination appropriately. In the step below, use that name for your unique identifier.
In the HTML editor you will modify the text around your FROM text by adding the bold (blue and green for recognition here) as follows—the FROM text does not get altered, just add the code and label around it:

<a href="#YourUniqueIdentifierTermHere">FROM text</a>
- IMPORTANT: Notice that the Destination Point Unique Identifier MUST HAVE the hashtag (#) symbol at its beginning after the first set of quotation marks.

The DESTINATION POINT!

Locate/Create the text for the place TO which you want to jump.
In the HTML editor, modify the text around your TO text by adding the bold (blue and green for recognition here) as follows—again, the TO text does not get altered, just add the code and label around it:

<a id="YourUniqueIdentifierTermHere"></a> TO text
- IMPORTANT: Notice that the Destination Point Unique Identifier MUST NOT HAVE have the hashtag (#) at its beginning after the first set of quotation marks.
- Also important, if you want to use Anchor Tags in a blog post here in the Canvas Community, replace id with name in the above command.

The Philosophizing Bit—yes, if you clicked on "at the end of the post above" that was an anchor tag at work!:

HTML stands for Hyper Text Markup Language and it IS a language. Many people learn words or phrases in other languages and use them with varying degrees of success and appropriateness. It is entirely possible to utilize other languages without being fluent in those languages. Many of the explanations of HTML from the wonderful people in the Canvas Community assume a level of basic understanding that is still a bit beyond some of us just because we have gotten used to being able to function using bits and pieces of HTML without true fluency (like being able to order a coffee or beer in a foreign country without speaking the language).

Two of the main problems my Latin students have revolve around grammar/syntax labels and word order. In terms of grammar/syntax use direct and indirect objects, transitive and intransitive verbs, copulative verbs, subjects, predicate adjectives, independent and dependent/subordinate clauses, et cetera all the time, but they are confused by those labels for the parts of their sentences because they don't think in those terms and sometimes have never learned them (or only in the very distant past...or so they claim). In terms of word order, meaning in Latin is largely based in the endings of the words themselves as opposed to English, where word order is essential:

Take, for example, the following Latin sentences:

Canis virum mordet.
Canis mordet virum.
Mordet canis virum.
Virum canis mordet.
Virum mordet canis.
Mordet virum canis.

In those sentences we have six different examples of word order, but they all translate to "(The) dog bites (the) man." [The changes in word order do emphasize different things because the first position in a sentence is usually most important. Thus when the dog is first, he is what is being emphasized as the actor. When the man is first, he is what is being emphasized as the victim. When the verb mordet (he/she/it bites) is first, the action of biting is what is important.]

Blissfully, HTML requires pretty rigid word order using signals that turn things on and off by the use of an opening symbol such as <a> and a closing symbol such as </a>. There are some places this happens in Latin and I find it useful to remind my students of Algebraic expressions, specifically the good old PEMDAS order of operations. In HTML we have to remember that we are dealing with a series of nesting, paired frames/bookends/parentheses and everything that happens has to be nested within an opening and closing pair. [Disclaimer, I know you can leave end tags off occasionally just like we eliminate forms of the verb "to be" at times in Latin, but ideally and for simplicity lets say we should close our parentheses).

In re the "word order" situation, delving into HTML reminded me that when trying to understand and use a new bit of code one should always look for the bookends/parentheses that start and finish the sentence.

Best Practice Suggestions:

You might note that in the explanation above I used both bold text and colored text to aid in visual identification of the constituent parts of the code. This is a practice I would suggest to others when sharing explanations in Canvas. Being able to easily discriminate pieces of a puzzle help ALL of us, not just those with various processing difficulties. [Disclaimer, I am reminding myself that I need to remember to do this as I revise my visuals, not just with colored markers on a white board.]

In re the grammar/syntax situation, remember that we always need to define our terms. While "UniqueIdentifier" might mean something to an experienced HTML coder, to others it will NOT be obvious. Taking the time to provide the simplest explanation you can think of for your audience helps. When I explain transitive vs. intransitive verbs to my students I know that some of them already understand what I am talking about, but others do not and defining my terms makes sure we are all on the same page.

One of the explanations of anchor tags I read used the same order I did (departure point....destination point) and another reversed the process (destination point...departure point). I will admit, that although the explanation in the reversed process was somewhat clearer, part of the difficulty in understanding it was the process being reversed. I find that students for whom English is their primary language do much better with beginning to end, left to right, top to bottom explanations. However, there are plenty of people who have no problem with the reverse approach. Whatever the order you choose, if you define your terms well most learning styles should be able to follow your explanation.

Disclaimer: I've tried to model Anchor Tags within this post, but I may have to edit it several times because I am nowhere near fluent in HTML. It was during the editing to make sure the HTML worked that I discovered that, whereas in "Canvas" the bit of code for the anchor tag is <a id="identifier"</a>, IN THE CANVAS COMMUNITY (where this Blog is posted) it is <a name="identifier"</a>

I am sure another brilliant user can explain that difference, I only thought to try substituting "name" for "id" because I saw the different tags while researching Anchor Tags!