background preloader

HTML5 and The Future of the Web - Smashing Coding

HTML5 and The Future of the Web - Smashing Coding
Advertisement Some have embraced it1, some have discarded it2 as too far in the future, and some have abandoned a misused friend3 in favor of an old flame in preparation. Whatever side of the debate you’re on, you’ve most likely heard all the blogging chatter surrounding the “new hotness” that is HTML5. It’s everywhere, it’s coming, and you want to know everything you can before it’s old news. Things like jQuery plugins, formatting techniques, and design trends change very quickly throughout the Web community. When looking for some stability, we can usually turn to the code itself as it tends to stay unchanged for a long time (relatively speaking). In this article, I’m hoping to give you some tips and insight into HTML5 to help ease the inevitable pain that comes with transitioning to a slightly different syntax. Welcome to HTML5. What are the basics? The DOCTYPE When I first started researching HTML5 a few months ago, one of the main things I struggled to find was the doctype. Conclusion

HTML5 enabling script 7 Jan Since HTML5 is getting more attention by way of marking up our new pages, and the only way to get IE to acknowledge the new elements, such as <article>, is to use the HTML5 shiv, I’ve quickly put together a mini script that enables all the new elements. Download html5shiv.js and must be inserted in the head element (this is because IE needs to know about the element before it comes to render them – so it can’t sit in the footer of the page, i.e. below the elements in question). I’ve updated this post to link to Alexander Farkas’s version of the shiv – it’s the very latest and my simple one line script. The one I originally released was (I thought) beautifully small, but didn’t support print styles nor dynamic injection of HTML5 elements. Good thing there are smarter folk than I!

23 Essential HTML 5 Resources Editor’s Note: Bruce Lawson will be doing a 1-hour tutorial called “How to build a HTML5 Web site” at the FOWD Tour. Everyone is excited about the possibilities of HTML 5, but there’s a lot to learn and absorb as well. With that in mind, we’ve compiled a list of articles to get you started! Yes, You Can Use HTML 5 Today! – A great beginning overview of HTML 5Wikipedia: HTML 5 – A basic overview from WikipediaHTML 5 Cheat Sheet – A great quick guide to HTML 5 as a printable PDFHTML 5 Demos – A great set of demos. People to follow These are the folks that are at the center of HTML 5 … Ian Hickson (@hixie) – Editor of HTML 5 Spec.

The header element Recently, we have seen a growing interest in HTML5 and its adoption by web professionals. Within the HTML5 specification we can see that there have been a significant number of new elements added, one of these the <header> element is what we’ll be covering in this post. We’ll talk about when to use it, when not to use it, its must haves and must not haves. Ready? Updated 15/12/2105 by Doctor Steve So you’re used to seeing on a large majority of sites that you visit, well now with HTML5 that isn’t required anymore we can add some more semantic value with the <header> element. What does the element represent? According to the HTML spec the header element represents …introductory content for its nearest ancestor sectioning content or sectioning root element. It is important to note that the <header> element doesn’t introduce a new section but is the head of a section. Where would I use the <header> element Well the obvious place to start would be at the beginning of your page. Conclusion

Understanding aside Please note aside has been redefined since this post was written, please read the updated article. HTML 5 offers a new element to mark additional information that can enhance an article but isn’t necessarily key to understanding it. However, in the interpretation of <aside> there lies confusion as to how it can be used, and with that there is demand for the Doctor to step up and clear the air. In this article I will look at what <aside> was created for, including sample uses and how not to use this useful, misunderstood element. First, a look at how the HTML 5 specification defines <aside>: The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. What can often trip-up someone reading the specification is the use of the word “sidebar”. How strict should this relationship be? Example Uses Incorrect use of <aside> Closing Thoughts

