Apps

HTML 5 aims to formalize Semantic HTML

HTML 5's new additions focus on Semantic HTML by allowing Web developers to easily tag a meaning to content. Learn more about these new additions, and find out which elements didn't make the cut in HTML 5.

It's kind of hard to believe that it's almost been a decade since HTML 4.01 was made official. However, it has taken browsers a while to recognize the standard, and this process continues today. I was pleased to see that the W3C has released the first draft of HTML 5 with its goal of creating Semantic HTML.

Semantic HTML

The impetus behind Semantic HTML is the creation of HTML documents that are void of any reference to how the HTML is presented. This means that Semantic HTML contains only the implied meaning of data via the use of the appropriate tags. This has been the goal of the separation of content and presentation, and HTML 5 is pushing it closer to reality.

A couple examples of Semantic HTML include only using the table element for tabular data, and actual header tags (<h1>, <h2>, <h3>) are used to mark important data on a page. The creation of Semantic HTML introduces a number of new features and banishes some older elements.

New additions in HTML 5

HTML 5's new additions focus on Semantic HTML by allowing Web developers to easily assign meaning to content via HTML tags. The following list provides a sampling of these elements:

  • article: Represents an independent piece of content within a page.
  • audio: Provides multimedia support.
  • canvas: Renders dynamic bitmap graphics on the fly, such as graphs, games, and so forth.
  • dialog: Marks up a conversation.
  • embed: Provides support for plug-in content.
  • footer: Represents the footer of a section.
  • header: Represents the header of a section.
  • nav: Represents a section of a document whose purpose is navigation.
  • section: Represents a generic section of a document.
  • video: Provides multimedia support.

This subset of new elements demonstrates that presentational HTML is gone. Turn your attention to CSS when approaching the task of properly delivering content to the user community. One worry with working with a new technology is backward compatibility.

The HTML 5 standard includes two conformance requirements for Web developers and the software used to view the content (the user agent). The user agent section includes guidelines to ensure older HTML is correctly rendered, so there should be no worries about breaking existing Web content.

Out with the old

A quick perusal of the first draft of HTML 5 shows that the push towards CSS for presentation continues, as relevant elements have been removed from HTML 5. These elements include font manipulation with the standard font tag, along with basefont and big.

You will no longer be able to use the underline <u> element for underlining text, and strike is gone as well. It is interesting to see the bold <b> and italics <i> elements are still in place. One element that is often overused is <center>; beginning with HTML 5, you should use CSS to horizontally center elements.

Numerous attributes have also been removed; for instance, the align, background, and bgcolor attributes have been removed from the body element.

I know the removal of frame-related elements (frame, frameset, and noframes) will receive a resounding cheer from Web developers. The negative impact on accessibility and usability were the final straw for frames. Also, the applet tag has been removed, and the object tag is now the standard.

This is just a quick list of changes; the W3C site offers a detailed list of what has changed from HTML 4 to HTML 5.

More to come

The time for a new HTML version is long overdue. It is driven by the push to separate content from presentation and separate the code.

This is only the first draft of the HTML 5 standard, so changes are likely to occur -- and let's not forget that browser support will be slow to arrive, since the current version is still not fully supported. You should definitely keep an eye on the standard.

What are your thoughts on W3C standards and their usage? Do you develop standards-based Web applications? Share your thoughts with the Web Developer community.

Tony Patton began his professional career as an application developer earning Java, VB, Lotus, and XML certifications to bolster his knowledge.

---------------------------------------------------------------------------------------

Get weekly development tips in your inbox Keep your developer skills sharp by signing up for TechRepublic's free Web Development Zone newsletter, delivered each Tuesday. Automatically subscribe today!

About

Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a productio...

24 comments
shibaevv
shibaevv

The following elements are not in HTML 5 because their usage affected usability and accessibility for the end user in a negative way: * frame * frameset I do not agree with this statement. If developer build web application with frames and end users are not happy how it works we do not have to blame tool (frame/frameset). I see frames as good (cheap) alternative to portal based application, where I need multiple windows within ONE browser window to work/reload independently, but still able to communicate with each other (eg via JavaScript: otherFrame.location = 'reload.do' to call from myFrame). Valeri Shibaev shibaevv@apollosoft.net

