by

Structuring link HTML for a Tridion Schema

For the most part, good front-end code isn’t affected by the application that serves it. And, for the most part, good front-end code doesn’t need to be written specifically for that application. But there are some exceptions —like structuring the HTML for a title and a link when the link is optional. That’s a case where the front-end developer should have some base knowledge of the CMS (Tridion), and adapt their markup appropriately.

A Title and a Link

A title with a link is a fairly common pattern on a website. It could be used for article listings, news/blog posts, any number of callouts. There’s two ways this markup can be written.

Link inside of heading:

<h2><a href="#">A subtitle</a></h2>

 

Heading inside of link:

<h2>A subtitle</h2>

 

These two examples are semantically equal

This is an important point. From an HTML semantics perspective, one is not more right than the other. If you run the following code on HTML Outliner, you’ll see that the document is outlined the same way:

<!doctype html>
<h1>This is a section</h1>
<h2><a href="#">This is a subSection</a></h2>
<h2>This is another subsection</h2>

 

 

This is because a heading applies to its sectioning container1. And the anchor element is not a sectioning container.

So, we’re talking about a common pattern, with two equally right ways to do it.

Given equal semantic value, which is best?

This is one of those occasions where the CMS has a role to play in how the front-end developer should structure his markup.

If a link is a required field

If a link is a required field, then it doesn’t matter how the front-end developer does it. Either option requires equal effort on behalf of a back-end developer.

If a link is not a required field

Now it does matter.

Any element whose existence is conditional should not be the outermost element.

Here’s a Razor + .net pseudo-code example of “link inside title”:

<h2>
@if (!String.IsNullOrEmpty(model.fields["subtitlelink"]) {
 <a href="@model.fields["subtitlelink"]">@model.fields["subtitle"]</a> 
} else { 
@model.fields["subtitle"] 
}
</h2>

 

It’s an ifelse. Pretty simple. If there’s a link, wrap the text in the link. If not, just kick out the text.

Here’s a Razor + .net + DD4T pseudo-code example of “title inside of link”:

@if (!String.IsNullOrEmpty(model.fields["subtitlelink"]) {
 @(<a href=\"" + model.fields["subtitlelink"] + "\">")
}

<h2>@model.fields["subtitle"]
@if (!String.IsNullOrEmpty(model.fields["subtitlelink"]) { 
 @("</a>")
}

It’s two if statements. Why? Because Razor gets a little cranky if you output only an opening element inside of a block. So you have to treat the opening and closing tags like strings, and wrap each in their own if blocks.

any DD4T gurus who want to share better ways to code this are welcome to chime in.

So as you can see, a front-end developer’s choice of markup can have an impact on how a template is written.

TL;DR

Three big points here:

  • Link-inside-Title and Title-inside-link are semantically equal
  • If a link is required, either option is still equal
  • If a link is optional, then the markup should be written link-inside-title

This is a great example of why front-end developers should at least know the content management requirements for a given feature, because their decisions can affect developers. At best, a front-end developer should know how schemas can work in Tridion as they can affect the outcome of the final product.

Tell me what you think