no image

Suggestion Help Span tags

Privacy Level: Public (Green)
Profile manager: Joe Cochoit private message [send private message]
This page has been accessed 1,050 times.


The Span Id Tag

What are they:

Span Tags create a bookmark or anchor which can then be linked to from anywhere else on the page.
A span tag, or span id, is a way of creating an internal link on a profile page. So, rather than a link taking you to a different web page, a span tag link jumps you to a different place on your current page. For example, if you click on the "Comment" tab at the top of a profile page it will jump you to the comments at the bottom of the page. Also, at various places on a profile page you will see the links [top] which take you back to the top of the page. Those are Span Tags, moving you around to different places on the profile page.

How to create them:

The first step is to create a named span id bookmark (or anchor). Note that the span tag anchor should be closed with </span> at the end. <span id="Bookmark"></span>.
For example, I can place a bookmark at the bottom of the page <span id="Bottom"></span>.
Try it - Down to the bottom.
The second step is to create the link to your named span id bookmark. Links are made by putting them in double square brackets ( [[ ]] ) in the same way you would create a link to another profile on Wikitree. You have to include a # before the span id name. Whatever text you put after the pipe (|) is what will show up as the text for your link. So, [[#Bottom|Down to the bottom]] will create your span id link Down to the bottom to jump to the span id bookmark we have placed at the bottom of the page.

Uses and applications:

