Containers
In Drupal 7, we have many different templates, theme functions and render properties that are solely used to wrap content in one or more HTML elements. Instead of creating a template for each different instance, we can use one "container" template and create common variations of that style to make taming and grouping types of output easier.
Examples
Default container
A simple example that would work for most entities and blocks.
container
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a dolor sed dolor vehicula fermentum. Nulla ac est a purus consequat luctus vitae vel erat.
Praesent nec urna tellus. In quis nisl id sem laoreet dignissim. Etiam ac tellus neque, nec sodales nisi. Sed erat metus, ultricies quis convallis sit amet, mollis sit amet risus.
HTML Source
<div class="container entity" id="unique-id">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a dolor sed dolor vehicula fermentum. Nulla ac est a purus consequat luctus vitae vel erat.</p>
<p>Praesent nec urna tellus. In quis nisl id sem laoreet dignissim. Etiam ac tellus neque, nec sodales nisi. Sed erat metus, ultricies quis convallis sit amet, mollis sit amet risus.</p>
</div>
PHP source
<div<?php print $attributes; ?>>
<?php print render($prepend); ?>
<?php print render($content['title']); ?>
<?php print render($content); ?>
<?php print render($append); ?>
</div>
Default container for an "article"
Where different wrapper elements are needed, theme hook suggestions can be used, e.g. theme_container__article():
container__article
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a dolor sed dolor vehicula fermentum. Nulla ac est a purus consequat luctus vitae vel erat. Praesent dictum, nisi sit amet dignissim dictum, lorem tellus dictum libero, eu adipiscing orci nunc in eros. Aliquam pellentesque tincidunt purus in tincidunt. Maecenas quis sapien nibh, in euismod purus. Aliquam in quam augue, id vehicula enim. Phasellus vel neque eget orci fermentum scelerisque. Aliquam fringilla lobortis est sit amet molestie. Praesent placerat faucibus consequat. Quisque fringilla ante lacus, sit amet congue risus.
Praesent nec urna tellus. In quis nisl id sem laoreet dignissim. Etiam ac tellus neque, nec sodales nisi. Sed erat metus, ultricies quis convallis sit amet, mollis sit amet risus. Ut massa quam, consequat vitae tincidunt varius, sagittis sed erat. In eget dolor nulla. Morbi sit amet orci sem. Quisque at purus tellus. Donec bibendum pretium eros a hendrerit. Aliquam convallis lectus ut risus tempor ut feugiat velit luctus. Donec mattis, nisl vel venenatis interdum, velit nulla mollis erat, nec condimentum orci nunc non lacus.
HTML source
<article class="node article contextual-region">
[contextual]
<h1>Title</h1>
<footer>
<img class="user-photo" src="/drupal/img/user.png" alt="User photo">
<p class="submitted">Posted by <a href="#">username</a> on <time datetime="2012-03-15">3/15/2012</time>.</p>
</footer>
<figure class="image">
<img src="/drupal/img/whale-tail.jpg" alt="A whale with its tail in the air after jumping and diving back into the ocean.">
<figcaption>Whale watching off shore in Cape Cod, MA in 2008.</figcaption>
</figure>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a dolor sed dolor vehicula fermentum. Nulla ac est a purus consequat luctus vitae vel erat. Praesent dictum, nisi sit amet dignissim dictum, lorem tellus dictum libero, eu adipiscing orci nunc in eros. Aliquam pellentesque tincidunt purus in tincidunt. Maecenas quis sapien nibh, in euismod purus. Aliquam in quam augue, id vehicula enim. Phasellus vel neque eget orci fermentum scelerisque. Aliquam fringilla lobortis est sit amet molestie. Praesent placerat faucibus consequat. Quisque fringilla ante lacus, sit amet congue risus.</p>
<p>Praesent nec urna tellus. In quis nisl id sem laoreet dignissim. Etiam ac tellus neque, nec sodales nisi. Sed erat metus, ultricies quis convallis sit amet, mollis sit amet risus. Ut massa quam, consequat vitae tincidunt varius, sagittis sed erat. In eget dolor nulla. Morbi sit amet orci sem. Quisque at purus tellus. Donec bibendum pretium eros a hendrerit. Aliquam convallis lectus ut risus tempor ut feugiat velit luctus. Donec mattis, nisl vel venenatis interdum, velit nulla mollis erat, nec condimentum orci nunc non lacus.</p>
</article>
PHP source
<article<?php print $attributes; ?>>
<?php print render($prepend); ?>
<?php print render($content['title']); ?>
<footer>
<?php print render($content['user_picture']); ?>
<?php print render($content['submitted']); ?>
</footer>
<?php print render($content['image']); ?>
<?php print render($content); ?>
<?php print render($content['links']); ?>
<?php print render($append); ?>
</article>