Hi All . . . I have spent some time with Freeway and how it handles lists. After quite a bit of work I have finally been able to establish a successful workflow that lets me leverage Freeway and still end up with clean semantic markup.
I would like to use the lh tag for my ul headings but don’t see a way to do this as Freeway seems to only output the ul with li items. is there a way I can change the first li to be a lh in freeway?
The LH tag was a part of the HTML 3.0 format, and it was dropped before 3.2 became a standard. I just tested with HTML5 and HTML 4, and got similar results to this:
Error: Element lh not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)
From line 14, column 3; to line 14, column 6
y>↩
Test</
Content model for element ul:
Zero or more li and script-supporting elements.
Walter
On Dec 7, 2013, at 3:02 PM, TeamSDA wrote:
Hi All . . . I have spent some time with Freeway and how it handles lists. After quite a bit of work I have finally been able to establish a successful workflow that lets me leverage Freeway and still end up with clean semantic markup.
I would like to use the lh tag for my ul headings but don’t see a way to do this as Freeway seems to only output the ul with li items. is there a way I can change the first li to be a lh in freeway?
Thank you for the reply. Currently I am just styling the first li differently then creating a child list under the li but it does not seem like this is semantically correct. Is there a better way to add a heading to a list that is semantically correct?
I did notice that all the documentation on the lh tag seemed to be older. Also I am building the set using HTML 5.
If you want to build a multi-level list, then a nested UL is totally fine. As Todd mentioned, a DL is another good choice, although that only allows for one level of hierarchy, while the nested UL is indefinitely nestable.
You can make the styling whatever you like, the semantic value will be there if you do something like this:
li { font-weight: bold }
li li { font-weight: normal }
Then all of your nested LIs will have normal weight text, and all your top-level LIs will be bold.
You can adjust the bullet style and indenting to suit your layout, too. But this gets you proper hierarchical outline format for free.
Walter
On Dec 7, 2013, at 3:18 PM, TeamSDA wrote:
Hi Walter . . .
Thank you for the reply. Currently I am just styling the first li differently then creating a child list under the li but it does not seem like this is semantically correct. Is there a better way to add a heading to a list that is semantically correct?
I did notice that all the documentation on the lh tag seemed to be older. Also I am building the set using HTML 5.
Walter your example is exactly what I currently have, I was just thinking that using something like a lh would give the list more semantic meaning.
As for an dl I don’t believe this would be the right solution as my list is being used for a change log, e.g. Task name and then the changes made to that given task. I am under the understanding that dl are used for definitions. My main goal is to create clean markup that is semantically correct.
Sure, but the nested UL can be nested ad nauseam – can you nest DLs like that? My example was only one level deep, but you can just keep nesting as far as you want, and if you don’t style the bullets, they actually take on the same sort of behavior as the Word outline tool, with different bullets as you go deeper for visual confirmation what you’re doing.
Walter
On Dec 7, 2013, at 3:35 PM, Todd wrote:
True, but since there can be multiple
tags couldn’t those be used in a similar fashion to nested ul lists?
<dl>
<dt>Title or Header</dt>
<dd>List Item</dd>
<dd>List Item</dd>
<dt>Title or Header</dt>
<dd>List Item</dd>
</dl>
The “definition” meaning was explicitly changed to ‘description’ in HTML5 – you can use them for anything where there is a name or names followed by values. Sounds like it would be perfect for what you’re doing, as you’ll never get beyond one layer.
I might be tempted to put separate lists interspersed with Hn tags. That’s another way.
Walter
On Dec 7, 2013, at 3:38 PM, TeamSDA wrote:
Thank you Both . . .
Walter your example is exactly what I currently have, I was just thinking that using something like a lh would give the list more semantic meaning.
As for an dl I don’t believe this would be the right solution as my list is being used for a change log, e.g. Task name and then the changes made to that given task. I am under the understanding that dl are used for definitions. My main goal is to create clean markup that is semantically correct.
I haven’t tested this in a while, but what I remember is that it outputs a dl, but with a twist (and this makes it invalid according to that article I linked to):
HMMM… So it would seem I am back to my first question but with a greater understanding of the DL. So how would I go about keeping this in a Freeway Pro workflow (or as least as much as possible) and use the DT Tag?
HMMM… So it would seem I am back to my first question but with a greater understanding of the DL. So how would I go about keeping this in a Freeway Pro workflow (or as least as much as possible) and use the DT Tag?
I understand the desire to do this, but I should point out that a normal
header (h1, h2, etc) before the list works just fine. Think like this:
You use an appropriate level header (h1) and follow it with paragraph(s) of
descriptive content… you do not require some extra association between
header and the content for that pairing. The same should hold true for
lists as well. Arguably, normal p content following a header can all be
wrapped in a sectioning element (like html5 section) to semantically
isolate their relationship from other content on the page - I think you can
also do that with header/list pairs to underscore their relationship.
I do understand the compulsion to treat a list like a table, to give it a
title tag or something to define the list content as a whole. Usually if I
take a breath or two, the simpler approach will win out.
HMMM… So it would seem I am back to my first question but with a greater understanding of the DL. So how would I go about keeping this in a Freeway Pro workflow (or as least as much as possible) and use the DT Tag?
OK… Thank you for trying Walt, much appreciated. Everyone here has given some great input. Freeway is a great tool, it can just be a little challenging to accomplish some things if the end desire is to keep the markup lean and semantically correct.
Lists have proved to be a huge challenge but once I got my head around what Freeway was doing I have had great success keeping things in Freeway but styling them in a manner that is lean and in keeping with good semantics, e.g. not using br tags, p tags and such to separate list items and add styling.
Pseudo classes can be especially useful with lists, I use ‘em all the time for all sorts of stuff. It’s a great way to avoid adding unnecessary classes and ids to the html. Pseudos to the rescue!
Todd - the :nth-child kid
but styling them in a manner that is lean and in keeping with good semantics, e.g. not using br tags, p tags and such to separate list items and add styling.
I gave the DT action you baked up a go and it seems to work as expected. In my application I am in need of the DD to have a bullet. I tried applying the “list-style-type:disc” but it does not seem to work. Is this style property not able to be used with the DL?
You can create a style that adds the bullet (disc) to your dd elements:
dd { list-style-type: disc }
But you cannot mix and match list elements within a container element. The UL > LI combination natively creates the list-style-type: disc.
Walter
On Dec 7, 2013, at 5:50 PM, TeamSDA wrote:
Hello Walt…
I gave the DT action you baked up a go and it seems to work as expected. In my application I am in need of the DD to have a bullet. I tried applying the “list-style-type:disc” but it does not seem to work. Is this style property not able to be used with the DL?
Test</