By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

The new HTML Sections are Difficult to Work With

I have been trying to figure out an easy way to handle sections.

Created: 2012-04-25 00:47

By. BlueBoden

Just some thoughts on the new sectioning system in HTML for my own reference - maybe you will find some of them useful.

I have been trying to figure out an easy way to create a contents list generator, which would be compatible with a WYSIWYG module that I'm working on. I finally decided to simply replace the h2-h6 elements with section and h1 elements, but that still doesn't quite solve my problem.

That is how to figure out the correct nesting of the elements, without having to write a script that will read the DOM, or resorting to other DOM scripts.

Replacing Elements

One possible method, would be to replace opening h2-h6's with h1s, and opening and closing sections. This method has the advantage that i can store content in a fixed format, so that it can be easily re-edited with the WYSIWYG module, without having to convert it.

The only requirement is to remember the last heading element that was replaced - which should be easy enough using a regular expression - if then the next heading to be replaced matches the last heading, then we are still working on the same level. If it does otherwise - if it either goes up or down - then we should in theory easily be able to figure out what to do, but it will be a mess of If statements, and that is something i do not like.

Iding the Individual Sections

The best way to ID the sections separately, would likely be to apply an ID for scripting, and a Class for Styles. I have never really liked how deeper headings have been styled on other websites - giving them a smaller font-size seems to be the best solution, but this creates an unwanted limit of how deep the sections are allowed to go, as there is a limit of how small the font-size is allowed to get - which is also why i likely stick with all headings having the same font-size - the section nesting can be indicated by the contents list.

I think i got a pretty good idea about how to do this without DOM - and if you think DOM is easy, then you are wrong. I have tried doing it by using DOM, but considering that the new sectioning system uses h1 for section headings, it will be pretty hard to know the level of the individual sections, which is necessary to generate the contents-list. It may be better to simply stick with the old headings, and then let the CMS convert content to the new format. Its also easier to work with the old system in WYSIWYG editors, as section elements tend to be invisible.

I do not really feel like working on this function again - i thought i had it working last time, and i did a lot of testing - it would however seem like its bugged, so nest time i will just have to do it the hard way, even if it means writing a parser.