xhtml to html5

colak · 2014-12-26 09:51:06

Did any of you convert any txp sites from xhtml to html5?

Any advice and methods used would be appreciated.

jakob · 2014-12-26 11:22:42

It can be very easy or more involved, depending on your existing site structure and how far you want to go. You can change the doctype and your existing markup should still work. And you can add structure to your page using the new header, nav, section, article, aside and footer tags. Here’s an excellent article on making the transition and what to consider.

colak · 2014-12-26 13:32:44

jakob wrote #286878:

It can be very easy or more involved, depending on your existing site structure and how far you want to go. You can change the doctype and your existing markup should still work. And you can add structure to your page using the new header, nav, section, article, aside and footer tags. Here’s an excellent article on making the transition and what to consider.

Thanks…. I guess I’d want to go the more involved way, to make use of the new tags as well as microformats… I’m also considering to move to a combination fluid/adaptive design

colak · 2015-01-05 08:10:14

Just to check back in here with another related question.

Can someone suggest what the semantic solution be for a sidebar navigation? To explain, I have the following structure.

<nav>main txp sections navigation</nav>
<article><header></header><p>txp article content</p></article>
>>> sidebar containing links to related articles and second column containing links to related categories
<footer></footer>

Basically I have no idea what semantic html5 elements and arias I should use for the sidebar. I was checking the aside element but I just don’t know if it is the right one as it will not necessarily contain related content as explained in the w3 site.

jakob · 2015-01-05 10:02:22

As always, there are various opinions on this, and you can, of course, simply put your sidebar blocks into independent div or section tags, but perhaps this article (from 2009) is some help in deciding your chosen approach…

colak · 2015-01-05 16:07:57

Thanks Julian,

Interestingly this answer to comments makes a lot of sense but it raises another question. If the sidebar/aside contains just links then they could be enclosed on a nav but what role should these navs have so as to separate them from the main menu which has – as I understand it – a navigation one?

jakob · 2015-01-06 09:49:19

Yes, there are many edge cases. I guess where role is concerned, the browsing habits of users of assistive devices is most relevant: I’m not sure how the nav tags are communicated and whether many <nav role="navigation"> tags leads to confusion.

This is discussed a bit here and here on the same site. In the comments a proposal is made that could serve you as orientation, even if not incorporated into the spec.

only sections that consist of blocks whose primary purpose is navigation around the page or within the site are appropriate for the nav element, so – for example – lists of links to sponsors/ advertisers would not be marked up as nav elements.

The spec says:

Not all groups of links on a page need to be in a nav element — the element is primarily intended for sections that consist of major navigation blocks. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases; while a nav element can be used in such cases, it is usually unnecessary.

What I often do is add an h1 tag or similar inside, i.e. at the beginning of the nav block, to denote its purpose, e.g. “site nav”, “section nav” and perhaps “in-page nav”. You could also put “related links” in a nav in an aside. According to the html5 outline, the nav is a sectioning element, so if you have a heading in it, it will show in the document outline and denote the purpose of the nav block. If you don’t want it to actually show on screen, you can class it with visuallyhidden so that it’s not visible but still remains available to screenreaders etc. You can check your own page’s html5 outline using a bookmarklet (such as this one – drag the link “bookmark” beneath the heading “Show HTML5 Outline” to your bookmark bar to get a bookmarklet that you can run on any page).

philwareham · 2015-01-07 10:57:58

There is also an Outliner that checks live webpages that I use, it’s here.

Although it does falsely report that <nav> elements need a heading tag, which they actually don’t. If you need to describe the navigation to assistive devices you can use aria-label like so:

<nav role="navigation" aria-label="Site navigation">

<nav role="navigation" aria-label="Page navigation">

If you want to go the whole way and also add full microdate, then this is an example:

<nav role="navigation" aria-label="Site navigation" itemscope itemtype="http://schema.org/SiteNavigationElement">

Run all your pages through the Google Rich Snippets analyser to see how Google interprets your page content.

colak · 2015-01-07 11:35:18

Thanks so much guys

