CakePHP Span Tag within Anchor Tag

Question

I'm trying to have CakePHP output a link that looks like this:

 <a href="/foo/bar" class="some other classes">
     <span class="icon new"></span>FooBar</a>

So I use the following code in my view

    <?php 
echo $this->Html->link(
$this->Html->tag('span', null, array('class' => 'icon new')) . "FooBar",
        array('controller' => 'foo', 'action' => 'bar'),
        array('class' => 'some other  classes', 'escape' => false)
     );
?> 

However CakePHP outputs the following:

<a href="/foo/bar" class="some other classes">
     <span class="icon new">FooBar</span></a>

Which breaks my design. How can I get CakePHP to append "FooBar" after the <span> tags?

EDIT: Its also worth mentioning that I know a <span> tags shouldn't be within an anchor tag usually, but in the case its a must.

Answer 1

You need to use an empty string in stead of null as the text for the span, then your code will work as expected.

Looking at the source code of the HtmlHelper, null is treated as a 'special' value, causing only the opening tag of the span to be created. You can see this in this line:

https://github.com/cakephp/cakephp/blob/2.3.2/lib/Cake/View/Helper/HtmlHelper.php#L906

Change your code to this and it should work;

echo $this->Html->link(
    $this->Html->tag('span', '', array('class' => 'icon new')) . "FooBar",
    array('controller' => 'foo', 'action' => 'bar'),
    array('class' => 'some other  classes', 'escape' => false)
);

Additional explanation of the closing </span>

A bit of explanation, for those who wonder:

The closing </span> in your example is actually not present in the output generated by CakePHP, but automatically 'added' by your browser. If you view the source of the HTML in your browser, you'll see that this is what is actually in your HTML:

<a href="/foo/bar" class="some other classes">
 <span class="icon new">FooBar</a>

As you can see, no closing 'span'

Because the <span> is not closed, the browser will try to correct this error and automatically assumes that you 'forgot' to close it. Therefor it will add a closing </span> before the next tag it finds (in this case the closing </a>).

The 'inspector' in your browser will always show the HTML that the browser uses to render the output. This includes automatic corrections made by the browser and dynamically generated elements (e.g. Elements added via JavaScript).

To check the output of your PHP scripts, always view the source, not the inspector

Answer 2

In this situation, I've avoided the CakePHP helpers entirely because the markup becomes really messy and cannot take advantage of autocomplete or validation within your IDE.

I usually do something like this:

<a href="<?php echo Router::url(array('controller'=>'myController', 'action'=>'index'))?>"><span class="icon-new"></span>Foobar</a>