Affiliate Login

Affiliate Registration

Interested in becoming an affiliate? Head over to our Affiliate Registration page and apply today!

Affiliate Registration

Affiliate Quick Links

Affiliate Home
ITzetta on Facebook ITzetta on Twitter

ITZETTA BLOG


<<  BACK TO THE ITZETTA BLOG

Elli vs. Aaron (part one)

Elisabeth Windsor - Tuesday, September 06, 2011

Hello internet! This is the very first of a series of monthly blog posts we’re going to call Elli vs. Aaron. Apparently every month Aaron and I are going to duke it out, with the result being a blog post containing gold nuggets of our wisdom on different web development topics. Plus, you get a sneak peek into the thought process and work behind our websites.

For this premier post, Aaron and I both read a great article from Smashing Magazine, HTML 5 and the Document Outlining Algorithm. (By the way, if you’ve never heard of Smashing Magazine, you should check it out. It’s an awesome resource for web developers and designers.) We’ve both written up our own opinions of how we should adapt the HTML 5 Document Outlining Algorithm to ITzetta’s coding standards.

That should be all the introduction needed! I’ll start off with what Aaron had to say, because I think he explained the new HTML 5 feature more clearly. Coding is his area of expertise, where mine is more on the side of design.

----------------

Aaron:

As time goes on, more and more HTML5 features get integrated into modern browsers. So as the technology evolves, we need to adapt to continue to offer our clients modern, well designed, aesthetically pleasing, search engine optimized web sites.

One of the HTML5 features that is being standardized are Article, Section, Aside, and Nav. These tags have no visual effect on your site. What they do instead, is separate out your content. Not for you to see visually, but for the back end of the website, and for search engines.

                Here is an example of content without Article and Section tags.

<div>

                <h1> Page Title</h1>

<h2> Product Category </h2>

<h3> Product Title </h3>

<p> Here is where the product information goes </p>

<h3> Product Title </h3

<p> Here is where the product information goes </p>

<h2> Product Category </h2>

<h3> Product Title </h3>

<p> Here is where the product information goes </p>

</div>

Now, as you can see the content is separated out, but after a while, this format can tend to get a bit messy and discombobulated in the back end of the website, especially with in-context editing. Now, here is an example with HTML5 tags included.

<div>

                <h1> Page Title</h1>

<section>

<h2> Product Category </h2>

<article>

<h3> Product Title </h3>

<p> Here is where the product information goes </p>

</article>

<article>

<h3> Product Title </h3

<p> Here is where the product information goes </p>

</article>

</section>

<section>

<h2> Product Category </h2>

<article>

<h3> Product Title </h3>

<p> Here is where the product information goes </p>

</article>

</section

</div>

Now, as you can see, the content is much easier to follow. With the HTML5 tags, everything is more fluid, broken-up, and easier to read. The use of these tags will make all ITzetta websites much easier for clients to understand from the back end.  While not having an effect on SEO at the moment, I predict that in the future, it will be a major piece of optimizing your website for search engines. It will be important to make sure all of your content is broken up into Sections and Articles.

While the integration of HTML5 into your website will be a big step towards the future, it is a process that needs to be done slowly. Right now only modern browsers (Chrome, Internet Explorer 9, Firefox5+, and Opera) support HTML5. So while I believe these new features are great, and will optimize the website. It is a process that will have to be done as the older browsers become obsolete and die.

----------------

Elli:

HTML5 brings us a brand new document outlining algorithm. Before this, pages were outlined using the various header tags as guides. Within HTML5, there are four different elements used by its outlining algorithm. These elements are section, article, aside, and nav. In the future, these can completely replace the need for using different levels of header tags to organize content. But for now, since some browsers still don’t support HTML5, it’s a good idea to cover your bases both ways.

I think the best idea for now would be to use both header tags and HTML5 outlining elements, section and article for the main content on pages. You can use an h1 tag to label the page, followed by an h2 tag within a section element for a subheading. Inside the section element, you can use article elements to further organize content. These should be complimented by an h3 tag to keep older browsers happy. Paragraph content goes under whichever h1, section and h2, or article and h3 is suitable for it.

As far as nav and aside elements go, I don’t see these as being very useful yet. To quickly explain these, the nav element is for categorizing the main navigation and the aside element is for secondary content (think sidebars). Unless you know the target audience for the website you’re creating is using a browser that supports HTML5, I think it’s better to use div and ul elements for these for now.

This is my recommendation for how we should implement these elements into ITzetta’s coding standard. This way we are able to take advantage of the new features of HTML5 and stay current with new technology while still allowing our websites to function in older browsers.

----------------

So, I hope that gave you a little insight into how things work here at ITzetta and helped you understand what goes on behind the pretty faces of the websites you see. You’ll hear from me again in a month in the next installment of Elli vs. Aaron.


Post has no comments.
Post a Comment




Captcha Image