Articles HTML5

HTML5 – New Old Semantics

4.5/5 (2)

We are sure that you'll agree that HTML is one of the best web inventions of all times. The hyper text markup language is actually the cornerstone of modern web that appears to be a unique and self-sufficient phenomenon.

When HTML5 was being developed its developers have faced the few important issues that were to be solved with the help of HTML5. And one of these problems was creating a really explicit and extensible semantics. Now the tricky part is that the old versions of HTML were also being designed with the versatility in mind - with loads of various tags that were considered absolutely essential but have eventually proved themselves to be totally useless. The approach in the HTML5 has been changed according to the needs of today's Internet.

HTML5 New Tags

The task that had to be accomplished by the developers was to create the richer and meaningful semantics for HTML5 version - plus the fact that new solution was supposed to be flexible, strongly efficient and of course to correspond to all modern web standards. Now here comes the list of the new tags that will available in HTML5.

  • <article> tag defines an article
  • <aside> tag defines content aside from the page content
  • <audio> tag defines sound content
  • <canvas> tag defines graphics
  • <command> tag defines a command button
  • <datalist> tag defines a dropdown list
  • <details> tag defines details of an element
  • <dialog> tag defines a dialog (conversation)
  • <embed> tag defines external interactive content or plugin
  • <figure> tag defines a group of media content, and their caption
  • <footer> tag defines a footer for a section or page
  • <header> tag defines a header for a section or page
  • <hgroup> tag defines information about a section in a document
  • <keygen> tag defines a generated key in a form
  • <mark> tag defines marked text
  • <meter> tag defines measurement within a predefined range
  • <nav> tag defines navigation links
  • <output> tag defines some types of output
  • <progress> tag defines progress of a task of any kind
  • <rp> tag is used in ruby annotations to define what to show browsers that do not support the ruby element.
  • <rt> tag defines explanation to ruby annotations.
  • <ruby> tag defines ruby annotations.
  • <section> tag defines a section
  • <source> tag defines media resources
  • <time> tag defines a date/time
  • <video> tag defines a video

Let's just hope all of these will really be "alive" and useful tags, not just something we think is awesome today.

The Healing by HTML5 - Old Tags, Long Gone...

