Search

@bzerangue I see two reasons for that: Rapid Prototyping and less bits used. For example, Google’s privacy policy page uses HTML5, you will see some unclosed tags.

That link I gave on RDFa explicitly says that it’s compatible with both HTML5 and XHTML5, meaning the application/xhtml+xml isn’t going to be required to use RDFa.

This page on the W3C’s website goes into the technical details but, essentially, SVG will work in HTML5 as long as use use XML syntax.

Can anyone think of anything else? Obviously HTML5 Video and HTML5 Audio aren’t going to be an issue. Likewise, I think Canvas is pretty safe, yes?

@doug

Nice! I see now the link I gave was just referring to current implementations.

Hey y’all. I don’t know if this has been figured out yet (I’m sure it has, and I just missed the boat), but I got a great idea from one of our new Symphonians, tachyondecay, in his post about generating footnotes.

EDIT: Also, Fazal, included this solution in this thread. Sorry that I missed that. I need to give reading a try. :)

When he posted his code on Pastie, I noticed he was declaring his DOCTYPE as text, and his output method was set to ‘html’. Well, I thought with that implementation, it should be able to output as ‘xml’ the way he had it setup. And sure thing… it did validate.

Here’s a way that you can force XML output with HTML5. It’s a hack, but it seems to validate as HTML5.

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="xml" omit-xml-declaration="yes" indent="yes" />
    <xsl:variable name="doctype">
       <xsl:text>&lt;!DOCTYPE html&gt;</xsl:text> 
    </xsl:variable>
    <xsl:template match="/">
        <xsl:value-of select="$doctype" disable-output-escaping="yes"/>
        <html lang="en">
            <head>
                <title>Title</title>
                <meta charset="utf-8"/>
            </head>
            <body>
                <div id="wrapper">
                    <header id="header">
                        <h1>This is the Header</h1>
                    </header>
                    <div id="content-container">
                        <div id="content">
                            <p>Content here.</p>
                        </div>
                    </div>
                </div>
            </body>
        </html>
    </xsl:template>
</xsl:stylesheet>

Hey y’all, after looking at this and Allen’s Ninja Technique, I was looking at how you could easily move your markup from xhtml to html5.

Here’s the example xhtml: 

<?xml version="1.0" encoding="UTF-8"?>
<html>
    <head>
        <title>HTML Ninja Technique</title>
    </head>
    <body>
        <div class="header">
            <h1>HTML Ninja Technique</h1>
        </div>
        <div class="nav">
            <ul>
                <li>
                    <a href="#">Home</a>
                </li>
                <li>
                    <a href="#">About</a>
                </li>
                <li>
                    <a href="#">Contact</a>
                </li>
            </ul>
        </div>
        <div class="article">
            <div class="section">
                <h3 id="tips">Ninja 101</h3>
                <p>Ninjas are <em>not</em> about killing, it's about devotion.</p>
                <p>You will do well to heed to the following. Learn to:</p>
                <ul class="skills">
                    <li>Conceal</li>
                    <li>Strafe</li>
                    <li><a href="#tango">Tango</a></li>
                </ul>
                <p>Only a true ninja can summon the courage to sing karaoke in public.</p>
            </div>
        </div>
        <div class="aside">
            <h3>Here's an aside</h3>
            <p>We might also refer to this as a sidebar.</p>
        </div>
        <div class="footer">
            <h4>Footer Time</h4>
        </div>
    </body>
</html>

Here’s the XSL, transforming from xhtml to html5 markup (with specific html5 elements) 

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
    <xsl:output method="xml" omit-xml-declaration="yes" indent="yes"/>
    <xsl:variable name="doctype">
        <xsl:text>&lt;!DOCTYPE html&gt;</xsl:text> 
    </xsl:variable>
    <xsl:template match="/">
        <xsl:value-of select="$doctype" disable-output-escaping="yes"/>
        <html>
            <head>
                <title>HTML Ninja Technique</title>
                <meta charset="UTF-8"/>
            </head>
            <body>
                <xsl:apply-templates select="html/body/*"/>
            </body>
        </html>
    </xsl:template>
    <xsl:template match="body//*">
        <xsl:element name="{name()}">
            <xsl:apply-templates select="* | @* | text()"/>
        </xsl:element>
    </xsl:template>
    <xsl:template match="body//@*">
        <xsl:attribute name="{name(.)}">
            <xsl:value-of select="."/>
        </xsl:attribute>
    </xsl:template>

    <!-- Changing div class='header' to <header> -->
    <xsl:template match="div[@class='header']" priority="1">
        <xsl:element name="header">
            <xsl:apply-templates select="* | text()"/>
        </xsl:element>
    </xsl:template>

    <!-- Changing div class='nav' to <nav> -->
    <xsl:template match="div[@class='nav']" priority="1">
        <xsl:element name="nav">
            <xsl:apply-templates select="* | text()"/>
        </xsl:element>
    </xsl:template>

    <!-- Changing div class='article' to <article> -->
    <xsl:template match="div[@class='article']" priority="1">
        <xsl:element name="article">
            <xsl:apply-templates select="* | text()"/>
        </xsl:element>
    </xsl:template>

    <!-- Changing div class='section' to <section> -->
    <xsl:template match="div[@class='section']" priority="1">
        <xsl:element name="section">
            <xsl:apply-templates select="* | text()"/>
        </xsl:element>
    </xsl:template>

    <!-- Changing div class='aside' to <aside> -->
    <xsl:template match="div[@class='aside']" priority="1">
        <xsl:element name="aside">
            <xsl:apply-templates select="* | text()"/>
        </xsl:element>
    </xsl:template>

    <!-- Changing div class='footer' to <footer> -->
    <xsl:template match="div[@class='footer']" priority="1">
        <xsl:element name="footer">
            <xsl:apply-templates select="* | text()"/>
        </xsl:element>
    </xsl:template>
