background preloader

Avoiding common HTML5 mistakes

Avoiding common HTML5 mistakes
Between curating sites for the HTML5 gallery and answering readers’ questions here at HTML5 Doctor, I see a host of HTML5 sites and their underlying markup. In this post, I’ll show you some of the mistakes and poor markup practices I often see and explain how to avoid them. Don’t use section as a wrapper for styling One of the most common problems I see in people’s markup is the arbitrary replacement of <div>s with HTML5 sectioning elements — specifically, replacing wrapper <div>s (used for styling) with <section>s. In XHTML or HTML4, I would see something like this: <! Now, I’m instead seeing this: <! Frankly, that’s just wrong: <section> is not a wrapper. With that in mind, here’s the correct way to mark up the above example using HTML5 and a couple of ARIA roles. <body> <header> <h1>My super duper page</h1> <! If you’re not quite sure which element to use, then I suggest you refer to our HTML5 sectioning content element flowchart to guide you along your way. Ah, <figure>. <! Summary

Related:  html5/css3webdesign

Tips for Debugging HTML & CSS (Image from Flickr user Kevin Dooley) Debugging HTML and CSS problems can really ruin your creative momentum, but they’re inevitable when building almost any web project. It’s annoying when you’re designing a page and suddenly you notice that something isn’t quite aligned right or colored correctly. If you know how to face rendering problems directly and solve them quickly, building websites becomes much more enjoyable. Every issue you encounter will be unique in its own way, but most can be resolved by adhering to a few basic “sanity checks” that can help you work with your code, rather than fight it.

Interactive Guide to Blog Typography The majority of websites are composed of a bright, usually white background and dark text. Then there's the small minority of the web: dark websites, colorful websites. Why is the bright background used by the majority of websites? » How to make a Twitter bot with no coding - Digerati Marketing As usual, lazy-man post overview: With this post you can learn to make a Twitter bot that will automatically retweet users talking about keywords that you specify. You can achieve this with (just about) no coding whatsoever. The main element Recently, <main> was formally added to the W3C HTML specification. Now that the dust has settled, it’s about time we dive in to find out where and when it’s appropriate to use <main>. Let’s get started. History The inclusion of a main element (or similar) has long been debated in the working groups with authors and others often questioning why we had new elements such as <header>, <article>, and <footer> but no element to accurately describe the primary content of a page.

5G Blacklist 2012 The 5G Blacklist helps reduce the number of malicious URL requests that hit your website. It’s one of many ways to improve the security of your site and protect against evil exploits, bad requests, and other nefarious garbage. After extensive beta testing, the 5G Blacklist/Firewall is solid and ready to help secure sites hosted on Apache servers. In addition to beta testing for the 5G, this is the 5th major update of my “G”-series blacklists. Create Your Own Automated Twitter Robot in PHP The ultimate guide to creating your own personalized twitterfeed clone! Kidding… Actualy this is just a mockup, a simple prototype, which is way too fresh for any actual use. We’ll take this forward step by step. I’m not going to give out all my sources but I’ll guide you through authentication, rss lookup, parsing, thanking for retweets, and shooting random stuff at people that mention your robot. Here’s a brief list of features we will implement:

How a new HTML element will make the Web faster The Web is going to get faster in the very near future. And sadly, this is rare enough to be news. The speed bump won't be because our devices are getting faster, but they are. software for social network analysis Huisman, Mark and van Duijn, Marijtje A.J. (2011). A reader's guide to SNA software. In J. Scott and P.J.

A Complete Guide to the `<Picture>` Element by Scott Gilbertson If you’ve ever struggled building responsive websites, this post is for you. It’s part of a series on responsive design, in particular responsive images, pulled from my book, Responsive Web Design. If you find this excerpt useful, and want even more ideas on how responsive design can help you create amazing websites, pick up a copy today. [Last Update: 08/20/2014]