Now do you remember those old times when HTML3 was a sort of a miracle that could only be seen in Netscape? Yeah, it was the dawn of the Internet era. Of course we must never forget our history but it is a normal thing when we have to say good bye to some good old things (especially when they're not that good and no one really cares about them anymore).

So, HTML5 developers have recalled some of the tags that only the HTML geeks remember and since those tags are so much obsolete they were excluded from the new HTML - which by the way we would like to thank the HTML5 developers for. After all these old tags are in fact so old that in 20 years our kids are likely to think that they were used by William Shakespeare in his sonets. Anyways, take a last look at the following archaic tags, the only chance to see them again is by visiting the Internet and HTML museum (is there a museum like that by the way?).

  • <acronym> tag defines an acronym.
  • <applet> tag defines an embedded applet.
  • <basefont> tag specifies a default font-color, font-size, or font-family for all the text in a document.
  • <big> tag is used to format the text one size bigger, and can be in relation to your <font> or <basefont> size, if you've specified either one.
  • <center> tag is used to center text.
  • <dir> tag is used to list directory titles.
  • <font> tag specifies the font face, font size, and font color of text.
  • <frame> tag defines one particular window (frame) within a frameset.
  • <frameset> tag defines a frameset. The frameset element holds two or more frame elements. Each frame element holds a separate document.
  • <s> and <strike> tags define strikethrough text.
  • <tt> tag is used for "typetype" text, or fixed-width typewriter-type font. Other than the different type style, it has normal font characteristics
  • <u> tag is used to underline text.

Most of these tags are obsolete (even though to some of you they may seem slightly similar to the versatile new ones). Some of these old ones were used in early versions of popular browser versions but today most of them are just useless, and some of them can be placed with CSS functions (for example different fonts and text tags).

The Big Deal About the <DIV> Tag

Replacing the <div> tag with new tags is one of the main achievements of HTML5 in terms of semantics. The HTML4 <div> tag was (and still remains) one of the major tags used in HTML code but it was semantically weak because of how useless it is when it comes to specifying different sections of the website structure. The new HTML5 tags - such as <article>, <aside>, <nav>, <figure>, <header>, <footer> - will be very much more useful and comvenient because these tags give the opportunity to specify all major parts of the website and clarify the major structure. This means that you can easily navigate through the code even if your middle skilled coder or rookie - not to mention the fact that the search engines will be crazy about the websites pages so conveniently structured.

So What Do We Have?

There are many discussions about new tags and their semantic values and of course some people claim that semantics and visual representation have nothing in common - because semantics means more complicated coding and creates new field for some new HTML issues. But this is just one side of it all because we still believe that the new tags, along with the HTML5 semantics in general, are aimed at raising level of communication and cooperation between the web audience and the technologies that keep the web going.

Again - what we're trying to say is that, as cool as HTML5 looks and feels, it takes a lot of efforts and a little bit of witchcraft to forecast what the web is going to be all about within the next 5 years or so. Today these new tags and semantics approach really do look awesome and we totally love it, let's just not forget that things have changed in order for us to be able to take advantage of them, the new features have to be used by us, the huge web community - that's the only way for something that's simply new to become new and useful.

In case you want to know more about HTML5 please feel free to check out our previous awesome related entry - HTML5 vs. Flash - the battle for developers.

  • Eric

    I’m surprised that they’re removing the tag. I still use fairly often, but I suppose the more “correct” way now is to use a CSS style.. I’m also surprised that they’re removing the frames tags. I still occasionally see web sites using frames – sometimes it’s handy to do that to have a navigation pane and a content pane.

    • Boiss

      You can keep a simple nav like frameset with css.

  • Eric

    Looks like my last post left out one of my words. Here goes again:

    I’m surprised that they’re removing the center tag. I still use fairly often, but I suppose the more “correct” way now is to use a CSS style.. I’m also surprised that they’re removing the frames tags. I still occasionally see web sites using frames – sometimes it’s handy to do that to have a navigation pane and a content pane.

    • Jaezar

      Frame effects can still be achieved without actually using frames. Instead of a frame, you could have a div tag with a CSS attribute position:fixed, which makes it so that div doesn’t scroll with the rest of the page. This gives you a much faster loading page since you only load one instead of two.

      Also, the center tag is being eliminated because HTML should be content designation and order only. All formatting and positioning is to be carried out via CSS.

      • Bob

        That completely misses the point of frames. The advantage of frames is that the web developer only has to write a navigation page once, and then just include it in every other page. And then the browser only has to load the page once, which speeds up page load times.

        Not that I disagree with the decision to remove frames. They are more trouble than they are worth. But your suggestion for replacing them doesn’t do any of the things that frames did except for keeping the navigation pane visible.

        • Jaezar

          I don’t really know PHP, but there is a PHP solution to the only coding once issue. (With includes I think?)

          • Eric

            That’s fine if you’re using PHP, but not if you’re writing plain HTML or using another web programming language that might not have that feature.

        • bob2

          if you are still writing pure HTML you are a bit behind the times. a servers-side scripting language is imperative if you want any control over your site. PHP and ASPX (.NET) are the two main server-scripting languages. Python and ruby are also used often. They all have an “include” or “require” directive so that you can include your navbar on every page. If you use CGI, you can also use any programming language you want, compile it into a binary executable and there you go. The whole point of a serverside language is to not have static HTML files that are pre-programmed, but to generate the HTML on the fly for each user based on what he clicks, whether he’s logged in or not, what his permissions are, etc

    • Shashank Lakhotia (xHTML Developer- Zeon Solutions Pvt. Ltd)

      But as per SEO, Frames are not feasible to use as Google expects a single page to load with a single URL not the multiples as in the case with Frames. At the same time it is slow in performance also & that can keep the web page a bit heavier to load…

      • Tim Wickstrom – PHP/AJAX/MOOTOOLS GURU

        Agreed, Frames are obsolete and there are many ways to achieve the same effects including only writing code once and including it in every page. Glad to see them go! If your using them your doing yourself a huge dis-service and your site will be properly punished by google, yahoo, bing and the likes.

        • Dreiden

          The only modern day use of frames that I still see is with ad-serving. As the main rev generator for most websites I don’t understand why most ad tags are still using invalid markup, deprecated tags and even busted JS, but none the less they exist so we have to adjust until they come through and provide publishers with good clean code.

  • Technology Press

    The best news for web developers is that Microsoft has accepted to adopt HTML5 rules in Internet Explorer 9, which will make the IE on the same line as other browsers, and developers would not have to think a lot about cross browser differences. But still u have to support IE7 and IE8 for the next 5 or so years. what the ….

    • Moe Smith

      Heck with IE7. anyone still using it, can suffer the consequences of not updating.

      IE8 isn’t bad at all for compatibility. minor nuances but nothing more and nothing to bawl about.

    • Karan Saini

      thats a good news that MS will adopt html5 for ie9. But i guess ie9 will be coming later this year.

    • Lynn Cummings

      It sounds as though IE9 will still lag behind other modern browsers in supporting HTML5:
      http://a.deveria.com/caniuse/
      At least MS is putting forth some effort now, but they still have a ways to go.

  • Jake

    This seems more and more like BlogML than HyperTextML. What about the product, comment, avatar or advertisement tags? Wouldn’t those be needed to be semantic? Aren’t those things commonly represented on many HTML pages? This page has 1 article and 5 comments. Don’t we need comment tags more than article tags?

  • chewie

    who cares about html does anyone still use that?

    • Dana

      lol. Most things on the internet are HTML. Your very post is displayed with HTML.

      • Shashank Lakhotia (xHTML Developer- Zeon Solutions Pvt. Ltd)

        Don’t bother Dana abt what Chewie said. She seems to be unfamiliar with HTML completely. She should learn this to know it.

    • Robert Snyder

      How important is the use and learning of html code to designing a web site? Can a web site be created without its use?

      • bob2

        no. Click View > Source in your browser. all that code makes the page. Without HTML, you could still have a web page, but plain-text only. no clickable links, no pictures, no lines, no buttons, no colors, no borders, no fonts, no tables, no indentation, just plain text — as if you were looking at a .txt file in notepad.

        Even MS Word uses HTML Yes, MS Word is essentially a WYSIWYG HTML editor.

  • dave

    “We are sure that you’ll agree that HTML is one of the best web inventions of all times. The hyper text markup language is actually the cornerstone of modern web that appears to be a unique and self-sufficient phenomenon.”

    This has to be one of the most inaccurate statements ever made…HTML isn’t a web invention. Without HTML you don’t have the web. Web sites are a “web invention”. It’s like saying words are the best language invention when actually words are used to create dialogue.

    • Jaezar

      Actually, I would say that HTML IS a web invention because the web is actually just a bunch of networked computers. You can definitely have the web without HTML. HTML is just one language for displaying data. There are all sorts of protocols for transferring information, such as FTP and TCP/IP. Are you saying that without HTML, we couldn’t have those protocols?

      • johnB

        Strickly speaking the web and HTML are interlinked – a la the words/language analogy used above. Tim Berners-Lee invented HTML for document and information shareing across differing platforms at CERN and coined the term World Wide Web. The network of networks of systems we call the internet existed WELL before this as a result of the DARPA/ARPAnet projects in the US. That’s the internet and the root of the protocols we know and love. **ML are simply languages used upon this infrastructure. Think talking in English, French, German etc bu still using the telephone network.. same thing.

      • Zombie King

        Um no, you are referring to the Internet (Capital “I”)… The web (www) is just one way to communicate on the Internet.

        http://en.wikipedia.org/wiki/Internet

      • bob2

        There are several levels of protocols. IP (Internet Protocol) is a low level protocol called the “Internet layer”. It specifies basic things like the IP address and port. Network hardware uses this “header” info to know which routers and switches to use in order to get the message to its intended destination. The message can be split up into several packets. IP is responsible for sending packets. It has no knowledge of the entire message.

        TCP and UDP are the two most common “Transport Layer” protocols. They specify how the data should be structured and packaged into the packets and what actions should occur to ensure the message is received by the recipient (e.g. UDP is “fire and forget” but TCP performs several handshake operations between the sender and the final recipient and ensures that the packets are all received and assembled in the correct order by the recipient.

        FTP and HTTP are “application layer” protocols. They are not concerned with the actual packet configuration. These protocols are just a standard way to send high-level information like HTML between two computers. They define a standard way that the computers should communicate… for instance, a client will send a request to a server, and the server will send back a response according to the type of request. For HTTP, the request would be an URL and the response would be the server sending HTML code back to the client.. the browser parses this HTML code and renders it into the form of the webpage that you see. For FTP, the request would be a command like LIST and the response would be a directory listing

  • Joseph

    Removing support for the font and frameset tags will break _MANY_ web sites! And I’ll bet that a lot of jQuery-like code that is looking for DIV tags will break because article, aside, nav, figure, header and footer tags will be ignored. This could be a lot of pain… And by the way, the grammar used in this article is HORRIBLE.

  • notahack

    Hopefully web browsers will keep supporting older versions of HTML for a long long long time. I did a big jaw drop over losing frame and frameset. This would definitely break my app.

    • Shashank Lakhotia (xHTML Developer- Zeon Solutions Pvt. Ltd)

      Hey Notahack!! U shld just update ur Frames coding with the Latest dude & let the older versions of the Code be gone for some interesting changes on websites!!

  • chip

    the correct wording would be “Hypertext is one of the best INTERNET inventions…”. People forget the difference sometimes.

    • david

      actually…
      hypertext predates the internet by more than two decades. Douglas Engelbart demonstrated it in 1986 in what would later be called “The Mother of All Demos”; the one where he also demonstrated the worlds first computer mouse.. and coined the term by the way 🙂 oh and also interactive text, video conferencing, teleconferencing, email, and a collaborative real-time editor

      • david

        oops i mean 1968 .. it’s soo baffling pre-everything i’m almost unable to type it..

  • Iono

    After reading the article, I was left with the impression that nothing at all was said.
    There are two lists of tags, probably c/p’ed from somewhere, and some commonplace observations without any meaning – and those are even repeated twice, in every other paragraph.
    I suppose the author really wanted to get some point across, but maybe next time get some sleep first.

  • Roy Vincent

    got your point dave nice one… btw I like html5 after reading to this article…

  • uhsf

    They’re so stupid to have omitted a tag. Now we’re stuck with div .comment until HTML6.

    • uhsf

      … a *comment* tag. This stupid div .comment didn’t allow <comment>.

  • Shashank Lakhotia (xHTML Developer- Zeon Solutions Pvt. Ltd)

    Introdustion of HTML 5 is good to have in the business… But How abt it’s support completely with respect to the Current Standard Browsers with various Platforms? Are they all ready to support HTML 5 or will be together for every New Tags implementation?

  • Global Hemp

    While re-writing the Global Hemp website 7 years ago, I asked and suggested these tags to W3 back in 2003!

    http://lists.w3.org/Archives/Public/www-html-editor/2003AprJun/0134.html

    Its GREAT to see these tags make the light of day.

  • Tami

    *cough* dialog tag *cough*

    • uhsf

      the <dialog> tag could replace div #comments, but div .comment still has no semantics in HTML 5. the lack of <comment> is definitely the biggest fail for HTML 5

  • Hermitbiker

    …. great information in this post…. also seems to be a lot more info in the comments too !! 🙂 😉

  • lignano

    Thanks for this informations… html5 supported all browser?

    • Shashank Lakhotia (xHTML Developer- Zeon Solutions Pvt. Ltd)

      Mo Lignano! not yet Completely & that’s the only concern of these sort of technology implementation.

  • Marketingweb

    I think by a million miles the most interesting thing here is that font tags no longer are supported. Hopefully browsers will continue to render pages directly into the future as long as the correct (ie HTML4 or similar) doctype is declared, otherwise around 25% of the sites on the net that still use font tags will break.

    I am not suggesting that font tags are the ideal way, but it’s a pretty major thing to leave out. I also like the center tag, and there is often some things you can do with it quite neatly that are just not achieved with . Most can be achieved in CSS, however obviously, however I personally think it should remain forever possible to code up a page in just HTML (ie without using CSS) should one desire – but maybe that’s just me. CSS is great overall, but far from perfect itself, eg with it’s crappy implementation of Vertical Centering.

  • chicago web design

    Awesome, I cannot WAIT till HTML5 becomes the standard we dont have to even think about. Theres HUGE potential in it and Im very excited!

  • nick

    It is time to give up the flash and begin the HTML5?

  • Cosimo

    I am a little worry about my Flash templates’ sales…