Last updated April 12, 2013. Created on February 12, 2013.
Edited by LeeHunter, pc-wurm, MiSc. Log in to edit this page.

Semantic Fields (formerly Semantic CCK in Drupal 6) provides the ability to customize and enhance the HTML output of a field. With Semantic Fields enabled, users can specify the HTML wrapper element and classes for:

  • The entire field
  • The labels -- above and inline
  • All field items
  • Each individual field item

This allows users to quickly create semantically rich and meaningful HTML markup for fields, such as:

  • Definition lists
  • Ordered lists
  • Unordered lists

The user can also choose to remove all (or some) markup for any field.

By facilitating rich markup, Semantic Fields makes it easy for themers and developers to increase usability, accessibility and SEO performance of Drupal sites without resorting to field tpl overrides.

This module is not currently recommended on production websites. A stable version will be released soon, and we would appreciate bug reports, suggestions and feedback in the issue queue.

How To Use

To use Semantic Fields you will first need to define some field formats. To do so, go to the Configuration page and select Field Formats from the Content Authoring section. This will take you to an administrative page where you can create, update and delete field formats.

Once you have created one or more field formats, edit any fieldable entity (eg. content type, taxonomy term) and go to the Manage Display tab. In the Field Format column, select one of the field formats you have created, or select Default to use the standard field output format.

Different field formats can be selected independently for each field in each display mode (eg. full content, teaser, etc.).


Perhaps the easiest way to demonstrate the usefulness of Semantic Fields is by showing a few examples. For instance, you could change the output of a simple image field from this:

<div class="field field-type-filefield field-field-recipe-photo">
    <div class="field-items">
            <div class="field-item odd">
                 <img width="200" height="200" title="" alt="" src="my-image.jpg" />

to this:

<img width="200" height="200" title="" alt="" src="my-image.jpg" />

Or you could convert a simple list from this:

<div class="field field-type-text field-field-recipe-ingredients">
    <div class="field-label">Ingredients:&nbsp;</div>
    <div class="field-items">
            <div class="field-item odd">2 (9 inch) unbaked pie shells</div>
              <div class="field-item even">1 (10.75 ounce) can condensed golden mushroom soup</div>

              <div class="field-item odd">1 cup cooked, chopped turkey meat</div>
              <div class="field-item even">1 (10 ounce) can mixed vegetables, drained</div>
              <div class="field-item odd">1/3 cup milk</div>

to this:

<div class="field field-type-text field-field-recipe-ingredients recipe-ingredients">

    <h3 class="field-label">Ingredients</h3>
    <ul class="field-items ingredients">
      <li class="field-item odd ingredient">2 (9 inch) unbaked pie shells</li>
      <li class="field-item even ingredient">1 (10.75 ounce) can condensed golden mushroom soup</li>
      <li class="field-item odd ingredient">1 cup cooked, chopped turkey meat</li>
      <li class="field-item even ingredient">1 (10 ounce) can mixed vegetables, drained</li>

      <li class="field-item odd ingredient">1/3 cup milk</li>

Looking for support? Visit the forums, or join #drupal-support in IRC.