Marking Up a Search Result List with HTML5 Semantics

Marking up a search result list with HTML5 semantics

1) I think you should stick with the article element, as

[t]he article element represents a
self-contained composition in a
document, page, application, or site
and that is intended to be
independently distributable or
reusable [source]

You merely have a list of separate documents, so I think this is fully appropriate. The same is true for the front page of a blog, containing several posts with titles and outlines, each in a separate article element. Besides, if you intend to quote a few sentences of the articles (instead of providing summaries), you could even use blockquote elements, like in the example of a forum post showing the original posts a user is replying to.

2) If you're wondering if it's allowed to include article elements inside a li element, just feed it to the validator. As you can see, it is permitted to do so. Moreover, as the Working Draft says:

Contexts in which this element may be
used:

Where flow content is expected.

3) I wouldn't use nav elements for those categories, as those links are not part of the main navigation of the page:

only sections that consist of major navigation blocks are appropriate for the nav element. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases, without a nav element. [source]

4) Do not use the details and/or summary elements, as those are used as part of interactive elements and are not intended for plain documents.

UPDATE: Regarding if it's a good idea to use an (un)ordered list to present search results:

The ul element represents a list of
items, where the order of the items is
not important — that is, where
changing the order would not
materially change the meaning of the
document. [source]

As a list of search results actually is a list, I think this is the appropriate element to use; however, as it seems to me that the order is important (I expect the best matching result to be on top of the list), I think that you should use an ordered list (ol) instead:

The ol element represents a list of
items, where the items have been
intentionally ordered, such that
changing the order would change the
meaning of the document. [source]

Using CSS you can simply hide the numbers.

EDIT: Whoops, I just realized you already use an ol (due to my fatique, I thought you used an ul). I'll leave my ‘update’ as is; after all, it might be useful to someone.

What's the best semantic way to wrap a search area?

I am aware this question already has a chosen answer, but it ranked so high in my Google search for "semantic search form" that I feel the need to contribute what I believe to be a slightly better answer, semantically and from a standards standpoint.

<section role="search">    <form action="#" method="get">        <fieldset>            <legend>Search this website:</legend>            <label for="s">                <input type="search" name="s" id="s" placeholder="Search..." maxlength="200" />            </label>            <button type="submit" title="Search this website now">Submit</button>        </fieldset>    </form></section>

Semantic markup of navigation and search area

My first problem is whether I should wrap the whole thing inside nav
tags or just the browse part...

Looking at the definition of the nav element in the HTML5 spec

The nav element represents a section of a page that links to other
pages or to parts within the page: a section with navigation links.

...tells us that it should be used for the id="browse" element.
I think it should also wrap the form because it contains controls to filter these navigation items.

The id="search" element should, according to the aria role search

A landmark region that contains a collection of items and objects
that, as a whole, combine to create a search facility.

Get a role="search".

The tab list on the top should get the proper aria treatment for tabs with role="tablist" and role="tab". As shown in this snippet:

<div id="tabs" role="tablist">
    <div class="tab" role="tab" aria-controls="browse">Browse</div>
    <div class="tab" role="tab" aria-controls="search">Search</div>
</div>

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 articles, although they refer to the same entity.

Marking up product boxes in HTML5

This is pretty much up for debate and depends on the general semantics of your website, but I think you could change the surrounding div with article in your example.

As the spec states:

article

Represents a section of a page that consists of a composition that
forms an independent part of a document, page, or site.

I'd argue a "product box" (a.k.a. teaser as far as I understand) is a "composition that forms an independent part"...

Some further reading about the article-tag and HTML5 semantics in general:

html5doctor: Let's talk about semantics

adactio.com: Pursuing semantic value

HTML: semantically mark up an address?

Well, if it's a list of businesses and their addresses, perhaps you should use a list. There isn't a semantic element for every possible thing you could do in HTML, you just have to use the one that is most relevant. Depending on how you're going to be formatting this information, you should use either a table if the data is in a tabular format, or a list for pretty much any other format.

You can style the list to remove the bullets at the side, but the bottom line is you're still providing a list of data, and that's the most semantic thing you could use.

How to semanticly markup up category headings

(Assuming HTML5.)

The whole article should be placed in an article element.

This article "longs" for a heading. Of course it should be the actual title ("Even Gaza […]"). You could either use a h1 or the appropriate rank depending on the nesting level of the article element (e.g., h2 if it’s a child of body); the latter is encouraged.

So now we have:

<article>
  <h2>Even Gaza Truce Is Hard to Win, Kerry is Finding</h2>
</article>

What to do about "Middle East"?

Currently, the document outline is:

1. untitled (→ should be the page/site title)
  1.1 "Even Gaza Truce Is Hard to Win, Kerry is Finding"

Makes sense.

If you would use a heading for "Middle East", and place it before the article heading, the outline would become:

1. untitled (→ should be the page/site title)
  1.1 "Middle East"
    1.1.1 "Even Gaza Truce Is Hard to Win, Kerry is Finding"

Can make sense, but I’d only use it for a page listing several articles categorized under "Middle East" (in which case the "Middle East" should be the heading of a section with article children).

If you would use a heading placed after, it would become:

1. untitled (→ should be the page/site title)
  1.1 "Even Gaza Truce Is Hard to Win, Kerry is Finding"
    1.1.1 "Middle East"

Doesn’t make sense.

So I’d not use a heading for "Middle East" if this is a page containing only this article. Instead, you might want to use markup described in Subheadings, subtitles, alternative titles and taglines:

Use a header element for the category and the article title; that way the category will not change the document outline and it’s clear that its part of the introductory.

<article>
  <header>
    <div>Middle East</div>
    <h2>Even Gaza Truce Is Hard to Win, Kerry is Finding</h2>
  </header>
</article>

The author (as well as the share links) could be placed in a footer element:

<article>
  <header>
    <div>Middle East</div>
    <h2>Even Gaza Truce Is Hard to Win, Kerry is Finding</h2>
  </header>
  <footer>
    <div>By Michael R. Gordon</div>
    <div>Share: …</div>
  </footer>
</article>

So everything else (i.e., not in header/footer) in this article is considered to be the main content.

Is semantic markup too open-ended?

Why are tags for article, time, navigation bars, footer useful?

Because they facilitate parsing for text processing tools like Google.

It's nothing about semantics (at least in 'broad' meaning). Instead they just say: here is the body of page (most important text part) and there is the navigation bar full of links. With such an approach you can easily extract just what you need.

---

Related Topics