Digital Renaissance Editions

Become a FriendSign in


A 4.2. Syntax for creating links

Editors can create links within their own text and their introductory essays; the links can be to other sections of their edition, to other sections of the DRE site, or to external sites. They can also embed graphics, videos, and even texts from other parts of the DRE website. Links can be created directly in any document as well as in its annotations or collation notes.

NOTE: links external to the DRE site should be made only when the editor is confident that the URL will not change in the future.

External links are made using the standard HTML <a> element. This element requires a href attribute that specifies the page to link to, and should contain text describing the end-point of the link. For example, to link to a Google search page for Shakespeare, you would write something like

The <a href="">Google search for "Shakespeare"</a> currently shows the ISE as the second-highest authority on the internet!

Resources external to the DRE website should never be directly embedded into a document, with one exception: links to London locations in ​The Map of Early Modern London (MoEML) are treated in DRE/ISE/QME texts as internal links. See below.

Internal links are made using the <ilink> element. An "ilink" consists of two parts:

  1. The component of the whole website that contains the item to be linked. This may be the texts of the plays, the library of facsimiles, the Life and Times section of the site, or the database of Shakespeare in performance.
  2. The href, or specific location within the module that is the target for the link.

In most cases, you will be linking to another section of the same module -- from your introductory essays to a passage in the text, for example. In this case you will need to include only the second part of the ilink, the href.

The href attribute is used to specify what to link to, according to the rules described below. Some kinds of links also require a component attribute to be appropriately set. The element may contain text and markup describing the end-point of the link; if it is empty, a default description will be supplied.

Creating links from the annotations or collations of a document should look exactly the same as links from the document itself.

a) TLNs in the current document

If your document uses TLNs, you can create a link to a specific TLN like so:

Please refer to <ilink href="#tln-36">the full discussion</ilink> for details.

If your document does not use TLNs, you can link to a paragraph, since these will be numbered when your document is converted to Web format. You should insert a generic marker in the text (rather like "page 000" in a print MS). All paragraphs behave like TLNs, so your marker would look something like this:

Please see <ilink href="#tln-000">the quotation at the beginning of this essay</ilink>.

Later, when you are asked to proofread the document online, you can let the Coordinating Editor know what the paragraph number (and hence the TLN) should be.

Note that there is no short-hand for linking to pages or ranges of sections in the current document. For these kind of links to other documents, see below.

b) Title Page of any text

To link to the title page of a document group, you just need to specify its code.

The <ilink href="FairEm">title page of Fair Em</ilink> lists all introductory essays in this edition.

c) A Particular Document of any text group

Most links of this kind will look like this:

You may find that the <ilink href="AYL/F1">folio spelling</a> is a little confusing for high-school students.

This links to the first page in the scene view, since this is the default view. However, if you want to use something other than the scene view, use this syntax:

Pages of <ilink href="AYL/F1/page">the Folio as originally typeset</ilink> are also available.

Links to introductory and supplementary materials are handled in the same way. Each introductory essay will have a filename that includes the MLA abbreviation for the play, the name of the essay, and the extension ".xml". To link to one of these essays, use the filename excluding the initial MLA abbreviation and the file extension. Your General Introduction will have a filename like "AYL_GenIntro.xml"; thus you would replace "F1" in the previous example with "GenIntro". A cross reference from a level two note to your introduction to a specific section (paragraph) might read thus:

Please see the <ilink href="AYL/GenIntro#tln-12">full discussion</ilink> in the Introduction.

This would link to your paragraph 12 in the General Introduction. The same syntax links passages from one introductory essay to another or from an essay to supplementary materials:

This question is <ilink href="AYL/TextIntro#tln-8">discussed further</ilink> in my Textual Introduction.

See Galathea <ilink href="Gal/M#tln-19">TLN 19</ilink>.

In the second example above, the link is to the modern text ("M") of Galathea, paragraph 8. Use the same syntax to link to a TLN in a different play or its introductory essays:

John Cox discusses the process of printing in the First Folio in his <ilink href="JC/TextIntro#tln-2">Textual Introduction to Julius Caesar</ilink>.

d) Sections or TLNs of any text

To link to a particular section (or range of sections) or a text, the href would look like this (note that this links to your transcription, not the facsimiles):

See <ilink href="AYL/F1/page/2-4">pages 2 - 4</ilink> of the Folio text.

