HTML5 microformats and related attribute names_html5 tutorial tips

On May 29, 2004, after I retired the blog and all the talk, I surveyed 40 designers on their websites to see what conventions they used for common page elements such as headers and banners, navigation, content, and Footer (result from that time).

This was hardly a scientific study, but in June of that year I followed up on some of Eric Meyer's comments and published a set of naming conventions. I'm always happy when I find a website that has adopted these naming conventions and I still use it every day, even more than 4 years later.

My thoughts at that time can be summarized as follows

The id and class attribute names must reflect the function or content of the element, not the presentation. So the header was removed and branding was introduced; the footer was removed and replaced by site-info.

Naming should take on almost an XML style structure. Naming should take on almost an XML style structure. So, inside content comes content-main , content-sub and content-supp .

These conventions have served me well, and what I've done has barely changed their core. Without a doubt, they all make my work faster, more consistent and more beneficial. They make it easier to build products and educate the people I work with in my way of thinking. The naming convention works.

Microformats and related attribute names

Let’s face it, microformats like hCard, hCalendar, hAtom and other drafts bring so many attribute values ​​to the table There is often no need to consider which build file or which constraint CSS pattern hooks are provided for these further property values. Now I use microformats to such an extent that I develop the entire page without even using the class attribute (other than the class attribute that comes with microformats).

On the rare occasion that I need to add a new element (assuming a division for layout purposes) my first thought is to extend the microformat that already exists. I'll give you an example of using hAtom mode:

Title

Main content

Related content

Title

Main content

Related content

If you're keeping the advantage of microformats, you've noticed that entry-related is not part of the hAtom pattern, but in this case I absolutely, definitely had to have an extra factor of how it was composed What about an attribute value like related-sidelinks?

When does it seem more logical to extend the naming pattern of microformats?

HTML5

At the beginning of this chapter, I should frankly say that at this moment, I cannot pay less attention to HTML5. However, this is not the crux of the matter. HTML5 introduces some potentially very useful new elements, such as:

section

A normal file or application section. Chapters, in this context, are a thematic classification of content.

article

A portion of a page consisting of articles that form an independent part of a document, web page, or website. This could be a forum post, a magazine or newspaper article, a Web log entry, a user-submitted comment, or any other independent item of content. , or any other independent item of content.

aside

A part of a page that consists of content that is independent of the content associated with the aside element and can be considered separate from the content. These sections often appear as typographic sidebars.

As it was logical for the inventors of Microformats to base their schemas on existing specifications, surely it now makes sense for me to adapt my naming conventions to follow those in HTML5? It's logical for some specs to evolve their patterns, surely, and now it makes sense for me to follow HTML5 by adapting my naming conventions? Of course, I can’t use it yet:

Title

Main content

Related content

Title

Main content

Title

Main content

Related content

Related content

But now I can use the id and class attribute values ​​to help me get familiar with HTML5, taking my documents one step closer to it.

Title

Main content

Related content

I feel like it’s a logical next step for me. So, take a look at this sample document where I've taken HTML5 elements as the basis for my naming convention. In addition to what I just mentioned, note that I have determined the way of classification and navigation (nav), used colgroup and col to build fields, converted an unordered list into a grid, and used datagrid. HTML5 tag specifications also include details, dialog and figure, which I can also use as attribute values. If I could grant one wish today, it would be that all CSS framework developers would adopt the same naming convention (and also embed microformats extensively) so that people new to meaningful markup and CSS would have the right The starting point is to use more meaningful and logical attributes instead of the superficial id and class attributes.