Semantic content constructs

__constructs.html

<!--
  Clean, efficient, complex content elements.
-->

blockquote.html

<!--
  Quote with source citation.
-->
<blockquote>
    <p>[quote]</p>
    <cite>[source]</cite>
</blockquote>

figure.html

<!--
  Figure element with caption.
  
  `figure`s can also consist of `table`, `object`, `svg`, etc. instead of `img`.
  `small` print is also sometimes used for attribution.
-->
<figure> 
    <img src="[image]"> 
    <figcaption>
        <p><small>[caption]</small></p>
    </figcaption>
</figure>

form.html

<!--
  Functional, accessible form.
  
  Use `data-` attributes in combination with CSS pseudo-classes for extra info.
-->
<form>
    <label data-validation-error="[errormsg]" for="[name]">[label]</label>
    <input data-form-instructions="[instructions]" name="[name]" tabindex="[i]" type="[type]">
</form>

pullquote.html

<!--
  Pull-quote text that isn't repeated within content structure.
  
  Use `content: attr(data-pullquote);` in CSS
  
  @link http://miekd.com/articles/pull-quotes-with-html5-and-css/
-->
<p data-pullquote="[quote]">[content]</p>

table.html

<!--
  Simple, accessible data table.
  
  `scope` can equal `col`, `row`, `colgroup`, or `rowgroup`.
  
  @link http://webaim.org/techniques/tables/data
-->
<table summary="[summary]">
    <caption>[caption]</caption>
    <thead>
        <tr>
            <th scope="col">[header]</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>[cell]</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>[cell]</td>
        </tr>
    </tbody>
</table>

tweet.html

<!--
  Accessible but minimal Tweet object.
  
  @link https://dev.twitter.com/terms/display-requirements
-->
<figure class="tweet  h-entry">

    <div class="tweet-author  h-card  p-author">
        <a class="u-url  profile"
           href="[author url]"
           aria-label="[author name]">
           
            <img class="tweet-author__avatar  u-photo" src="[img]">
            <span class="tweet-author__name  p-name">[author name]</span>
            <span class="tweet-author__nickname  p-nickname" dir="ltr">
                <b>[author nickname]</b>
            </span>
            
        </a>
        <a class="tweet-author__follow-button"></a>
    </div>
    
    <blockquote class="tweet-content  e-entry-content">
        <p class="tweet-text  e-entry-title">[content]</p>
        <div class="tweet-timestamp">
            <a class="u-url" href="[tweet url]">
                <time pubdate class="dt-updated" datetime="[utc]">[timestamp]</time>
            </a>
        </div>
    </blockquote>
    
</figure>