Summary:
A review of a basic foundational review of HTML5, including how new and old tags combine functionality of SEO, documentation, and designing style to make a more fluid and responsive coding language for web pages.
Speaking of menus, there's a brand new tag that will take web pages by storm:
This is another SERP-friendly and developer-friendly tag. Not only does it cleanly divide your page into sections with the obvious navigational designation, search engines now know exactly what this section of your web page is for...here's an idea of how you might use it on a webpage:
<nav><ul>
<li>Home</li>
<li>Archive</li>
</ul></nav>
However, you should be careful with your use of the section element. Since it has a dual functionality for SERP and development, make sure that you use it only when you would include documentation distinguishing page sections. Your <h1> tags can go inside of the section tag, as well as the <hgroup> tag, which usefully stores multiple header designations.
Within your web page, you may choose to document a section like this:
As usual, the gurus at W3C provide the guidelines for this:
HTML5 is such a courteous language that it has put aside some nice tags just for the writers among us:
<aside> </aside> and <article> </article>
Is there an article on your web page? Designate it by using the <article> </article> tags.Need to add some cursory information about an article? This is exactly what the <aside> tag is used for. The styling implications for the aside tag are pretty awesome. You'll never have to create and declare an extra special caption class in CSS. Again, W3C cautions against using this tag with a singular use in mind: it's also been created to provide a friendly and accessible way to cordon off advertising information, sidebars, and all matter of popular tangential information that's found it's way into your usual web pages influenced by the dynamic get_sidebar(); function in the ever-prolific blog engine, Wordpress.
The innovative thing about these tags is that you're tossing out some of the clunkiness of the CSS stylesheet. Not only can you designate sections of your webpage by using these descriptive, documentation-inspired tags, you can directly style them as well. Here's some code I've pulled from the W3C source page:
Since HTML5 provides SEO functionality, some priorities have been switched around. <h1> takes it's logical place at the top of the food chain, and you can use it to organize your own page and thoroughly expect search engines to respond accordingly. In addition, some clunky XHTML declarations have been removed, and while the <!DOCTYPE HTML> declaration may not be perfect, it easily designates the language of your page at first glance.
For best results, take the time to peruse the growing resource of HTML5 terms and declarations at W3C, at www.w3c.org.
A review of a basic foundational review of HTML5, including how new and old tags combine functionality of SEO, documentation, and designing style to make a more fluid and responsive coding language for web pages.
A Brand New Structure, A Brand New Day...
Html5 trims a lot of the fat we coders have gotten used to over the years, including breaking down and completely tossing out some now superfluous web design elements. Let's take a look at the first change every designer and developer should take note of, the doctype declaration:
What? That's it! Yep. That's right. Like I said, all of those superfluous elements from HTML 4.0 are right out the door here. Let's take a look at some other simplified declarations:<!DOCTYPE html>
<meta charset="utf-8" /> This meta tag tells your browser what language your web page is written in.
<meta name="description" content="">
If It Ain't Broke...Don't Fix it...just make it better: HTML5 Preserves Some Tags and Enhances them for SEO
Once Google got into the habit of using <h1> etc... tags to determine what different sections of web pages were about, developers started to realize the true utility of the under-used tag. These still exist in the same form in HTML5, but their usability has been enhanced. Now you too can help Google in its search to properly index your page, by assigning <h#> tags according to their relevance on the webpage. According to the guys over at HTML5 Tutorials, you can consider the priority list for the tag as follows:
 |
