发表新帖
发表新帖

What would be the best method to code heading/title for
    or
      , Like we have in ?
      前端 未结
      关注
      6 1174
      青春惊慌失措
      青春惊慌失措 2021-02-01 00:40

      What would be the best method to code heading/title of

        or
          ? Like we have
      in
      相关标签:
      6条回答
      • 盖世英雄少女心
        2021-02-01 01:05

        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:

        <ul aria-label="Vehicle Models Available:"> 
    <li>Dodge Shadow</li>
    <li>Ford Focus</li>
    <li>Chevy Lumina</li>
</ul>

        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.

        0 讨论(0)
      • 广开言路
        2021-02-01 01:06

        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.

        0 讨论(0)
      • 逝去的感伤
        2021-02-01 01:15

        Would the use of <caption> be allowed?

        <ul>
  <caption> Title of List </caption>
  <li> Item 1 </li>
  <li> Item 2 </li>
</ul>
        0 讨论(0)
      • 耶瑟儿～
        2021-02-01 01:16

        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:

        <h3 class="list-heading">heading</h3>

<ul> 
    <li>list item </li>
    <li>list item </li>
    <li>list item </li>
</ul>

        CSS

        .list-heading {
    font-weight: normal;
}

        In HTML5, you can associate the heading and the list more clearly by using the <section> element. (<section> doesn’t work properly in IE 8 and earlier without some JavaScript though.)

        <section>
    <h1>heading</h1>

    <ul>
        <li>list item </li>
        <li>list item </li>
        <li>list item </li>
    </ul>
</section>

        You could do something similar in HTML 4:

        <div class="list-with-heading">
    <h3>Heading</h3>

    <ul>
        <li>list item </li>
        <li>list item </li>
        <li>list item </li>
    </ul>
</div>

        Then style thus:

        .list-with-heading h3 {
    font-weight: normal;
}
        0 讨论(0)
      • 孤街浪徒
        2021-02-01 01:22

        I like to make use of the css :before and a data-* attribute for the list

        HTML:

        <ul data-header="heading"> 
<li>list item </li>
<li>list item </li>
<li>list item </li>
</ul>

        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.

        0 讨论(0)
      • 一个人的身影
        2021-02-01 01:24

        h3 is absolutly a better solution than h2, h1 or h6 !

        1. 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).

        2. 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.

        0 讨论(0)
       看不清?
      提交回复
      热议问题