The Future of the Web: My Vision (May 23, 2012)
I apologize for the longer than expected wait for this article, but now, we may continue.
The article below will pick up where Part 1 left off.
Article 1: Websites and Sectioning
Part 2: Styling
As we began with previously, we now have the basics down as to how to properly divide information into sections. This time, we will be looking into the second aspect of sectioning: Styling.
When a search engine or screen reader scans a website, it does so by evaluating the markup of the page. Humans however, view by way of sight. If we were to use absolutely no form of styling, it would be difficult, if not impossible, to logically divide an article into sections.
When we read through a webpage, several common features are used to guide us in logically separating it out:
- Bolded text defining headings.
- Heading text larger than the content below it.
- Logical heading levels which decrease in size as it gets deeper.
- Ocasionally indenting subsections and subheadings within their parents.
Web browsers of today will often do much of this work for you, but this is not always enough. Below, I will show you at most basic, the heading layout I choose to use when building a website.
<article><header><h1>Main Heading</h1></header><section class="topsection"><h1>Top Heading</h1><p>Section Content</p><section class="subsection"><h1>Heading</h1><p>Section Content</p><section class="subsection"><h1>Heading</h1><p>Section Content</p><section class="subsection"><h1>Heading</h1><p>Section Content</p><section class="subsection"><h1>Heading</h1><p>Section Content</p><section class="subsection"><h1>Heading</h1><p>Section Content</p></section></section></section></section></section></section></article>
Now obviously, this is more compact than any site would naturally be, and wouldn't use such simplified text. However, this perfectly demonstrates the decreasing levels of the font size of the heading. With each level, it gradually scales downward, starting from nearly 3 times larger than the content at highest, to the same size as the content at lowest.
To achieve this, we use the following CSS Code.
header > h1 { font-size: 2.75em; }
section.topsection { font-size: 2em; }
section > section { font-size: 75%; }
section h1 { font-size: inherit; }
section * { font-size: 16px; }
section h1, section p { margin: 0; }
As you can see, the above code generates a much more aethetically pleasing, and far more understandable result than one without styling.
At this point, you are probably asking: How can this actually apply to real life?
Well, below this I will explain.
Use in Practical Design
As mentioned above, the true power of this method is revealed when used in practical application.
In the figure below, I will demonstrate said power by use of the first chapter of the book Alice's Adventures in Wonderland by Lewis Carroll.
In the above sample, you can easily see the logically broken down structure of the chapter. You have the main article with its heading, the major logical division (the chapter), and two minor logical divisions (the sections). Although the subsections lack heading text, you can still tell that they are seperated. Even if you were to remove the row of stars, the spacing alone would be able to divide them.
And now, to show the code that makes it work:
HTML:
<article><header><hgroup><h1>ALICE'S ADVENTURES IN WONDERLAND</h1><h2>By Lewis Carroll</h2><h3>THE MILLENNIUM FULCRUM EDITION 3.0</h3></hgroup></header><section class="topsection"><h1>CHAPTER I. Down the Rabbit-Hole</h1><section class="subsection"><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p></section><div class="sep">* * * * * * * * * * * * * * * * * * * *</div><section class="subsection"><p>...</p><p>...</p><p>...</p></section></section></article>Note: Text removed to prevent overcluttering.
CSS:
hgroup * { margin: 0; } hgroup h1 { font-size: 2em; } hgroup h2 { font-size: 1.5em; } hgroup h3 { font-size: 1em; } section { margin-bottom: 2em; } section h1 { margin: 0.5em 0; } p { text-indent: 1em; margin: 1em 0; } p:first-of-type { margin-top: 0; } .sep { font-weight: bold; margin: 0 1em 2em; }
And here we have it. Together, the markup and the styling provides a neat, clean look which greatly improves readability. As well, it is written in semantic code which allows computers to properly understand its meaning.
In conclusion of this section, we have now learned the importance of sectioning, as well as how to properly style sections. These two concepts, when applied properly, could help create a much richer and more consistantly appealing world wide web in the coming future.
Next time, we will be discussing more advanced ascpets of this layout principle, such as multi-tiered headings and asides.
Until then, I hope that you have learned something new from this subject.
-Christopher Bright
Notes
- Starting from now, if this article does not thoroughly desribe something for you, please leave a comment detailing your problem. I will do my best to update it.
- I will soon be working out a method to rate the usefulness of this article, for future reference.
- Any comments made will be taken into consideration for the future. I intend to make this beneficial for everyone, so all comments are accepted.
- Examples will now be made within iframes, due to the possible large size of the content.
References
Written by Lewis Carroll
Converted to ebook by David Widger of Project Gutenberg.
www.gutenberg.org/files/11/11-h/11-h.htm#2HCH0001
All rights go to their respective owners.
Updates
- I have made a fix to the specific coding of the CSS, condensing it as much as possible, I believe.
- Although further feedback will be needed to make a final decision, this may be the final entry of this series at this time.
Once again, I apologize if this isn’t descriptive enough. I actually went through several rewrites on this section to try to explain things properly.
-Chris
If you were resizing _all_ the text in a section, not just the headings, you could simply use a single percentage based rule, such as section.subsection { font-size: 90%; }, as this rule would be applied at each section.subsection in a cumulative fashion.
Otherwise, with the CSS you have, I’d be tempted to use percentages rather than measurements in ems. Something similar to section.subsection { font-size: 1.75em; }section.subsection section.subsection h1 { font-size: 90%; }section.subsection section.subsection section.subsection h1 { font-size: 80%; } etc.
This way if you decide all the headings need to change size, you can simply change the size in section.subsection, and the size change will cascade sown to all the nested section.subsections.
Using
class="subsection"in the HTML and.subsectionin the CSS are not at all needed. What else would a section inside another section be?Also, you are using the descendant selector (a simple space) which means your 2nd-level styles actually get applied to all levels within them. They are then overwritten by the later styles. This is a great way to make tracing later CSS pretty much impossible at the deeper levels of the page because so many conflicting styles are being applied to the lower levels.
Instead, you could use the child selector (the greater-than symbol) so your 2nd-level styles would only apply to the 2nd level.
While your enthusiasm for the subject is admirable, the code in your examples is far from optimal. Sub-optimal code in as authoritative a location as
whatwg.orgmakes it seem like that’s the best way to do things – even when there are far better ways, which are more deserving of the spotlight.I have more than one reason for introducing the concept of the use of “subsection” class in my work. Although unfortunately not readable by anything at the moment, I have it with the outlook of the future of being able to pull further semantics from it, like Microdata.
Unless the future comes where extra attributes are allowed, simply using the class would be much simpler than using the extended format needed to declare an itemtype.
As far as styling goes, I have updated the code to something which will hopefully perform better.
Also, in general. I may need more feedback to properly plan my next move, but, if the conclusion is that my work is not fit for this blog, I will step down.
Hi Christopher, thanks for the overview!
But as others mentioned before, this proposal seems rather complected. Why do we need to wrap the h1 of the article inside a header (and sometimes in an hgroup, additionally), while the h1 of a section can do without? The header tag seems redundant to me.
Also, using h1 for any heading of any order seems to pretty much break the idea of structuring content with h1-6. I see your point, that each heading is first order inside its corresponding (sub-)section. But then you would rarely need lower-order headings at all, since you’d need to put those content inside a descending sub-section. Maybe we need some kind of “section heading” or “current heading” tag instead of redefining h1-6?
Finally, I do not think it advisable to put author and edition information inside headings. (re example with Lewis Carroll’s millennium fulcrum edition).
Oh, and the examples show a 404.
— Kind regards, Vincent
I don’t really mind that h1s are used rather than h1-h6 as I feel the multi-level headings are a little arbitrary and better used in corner cases like the author and edition info (which seems perfectly well-suited to the header in my opinion).
I, for one, am happy a semantic discussion like this is happening on the WHATWG blog. Even if it’s not perfect the first time and needs to evolve to something better, there needs to be this kind of discussion somewhere — and this is as good a place as any.
I wouldn’t start offering to step down unless you find someone better to step in. I’m looking forward to the next installment.
P.S. My pet complaint would be why not use a horizontal rule instead of the div with the asterisks? Is it to remain more faithful to the original publication? Can we propose new CSS styles to modify the HR tag to include asterisks as an option rather than the bar?
Well – yes, this blog post is nearly two years old and one can say “who cares about that old stuff anyway?”… but if information is not worth being available even just about two years – why is it still available then now?
Whats my rant about?
You embedded samples which don’t work any longer (did they every work?).
E.g. http://chrisbright.net/future/c1p2f2.html
It also seems that http://chrisbright.net/ does not serve anything at all any longer.
So I as a ready came here and being confronted with in interesting blog post – but a very vital thing of it does not work any longer – and this on the official blog of the WHATWG… ahem?
Some here blamed W3C for not being flexible and fast enough to adapt HTML to new requirements. But I can’t resist refering a very old and still true article:
http://www.w3.org/Provider/Style/URI.html
I’m been through this as well… “Oh, I just need to publish something to use in my article… oh, yeah, just upload it and done” and later “hmm… some old stuff I published nearly two years ago… who would every read this again? Ok, let’s take this stuff offline. I can’t keep track of every bit of information which I every published somehwere…”
But in the end I realized it is not a good idea. Real people *will* visit a website also two years later and they *will* get frustrated to realize that their time was wasted – again – just because someone decided to removed things without caring about the consequences. People will never come back again, if they realize, that the old URL does not work any longer. They loose the confidence that using bookmarks makes sense, since anything which is older than a couple of months will not be available any longer at the same URL. What’s next? Removing the bookmark functionality of modern browsers at all, because we have Google, Facebook etc. and nobody want’s to use bookmarks any longer anyway? Hmm… kind of self-fulfilling prophecy.
Not everything is cool, just because it changes all the time 🙁