3
\$\begingroup\$

I'm trying to develop some templates for common HTML + CSS tasks I've been dealing with. One of which is a general search results list either from client- or server-side.

So far I'm using the following reusable code which seems to be working fine without any noticeable bug:

<ul class="query-list">
    <li>
        <a href="dummy_page1.html">
            <div class="image-container">
                <img class="icon-img" src="img_100x100.png" >
            </div>

            <div class="text-container">
                <div class="title-container">
                    <h3 title="dummy title">[Dummy Title] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis accumsan felis. Maecenas vel libero mi. Suspendisse potenti. Sed tempus ex eu diam imperdiet mattis ac ut orci. Sed non lectus libero. Suspendisse vitae nunc a quam mattis congue id eget tortor. Vivamus id arcu eros. Duis eu risus semper, dapibus quam in, tristique magna. Duis semper tempus dolor eget elementum. Duis arcu ipsum, suscipit a egestas quis, lobortis sit amet purus.</h3>
                </div>

                <div class="notes-container">
                    <p>
                        <span>dummy notes 1</span>
                        <span>&bull; dummy notes 2</span>
                        <span>&bull; dummy notes 3</span>
                    </p>
                </div>

                <div class="notes-container">
                    <p>
                        <span>dummy notes 4</span>
                        <span>&bull; dummy notes 5</span>
                        <span>&bull; dummy notes 6</span>
                    </p>
                </div>
            </div>
        </a>
    </li>
</ul>

<style>
    /* Query List */
    ul.query-list {list-style-type: none; min-width: 340px;}
    ul.query-list li {height: 5.7em; margin: 10px 0; font-size: 12px;}
    ul.query-list li a {text-decoration: none; display: flex; height: 100%;}
    ul.query-list li a:hover {background-color: #fafafa; opacity: 0.7;}
    ul.query-list li a:hover .title-container {text-decoration: underline;}

    ul.query-list .image-container {flex-shrink: 0; height: 100%; width: 5.7em; margin-right: 5px;}
    ul.query-list .text-container {display: flex; flex-direction: column; height: 100%;}
    ul.query-list .title-container {overflow: hidden; margin-bottom: 0.2em;}
    ul.query-list .title-container .no-title {color: darkgray; font-weight: bold;}
    ul.query-list .notes-container {flex-shrink: 0; flex-grow: 0; height: 1.1em; overflow: hidden;}
    ul.query-list .notes-container p {color: darkgray; text-align: left;}

    .query-list p, h3 {margin: 0; line-height: 1.1em; font-size: 12px; text-align: left; font-family: arial;}
    .query-list span {white-space: nowrap}


    /* General Definitions */
    .icon-img   {max-width: 100%; max-height: 100%; display: block;}    
    h3  {color: darkblue;}
</style>

Some main characteristics of this code are:

  • the text content has a maximum of 5 lines (title + notes) independently of the amount of text content
  • independently of the number of title lines, the notes are always immediately bellow (no variable gap)
  • the maximum number of title lines automatically adjust according to the number of notes lines included or removed

Interested in:

  • Is it possible to simplified it? There is a nest of <div>, <a> and flexbox that seems to me overly complicated for such a simple task ...
  • Any standard nomenclature or other best practices?
  • Any ideas to improve its design and appearance (without JS)?
\$\endgroup\$
  • \$\begingroup\$ What is a query list? A list of search results? \$\endgroup\$ – unor Jul 4 '18 at 21:55
  • \$\begingroup\$ @unor Correct, is a generic list of search results either from client-side (ex: full-text search) or server-side (ex: user own activities in his StackExchange profile page). I've just couldn't find the standard name for this ... \$\endgroup\$ – Mark Messa Jul 4 '18 at 22:27
1
\$\begingroup\$

If the results are ranked (typically by relevance), you should use an ol instead of a ul.

It’s best practice to use sectioning content elements (article, aside, nav, section) if you use heading elements (h1-h6). In the generel case, go with section. If the results are articles (e.g., blog posts) or pages, go with article.

It’s a usability question, but typically only the title is linked, not everything. This could make it easier for your users to mark the text in the description, and to scroll on touch devices without accidentally opening the links.

The img must have an alt attribute. The value depends on what kind of images you display here. If it’s just an icon representing that it’s a search result, the value should be empty.

<ol>

  <li id="result-1">
    <article>
      <header>
        <a href="">
          <img src="" alt="" />
          <h2>Title</h2>
        </a>
      </header>
      <p>notes 1</p>
      <p>notes 2</p>
    </article>
  </li>

</ol>

Related: my answer about HTML for search engine result lists

\$\endgroup\$
  • \$\begingroup\$ 2) "[...] typically only the title is linked [...]" Agree \$\endgroup\$ – Mark Messa Jul 5 '18 at 0:43
  • \$\begingroup\$ 3) 'Add rel="external" to the link'. I guess this doesn't change any functionality, only improve the readability. \$\endgroup\$ – Mark Messa Jul 5 '18 at 0:49
  • \$\begingroup\$ 1) Nomenclature: Definitely the standard name for this type of code is 'search results list'. There are several references for this keywords (ex: How do I customize the appearance of my search page with CSS?). \$\endgroup\$ – Mark Messa Jul 5 '18 at 0:51
  • \$\begingroup\$ @MarkMessa: The external link type is of course only relevant if the search results aren’t for internal links (which is why I didn’t include it in this answer, because your question seens to be for all cases). It doesn’t change any functionality, but a clever user agent could make some use of it (I’m not aware of any, though), and you could use it to style external links differently, for example. \$\endgroup\$ – unor Jul 5 '18 at 0:55
  • \$\begingroup\$ What do you think about substituting all those nested <div>, <a> and flexbox with grid ? \$\endgroup\$ – Mark Messa Jul 5 '18 at 1:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.