The Span Id tag can be used in any situation where you wish to refer a reader to a different section of the profile.
Navigation around a wikitree page
Occasionally, there are situations where it is useful to direct the reader to a different place in a page.
Jump to a different section
It is often useful to be able to refer to a different section of a profile. For example, the profile of Alice Freeman has a cautionary reference to errors in the published literature at the top of the profile; a span id link takes you to a full discussion of the errors in an errors section.
So, the span id link [[#errors|errors]] is in the text at the top.
This links to the span id bookmark <span id="errors"></span> placed in the errors section at the bottom of the profile.
The narrative biography might refer to someone's [[#will|will]] and the span id link would take the reader to a full transcript of the will placed elsewhere in the profile with the bookmark <span id="will"></span>.
Use of the span id for references is the most common and useful application of the Span Id Tag. It is a way of referring to different page numbers in a source which is used multiple times. It is also a way of using Short Citations for in-line citations, in combination with a Source List or Bibliography for the full reference.
Citing different pages from same source using inline citations:
A common problem is how to cite different page numbers from a single source. You could just repeat the full reference every time it is used, but this can create a very long and messy Sources section and make the profile edit page very difficult to read and navigate. The span id tag can be used to jump from a shortened in-line citation to the full and complete reference in a Source List or Bibliography.
For example, suppose you have a favorite source documenting the life of John Smith which we will call:
Smith, David. The Smith Family of New York. (New York, 1930).
Normally, you would include this citation inside <ref> </ref> tags inside the narrative of your profile. You might even include a <ref name="doe"> tag so that you could reuse that citation again further down in the narrative by using <ref name="doe" />, but that would not allow you to call out different page numbers for different events.
So, instead, let's put it in the Sources section below the tag like this:
== Sources ==
<references />

* <span id="Smith">Smith, David. ''The Smith Family of New York.'' (New York, 1930)."
This creates a span id anchor which you can jump to from your in-line citations using different page numbers to the complete reference:
Mary Doe was born on 2 Feb 1895.<ref>[[#Smith| Smith]], p. 153.</ref>
Mary Doe married John Smith on 14 Feb 1915.<ref>[[#Smith| Smith]], p. 182.</ref>
Will appear on the profile page under sources as:
== Sources ==
  1. Smith, p. 153
  2. Smith, p. 182
*Smith, David. ''The Smith Family of New York.'' (New York, 1930)."
Using Short citations for inline citations:
It is recommended that wikitree editors use full and complete references when writing out their sources. However, this can make both the sources section and the edit page a very difficult to read wall of text. One solution is to use span id tags to create short and concise inline citations which then link to a complete reference in a source list or bibliography. For example,
Richard More was baptized 13 November 1614.<ref>Harris, page 123.</ref> He was a passenger on the Mayflower.<ref>Richardson. ''Royal Ancestry.'' (2013): vol. IV p. 148.</ref> He died before 20 Apr 1696.<ref>Anderson. ''Great Migration Begins.'' (1995): p. 1285.</ref>
== Sources ==
<references />

* <span id="Anderson"></span>* Anderson, Robert Charles. Complete reference...
* <span id="Harris"></span>* Harris, Donald. Complete Reference...
* <span id="Richardson"></span>* Richardson, Douglas. Complete reference...
Will appear on the profile page under sources as:
== Sources ==
  1. Harris, page 123.
  2. Richardson, Royal Ancestry. (2013): vol. IV p. 148.
  3. Anderson, Great Migration Begins. (1995): p. 1285.
* Anderson, Robert Charles. The Great Migration Begins: Immigrants to New England, 1620-1633, 3 vols., (Boston, MA: NEHGS, 1995): pages 1283-1287.
* Harris, Donald F. "The More Children of the Mayflower" in 3 parts, published in The Mayflower Descendant. Online at American, Part I: vol. 43, no. 2 (July 1993), pages 123-132 (with subscription): background of the More families and estates.
* Richardson, Douglas. Royal Ancestry: A Study in Colonial and Medieval Families, 5 vols.(Salt Lake City, UT: the author, 2013): pages 146-148.

Span Tags for HTML Formatting - DON'T

Those familiar with HTML coding know that <span> tags can also be used for styling in a manner similar to how <div> is used. This is NOT allowed, and should not be used in creating WikiTree profiles.
Specifically, the tags <span class="..."> and <span style="..."> should not be used to format elements on a profile. These uses will be marked as "suggestions" or "errors" and are likely to be removed by Data Doctors.
<span id="..."> is being used to create a simple link on a page to easily reference and move from one point on a profile to a different point on a profile. This is the only use of a "span tag" which is currently approved.

Example Pages

  • Johann Melchior Sorg - Uses short citations combined with a source list.
  • William White of the Mayflower - Uses short citations combined with a source list.
  • Alice Freeman - Uses short citations combined with a source list. Also uses span tags to jump to different sections (e.g. an error link at the top of the page jumps you down to the error section at the bottom).
  • Massachusetts VR to 1850 - span tags are used so you can click on a town and go to that town's VRs. Each town also has a span tag that jumps you back to the TOP of the page. This page is impossible without span tags.


Navigation Examples

The span tag <span id="Bottom"> was placed at the bottom of this page so we could link to it and jump to here from anywhere else on the page.

Another span tag <span id="Top"> was placed at the top of the page so we could link to it and jump back to the top. Try it - Back to the top.

Comments: 6

Leave a message for others who see this profile.
There are no comments yet.
Login to post a comment.
This is a fabulous tutorial about the use and creation of span tags. First time using span tags, so thank you for this. One note, I kept getting an error about have span with no ending, and had to go to G2G to find out about the added </span> ending that I needed to add. You may want to add this to your tutorial for other first timers.
Thanks Melissa. To my knowledge, the closing </span> doesn't actually do anything. Perhaps out of laziness and a desire to keep things simple, I have created many hundreds of these Span Id anchors without the </span>. It is my understanding that all modern browsers "self close" span tags so it is not necessary to close them. They all work perfectly and in no way affects the profile. That said, Ales who knows vastly more about coding than I do, thinks that all these tags should be properly closed with </ span> and has made them into errors. So, yes, you should put the </span> at the end - I will add this to this page.
posted by Joe Cochoit
Hey Joe, hope you and yours are well.

Um, I hate to be the bearer of bad news but have you seen this:

posted by Jillaine Smith
Great news! This will help those of us that like to use span tags by pointing out missing or unused anchors etc… I take it as approval and encouragement of their use.
posted by Dana Burns
Approval and encouragement is not how I interpret this set of suggestions, Dana. If you click through each error code, it indicates what is preferred.
posted by Jillaine Smith
I agree Dana. These suggestions are two things Jillaine, neither of which say you can't use "Span ID".

The first (951, 952) is saying that the span tags "Span Class" and "Span Style" should not be used. They are very different than Span ID. These 2 span tags are used in HTML coding and can be very confusing. I agree with the suggestion that they not be used on WikiTree.

The second group (943, 944, 945) is trying to cleanup errors in the use of "Span ID". I don't necessarily agree with 945 as there is no harm in having a span ID anchor without using it with a link in the biography. Tens of thousands of "Span ID" links and anchors were created by gedcom imports, so this may actually serve to cleanup a lot of gedcom junk.

I think it is encouraging that Aleš specifically targeted "Span Class" and "Span Style" (which is what the help page originally meant when it said span tags should not be used for styling more than 10 years ago) without making "Span ID" as suggestion as something which needs to be removed.

Of course, I am concerned that this is just a first step and that Span ID will eventually become a suggestion. But perhaps this is a recognition that Span ID is used by many WikiTree genealogists who find it extremely useful, and that it already appears on millions of pages (thanks to gedcom imports).

My other concern is that people will misunderstand these suggestions (as I think you did), and begin randomly removing Span ID tags inappropriately. But basically, at least for now, these suggestions do not say that Span ID tags cannot be used, or that they should be removed.

posted by Joe Cochoit