In this case you must specify the view type in the above format (although "default" is allowed).

You can also link to a particular TLN or any spot given an id like this:

Look <ilink href="AYL/F1/page#tln-265">half-way down the page</ilink> for an example.

In this case, if you don't care what view is used, you can leave it out, like so:

See <ilink href="AYL/F1#tln-265">TLN 265</ilink> for an example.

e) Annotations (aka Level 1 or 2 Footnotes)

NOTE: these don't actually work yet, but should soon

A link to an annotation will go to the page that has that annotation, and automatically open it.

Links to annotations look similar to TLN links. If you don't care about the view type the link will look like:

The <ilink href="AYL/M#ann-460">annotation at TLN 460</ilink> is worth noting.

As shown in the example, the annotation is specified by the TLN where the relevant lemma is found. If more than one annotation occurs at that TLN, all of them will be opened. If you only want one, you can specify which you want like so:

Only <ilink href="AYL/M#ann-493-2">the second annotation</ilink> is relevant.

f) Level 3 Footnotes

NOTE: these don't actually work yet, but should soon

Level 3 footnotes are treated like section links with a view type of "footnote" for the purposes of linking. For example,

See the <ilink href="AYL/M/footnote">footnotes</ilink> for more information.

would link to the full footnote document for AYL_M, and

See a more <ilink href="AYL/M/footnote/222">detailed discussion</ilink>.

would show the footnote for TLN 222 of AYL_M. Ranges of TLNs are also allowed.

Since level 3 footnotes are really documents in their own right (with their own TLNs, section ids, and annotations), the "#tln-" and "#ann-" syntax for TLN and annotation linking respectively can be appended to any of the above. For example,

The similarity to <ilink href="AYL/M/footnote#tln-123">traditional approaches</ilink> is clear.

would link to line 123 of the footnote document for AYL_M.

g) Internal Links to MoEML's London Locations

NOTE: this feature doesn't actually work yet, but should soon

We are moving towards interoperability with ​The Map of Early Modern London (MoEML). If your play includes references to London locations, you will, in the modern edition, identify each London location using the ilink element and the unique MoEML identifier for the location. The purpose of this tagging is two-fold: (1) it will allow us to visualize the London locations in a play using a MoEML map in the ISE/DRE/QME environment, and (2) it will allow MoEML to import London references in ISE/DRE/QME plays into its database of literary references (with a link back to the ISE).

If the name of the place is in the text of the play, you will wrap the name within the <ilink tag as follows:

<ilink component="geo" href="mol:CHEA2">Cheapside</ilink>

If you wish to identify a London location implied in the text, you will use an empty <ilink> tag as follows:

<ilink component="geo" href="mol:CHEA2"/>

The "href" consists of a prefix and the unique MoEML identifier. The prefix "mol:" enables the ISE to identify MoEML references and enables MoEML to harvest London references from the ISE texts. The unique MoEML identifier for London locations is an xml:id consisting of four letters and a number: CHEA2 for Cheapside Street, ALDG1 for Aldgate, LOND5 for London generally, and so on.

To find the MoEML xml:id for the location you are tagging, you will need to work with MoEML. There are two relatively easy ways to find the MoEML xml:id.

  1. Go to ​MoEML's Encyclopedia index page, where you'll find London's locations listed alphabetically within the categories ​Streets, ​Sites, ​Churches, ​Wards, and ​Neighbourhoods. Once you find the location, click on the name to go directly to the MoEML encyclopedia entry describing the location. The xml:id is part of the URL. For example, the URL of London Stone is ​ LOND2 is the xml:id of London Stone.
  2. MoEML has a ​page listing all of the xml:ids used in the site. Once you are on this page, use CTRL+F (Windows) or Command-F (Mac) to find any location. Searching for "London Stone" in this list will turn up bibliographic items, library texts, and at least two locations. You will want to be sure that you have the right LOCATION.

A few pointers about identifying London locations:

i) There are cases where a gate, a ward, and a street all had the same name (e.g., Aldgate). Be sure you have the right one.

ii) Some church names (e.g., St. Dunstan's, St. Michael's) were used by more than one church. Be sure you have the right one.

iii) Some locations (streets in particular) were known by more than one name (e.g., Eleanor Cross = Cheap Cross = Great Cross), or were spelled in various ways (e.g., Cornhill, Cornehill, Cornhulle, Corne-hill, etc). All name variants have the same xml:id. E.g., Eleanor Cross and Great Cross share the xml:id ELEA1.

