FromScratch, a simple but smart note-taking app
It sounds simple, and as a result the app is simple to use. It works with you, not against you. …
Add a little HTML5 to your websites
It will be a while before we can start using real HTML5, but because HTML5 is as much about defining current behaviour as it is about adding new, there is already a very large part available to us today. Here are the parts you can use today.
Why?
HTML5 is arriving sooner rather than later. The 2022 date means that it’s fully supported, finished, done. It doesn’t mean we can’t use it. For example, CSS2.1, from 1998, still isn’t fully supported, finished, done, either. We all use that as well, right?
A lot of the HTML5 supported today are actually browser quirks, formalised. It’s usable right now, will get you acquainted with HTML5 and will basically make your front-end life easier :) (And it all works in Internet Explorer too!)
There is much, much more to HTML5 than visible in this article. This article only focusses on what you can use now. If you want more info on HTML5, check the specifications, or the whatwg blog.
<!doctype html>The simplified doctype is ierhaps the most iconic idea in HTML5. It turns out, the above code is all that’s needed to trigger standards mode. The validator understands it as well. Quite a change from the humongous HTML4 or XHTML doctype declarations, no?
<meta charset="utf-8">This works the same as the doctype. You don’t need anything more than this to make your browser set a charset. It turned out that people so often mistype this attribute, (content="text/html; charset=utf-8"), that browser parsers actually encountered charset=utf-8 more than the whole content attribute. Since it’s legal to omit the quotes, charset is being parsed as an attribute in all browsers. And it’s legal in HTML5.
<script>
//your javascript
</script>
<style>
// your css
</style>You no longer have to declare the type attribute with text/javascript or text/css. All browsers already act as if anything inside those tags is javascript or CSS.
Getting used to new structural elements
HTML5 introduces a bunch of new elements that allow you to better describe your document:
- <header>
- <footer>
- <nav>
- <section>
- <article>
- <aside>
These are not all the new elements, but they are the ones that are going to replace the numerous divs used today. While you can use them already, I consider it a bit tricky in-production (it’s dependent on javascript). Instead of using the elements however, it’s a smart thing to start using these names as classes for the divs you currently use. When the time comes, it’s easy to just switch over to these elements.
Soon we’ll be living in the future!
When you start using HTML5 like in the examples above, you have the benefit of acquainting yourself with HTML5, still make websites that work today and more importantly, make sure your websites will still work for a long time to come!
Hi, I'm Kilian. I make my living building Polypane, the
browser for responsive web development and design. If you're reading this site, that's probably
interesting to you. Please try it out!
Related articles
Notarizing your Electron application
Starting with MacOS 10.14.5, all signed applications by ‘new’ developers will need to be notarized or they will trigger Apple’s Gatekeeper software and prevent users from installing your app. That means that aside from signing your application, you will need to notarize it as well. This is how to successfully notarize your Electron application. MacOS…
Using Google Analytics to gather usage statistics in Electron
The Electron App framework makes it really easy to build cross-platform applications. I know this, because I’ve made a bunch. But how do you find out if people are using the features in your application? You could ask them or wait for them to tell you, but you can also use Google Analytics’ event tracking…
Hi Kilian,
I posted a demo on my site calling it “A modern approach to 3 equal heights columns …”, where I use HTML5 structural tags as class names, but I wasn’t familiar with the reduced charset meta-tag. Now I am. Nice write-up.
I’m aware that HTML 5 is coming. What I didn’t know is that you can start using some of the elements that come with it!
Thank you for this very informative post. I’m looking forward to using the new structural elements and make my templates ready for the future!
Great article, I’m marking up my studio’s new site using the tips listed here.
Any idea on the impact, if any, that HTML5 will have on (current) search algorithms?
[…] Add a little HTML5 to your websites • CSS & (X)HTML • Kilian Valkhof Adding HTML5 to your website – Good post (tags: design webdesign tutorial programming html html5) […]
What!!?? I’m going to have to wait until 13 years for HTML5?????????
Stephen, one of the changes of HTML5 is that you can have a new
h1in eachsectionelement, which will of course have pretty big consequences. Search engines haven’t made clear how they are going to handle that, yet.[…] is declining. HTML5 is gaining traction. JavaScript libraries and CSS frameworks abstract the process of squashing browser bugs and […]
Interesting article.
Can’t wait until these , , … tags are fully supported.
I don’t know where to use for though.
[…] Read more […]
This was quite interesting, I knew some of this, but a lot of it was new information to me. Nice tip about using the new tag names for div’s today also.
g’8 article
“These are not all the new elements, but they are the ones that are going to replace the numerous div’s used today.”
The apostrophe should be removed here.
Thanks, Captain Apostrophe!
I fixed it :)
thank you for the article although i still think it’s too early for using html5 but as you said not early to start getting familiar to it!
as far as i read it’s going to be released in 2012 :)
Thanks,
Mohammed
I really look forward to being able to use this HTML 5 and CSS3, and leaving behind support for browsers like Netscape and IE 7 and below.
[…] DIRECT LINK » […]
[…] DIRECT LINK » Categories: Uncategorized […]
[…] DIRECT LINK » Categories: web developer […]
You can add the embed element and the “data-” attributes, too. The former is in fact supported by every major browser, and the latter is being ignored (as it should) but still part of the DOM, so it can be accessed via JS.
great article Can’t wait to use this HTML 5 and CSS3
very nice
thanks for sharing this with us
Just about to launch into doing a website using HTML5 (or rather as much as will be allowed). Gotta jump in and get feet wet at some point!
I have been doing research for a project and have found your article quite helpful. hanks so much.
I have been doing research for a project and have found your article quite helpful. hanks so much.
Excellent blog here! Also your site loads up very fast!
What web host are you using? Can I get your affiliate link to your host?
I wish my site loaded up as fast as yours lol