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

http://html5doctor.com/avoiding-common-html5-mistakes/

Related:  webdesignhtml5/css3

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? 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.

Beautiful Horizontally Centered Menus/Tabs/List. No CSS hacks. Full cross-browser. by Matthew James Taylor on 26 July 2008 A lot of people want centered menus on their website but for the CSS novice this task seems impossible. If you do a search online you will find a few centering methods but most of these rely on CSS hacks, JavaScript or non-standard CSS rules that are not supported by all browsers (display:inline-block; is an example). In this post I'm going to show you my secret method of achieving centered tabs that does not use any CSS hacks and will work in all the common web browsers. It is also compatible with my perfect liquid layouts. Let's start with a basic example then I'll explain how it works.

1: Introduction to The Web Standards Curriculum/Table of Contents By Chris Mills 11th October 2012: Material moved to webplatform.org The Opera web standards curriculum has now been moved to the docs section of the W3C webplatform.org site. 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.

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. HTML5 Encoding Secrets HTML5 Encoding Secrets After viewing this video, video publishers will have all the information they need to encode and stream to HTML5 browsers. Companies Mentioned: An hour is all a developer needs to begin working with MPEG4/H.264 and WebM video. That's the length of Jan Ozer's information-packed session How To: Encoding Video for HTML5 at the recent Streaming Media East conference in New York City.

Tabs with Round Out Borders Rounded corners are now trivially easy to achieve via border-radius. But that only allows us to cut into the shape. What if we want to connect a shape to another with a rounded outward corner. Much easier to explain with a graphic: Clean HTML Of course, on the web, just about anything visual is possible.

HTML 5 Reference It is useful to make a distinction between the vocabulary of an HTML document—the elements and attributes, and their meanings—and the syntax in which it is written. HTML has a defined set of elements and attributes which can be used in a document; each designed for a specific purpose with their own meaning. Consider this set of elements to be analogous to the list of words in a dictionary. This includes elements for headings, paragraphs, lists, tables, links, form controls and many other features. This is the vocabulary of HTML.

Related:  Tutorial