johja
johja

Why bother when there is XHTML and CSS?

malc
malc

It stinks. I do create web sites but would not consider myself a 'developer' just an enthusiastic amateur. So now what? I have to use some nonce WYSIWYG web page creator like all those that have absolutely no clue how to create HTML (or worse still - and I can hardly bring myself to say it....Word?) How else? Must I now spend time more time I can ill afford learning CSS et al? I am in a group of web page creators that are going to be left in limbo and it ain't fair! My web pages will end up looking like all those nasty home websites with great big text in capitals, taking up the full width of the page and usually red on a blue background... gaaaah! Not fair world!!!! Malc-the-miffed

phil
phil

HTML 5 sounds great, but, as you wrote about 4.01, it has taken 10 years for browsers to come somewhere near its adoption. With one browser in particular, the fear of losing backwards compatibility has stifled development despite any provision for it in the standards. Also, why on earth are "the bold <b> and italics <i> elements are still in place"? If the aim of the new standard is to truly separate content from presentation, it is ridiculous to consider keeping these elements. The death of frames will come as a shock to some designers but they will take heart in the fact that tables remain, data or no data!

shibaevv
shibaevv

The following elements are not in HTML 5 because their usage affected usability and accessibility for the end user in a negative way: * frame * frameset I do not agree with this statement. If developer build web application with frames and end users are not happy how it works we do not have to blame tool (frame/frameset). I see frames as good (cheap) alternative to portal based application, where I need multiple windows within ONE browser window to work/reload independently, but still able to communicate with each other (eg via JavaScript: otherFrame.location = 'reload.do' to call from myFrame). Valeri Shibaev shibaevv@apollosoft.net

TJ111
TJ111

There is no reason to use XHTML and an XHTML doctype, unless you are serving the page with the proper XHTML headers. Serving XHTML as HTML causes the browser to go into quirks mode, as it is improperly formed HTML. All my web pages use valid HTML, and are essentially semantically equivalent of XHTML (minus the />).

poolmanjim
poolmanjim

XHTML is just a variant of HTML combined with the structure and form of XML. XHTML will adopt these new "tags" and standards eventually. Tags that make sense would make web design faster. Sure they might end up being just glorifed DIVs but I must admit I have thought time and time again as I have transferred sites into XML Docs for RSS feeds how I would just like to have a or a tag to use. They should make code a lot easier to manage.

Justin James
Justin James

... but you should have learned CSS sometime in the last 10 years. The standard has been around since then, and it has been quite clear that CSS was the way of the future. The HTML 4 spec clearly stated those non-CSS tags were deprecated and on their way out. It took me less than a day to get a comfort level with CSS basics, and only a few more days to know enough to convert an entire Web site over to it. I would think that taking a few days over the course of 10 years would be not a problem, even for a busy amatuer who describes themselves as "enthusiastic". J.Ja

N!tr0
N!tr0

malc, CSS is actually very easy to learn and makes maintaining your site even easier. You will thank yourself for spending the little time it takes learning how it works. Sure, it will take time to update your site(s) but it will be well worth it. Check out www.w3schools.com for some good tutorials, references, and online sandbox for testing code.

g4macgregor
g4macgregor

Semantic growth, much like personal growth, is certainly inevitable, and for many, long overdue. Change can sometimes be difficult, but in my enthusiasm and passion for the web, I see it as "all good". I have been in the process of mastering css for a very short time and although it goes much like my golf game, I enjoy the challenges of "hacking" that particular browser I'd just as soon see go away. Since that's not very practical business logic, I will stick to the Vodoo-Bill doll and chicken foot rituals when I get frustrated. Will we ever get there? Maybe. Maybe not. But it's the journey, the experiences, and the collaboration that will make it the best it can be. You can chose to be one of tow things - part of the problem or part of the solution.

Justin James
Justin James

Navigation between frames without a mouse is nearly impossible, for starters. Frames did nothing but cause problems. iframes are significantly more usable and accessible since they can be treated as a block element by the container. J.Ja

Tony Hopkinson
Tony Hopkinson

