The new HTML5 video and audio code tags hold out a lot of promise. They are:

<video> [<video src="something.m4v"></video>] and

<audio> [<audio src="something.mp3"></audio>]

These new tags are likely going to be the defacto standard for video and audio transmission over the web in the future if the current snags with the technology are worked out. Only time will tell. But, since this is a blog dedicated to new advances in programming – we should devote some time to the current pros and cons of this technology.

So here are the pros: a) videos can stream over an iPhone and iPod touch b) a browser no longer has to have a plugin like Flash installed to view web video c) there is no more pesky object and embed code to write or have generated by Flash on an HTML page.

And now here are the cons: a) one of the major cons is lack of support for HTML5 video on older browsers such as IE8 which are still in wide use today b) in current HTML5 video you cannot expand to ‘Full Screen” mode because it doesn’t exist c) in current HTML5 video you cannot advance forward in the timeline – the video simply starts and ends.

The way Flash video is displayed and streamed is how the current paradigm of web video is thought to be. If HTML5 video cannot come up to the current paradigm of web video than it will have a hard time being adopted on a wide scale.

There are also some snags with the video codecs offered for HTML5:  H.264, Theora, VP8. Theora is likely to be discontinued because of lack of support, H.264 requires content producers to pay a royalty to encode videos,  and Google’s VP8 which is royalty free is likely to become the standard of the future but currently is ill-supported on just about every browser.

Currently, the codec most used everywhere to transmit HTML5 video is the H.264 codec. Youtube transmits its videos in the H.264 codec so it could play videos on the iPhone. But, in time, I believe Google’s VP8 will become more popular.

In CSS2 and on old IE web browsers a box is just a box – it cannot ever be rounded. A common work around is placing images in a background of a div tag. Well, I know plenty of designers and web developers out there who wish there was an easier way to implement smooth, rounded corners on block level elements in their layouts.

The new CSS3 selector which makes rounded corners is called “border-radius”. You name the degree of rounded edges by specifying the amount of pixels. Such as “border-radius: 4px;” Beyond naming the new “border-radius” selector in your code it’s best to also specify older code which does the same thing but is only supported on older browsers such as Firefox.

I would recommend writing the code just like this: {border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px;} to achieve the widest degree of browser support.

HTML5 has new useful input field tags which hopefully will be widely adopted in the future. They are <input type=”email>,<input type=”url”>,<input type=”tel”>,<input type=”search”>,<input type=”range”>,<input type=”number”>,<input type=”date”>,<input type=”datetime”>. Currently there are only three browsers that support these new input tags – they are Chrome 5, Safari 5 and Opera 10.

My personal favorite input tag is <input type=”date”> which displays a nicely formatted calendar. How often you would actually ever use this is debateable but it’s one of those nice to haves.  Most of the new input fields are on a list of “nice to haves” but not really critical to building web applications. If anyone out there has run into actual circumstances where these new HTML5 input fields would have come in handy in the past please let me know and we’ll discuss the merits of these new tags which will very likely be supported on more web browsers by 2012.

The HTML5 specification has new structural tags which describe the common elements on the page. The common elements are header,  footer,  nav,  section and article. Internet Explorer 8, Firefox 3.6, Safari 4, Opera 10 and Chrome 5 all support the HTML5 tags which describe common page elements.

These new tags are a great way to break up the page into sections and simplify the document structure. The tags are <header>, <footer>, <nav>, <section> and <article>.

HTML5 strives to simplify programming and this is one way in which they cut down on excessive nested div clutter.

Writing proper CSS2 is much like building a house or planting a tree (I know that may sound silly but please let me explain). The primary element in a proper CSS2 document is the called the root-level element. This root-level element is most often the HTML body tag. I am really jazzed about how much flexibility a site designer now has by placing a body tag element into a global style sheet. The web document has incredible flexibility starting off with this foundation. It really is like laying down a solid (albeit flexible) foundation of a house. The next element in the CSS2 specification is called the block-level element. This element is a really flexible unit of containment. You can see by the page code in this document that the divisional tags employed have a very important role in the division of space and separation of text.The last element employed is called the inline-level element. This element is stylized paragraph text or anything that generates an element box within a line of text and does not break up the flow of that line. A solid understanding of these definitions and how they are employed in practice is the key to developing solid CSS2 code. You will never have to worry about funky errors on your page once you can divide each of these fundamentals in your style sheet.

There is no doubt that after the root-level element has been established that setting up a divisional tag for the purpose of containment is a very good idea for many reasons. Firstly, it gives you an opportunity to shore up the over all width of the document. I also would recommend placing a max-width: 775 px in the root-level body tag as well. Secondly, you can have control over the background color, which in normal circumstances is white. This may not seem like such a big deal on PC browsers but it is a very big deal on Mac Safari browsers which without a background color specification will default to no color at all and whatever is in the body text background specification will show through. This method of CSS2 site design was recommended to me by a code guru at one of the large internet consultancies in downtown Chicago. It is a method I have stuck to since acquiring. I have found out from personal experience in the development of my own web sites that this is generally always the way to go.

Remember when Dreamweaver 2 used to have a timeline to develop movement via DHTML and CSS2-Positioning? It was quite a lot of fun. It never caught on in the conventional sense and was stricken from future versions, but there is no doubt about the coolness of such technology. Now it is 2011 and it is hard to believe looking back that such magic was possible back in 1999. The way to get around overlapping images was to use the .gif89 format. The main coolness of the .gif89 format was that you could run a transperent background through the images. I showed this effect off to prospective employers back in 1999 and it always raised a nice hoot with them. It was not me who wrote the code of course – that was a nice convenience of Dreamweaver 2. But, all the same, it was plenty of fun. Here is a pop up link of what I am writing about. Click here. Note that this file will run smoothly on Internet Explorer but will not run on Firefox. (The code was written before the existence of Firefox, otherwise I am sure Macromedia would have found a way to insure compatibility.)