The WHATWG Blog

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:

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.

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.

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

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.