Drupal 7: Clean Markup

David G - DrupalRecently 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.

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

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.

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!

Tags: , , , , , | Posted under Drupal | RSS 2.0

Author Spotlight

David Gurba

I am a web programmer currently employed at UCSB. I have been developing web applications professionally for 8+ years now. For the last 5 years I’ve been actively developing websites primarily in PHP using Drupal. I have experience using LAMP and developing data driven websites for clients in aviation, higher education and e-commerce. If you’d like to contact me I can be reached at david.gurba@arvixe.com

Leave a Reply

Your email address will not be published. Required fields are marked *