Jump to content

How to omit a list marker from just one list item?


JimTrail

Recommended Posts

Hello W3Schools Forums! Question: Is it proper coding technique to use the "list-style: none;" directive in the <li> tag instead of the <ul> tag. I am wanting to put a heading for a list. The heading does not need to have a list marker. I am using the list-style:none; directive in the <li> tag. I think that the list-style: none; directive is intended to be used in the <ul> tag - not the <lu> tag. However, it seems to work okay using it in the <li> tag. I am just wanting to make sure putting the list-style: none; directive in the <li> tag is proper because I don't want it to cause issues later on. Here is the style sheet code:ul{list-style-type: circle;} li.ListHead{list-style: none;} Here is the Html markup:<ul><li class="ListHead">Heading For List</li><li>List item one</li><li>List item three</li><li>List item two</li></ul> Here is the way it looks on the page:Heading For ListºList item oneºList item threeºList item two If the above is not proper code can someone tell me how to put a heading on a list of items where it complies with the rules? Thanks in advance.

Link to comment
Share on other sites

There is nothing wrong with using list-type-style: none for a single <li>. I have done this a few times myself. However, from a accessibility point of view it may confuse those that uses screen readers. Ideally, you would use one of the sub heading tags instead (h2, h3, etc.)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...