Checking Your HTML Structure with HTML5 Outliner

There’s this great tool I’ve been using lately to check my HTML5 structures and assure myself that all the new elements have been placed correctly and have the necessary headings.

HTML5 requires all the new structural elements to have a heading, now if you’re meeting situations where a heading does not have its place at the beginning of an element, content-wise, then still have it placed and just hide it via the display CSS property.

To get a better look at this, we’ll use this sample HTML5 page I found online located at deltabluesmedia.com. As for the HTML5 outliner, … Read article

Read More

DIVs role in HTML5

Once we have been progressively adopting the HTML5 technology more and more each day lately, the well known “NO MORE DIVs” propaganda took place.

I was surprised to see that “Divless layouts” already got promoted on some template websites, using the new HTML5 structural elements. Is it me, or we’re confusing the tables -divs era with DIVs -HTML5?

Truth is, we have been abusing the DIV element with HTML4, pretty much because we have had no alternative. Now that we have HTML5 which came with some great new structural elements, we no longer have to DIV our way … Read article

Read More

Merging from HTML4 to HTML5

If HTML5 is here now, it does not mean that the previously HTML4 built web pages cannot benefit the new technology. In the next few years, HTML5 will change web communication greatly, we’re looking at new indexing methods, more accurate search engine results, richer APIs and web applications, greater accessibility and the list goes on.

With over 250 million websites all over the web, there is unimaginable and priceless information, content that deserves the exposure and attention that HTML5 is focusing on. It’s pretty much our job to make all that content more accessible by updating older HTML4 structures with … Read article

Read More

Smart HTML5 and CSS3 with Modernizr

As I’ve mentioned in the previous article, with some help from Modernizr, CSS3 can be safely applied, at least to some extent. So let’s see it in action!

To break the ice, we’re going to start with the border-radius property, enhance an element for css3-enabled browsers and also ensure the element’s design and accessibility for non-css3 enabled browsers, thus, providing progressive enhancement.

I want to make sure I am not confusing anyone about CSS3’s implementation with Modernizr, so I’m going to show how it’s done without it as well.

For this example, we have a regular paragraph inside a box … Read article

Read More

HTML5 and CSS3’s first steps

Like I promised, I’m going to focus more on HTML5 and CSS3. I’m that dad who wants to witness his baby’s first steps, as how I want to actively progress with the latest web technologies as they get implemented into our browsers today and as how you should too.

THE THEORY

It’s been a very long time since W3C has taken CSS to the next level, we’ve been working with CSS 2* for around 13 years now. It hardly became a recommendation due to browsers’ lack of following common standards and “greed” to offer unique control individually. But I guess … Read article

Read More

Taking the big HTML5 and CSS3 leap

I’ve been reading some HTML5 and CSS3 discussions and noticed how few actually take the challenge. Though it’s understandable to avoid working with languages that lack support, since the new HTML5 and CSS3 are still being implemented in our browsers today.

Truth is, W3C has taken a huge step with HTML5 with massive changes and updates and along with that, most browsers are implementing sides of it independently, which inevitably leads to partial support. But this is another story I’m not planning to cover in this post.

I adore the control HTML5 is giving us over elements we previously had … Read article

Read More