Abstract Content Categories: Deconstructing a Web Page

html brings light into the darkness

html is about structure and semantics . in all these years i've been blogging i found myself repeating this over and over again, but that's just because it's one of the most purest (and actually one of the few) truths in our profession. it's the baseline and starting point of any proper argument you can have on different ways to write html.

what this means is that html should provide as much clarity on the content it describes as well as reduce the chance of any ambiguous assumptions. both structural and semantic information are important so that humans (less important) and machines (very important) can try to analyze your content and use it for their own specific purposes. this goes from search result optimizations to screen reader software offering your content in well-structured, bite-sized portions.

top-down semantics

when i first started to learn about html (and its semantic value) i was clinging to a very narrow view of what semantics was all about. trying to find a proper and descriptive name for a component happened with little regard to any relations it had to other existing components. it was really an exercise in "what is the best name to describe this thing" without wondering about "... and how does it fit in with the rest of my page/site".

as you write more and more html code you find yourself making connections between certain components. when i just started out there was a moment when i realized it might be good to somehow group all navigation components together. i started using a prefix (nav) for classes referencing navigation components. nowadays we have a unique tag for this specific case. the benefit of doing this: screen readers now have an easier job finding site navigation and offering it in modified form to their users.

while experience will teach you these things over time, i feel that bottom-up grouping is not the best way to start off. so let's see what a page looks like from the top, working our way down to the level of individual components.

3 abstract content groups

i found that just about any page out there can be split up in a combination of three different abstract content groups. note that none of these groups are actually required to build a proper web page. a quick rundown:

just another useless categorization?

what's particularly interesting about this way of categorizing things is that it allows you to separate fluff and noise from the actual content your site is based upon. if you would somehow succeed in getting this categorization in your html code, a program could run through your site and extract all your unique content, skipping navigation, ads, shortlists and other duplicate content.

this is not an alien idea, there are already programs out there (safari reader for example) that try to do this. sadly these programs only base their output on vague assumptions and guesses, not able to guarantee a proper result. this is because they lack the proper hook in html to make valuable assumptions.

conclusion

while these abstracts will probably not be reflected in your final html code anytime soon, they will still reveal some interesting subtleties. before i used to think that a search box and contact form were closely related components, now i feel that a search box is a clear redirect, meaning it's closer related to the group of navigational components (though i firmly believe a search box doesn't actually belong to the category of navigation).

this article was written from a html perspective, but obviously these categorizations have a much broader impact than html alone. in time they might influence the way you structure you css and javascript (a direct result of restructuring your html), needless to say they are also useful when starting to wireframe a new site. they might help you make better judgments when deciding what elements to remove or switch around when taking a mobile-first, responsive approach, or they might help you balance your pages, making sure you have enough unique content on offer.

all this just because i was planning to write an article on a special category of redirect components, but i'll leave that for next time.

source: http://www.onderhond.com/blog/work/deconstrucing-content-categories-of-a-webpage