and so was told that using dl, dt and dd tags would be more appropriate… but then there’s particular rules like only one dt tag per dl/dd… dt is inline only… blabla…
so anyway I’ve looked at making the above ul using dl tags…like so…
But I’m not so sure. For example, dd elements are block level - I’ve had to make the arrow-up absolute positioned to remain inline with the inline DT tag. Also, if need be, is it ok to create dd ids and classes?
Thanks for help Paul. I read up on these tags before posting, but there seems to be some conflicting opinions, hence my post.
I’m sure I read that there should only be 1 inline dt. Perhhaps 1 per dd would make more sense.
I’m out on phone at the moment, so can’t picture what I want to achieve. But this is a simple side menu list of categories. The ul-head class is used to trigger a rotation of arrow up and hide the li elements. Its all working fine as ul li, but as said, nested span elements inside li’s are, apparently, semantically, not good. Do you think it would be better with the use of dl dt dd, though I’m not describing/defining anything?
Of course there’s no reason why you couldn’t simply put the spans inside list elements. The list elements can contain anything you want. Putting html outside the list elements is akin to adding divs around the ‘tr’ or ‘td’ elements.
As I said earlier you could use the nested list approach or indeed a heading followed by a list.
No the specs quite clearly state that a dl can contain one or more dt elements followed by one or more dd elements.More examples here.
Sounds like a simple heading followed by a list to me as in my last example but it depends whether the list is relevant to the heading and then could be a dl list.
I wouldn’t put anything between ul and lis, but I would put span elements within lis. And often nested spans. And the code would work as expected.
<ul>
<li>1<span id ="hook"><span id="hook2"></span></span>
<li>2</li?
</ul>
Either way, I’ve gone with the final dl list you replied with and all seems to be working fine. Question is now, do I go back and change all previous code + js functions, or leave as is because it is working as expected =/
Try to think of it this way: does the content of the of the SPAN label the info in the LIs? if so then the DT seems appropriate if it’s more of a heading to indicate what the list is about then then use an Hx tag.
in either case, the .arrow-up seems more of a decorative element, have you thought of using a CSS generated element?
Perhaps was a typo cant remember. Think I would’ve had the spans inside li’s. Chaging the 1 menu I have will be a huge ball ache. Especially when doing the js for it.
I suppose DT seems appropriate here.
<dl id="dl-categories" class="side-dl">
<dt>CATEGORIES <span class="arrow-up"></span></dt>
<dd>Computer Tablets and Networking</dd>
<dd>Computer Components and Parts</dd>
<dd>Laptop and Desktop Accessories</dd>
</dl>
If the arrow is decoration then add it as a background image or using :after or :before and save an element in the markup.
If it is a trigger for the hiding or showing of the definitions then it should be in the html and preferably should have some text associated with it to explain the action (the text could be hidden using one of a number of accessible text hiding methods). I suppose it depends on whether you are just moving the definitions off screen (but still available to screen readers and search engines) or if you are setting their display to none which ‘may’ hide the content from both. …but I’m straying from the original question now .
Straying is good! It’s indeed a trigger that displays none. Unless I put html after the dl tag, I’m not sure how I will position it with the inline dt categories
CSS doesn’t care whether elements are inline or block as it can change the display and you should be able to position things exactly as you want (if that’s what you meant ).
If you had a drawing of the layout you wanted I could probably offer better advice.
Not sure… I’ve positioned it how I want - within the DT! If the html markup is between DL & DT (okay to do this?), then that would work the same I suppose. But if I should put the html outside of the DL (block level element?) then that’d require some further absolute positioning of the arrow
The arrow can be absolutely positioned at the end of the categories into some padding right on the dt which is position:relative (an actual button is probably better for accessibility rather than a span and you can of course style it as you wish).
Then I would absolutely place the b element off screen to aid screen readers.
I blame Bootstrap 100% for giving people the idea that text heading/naming things in a list somehow belongs as part of that list.
Bootstrap enourages garbage like
<ul>
<li class="style me to look like a heading even tho I'm not">FAKE HEADING</li>
<li>List items...</li>
<li>...</li>
</ul>
or even
<ul>
<li class="real heading in the wrong spot"><h3>ALE!</h3></li>
<li>Listies...</li>
</ul>
A heading is not part of its own content, just as a cat should not eat its own puke. Other cats should eat its puke for godssake people.
Set all the things on fire until Bootstrap dies. Make headings “head” their content. Even if you’re being a hipster magazine article writer about some new jojo-berry craft beer coming out of curly-moustache-guy’s organic basement noodle bar, use CSS to make the heading look “inline” yo.
<div funky-yall><h3>KINASHI WILSON'S NEW BEER</h3> <p>One of a kind, with natural herbs and spices and skinny jeans...</p></div>
Ok yeah, good shout. Haven’t really thought about screen-readers. The arrow and categories title will remain throughout. But instead of displaying:none for the DD elements, I could ‘swoosh’ them off the screen!
