What would be the best method to code heading title for ul or ol Like we have caption in table

Question

What would be the best method to code heading title of  lt ul gt  or  lt ol gt   Like we have  lt caption gt  in  lt table gt   and we don t want to make them bold   Is this okay    lt p gt heading lt  p gt   lt ul gt     lt li gt list item lt  li gt     lt li gt list item lt  li gt     lt li gt list item lt  li gt   lt  ul gt    Or should headings always be used    lt h3 4 5 6 gt heading lt  h3 4 5 6 gt   lt ul gt     lt li gt list item lt  li gt     lt li gt list item lt  li gt     lt li gt list item lt  li gt   lt  ul gt

User · Answer

how about making the heading a list-element with different styles like so

<ul>
 <li class="heading">heading</li>
 <li>list item</li>
 <li>list item</li>
 <li>list item</li>
 <li>list item</li>
</ul>

and the CSS

ul .heading {font-weight: normal; list-style: none;}

additionally, use a reset CSS to set margins and paddings right on the ul and li. here's a good reset CSS. once you've reset the margins and paddings, you can apply some margin on the list-elements other than the one's with the heading class, to indent them.

User · Answer

I like to make use of the css  before and a data-  attribute for the list  HTML    lt ul data-header  heading  gt    lt li gt list item  lt  li gt   lt li gt list item  lt  li gt   lt li gt list item  lt  li gt   lt  ul gt    CSS   ul before      content attr data-header       font-size 120       font-weight bold      margin-left -15px      This will make a list with the header on it that is whatever text is specified as the list s data-header attribute  You can then easily style it to your needs

User · Answer

Though this is old  I m updating it for others who might find this question when searching later    Matt Kelliher   Using the css  before and a data-  attribute for the list is a great idea  but can be modified slightly to be more handicap accessible as well   HTML    lt ul aria-label  Vehicle Models Available   gt        lt li gt Dodge Shadow lt  li gt       lt li gt Ford Focus lt  li gt       lt li gt Chevy Lumina lt  li gt   lt  ul gt    CSS   ul before      content attr aria-label       font-size 120       font-weight bold      margin-left -15px      This will make a list with the  header  pseudo element above it with text set to the value in the aria-label attribute  You can then easily style it to your needs     The benefit of this over using a data-  attribute is that aria-label will be read off by screen readers as a  label  for the list  which is semantically correct for your intended use of this data   Note  IE8 supports  before attributes  but must use the single colon version  and must have a valid doctype defined    IE7 does not support  before  but Modernizer or Selectivizr should fix that issue for you   All modern browsers support the older  before syntax  but prefer that the   before syntax be used   Generally the best way to handle this is to have an external stylesheet for IE7 8 that uses the old format and a general stylesheet using the new format  but in practice  most just use the old single colon format since it is still 100  cross browser  even if not technically valid for CSS3

User · Answer

Would the use of  lt caption gt  be allowed    lt ul gt     lt caption gt  Title of List  lt  caption gt     lt li gt  Item 1  lt  li gt     lt li gt  Item 2  lt  li gt   lt  ul gt

User · Answer

h3 is absolutly a better solution than h2  h1 or h6     You have to use specific level   if you re in a h1  use h2  if you re in a h5  use h6  if you re in a h6    hum  use strong or em for exemple   It not a obligation but a question of accessibility  Here  green part   You don t have to give title to list    because this element it doesn t exist  So screen reader will not use something special     Therefore  using Hn is probably one of the best solution  but surely not a specific level

User · Answer

Always use heading tags for headings  The clue is in the name     If you don   t want them to be bold  change their style with CSS  For example   HTML    lt h3 class  list-heading  gt heading lt  h3 gt    lt ul gt        lt li gt list item  lt  li gt       lt li gt list item  lt  li gt       lt li gt list item  lt  li gt   lt  ul gt    CSS   list-heading       font-weight  normal      In HTML5  you can associate the heading and the list more clearly by using the  lt section gt  element    lt section gt  doesn   t work properly in IE 8 and earlier without some JavaScript though     lt section gt       lt h1 gt heading lt  h1 gt        lt ul gt           lt li gt list item  lt  li gt           lt li gt list item  lt  li gt           lt li gt list item  lt  li gt       lt  ul gt   lt  section gt    You could do something similar in HTML 4    lt div class  list-with-heading  gt       lt h3 gt Heading lt  h3 gt        lt ul gt           lt li gt list item  lt  li gt           lt li gt list item  lt  li gt           lt li gt list item  lt  li gt       lt  ul gt   lt  div gt    Then style thus    list-with-heading h3       font-weight  normal

[css] What would be the best method to code heading/title for <ul> or <ol>, Like we have <caption> in <table>?

Examples related to css

Examples related to xhtml

Examples related to accessibility

Examples related to screen-readers

Examples related to wcag