So I take it that

site navigation is for the main linked sections menu
page navigation is for the side bar links to individual articles (related_articles tag)
any suggestions on how I should define the categories navigation?

philwareham · 2015-01-07 11:50:08

colak wrote #287131:

So I take it that… page navigation is for the side bar links to individual articles (related_articles tag)

Could be, though I’d name that something like Related articles. I use Page navigation on pagination between different pages of a list section – i.e., multiple article listing pages, like so:

<nav class="paginator" role="navigation" aria-label="Page navigation">
    <a rel="prev" href="#" title="Go to previous page" aria-label="Go to previous page">← Prev</a>
    <a rel="next" href="#" title="Go to next page" aria-label="Go to next page">Next →</a>

    <ul class="pagination">
        <li class="current">
            <b title="Current page" aria-label="Current page">1</b>
        </li>
        <li>
            <a href="#" title="Go to page 2" aria-label="Go to page 2">2</a>
        </li>
        <li>
            <a href="#" title="Go to page 3" aria-label="Go to page 3">3</a>
        </li>
        <li>
            <a href="#" title="Go to page 4" aria-label="Go to page 4">4</a>
        </li>
        <li>
            <a href="#" title="Go to page 5" aria-label="Go to page 5">5</a>
        </li>
        <li>
            <a href="#" title="Go to page 6" aria-label="Go to page 6">6</a>
        </li>
        <li>
            <a href="#" title="Go to page 7" aria-label="Go to page 7">7</a>
        </li>
        <li>
            <a href="#" title="Go to page 8" aria-label="Go to page 8">8</a>
        </li>
        <li>
            <a href="#" title="Go to page 9" aria-label="Go to page 9">9</a>
        </li>
        <li>
            <a href="#" title="More pages" aria-label="More pages">&hellip;</a>
        </li>
    </ul>
</nav>

For category tags, I use this markup (again with microdata) in my articles:

<article class="layout--span-1-8" role="article" itemprop="blogPost" itemscope itemtype="http://schema.org/BlogPosting">

   ...article content stuff...

    <footer class="article-footer">
        <span class="ui-icon ui-icon-pencil">By:</span>
        <span itemprop="author" itemscope itemtype="http://schema.org/Person">
            <a rel="author" itemprop="url" href="#" title="View author biography">
                <span itemprop="name">Phil Wareham</span>
            </a>
            <meta itemprop="jobTitle" content="Director">
            <meta itemprop="worksFor" content="Design Hive Ltd">
        </span>
        <span class="separator" role="separator">|</span>
        <span class="ui-icon ui-icon-tag">Tags:</span>
        <span itemprop="keywords">
            <a rel="tag" href="#" title="View articles in this category">Design for print</a>
            <a rel="tag" href="#" title="View articles in this category">Packaging</a>
        </span>
        <span class="separator" role="separator">|</span>
        <span class="ui-icon ui-icon-comment">Comments:</span>
        <a href="#comments-head" title="View article comments" itemprop="discussionUrl" itemscope itemtype="http://schema.org/UserComments">
            <span itemprop="interactionCount">3</span>
        </a>
    </footer>

</article>

I don’t bother with <nav> tags for category tags, as I feel having too many declared navigation areas would cause users undue confusion.

Textpattern CMS

Textpattern CMS support forum

#1 2014-12-26 09:51:06

xhtml to html5

#2 2014-12-26 11:22:42

Re: xhtml to html5

#3 2014-12-26 13:32:44

Re: xhtml to html5

jakob wrote #286878:

#4 2015-01-05 08:10:14

Re: xhtml to html5

#5 2015-01-05 10:02:22

Re: xhtml to html5

#6 2015-01-05 16:07:57

Re: xhtml to html5

#7 2015-01-06 09:49:19

Re: xhtml to html5

#8 2015-01-07 10:57:58

Re: xhtml to html5

#9 2015-01-07 11:35:18

Re: xhtml to html5

#10 2015-01-07 11:50:08

Re: xhtml to html5

colak wrote #287131:

Board footer