Recently I’ve been work with designers on a new project. This is a breathe of fresh air as most of my projects are typically solo projects, or don’t involve interacting with other designers or developers. On this project the designer cares alot about the semantics and markup used within the project. Most people aren’t a huge fan of Drupal’s default markup provided by Core for blocks, regions, fields, etc. In the past I’ve mentioned the Fences module. On this project the designer introduced me to the Clean Markup module. For all it’s simiplicity it’s a really great module!

As an example here is a block found on a project homepage in the typical Drupal configuration using the Bootstrap theme:

Typical block configuration page for current project.

This outputs the following HTML for our block when a logged in user sees the block on a webpage:

<section id="block-block-4" class="block block-block attribution contextual-links-region clearfix">

      <div class="contextual-links-wrapper contextual-links-processed"><a class="contextual-links-trigger contextual-links-trigger-active" href="#">Configure</a><ul class="contextual-links"><li class="block-configure first last"><a href="/admin/structure/block/manage/block/4/configure?destination=node">Configure block</a></li>
</ul></div>
  <p><span>The American Presidency Project</span><br>
John Doe and Jane Doe<br>
Contact</p>

</section>

After installing the clean markup module and enabling the clean_markup and clean_markup_blocks modules we have the following options in the block configuration pages:

Additional options from Clean Markup module

Further the title and content regions of a block may be given alternate wrapper elements from the defaults provided by Drupal, the options are plentiful:

Clean Markup supports a wealth of additional wrappers for both titles and content fields.

I basically left the default settings for this example block and saved the configuration. The resulting output of the block now looks like:

<section id="block-block-4" class="block block-block attribution  block-block-4 contextual-links-region clearfix">

      <div class="contextual-links-wrapper contextual-links-processed"><a class="contextual-links-trigger" href="#">Configure</a><ul class="contextual-links"><li class="block-configure first last"><a href="/admin/structure/block/manage/block/4/configure?destination=node">Configure block</a></li>
</ul></div>
  <p><span>The American Presidency Project</span><br>John Doe and Jane Doe<br>Contact</p>

</section>

The above HTML now includes the block-block-4 css id value additionally as a css class.

So while this is a relatively trivial example. It’s basically up to you to decide how to use clean markup. But, you could for example do the following:

• Have the block content wrapped in an HTML5 figure element.
• Change the block title to an H3, H4 or H5.
• Visually hide the block title but keep it on the page for screen readers.
• … and many other options!

I hope you see how powerful and useful this module can be to help better format the output supplied by Drupal. Ideally this module is paired with other similar modules (such as Fences).

Looking for quality web hosting? Look no further than Arvixe Web Hosting!