HTML+CSS Template: Search Results List 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:  

&lt;ul class="query-list"&gt;
    &lt;li&gt;
        &lt;a href="dummy_page1.html"&gt;
            &lt;div class="image-container"&gt;
                &lt;img class="icon-img" src="img_100x100.png" &gt;
            &lt;/div&gt;

            &lt;div class="text-container"&gt;
                &lt;div class="title-container"&gt;
                    &lt;h3 title="dummy title"&gt;[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.&lt;/h3&gt;
                &lt;/div&gt;

                &lt;div class="notes-container"&gt;
                    &lt;p&gt;
                        &lt;span&gt;dummy notes 1&lt;/span&gt;
                        &lt;span&gt;&amp;bull; dummy notes 2&lt;/span&gt;
                        &lt;span&gt;&amp;bull; dummy notes 3&lt;/span&gt;
                    &lt;/p&gt;
                &lt;/div&gt;

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

&lt;style&gt;
    /* 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;}
&lt;/style&gt;


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 &lt;div&gt;, &lt;a&gt; 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)?
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.

&lt;ol&gt;

  &lt;li id="result-1"&gt;
    &lt;article&gt;
      &lt;header&gt;
        &lt;a href=""&gt;
          &lt;img src="" alt="" /&gt;
          &lt;h2&gt;Title&lt;/h2&gt;
        &lt;/a&gt;
      &lt;/header&gt;
      &lt;p&gt;notes 1&lt;/p&gt;
      &lt;p&gt;notes 2&lt;/p&gt;
    &lt;/article&gt;
  &lt;/li&gt;

&lt;/ol&gt;




Related: my answer about HTML for search engine result lists