US Constitution in HTML5

About a year ago, I marked up the United States Constitution in HTML5 as a learning exercise. Fast forward a year, and I’m still not 100% certain I’ve gotten it correct. This document is troublesome in that it shares similar naming conventions with HTML5 tags, namely <article> and <section>. Does it make sense to have an Article contained with an <article> tag, or should it be in a <section>? In this case, I opted to stick with the document’s original naming conventions even though it may run counter to what’s currently suggested as a best practice on the matter.

How would you go about doing the markup for a pre-existing, historical document like this?

5 Replies to “US Constitution in HTML5”

  1. On Twitter, I originally told you that I thought it should go in an article tag. I still stand by this as being the best “semantically”, though upon further review, apparently article is supposed to be specifically used to define an article provided externally to your document.

    While I can make the logical case that your use of the article tag in this situation is valid (your document is an html5 rendering of the U.S. Constitution which is a separate document hosted remotely), I think you’re really probably encouraged to use the section tag as you previously had it (before I went and opened my big fat mouth).

    Though it really bothers my sensibilities to have a perfectly wonderful HTML tag named “article” that is only supposed to be used for externally hosted articles. I would go so far as to say that an “article” tag would be a perfect element for any dynamically posted contained block of logical text content (newspaper article, blog post, etc) and don’t like that the defined usage is for:

    The external content could be a news-article from an external provider, or a text from a web log (blog), or a text from a forum, or any other content from an external source.

    emphasis added by me

    That’s such a perfect definition for what I think the article tag should be, yet they go out of their way to lock in the usage for external sources only. Quite a shameful waste of a perfectly good tag, in my opinion. :(

    1. So, technically, in this case, I really should only be using <section> tags, and probably not using any <article> tags at all. I agree that limiting the use of <article> to be for external sources only seems rather silly. Maybe this will change before the spec is finalized? Who knows…

      1. Yeah. seems like the right choice here.

        And lol at “spec is finalized”. You’re making some pretty big assumptions about the W3’s ability to get ANYTHING done these days. Now that “the internets” are a real thing that has a lot of money involved, it seems like nobody in any of the standards bodies are able to get anything accomplished.

        They certainly don’t listen to the developers, in any case. If you’re not Microsoft, Mozilla, or Apple, you’ve got just about 0 say in what the approved HTML5 standard will look like.

        The perfect example of this is XHTML. Wasn’t XHTML supposed to be “the way of the future?” Everyone started closing their self-closing tags and adding crazy doctype declarations at the top of every file, and now the W3 swoops in and tries to tell us “Forget all that nonsense about an XML-compliant document markup language, this new flexible semantic markup language is the real future of the web.”

        The more things change, the more they stay the same. Internet Explorer still refuses to render anything properly. The Mozilla browser went from being a nice, lightweight little browser to a big, bloated monster that gobbles as much memory as it can find. The Mozilla developers are starting to say “Maybe we should fork Firefox and make a lightweight browser.” It feels like I’ve been transported back to the middle of the 90s.

        The only group that seems to have any sense is Google. I think that if Google wasn’t keeping everyone honest, HTML5 would include support for ActiveX objects natively.

  2. Also, on an unrelated note, the text-shadows defined around line 574 of style.css (section#comments ol.commentlist { text-shadow: 1px 1px 2px #0141a5; }) and then again previously on line 252 (section#content { text-shadow: 0 1px 0 #000000; }) really make the comments hard to read in Firefox 3.6.3 on Windows Vista. I know Vista has nasty font rendering and it probably looks pretty sweet on a Mac, but meh. Just thought you should know.

    1. Actually, on the Mac it looks like ass as well ;) I’ve gotta do some serious cleanup around here and soon.

Comments are closed.