Downloads | Kaazing Kaazing University is the training arm of Kaazing and is the first & most respected HTML5 and WebSocket training organization in the world. We were the first organization to deliver formal, instructor led HTML5 and WebSocket training worldwide. In the past three years we have trained thousands of Web developers and engineers globally with standing weekly courses for small teams and leading Fortune 500 companies such as Google, Verizon, Wells Fargo, Intel, Cisco, and Oracle. Globally Kaazing University has trained professionals in HTML5 and WebSocket technologies including Semantic Markup, Graphics and 3D, Connectivity and Real-Time, Device Access, Offline and Storage, and Performance to name but a few. Kaazing is the leading authority in global training of HTML5 and WebSocket technology, and our trainers are respected industry experts and published authors. Key benefits of taking your HTML5 training from Kaazing University include:

Home - HTML5 & CSS3 for the Real World By Alexis Goldstein, Louis Lazaris & Estelle Weyl Powerful HTML5 and CSS3 techniques you can use today. Why should you learn HTML5 & CSS3? It works on just about every platform, is compatible with older browsers, and handles errors gracefully. You can create powerful, easy-to-maintain, future-proof web pages. Many common tasks are now simplified, putting more power in your hands. Additionally, you’ll have the freedom to be more expressive in the semantics of your markup. So, perhaps the question is, why would you not learn HTML5 & CSS3? What will I learn? Lose that slightly embarassing Flash habit with clean, native HTML5 videoSet type that truly supports your message with @font-faceTap into next-generation CSS sslectors and powerful new styling with CSS3Use shiny-new APIs to build applications with location sensitivity and full offline functionality Who should read this book? Some parts of the book require some basic familiarity with JavaScript, but they’re not critical. Customer reviews

HTML5 Beginners Crash Course by Robin Nixon HTML5 for Beginners is the fastest way to learn HTML5. This highly informative and popular course, already taken by over 2200 people, is taught by Robin Nixon, author of Learning PHP, MySQL and JavaScript (the most popular book on web development worldwide for over five years). The course covers everything you need to know to learn HTML5 and leverage its power to create highly dynamic websites. Because it starts from the first principles of HTML, you need no prior knowledge of the subject, since the course begins with a thorough introduction to HTML (which skilled users can skip), before moving onto what's new in HTML5. HTML5 is the latest version of the Web's bedrock markup language, HTML. But it has come to stand for much more than the average, slow-moving technical standard. Something in the last couple of years kicked the HTML5 adoption machine into overdrive. But where do you come in? So what are you waiting for?

some useful guidelines In this post I want to illustrate some useful guidelines about how to implement a well organized CSS code structure in view of introduction of HTML 5 markup language. They are not general rules but simple suggestions you can follow in order to improve the readability, manageability, and general organization of CSS code. These suggestions are especially useful if you have to work on complex CSS files that otherwise can be difficult to manage. I prefer to separate CSS code in three distinct sections: a first section that contains general HTML tags; a second section that contains structure tags; a last section with custom classes. Section 1: General HTML tagsIn this section I divide the code in two subsections. A first subsection that contains code to reset HTML standard tags and a second subsection that contains code to redefine HTML standard tags. border:0;margin:0;padding:0;font-size:100%;... /* Subsection 2: Standard HTML tags redefinition */body, form, input { aside {...} aside h1 {...}

Coding An HTML 5 Layout From Scratch - Smashing Coding HTML5 and CSS3 have just arrived (kinda), and with them a whole new battle for the ‘best markup’ trophy has begun. Truth to be told, all these technologies are mere tools waiting for a skilled developer to work on the right project. As developers we shouldn’t get into pointless discussions of which markup is the best. They all lead to nowhere. Rather, we must get a brand new ideology and modify our coding habits to keep the web accessible. While it is true HTML5 and CSS3 are both a work in progress and is going to stay that way for some time, there’s no reason not to start using it right now. So today we’re going to experiment a little with these new technologies. It’d be a good idea to have a read at some of these articles first: I’ll also assume you know the basics of HTML and CSS. Before we begin… Link There’s a couple of things you have to bear in mind before adventuring on the new markup boat. A word on Progressive Enhancement and Graceful Degradation Link 1. 2. <! A few highlights: <!

Related:  html5html5html