XHTML must be proper, your HTML may be proper if viewed as an XML Document. Do this a b c /b /c /a I have basically four code paths to attempt to implement what you meant by the above. Throw an exception Skip it Swap the closing tags Swap the start tags 1 in four, not too f'ing brilliant that is it? Four times as much code to write and enhance, yeah that's a flier. Do this a b c /c /b /a I have four possible code paths.... Same code... Now if all your pages are rendered as you desire in all major browsers with the same HTML, I'll concede a worhwhile effort. Otherwise I'm not seeing what's so great about it, given you apparently don't actually want to do XHTML. If pages were rendered at the cost of those who produced them. We wouldn't be having this chat.... :D

johja
johja

However, XHTML has been touted as "standard" coding. Will HTML 5 follow the standards of XHTML (empty tags, etc.) just as XHTML will adopt the HTML 5 tags? And I'm with you, if the tags are just glorified DIVs, then I'm OK with that! :)

ashiffman
ashiffman

Really, CSS leaves A LOT to be desired for complex layout and positioning. I learned CSS several years back and have been coding web pages since 1994ish. Using CSS to style elements on the page is great, but for layout it just sucks. There are some nice things about HTML 5, but look at how long it took to adopt HTML 4! No more tables for layout? How long do you think it will take to get everyone switched over? Another 10 years? Or maybe we need a new way of thinking about layout. I will say I'll be glad to see tags go away, among other things. And the idea of separating content from layout is great but CSS for layout is not the answer IMO, we need something new.

mishanv
mishanv

Justin, it does sound rather snotty and arrogant. There are those with different priorities. Your points are valid, your "presentation" was lacking.

malc
malc

Hi n8d1 (what WERE your parents thinking of when they named you?) :-) Thanks for the tip - I am gonna do it! Yep. CSS. Soon..... Very soon.

poolmanjim
poolmanjim

Agreed. As I look over the spec more holes appear in the concept. It seems as if they are trying to merge CSS and HTML (notice I didn't use an X). Honestly, my biggest concern isn't security like with most. I'm more concerned about this becoming a loose-typed Markup Language like HTML 4 and it lacking the structure that XHTML has. Sure security is great but if a web master doesn't do their job then the W3C can't be blamed for their incompitance. I just fear we are regressing on all the work we have done while the W3C is starting to standardize MS concepts that make IE our "favorite" browser (thick sarcasm).

Justin James
Justin James

The spec merges HTML and XHTML. Basically it says, "HTML can be easily translated to XHTML like so..." In other words, it shows you how to use the XHTML syntax with HTML 5. J.Ja

malc
malc

Hey I'm just a kid - (only 53) so plenty of time to learn. Always happy to learn. Started on CSS today (thanks to your prompting) So far - so good. I will get my head around it! Cheers Mishanv Malc

mishanv
mishanv

Having just passed the 54 year mark I've had plenty of moments of being the finger pointer myself about things I'm passionate about. I've also had the finger pointed at me many times by other passionate people. I'd rather we have the knowledgeable, passionate outburts periodically, than no passion. Where would this world be without passion? Like you malc, the information presented to the viewer, rather than the tools to present it, are usually my priorities. But learning the new tools can open up better methods for the presentation. Not always, but when it happens it's cool.

malc
malc

Hi Justin. Forgiven - all friends again? You are doubtless correct in 'techno-terms' about the state of HTML - but hey, believe it or not there are still some of us out there just using HTML as a means to an end. The information conveyed on my websites is of far more importance than how it was put there (within reason) but nevertheless, I take your point and I will endeavour to get to grips with CSS and another webasaurus bites the dust. Cheers!

malc
malc

mishanv - thanks for your astute observation. I little more encouragement rather than pointing fingers from J would have been more helpful.

Justin James
Justin James

I agree, my presentation was not terribly pleasant. I am far too cranky over this as a whole, between the fact that it's been 10 years since HTML 4 and people *still* are writing HTML 3-style stuff, and the fact that HTML 5 is an endorsement of what I consider to be a fairly big mess (the whole AJAX technique). I take it a bit more seriously than most, and probably a bit more seriously than I should. J.Ja

Editor's Picks