Why I Avoid Nested HTML Sections
About the styling problems of nested HTML sections.
By. Jacob
Edited: 2017-02-02 13:56
One of the first functions I created for Beamtic's CMS, is a function that generates a table of contents, and lists each section of an article according to it's level in the HTML. Each level would increase the nesting level of a HTML list, giving a nice representation of the relationship between the different sections.
However, I found that I rarely needed to use nested sections beyond the second level (h2's) for the type of articles I am writing.
When I did go deeper with my headings, it often ended up looking very messy, and not very nice to read. I think I have finally figured out why deeper heading levels work poorly on the web.
Traditionally, different heading levels have been styled with a smaller font, or in some cases even using indentation. Personally I have always disliked this. It made the text harder to read, and added no, or little value to readers. If you indent a section, as is done with some website comment features, then deeper level comments will have less space to display their text.
Commenting sections
Nested sections have their use cases, but only to a certain extent and in a limited number of situations. On so called web 2.0 sites, commenting could be one place where it makes sense to style nested sections differently.
The question is, when do we draw the line? We only have a limited space on the screen, and we can not continue to indent sections indefinitely. We also can not adjust the size of headings indefinitely.
I think Facebook is handling the problem nicely. They allow us to respond to comments on posts, creating a visually indented section, and what appears to be a deeper level section. However, they will not allow us to respond to comments to other comments, as this would create a styling problem.
I think Facebook solved the problem nicely, and other web developers can learn from this.
When nested sections make sense
If we ignore the obvious styling problems and focus on the usability aspects, then I think it adds very little value to our sites to have different heading levels styled with a different font size. I think it is a left-over practice from back when the web was more document-orientated, and we only had few ways to stule our web pages.
If we intend our pages to be printed, or if we offer a document version, then it may make sense to offer a table of contents at the top, to indicate the relationship between different sections of an article or document.
For most websites, including blogs and forums, I think we should generally avoid moving deeper than the third level of nesting. And if we do, then we should be careful about making styling changes.
With the new sectioning elements, HTML potentially allows a infinite number of section levels. I think a very deep nesting makes sense for document-layouts, but not for websites or web applications.
If we do use a very deep nesting level, then it makes little sense to style them differently than other headings on our page. Some would argue that it defeats the purpose. But this is not right. Behind the scenes, in the HTML, a nested section would still be nested, and "belong" to it's parent. Also, if we do offer a table of contents, this relationship could be indicated, making it easier to navigate an article.
Tell us what you think: