Compile Error: Found widget in an HTML context Ele

Question

I've seen this answer but my I can't see what could possibly be the problem in my own code. Here is the my uibinding xml:

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui' xmlns:a='urn:import:com.google.gwt.app.client'>
    <ui:style field='iphone' src='Render.css' />        
<div id='iHeader'>
    <div
        style='display:block; opacity:1; -webkit-tranform:translate3d(0px, 0px, 0px);'>
        <a>
            <span id='waHeadTitle'
                style='display:block; -webkit-tranform:translate3d(0px, 0px, 0px);'>
                <g:HTML ui:field="title" />
            </span>
        </a>
    </div>
</div>
</ui:UiBinder>

Then I get the error message: Found widget in an HTML context Element <g:HTML ui:field='title'>

Answer 1

The problem was that the root element of the widget was a div. I think that's fine as long as the whole widget is pure HTML, but if you want to mix HTML and widgets, the root has to be HTMLPanel.