The TYPO3 link Tag

The components (target, class, title etc.) of the TYPO3 link tag in content elements and FCEs.

To enable an editor to put links (HTML a href tag) to a URL within a content element, TYPO3 provides a special tag called link. With this tag it is possible to set links to an internal page, an external web site, and to an e-mail address as well.

Generic structure of the link tag

The generic structure of the link tag (all three variants) is as follows:

<link Target target class "title">anchor text</link>

This will result in an a href tag of the form:

<a href="(converted) Target URL" class="CSS class" target="target attribute" title="title attribute">anchor text</a>

A link tag can be inserted into a default content element (text, text with image etc.) as well as in Flexible Content Elements. Like other HTML tags, it has a unique identifer in an opening (here: <link) and in a closing tag (here: </link>). Now, we will describe the different parts of the link tag.

Target of a link

The Target of a link is the only mandatory parameter of the TYPO3 link tag. All the other ones (target, class, and title) are optional. Depending on the type of link (internal, external, e-mail), a different Target needs to be provided:

Link to an internal page

To put a link to an internal page within the TYPO3 system, you use the unique ID (uid) of the target page as the Target. TYPO3 converts that uid into a valid URL. By doing so, it doesn't matter, whether SimulateStaticDocuments, realurl or none of those URL rewriting features has been activated.

Internal link in TYPO3
# Set a link to the page with UID 42
<link 42>anchor text</link>

You can display the unique ID of a page, if you move your mouse over the page's icon in the page tree.

Link to an anchor within a page

To link directly to an anchor on another page, you need to append the name of the anchor (i.e. content element) to the unique ID and separate both values with a hash character ('#'). If the anchor is on the current page, you can omit the unique ID and just write the hash followed by the anchor name.

You can display the uid of a content element by moving your mouse over the element's icon in the TYPO3 list module.

Direct link to anchor (jump link)
# Link to anchor "4711" on the page with UID 42
<link 42#4711>link anchor text</link>

If the optional target attribute is omitted, TYPO3 will use the target that is defined in your TypoScript template record. Click here to learn, how to remove the default target='page' from link tags.

If the anchor text of the link is omitted, the title of the target page will be used instead.

If the target page can not be reached (e.g. if it's hidden, deleted, or access-restricted), just the link text without any link will be rendered.

Link to an external web site

A link to an external web site can be generated by writing its complete URL in the link tag. TYPO3 identifies an external link by the prefix http:// that has to be written before the actual web address.

External link in TYPO3
# External link to
<link>TYPO3 link directory</link>

If you omit the target attribute, the default target for external links (target="_blank") will be used in the generated link.

If you omit the link text, the external web site's URL will be used instead.

Link to an e-mail address

To generate an e-mail link, you just write the e-mail address into the link tag. TYPO3 uses the @ sign to identify an e-mail address.

E-mail link in TYPO3
# Link to the e-mail address
<link>anchor text</link>

If the automatic e-mail encryption feature is enabled (TypoScript configuration spamProtectEmailAddresses), the linked e-mail address will be encrypted by a JavaScript function. This is done to avoid automatic e-mail grabbing by so called spam bots.

If the link text is omitted, the e-mail address will be used in the generated link instead.

The anchor text

The anchor text (the text that is wrapped in a link tag) is an important part of a link, not only when it comes to SEO (search engine optimization). Carefully chosen anchor texts are crucial for the usability of a site. They improve the understanding and orientation of the web site visitors.

If the anchor text is omitted, TYPO3 will insert an anchor text automatically, depending on the type of the link (internal, external, or e-mail).

Link with and without anchor text
# "Our Products" is anchor text for link to page 42
<link 42>Our Products</link>
# No anchor text:
# Page title of linked page will be used
<link 42></link>

The target attribute

By using the optional target attribute, you can define a target window, in which the linked page (internal or external) should be opened.

Possible values of the target attribute

  • page — Default for internal links in TYPO3
  • _blank — Default for external links in TYPO3
  • _top — Open on topmost window level (e.g. outside of HTML frames)
  • 120x300 — Open in a popup window of a given size (here: 120 pixels wide and 300 pixels high)
  • - (dash) — Must be specified if the default target shall be used and at least one of the subsequent attributes (class or title) is specified
Examples: target attribute
# Open internal page 42 in new browser window
<link 42 _blank>anchor text</link>

# Open CNN's homepage in 550x700 pixel pop-up window
<link 550x700>CNN</link>

The class attribute

The optional attribute class can contain a CSS (stylesheet) class that is used to modify the layout of the rendered link. The specified class needs to be defined in a stylesheet before, of course.

Examples: class attribute
# Format the anchor text with CSS class "highlight" and set link to page 42, to be opened in pop-up (250x400 pixels)
<link 42 250x400 highlight>anchor</link>

# Format anchor text with CSS class "external" and set link to, standard target "_blank"
<link - external>anchor</link>

The title attribute

The optional title parameter can be used to specify a text for the title attribute of an a href tag. This text is displayed in a tooltip when moving the mouse over the generated link. Besides, this title text can also be used as additional information by search engine robots.

The text of the title attribute must be wrapped in double quotes.

Examples: title attribute
# "More information" as title attribute of link to page 42, to be opened in new browser window, CSS classe "moreinfo":
<link 42 _blank moreinfo "More information">anchor</link>

# "Webworker News" as title attribute of link to, standard target "_blank", no CSS class
<link - - "Webworker News">T3N</link>