</xsl:stylesheet>

THE RESULT: 

<!DOCTYPE html><html>
  <head>
    <title>HTML Ninja Technique</title>
    <meta charset="UTF-8"/>
  </head>
  <body>
    <header>
            <h1>HTML Ninja Technique</h1>
        </header>
    <nav>
            <ul>
                <li>
                    <a href="#">Home</a>
                </li>
                <li>
                    <a href="#">About</a>
                </li>
                <li>
                    <a href="#">Contact</a>
                </li>
            </ul>
        </nav>
    <article>
            <section>
                <h3 id="tips">Ninja 101</h3>
                <p>Ninjas are <em>not</em> about killing, it's about devotion.</p>
                <p>You will do well to heed to the following. Learn to:</p>
                <ul class="skills">
                    <li>Conceal</li>
                    <li>Strafe</li>
                    <li><a href="#tango">Tango</a></li>
                </ul>
                <p>Only a true ninja can summon the courage to sing karaoke in public.</p>
            </section>
        </article>
    <aside>
            <h3>Here's an aside</h3>
            <p>We might also refer to this as a sidebar.</p>
        </aside>
    <footer>
            <h4>Footer Time</h4>
        </footer>
  </body>
</html>

Since, I’m still growing with XSLT, if there is a much more efficient way to accomplish this, let me know. I’m just playing around… I haven’t really haven’t messed with HTML5 at all, mainly I’m straight up xhtml 1.0 strict.

I hope this spurs on more discussion on this topic.

It may be slightly off topic, but I thought you all may want to see this…

How to make all browsers render HTML5 markup correctly (even IE6!)

I know it’s for after the output of the HTML, but very useful to know none the less…

I’ve actually come across the technique before. One thing I dislike about it (and why I think the tutorial is misleading) is that it implies there’s a HTML/CSS fix but there isn’t, not for IE6. In the end you have to rely on JS.

Until the day comes that you can ignore IE6 truly (I’d say when it’s less than 10% of browsers) then I’ll rely on JS as a fix for IE6 users. Until then… Good for playing with the tech but that’s it.

Has there been any development on this? I’m currently considering Symphony for a project but the ability to output HTML5 without use of hacks is a bit of a concern to me. Does anyone know if this is feasible?

It’s not really a hack. And yes, I’ve been able to make an HTML5 page that validates just fine.

The only requirement is that even though you’re using HTML5 you continue to use XHTML syntax (closing elements, quoting attributes, ect).

You don’t really even need to continue using XHTML syntax. It’s HTML, set the output type to HTML:

  <xsl:output method="html"
          media-type="text/html"
          encoding="UTF-8"
          doctype-system="about:legacy-compat"
          indent="no"/>

  <xsl:template match="/">
      <html lang="en">
          <head>...

When I tried not closing tags I got errors in the compiler. You still need to use XHTML syntax (which you should do anyway).

Some of the XHTML syntax (auto-closing tags, for instance) are thrown out when presenting as HTML. You still need to code in XSLT (which is XML), but the html presentation mode will get rid of some of the XML-isms for you.

I’m going to steer well clear of the “you should” at the end too - that’s a religious war right there.

I’m going to steer well clear of the “you should” at the end too - that’s a religious war right there

Ha, seriously.

I suppose if you had to have unclosed tags, you could output them within cdata or something like that.

I reckon that HTML5 will be made more semantic with closing tags etc before it’s final release. Code makes sense that way!

I reckon that HTML5 will be made more semantic with closing tags etc before it’s final release. Code makes sense that way!

I seriously doubt it.

Their line of thinking: “Why are close tags implied for some elements and not for others? In the cases used, the pages render as intended, arguing for at most a warning.”

Their ways are not our ways.

It just sounds easier and more sensilb eto close all tags whether with </...> or <... />

For me at least, it makes it more readable and understandable.

XHTML behaves better with AJAX as well. Otherwise the parser might have to guess where the end of the content is instead of me just saying, #content.

Personally, I don’t see Symphony’s inability to do sloppy-syntax as a negative.

Here’s the thing - and I’m not saying I agree with unclosed elements - the parser is not implemented in JavaScript, it’s the browser that rendered the document, so it’s the browser that takes care of interpreting the start/end of elements within the document. On most browsers, AJAX works just the same with unclosed elements as it does with closed.

It might seem messy to XML people (myself included), but it’s how HTML was originally designed.

I’m really quite fond of HTML5 though :) The new form attributes are fantastic!

Yeah, I’m quite looking forward to those. One thing I want to look into is seeing how to combine those with JS so people with HTML5 get HTML5 validation and the rest get hit with the standard JS errors.

As for how HTML was the first time around… It also had the blink tag. ;)

For reference, the blink tag was never part of the HTML specification. It was (I believe) intended as a joke - like Comic Sans. Microsoft ran with both :)

I was using some of the form JS on my sites to match the features, but it caused unintended side effects (submission of placeholder data was one). In the end I decided that graceful degradation was the way to go and left the JS out for IE and FF users, and just included the new HTML5 form attributes. Chrome, Safari and other WebKit browsers work great - and honestly, with the way things are going that’s all I care about for my personal sites.

Create an account or sign in to comment.

Symphony • Open Source XSLT CMS

Server Requirements

  • PHP 5.3-5.6 or 7.0-7.3
  • PHP's LibXML module, with the XSLT extension enabled (--with-xsl)
  • MySQL 5.5 or above
  • An Apache or Litespeed webserver
  • Apache's mod_rewrite module or equivalent

Compatible Hosts

Sign in

Login details