Cloudspace | Cloudspace Tech Talks: HTML5

Cloudspace Tech Talks: HTML5

Posted on May 10, 2013 by Nina Talley

Yesterday was Tech Talk Thursday and our stupid-talented Graphic Designer, Keegan Berry, brought some intense HTML5 knowledge. He covered a pretty wide-range of HTML5 topics, including some sweet background info about W3C and WHATWG that illuminated how HTML5 developed to it's current point, but focused mostly on the current state of HTML5 and some fun new semantic developments.

Want a peek at Keegan's baller-ass training? We've compiled a handy TL;DR list for your knowledge hungry brains.

There is a new Doctype! Much like fetch, XHTML 2 will never happen and it's time to move on from XHTML's Doctype.

<!DOCTYPE html> <html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>HTML5 Training</title>
	<link rel="stylesheet" href="/css/main.css" />

There are friggin' awesome new semantic and structural elements!
- <article>
- <section>
- <aside>
- <figure> and <figcaption>
- <header> and <footer>
- <nav>
- <time>
- <bdi>
- <command>
- <details>
- <dialog>
- <summary>
- <mark>
- <meter>
- <progress>
- <ruby>
- <rt>
- <rp>
- <wbr>

But what about using the new tags with old versions of IE? Don't worry man, shim's got your back. It's super simple, just throw this in the head of your document:
```

```

Tags that aren't understood by IE are interpreted as inline elements, so you'll also need this in your css:
```
main, article, aside, figure, footer, header, hgroup, menu, nav, section {
 display: block;
}
```

Semantics and standards are super important! This guy explains why much better than we can. Here are a few ways to add additional semantic meaning to your markup.
Brand spankin' new media tags son!
- <audio>
- <video>
- <source>
- <embed>
- <track>
New graphical features to please your eyeballs.
- <canvas>,
- WebGL - which allows hardware-accelerated 3D graphics to be displayed in the browser, and
- SVG - vector-based graphics written in XML, all of which can now be embedded inline in HTML5 documents. What the what?!

Full CSS3 integration! Finally they can be together the way God intended. We're churning out another post to go more in depth on the topic. CSS3 is a diva, and requires her own blog post. In the mean-time, check out W3C's CSS3 tutorial.

HTML5 cleaned house! Here is a list of removed/deprecated elements. Rest in peace buddies. :-(
- <acronym>
- <applet>
- <center> - just text-align:center; or margin:0 auto; that -ish, brah!
- <dir>
- <basefont>
- <font>
- <big>
- <small>
- <frame>
- <frameset>
- <noframes>
- <strike>
- <tt>
- <hgroup>

Bonus bullet point! Here's some new performance integration information, that we didn't cover as much as we wanted to in the Tech Talk.

That just about covers everything! For a TL;DR list, it was pretty lengthy, but just imagine how long and thorough the Tech Talk must have been. :)

If you have any questions regarding the current state of HTML5 that we didn't touch on here, please feel free to reach out. Keegan is eager to spread more of his hard-earned semantic skills!