iv) MoEML includes some London locations that are beyond the edges of the Agas map, such as Greenwich and Tyburn.

v) MoEML will gladly add other locations at the request of ISE/DRE/QME editors. Your expertise will benefit MoEML as well as the ISE.

If you have ANY questions or suggestions about this new feature, please contact Janelle Jenstad (Director of MoEML as well as Assistant Coordinating Editor of ISE) at ​

h) Linking to the ISE Life and Times

The component name in links to the ISE Life and Times is "slt"

Life and Times href values parallel the URLs used for a given page, with the "Library/SLT" portion removed. For example, the page /Library/SLT/ideas/religion/calvin.html can be reached using a href value ofideas/religion/calvin.html:

<ilink component="slt" href="ideas/religion/calvin.html">[your text goes here]</ilink>

The Life and Times component does not contain its own media files. In order to simplify embedding SLT media, the href attribute of SLT iembed tags is resolved relative to trunk/cocoon/static/content/Library/SLT/media/, where most of SLTs media files are expected to be stored. For example, to embed trunk/cocoon/static/content/Library/SLT/media/images/7thAge.GIF, a href value of simply images/7thAge.GIF could be used. This will display the actual image in your document, rather than linking to its page.

<iembed component="slt" href="images/7thAge.GIF">[your caption goes here]</iembed>

Only media files (non-HTML) may be embedded.

Note: to find the name of an image file, right-click (or, on an older Mac, control-click) on the image, and select "Open in a new window." you will then see the image filename as the last item in the URL of the new page you have opened.

4.2.3. Linking to texts from ISE to QME or DRE (and vice versa)

All links between ISE, QME, and DRE plays are internal links. The only difference is that if the text is on a different site, you need to specify that in your link. Here's an example that will link to the home page for Leir (on QME) from an ISE or DRE document:

<ilink site="QME" component="text" href="Leir">[linking text]</ilink>

4.2.4. Embedding

Embedding is achieved using the <iembed> element. This element has several attributes, some of which are optional:

Looks complicated right? Well, it's not actually that bad once you see some examples…

a) Embedding Another Text

<iembed href="AYL/F1/page/2" showCaption="true"/>

The above would embed page 2 of the Folio version of As You Like It into the your document. Since the element is empty but showCaption is "true", a default caption to the tune of "Page 2 of As You Like It (Folio)" will be used. Note also that, since the element is empty, a "/" appears before the ending ">", and no "</iembed>" is needed.

You could also do this:

<iembed href="AYL/M#tln-472" height="100"/>Rosalind explains</iembed>

Which would embed Act 1, Scene 3 in a box only 100 pixels high, scrolled to TLN 472. In this case, the box would be captioned as "Rosalind explains".

The values of href for embedding texts are the same as for linking to them, except that showing annotations is not supported. Note: Texts MUST NOT embed themselves!

b) Embedding Artifacts from the Performance Database

Embedding artifacts from the performance database will look like this:

<iembed component="sip" href="artifact:1234#standard">An example of a prompt book</iembed>

In the example above "1234" is the ID of the artifact to embed. "#standard" specifies that you want the standard size of the artifact. If you'd prefer the large, original, or thumbnail versions, you can use "#large", "#original", or "#thumbnail" respectively instead.

When embedding images, you will probably want to also specify the maximum height and width, to make sure the image fits properly into your text. For example,

<iembed component="sip" href="artifact:1234" height="300" align="right"/>

would make the image float to the right of the paragraph where the element appears, and would shrink it down until it's only 300 pixels high. Since I didn't specify which version of the artifact to use (with the "#standard" syntax as in the example above), the system will pick the size that is closest to 300 pixels high. Note that specifying both the height and width may distort the image if they aren't in the correct proportions; specifying only one or the other will ensure that the image keeps the proper aspect ratio.

c) Embedding Other Media

Pretty much anything else you may want to embed will end up being stored in the "static" area of the ISE site, so the embedding code will look like this:

<iembed component="static" href="textimages/mypic.jpg">An example</iembed>

where "textimages/mypic.jpg" specifies that you want the file "mypic.jpg" that's stored in the "textimages" directory. You will need to consult with the ISE/DRE/QME technical team to find out what to actually use.

Previous | Table of Contents | Next