Menu icon Foundation
What is the best way to make <ul> text <small>?

I am a fairly new user of Foundation -- thanks for a superb piece of work!

On a handful of sites I have been rendering unordered list text "small" by applying the "small" attribute.

Here's an example (from http://pyrotech.us):

<div class="large-4 columns">
    <ul class="no-bullet">
        <small>
            <li class="text-center">website last updated:</li>
            <li class="text-center">[[$SiteLastEdited]]</li>
        </small>
    </ul>
</div>
            

         

This creates the desired effect and (to me, at least) usage of "small" in an unordered list seems semantically correct. [ Although the suggestions to use unordered lists for such text in the footer (gleaned from somewhere on these forums as I recall) itself seems a bit iffy. ]

Anyways, the W3C validator disagrees with using "small" in an unordered list and throws an error:
https://validator.w3.org/nu/?doc=http%3A%2F%2Fpyrotech.us%2F

Questions:
1. can someone explain why it is semantically incorrect to use "small" in an unordered list? I guess UL "immediately" expects to be followed by LI -- is there a way to add "small" within the UL or LI tags? Nothing I have tried works . . .

2. I can, of course, cleanly correct this problem by applying a style INLINE, such as:

<div class="large-4 columns">
    <ul class="no-bullet" style="font-size: 60%;">
        <li class="text-center">website last updated:</li>
        <li class="text-center">[[$SiteLastEdited]]</li>
    </ul>
</div>
            

         

3. Is there a better way? For example, should I add a style to app.css applied to the entire text in my footer element, perhaps?

4. Should I even be using unordered lists for my footer construct or is there a better way to markup?

Thanks in advance for your insights!

text formatting

I am a fairly new user of Foundation -- thanks for a superb piece of work!

On a handful of sites I have been rendering unordered list text "small" by applying the "small" attribute.

Here's an example (from http://pyrotech.us):

<div class="large-4 columns">
    <ul class="no-bullet">
        <small>
            <li class="text-center">website last updated:</li>
            <li class="text-center">[[$SiteLastEdited]]</li>
        </small>
    </ul>
</div>
            

         

This creates the desired effect and (to me, at least) usage of "small" in an unordered list seems semantically correct. [ Although the suggestions to use unordered lists for such text in the footer (gleaned from somewhere on these forums as I recall) itself seems a bit iffy. ]

Anyways, the W3C validator disagrees with using "small" in an unordered list and throws an error:
https://validator.w3.org/nu/?doc=http%3A%2F%2Fpyrotech.us%2F

Questions:
1. can someone explain why it is semantically incorrect to use "small" in an unordered list? I guess UL "immediately" expects to be followed by LI -- is there a way to add "small" within the UL or LI tags? Nothing I have tried works . . .

2. I can, of course, cleanly correct this problem by applying a style INLINE, such as:

<div class="large-4 columns">
    <ul class="no-bullet" style="font-size: 60%;">
        <li class="text-center">website last updated:</li>
        <li class="text-center">[[$SiteLastEdited]]</li>
    </ul>
</div>
            

         

3. Is there a better way? For example, should I add a style to app.css applied to the entire text in my footer element, perhaps?

4. Should I even be using unordered lists for my footer construct or is there a better way to markup?

Thanks in advance for your insights!

balazs sziklai about 4 years ago

Hi there!

small is an in-line tag, so most of the time it should be used right around the text-node. in this case inside the li elements. Also if you have a chance try to avoid in-line styling unless there is no other way

 <li class="text-center"><small>website last updated:</small></li>