| A visual example of a <h1> priority tree in HTML5: <h1> takes over the slot of largest header font set, as well as it's place at the top of the hierarchy tree in SERP (Search Engine Ranking Page) for Google. |
<h1> takes over as the most important section header on the webpage, so you can just count up from 1, with 1 being the priority and most important header, and in our example, 5 being the least important. Not only does this make crawling your web pages easier for Google's bots, but it allows you to participate more actively in determining what's important on your webpage.
FYI- Some Tags that Have NOT Changed:
- <p> </p> The closing paragraph tag is back! You may have noticed it was optional in HTML 4.01
- <ul> </ul> , <li> </li> , <ol> </ol>, etc...
- <head> </head>
- <title> </title>
New Tags Making their Debuts:
<dl>, <dt>, <dd> definition list, definition term, definition of term (The dl list tag, http://www.html-5-tutorial.com/dl-tag.htm)The good people at CSS Tricks will tell you that nested lists have changed the way that we organize content on the web more than we could possibly imagine. I remember the old days of creating menus by hacking together some creatively styled tables in cumbersome HTML. With CSS, this method was soon abandoned and replaced with highly stylized lists at the top of pages to serve as menus. Now HTML5 offers various list formats that are meant to not only style and organize your page, but provide a resource for the crawling bots from Google. The definition list, definition term, and definition of term tags provide greater utility for coders, users and programmers without throwing usability out the window.
Speaking of menus, there's a brand new tag that will take web pages by storm:
<nav></nav>
This is another SERP-friendly and developer-friendly tag. Not only does it cleanly divide your page into sections with the obvious navigational designation, search engines now know exactly what this section of your web page is for...here's an idea of how you might use it on a webpage:
<nav><ul>
<li>Home</li>
<li>Archive</li>
</ul></nav>
Bringing together Documentation & Functionality
Now, if you've been playing around with some of the new CSS3 styling features, you may have noticed some greater utility in HTML with some unfamiliar tags. One that I've come across is the useful and extremely nifty <section> tag. This cordons off a portion of your web page, telling your browser and those crawling search engines that this is a new part of your document and application. Once again, the double functionality of HTML5 comes into play. Not only is this a useful styling element, it's great for developers who want to know exactly how you've divided up your page and how it should be read or prioritized for users and tinkerers alike.However, you should be careful with your use of the section element. Since it has a dual functionality for SERP and development, make sure that you use it only when you would include documentation distinguishing page sections. Your <h1> tags can go inside of the section tag, as well as the <hgroup> tag, which usefully stores multiple header designations.
Within your web page, you may choose to document a section like this:
 |
| A quick visual example of how <article>, <section>, and <hgroup> tags can be used to divide up content in a webpage. Notice that tags like <p> and <h1> can fall anywhere within these documentation inspired tags. |
As usual, the gurus at W3C provide the guidelines for this:
"Thesectionelement is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use thedivelement instead. A general rule is that thesectionelement is appropriate only if the element's contents would be listed explicitly in the document's outline." Source: http://www.w3.org/TR/2012/WD-html5-20120329/the-section-element.html#the-section-element
HTML5 is such a courteous language that it has put aside some nice tags just for the writers among us:
<aside> </aside> and <article> </article>
Is there an article on your web page? Designate it by using the <article> </article> tags.Need to add some cursory information about an article? This is exactly what the <aside> tag is used for. The styling implications for the aside tag are pretty awesome. You'll never have to create and declare an extra special caption class in CSS. Again, W3C cautions against using this tag with a singular use in mind: it's also been created to provide a friendly and accessible way to cordon off advertising information, sidebars, and all matter of popular tangential information that's found it's way into your usual web pages influenced by the dynamic get_sidebar(); function in the ever-prolific blog engine, Wordpress.
The innovative thing about these tags is that you're tossing out some of the clunkiness of the CSS stylesheet. Not only can you designate sections of your webpage by using these descriptive, documentation-inspired tags, you can directly style them as well. Here's some code I've pulled from the W3C source page:
Notice the style declaration right there in the code. This is a partial throwback to the old days of placing styling elements inside of tables or directly within paragraphs with the obsolete style: property.<article class="book"> <style> section { border: double medium; margin: 2em; } section.chapter h1 { font: 2em Roboto, Helvetica Neue, sans-serif; } section.appendix h1 { font: small-caps 2em Roboto, Helvetica Neue, sans-serif; } </style> <header> <hgroup> <h1>My Book</h1> <h2>A sample with not much content</h2> </hgroup>
Conclusion
So, what have we learned about HTML5? Well, for one thing, it combines functionality with performance and style. There's some documentation demands removed from developers and integrated neatly within the web page itself. You can look at any part of the webpage and automatically know what portions of code constitute an individual section and where that part begins and ends on the page. You can directly style that section of the web page without leaving cumbersome notes for collaborators or other developers who will sift through your code. This is not to say that the need for clean documentation is removed completely, but in theory it should certainly reduce some of the tedious footwork.Since HTML5 provides SEO functionality, some priorities have been switched around. <h1> takes it's logical place at the top of the food chain, and you can use it to organize your own page and thoroughly expect search engines to respond accordingly. In addition, some clunky XHTML declarations have been removed, and while the <!DOCTYPE HTML> declaration may not be perfect, it easily designates the language of your page at first glance.
For best results, take the time to peruse the growing resource of HTML5 terms and declarations at W3C, at www.w3c.org.
Sources: In Webson (www.inwebson.com), Smashing Magazine (www.smashingmagazine.com), Six Revisions (www.sixrevisions.com) and HTML5 Tutorial at www.html-5-tutorial.com, W3C (http://www.w3.org/TR/2012/WD-html5-20120329/)
No comments:
Post a Comment