CODEWITHSUNDEEP
htmlsemantics
Gabriel Bueno
Gabriel Bueno

Reputation: 520

What should be the proper HTML element for a list item title

I have a list of items where each one have a title and a subtitle, something like

<h2>Here's my section with some items
<ul>
  <li>
    <em>Item title</em>
    <p>Item subtitle</p>
  </li>
  <li>
    <em>Item title 2</em>
    <p>Item subtitle 2</p>
  </li>
  <li>
    <em>Item title 3</em>
    <p>Item subtitle 3</p>
  </li>
</ul>

So here's the question: what HTML element should contain item title?

Thanks!

** EDIT **: I'm trying to figure out which HTML element is the proper HTML element for this function (being a list item title)

Upvotes: 2

Views: 2702

Answers (3)

Bhimbim
Bhimbim

Reputation: 1384

i believe what you looking for is the proper usage of HTML 5 Semantic Elements. Your code with ul, ol and li is fine, its to create list, but if you want to really define it as title and description (i take it as description because you write in paragraph tag), you can use dl, dt and dd w3school explaination. Here are my example.

<h2>Here's my section with some items
<dl>
    <dt>Item title</dt>
    <dd>Item subtitle</dd>
    <dt>Item title 2</dt>
    <dd>Item subtitle 2</dd>
    <dt>Item title 3</dt>
    <dd>Item subtitle 3</dd>
</dl>

Please let me know if you have further question.

Hi Bueno !, after you gave me the example of what you trying to achieve now i can narrowed down the tag. In my perspective i will use this semantic tags :

 <section>
        <header>
            <h2>Diferenciais Adentro Cloud</h2>
            <p>Conheça as vantagens de ser cliente Adentro Cloud, a qualidade e atendimento diferenciado que sua empresa procura</p>
        
            <ul>
                <li>
                    <figure>
                        <img/>
                        <figcaption>
                            <h3>Segurança</h3>
                            <p>Conheça as vantagens de ser cliente Adentro Cloud, a qualidade e atendimento diferenciado que sua empresa procura Conheça as vantagens de ser cliente Adentro Cloud, a qualidade e atendimento diferenciado que sua empresa procura</p>
                        </figcaption>
                    </figure>
                </li>
                <li>
                    <figure>
                        <img/>
                        <figcaption>
                            <h3>Data Center</h3>
                            <p>Conheça as vantagens de ser cliente Adentro Cloud, a qualidade e atendimento diferenciado que sua empresa procura Conheça as vantagens de ser cliente Adentro Cloud, a qualidade e atendimento diferenciado que sua empresa procura</p>
                        </figcaption>
                    </figure>
                </li>
                <li>
                    <figure>
                        <img/>
                        <figcaption>
                            <h3>Suporte</h3>
                            <p>Conheça as vantagens de ser cliente Adentro Cloud, a qualidade e atendimento diferenciado que sua empresa procura Conheça as vantagens de ser cliente Adentro Cloud, a qualidade e atendimento diferenciado que sua empresa procura</p>
                        </figcaption>
                    </figure>
                </li>
            </ul>
        </header>
    </section>

Note : Bueno's example of website website example, look for Diferenciais Adentro Cloud.

Upvotes: 0

Rohan Shetty
Rohan Shetty

Reputation: 162

If you want to give meaning to the titles.. First of all, add an </h2>. Then use a class to give your elements a name or a group:

    <h2>Here's my section with some items</h2>
<ul>
  <li>
    <em class="itemTitle">Item title</em>
    <p>Item subtitle</p>
  </li>
  <li>
    <em class="itemTitle">Item title 2</em>
    <p>Item subtitle 2</p>
  </li>
  <li>
    <em class="itemTitle">Item title 3</em>
    <p>Item subtitle 3</p>
  </li>
</ul>

With the class, you can then add css using

.itemTitle {
  /* some css code */
}

A class allows multiple elements to have the same grouping, whereas an id allows only a unique name (which, in some cases, is what you will need).

Upvotes: 0

Jarad Kears
Jarad Kears

Reputation: 114

Is this what you were going for?

<h1>Here's my section with some items</h1>
<ul>
  <li>
    <h2>Item title</h2>
    <p>Item subtitle</p>
  </li>
  <li>
    <h2>Item title 2</h2>
    <p>Item subtitle 2</p>
  </li>
  <li>
    <h2>Item title 3</h2>
    <p>Item subtitle 3</p>
  </li>
</ul>

or did you want this

<h2>Here's my section with some items</h2>
<ul>
  <li>
    <em>Item title</em>
    <p>Item subtitle</p>
  </li>
  <li>
    <em>Item title 2</em>
    <p>Item subtitle 2</p>
  </li>
  <li>
    <em>Item title 3</em>
    <p>Item subtitle 3</p>
  </li>
</ul>

Either way you forgot a closing tag for H2 it should be

Upvotes: 0

Related Questions