How to semantically add heading to a list

Question

This has been bothering me for a while  and I m wondering if there s any consensus on how to do this properly  When I m using an HTML list  how do I semantically include a header for the list   One option is this    lt h3 gt Fruits I Like  lt  h3 gt   lt ul gt       lt li gt Apples lt  li gt       lt li gt Bananas lt  li gt       lt li gt Oranges lt  li gt   lt  ul gt    but semantically the  lt h3 gt  heading is not explicitly associated with the  lt ul gt   Another option is this    lt ul gt       lt li gt  lt h3 gt Fruits I Like  lt  h3 gt  lt  li gt       lt li gt Apples lt  li gt       lt li gt Bananas lt  li gt       lt li gt Oranges lt  li gt   lt  ul gt    but this seems a bit dirty  as the heading is not really one of the list items   This option is not allowed by the W3C    lt ul gt       lt h3 gt Fruits I Like  lt  h3 gt       lt li gt Apples lt  li gt       lt li gt Bananas lt  li gt       lt li gt Oranges lt  li gt   lt  ul gt    as  lt ul gt  s can only contain one or more  lt li gt  s  The old  list heading   lt lh gt  makes the most sense   lt ul gt       lt lh gt Fruits I Like  lt  lh gt       lt li gt Apples lt  li gt       lt li gt Bananas lt  li gt       lt li gt Oranges lt  li gt   lt  ul gt    but of course it s not officially part of HTML  I ve heard it suggested that we use  lt label gt  just like a form    lt ul gt       lt label gt Fruits I Like  lt  label gt       lt li gt Apples lt  li gt       lt li gt Bananas lt  li gt       lt li gt Oranges lt  li gt   lt  ul gt    but this is a little strange and will not validate anyway   It s easy to see the semantical problems when trying to style my list headers  where I end up needing to put my  lt h3 gt  tags within the first  lt li gt  and target them for styling with something like   ul li first-of-type       list-style  none      margin-left  -1em        some other header styles       horrors  But at least this way I can control the entire  lt ul gt   heading and all  by styling the ul tag   What is the correct way to do this  Any ideas

User · Answer

a  lt div gt  is a logical division in your content  semantically this would be my first choice if I wanted to group the heading with the list    lt div class  mydiv  gt       lt h3 gt The heading lt  h3 gt       lt ul gt          lt li gt item lt  li gt          lt li gt item lt  li gt          lt li gt item lt  li gt       lt  ul gt   lt  div gt    then you can use the following css to style everything together as one unit   mydiv    mydiv h3    mydiv ul    mydiv ul li   etc

User · Answer

As Felipe Alsacreations has already said  the first option is fine    If you want to ensure that nothing below the list is interpreted as belonging to the heading  that s exactly what the HTML5 sectioning content elements are for  So  for instance you could do    lt h2 gt About Fruits lt  h2 gt   lt section gt     lt h3 gt Fruits I Like  lt  h3 gt     lt ul gt       lt li gt Apples lt  li gt       lt li gt Bananas lt  li gt       lt li gt Oranges lt  li gt     lt  ul gt   lt  section gt   lt  -- anything here is part of the  About Fruits  section but does not       belong to the  Fruits I Like  section  -- gt

User · Answer

According to w3 org  note that this link is in the long-expired draft HTML 3 0 spec       An unordered list typically is a bulleted list of items  HTML 3 0   gives you the ability to customise the bullets  to do without bullets   and to wrap list items horizontally or vertically for multicolumn   lists       The opening list tag must be  lt UL gt   It is followed by an optional list   header   lt LH gt caption lt  LH gt   and then by the first list item   lt LI gt    For   example    lt UL gt     lt LH gt Table Fruit lt  LH gt     lt LI gt apples    lt LI gt oranges    lt LI gt bananas  lt  UL gt        which could be rendered as       Table Fruit         apples   oranges   bananas         Note  Some legacy documents may include headers or plain text before   the first LI element  Implementors of HTML 3 0 user agents are advised   to cater for this possibility in order to handle badly formed legacy   documents

User · Answer

I put the heading inside the ul  There s no rule that says UL must contain only LI elements

User · Answer

In this case I would use a definition list as so    lt dl gt     lt dt gt Fruits I like  lt  dt gt     lt dd gt Apples lt  dd gt     lt dd gt Bananas lt  dd gt     lt dd gt Oranges lt  dd gt   lt  dl gt

User · Answer

Try defining a new class  ulheader  in css  p ulheader   ul selects all  that immediately follows My Header  p ulheader   ul      margin-top 0    p ulheader      margin-bottom 0

User · Answer

You could also use the  lt figure gt  element to link a heading to your list like this    lt figure gt       lt figcaption gt My favorite fruits lt  figcaption gt              lt ul gt             lt li gt Banana lt  li gt             lt li gt Orange lt  li gt             lt li gt Chocolate lt  li gt          lt  ul gt   lt  figure gt    Source  https   www w3 org TR 2017 WD-html53-20171214 single-page html the-li-element  Example 162

User · Answer

Your first option is the good one  It s the least problematic one and you ve already found the correct reasons why you couldn t use the other options   By the way  your heading IS explicitly associated with the  lt ul gt    it s right before the list      edit  Steve Faulkner  one of the editors of W3C HTML5 and 5 1 has sketched out a definition of an lt element  That s an unofficial draft that he ll discuss for HTML 5 2  nothing more yet

[html] How to semantically add heading to a list

Examples related to html

Examples related to html-lists