New Structural Tags and Attributes of Html5

In the first few Tags and Attributes of Html5, we’ll talk about how we can use HTML5’s and CSS’s features to improve the interfaces we present to our users. W e ’ l l see how we can create better forms, easily style tables, and improve the accessibility of our pages for assistive devices. W e ’ l l also see how we can use content generation to improve the usability of our print style sheets, and we’ll explore in-place editing with the new contenteditable attribute. First, though, let’s take a look at how Attributes of Html5’s new elements can help us structure our pages better.

I’d like to talk to you about a serious problem affecting many web devel- opers today. Divitis—a chronic syndrome that causes web developers to wrap elements with extra div tags with IDs such as banner, sidebar, arti- cle, and f o o t e r —is rampant. It’s also highly contagious. Developers pass Divitis to each other extremely quickly, and since divs are invisible to the naked eye, even mild cases of Divitis may go unnoticed for years.

Here’s a common symptom of Attributes of Html5 Divitis:

<div id="navbar_wrapper" >
<div id= "navbar" >
<li><a href= "/" >Home</a></li> <li><a href= "/" >Home</a></li> 

Here we have an unordered list, which is already a block element, 1 wrapped with two div tags that are also block elements. The id attributes on these wrapper elements tell us what they do, but you can remove at least one of these wrappers to get the same result. Overuse of markup leads to bloat and pages that are difficult to style and maintain.

There is hope, though. The Attributes of Html5 specification provides a cure in the form of new semantic tags that describe the content they contain. Because so many developers have made sidebars, headers, footers, and sections in their designs, the Attributes of Html5 specification introduces new tags specifically designed to divide a page into logical regions. Let’s put those new elements to work. Togetherwith Attributes of Html5, we can help wipe out Divi- tis in our lifetime.

In addition to these new structural tags, we’ll also talk about the meter element and discuss how we can use the new custom attributes feature in Attributes of Html5 so we can embed data into our elements instead of hijacking classes or existing attributes. In a nutshell, we’re going to find out how to use the right tag for the right job.

In this Attributes of Html5, we’ll explore these new elements and features:

  • < header > Defines a header region of a page or section.
  • < footer > Defines a footer region of a page or section.
  • < nav > Defines a navigation region of a page or section.
  • < section > Defines a logical region of a page or a grouping of content.
  • < article > Defines an article or complete piece of content.
  • < aside > Defines secondary or related content.
  • Custom data attributes Allows addition of custom attributes to any elements using the data- pattern. [All browsers support r e a d i n g these via JavaScript’s getAttribute() method.]
  • < meter > Describes an amount within a range.
  • < progress > Control that shows real-time progress toward a goal.

For More about New Structural Tags and Attributes of Html5  Stay with us.