How to semantically add heading to a list
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
<h2>About Fruits</h2>
<section>
<h3>Fruits I Like:</h3>
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Oranges</li>
</ul>
</section>
<!-- anything here is part of the "About Fruits" section but does not
belong to the "Fruits I Like" section. -->
How to semantically provide a caption, title or label for a list in HTML
Option 1
HTML5 has the figure
and figcaption
elements, which I find work quite nicely.
Example:
<figure>
<figcaption>Fruit</figcaption>
<ul>
<li>Apple</li>
<li>Pear</li>
<li>Orange</li>
</ul>
</figure>
These are then easily styled with CSS.
Option 2
Using CSS3's ::before pseudo-element can be a nice solution:
HTML:
<ul title="Fruit">
<li>Apple</li>
<li>Pear</li>
<li>Orange</li>
</ul>
CSS:
ul[title]::before {
content: attr(title);
/* then add some nice styling as needed, eg: */
display: block;
font-weight: bold;
padding: 4px;
}
You can, of course, use a different selector than ul[title]
; for example, you could add a 'title-as-header' class and use ul.title-as-header::before
instead, or whatever you need.
This does have the side effect of giving you a tooltip for the whole list. If you don't want such a tooltip, you could use a data attribute instead (e.g., <ul data-title="fruit">
and ul[data-title]::before { content: attr(data-title); }
).
How do I semantically group a header with a UL in HTML?
It should not be set in the first li because this would assume a sibling relationship to the preceding li elements whereas the header is more important in the hierarchy. Imagine screen-readers etc
<h2>Databases:</h2>
<ul id="databases">
<li>Microsoft SQL Server - 10+ years</li>
<li>Sybase SQL Server - 5 years</li>
<li>Oracle - 5 years</li>
</ul>
Swap out the h2 for a h(n) depending on the hierarchy in relation to the other headers on the page. To target the header in css just give it a class if there are other headers that will share the same style e.g.
<h2 class="subHeader">Languages:</h2>
<ul id="languages">
<li>English</li>
<li>Chinese</li>
<li>French</li>
</ul>
Otherwise give it an id
HTML - How to put a header in the middle of an ordered list?
DEMO: http://jsfiddle.net/M4hHH/4/
HTML:
<h1>Header 1</h1>
<ol id="list1">
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
</ol>
<h2>Header 2</h2>
<ol id="list2">
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
</ol>
CSS:
#list1, #list2{
list-style: none;
padding: 0;
}
#list1 { counter-reset: item }
#list2 { counter-reset: item 4 }
#list1 > li:before, #list2 > li:before {
content: counter(item) ". ";
white-space: pre-wrap;
counter-increment: item;
display:inline-block;
width: 2em;
text-align:right;
}
Semantic HTML of an articles list
I’d use an article
for each snippet (i.e. a news teaser).
Each article
contains an h1
element for the heading, an img
element for the image, and p
element(s) for the text.
As you probably want to link to a full version, you could enclose all elements in one a
element (which is allowed in HTML5), or the heading etc. only.
So it could look like:
<article>
<h1><a href="" title=""><!-- news title --></a></h1>
<img src="" alt="Sample Image" />
<p><!-- news description --></p>
</article>
Only use figure
if this image itself should have a separate caption. The news description (here contained in p
) usually isn’t the caption for that image.
You may change the order of the article
children. Thanks to the way sectioning elements work, the heading doesn’t have to be the first element.
You may use an ul
, but it’s not necessary. ol
, however, should only be used if the order is really meaningful for understanding the content (i.e. a different order would change the meaning of the document). Typical example: if the items are ranked by relevance (e.g. most relevant teaser at the top), you should use ol
.
Regarding your question if the teaser should be an article
:
Don’t confuse article
(HTML5 element) with the term "article" (English language). article
has a separate definition that doesn’t necessarily have something to do with the understanding of the term "article".
The teaser should also be an article
– the teaser article
and the fulltext article
are different article
s, although they refer to the same entity.
What should be the proper HTML element for a list item title
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>
Related Topics
Vertically-Aligned Inline-Block Element Not Perfectly Centered Within Container
Image Overlay on Responsive Sized Images Bootstrap
How to Change Font Size in a Textbox in HTML
Why Everything Word-Wrap Inside an Absolute Element Nested Inside a Float or Inline-Block Element
Textarea to Fill a Parent Container Exactly, with Padding
HTML 5 Input Type='Date' Disable Keyboard Input
Is This Empty Space Actually Margin-Right Which Is Not Recognized by Dev Tools
How to Style HTML5 <Meter> Tag
CSS Override Rules and Specificity
How Can One Close HTML Tags in Vim Quickly
Aligning Elements Left, Center and Right in Flexbox
How to Change an HTML Output of Wcf Service with My Own Content
Set Div to Remaining Height Using CSS with Unknown Height Divs Above and Below
CSS-Only Detection of Text Overflows in HTML
With HTML5 Url Input Validation Assume Url Starts with Http://