5

What is the difference between render elements of #type html_tag (set to div) and container in Drupal 8?

Is the container render element, a simpler version of html_tag? Easier for processing to preprocess container elements?

I note that:

Perhaps my theories are correct (easier to leave be for historical reason / form element reasons)?

PHP:

  use Drupal\Core\StringTranslation\TranslatableMarkup;

  $variables['myhtml_tag'] = [
    '#type' => 'html_tag',
    '#tag' => 'div',
    '#attributes' => [
      'class' => 'my-container-class1',
    ],
    'child' => [
      '#markup' => new TranslatableMarkup('Some Container text1.'),
    ],
  ];

  $variables['mycontainer'] = [
    '#type' => 'container',
    '#attributes' => [
      'class' => 'my-container-class2',
    ],
    'child' => [
      '#markup' => new TranslatableMarkup('Some Container text2.'),
    ],
  ];

HTML:

<div class="my-container-class1">Some Container text1.</div>

<div class="my-container-class2">Some Container text2.</div>
Improve this question
3
  • 1
    Is the container render element, a simpler version of html_tag? Iooks like it, also to save having to type the '#tag' => 'div', part. A dedicated container #type was probably created since it's something used often and makes it easier to use and identify.
    – No Sssweat
    Commented Sep 28, 2020 at 2:07
  • Likely yeah, was there a Change Record for the container element ?
    – Joshua Graham
    Commented Sep 28, 2020 at 5:33
  • 1
    I started with D7, but reading this kiamlaluno's comment, and the fact that he asked when they should be used sounds like they didn't exist in D6 and were introduced in D7 and there were no change record/docs about it.
    – No Sssweat
    Commented Sep 28, 2020 at 5:45

3 Answers 3

Reset to default
4

I did "Blame" on the 7.x system.module after I didn't found a clue of 'container' in the 6.x branch. In the "Blame" you can see that Dries himself committed the patch that introduced $types['container'] in 2010 and that it leads back to the following issue on drupal.org:

The issue which introduced #states to the Form API! Now let's scan the page for "container". Okay, comment #36 explains quite a bit of the reason why it was introduced:

As discussed with kkaefer and tha_sun, we switched the "wrapper" Form API element type to "container" to not get too confused with other "wrapper" stuff, like "wrapper_callback", "theme_wrappers", etc. The "container" type still uses the CSS class of "*-wrapper" though, to match with the rest of the Drupal coding standards.

And in the commit itself you then can see how container elements already replace some markup elements (markup being the default if #type omitted) which had '#prefix' => '<div>', '#suffix' => '</div> with hardcoded HTML.

To make it short: Container is a classical wrapper. And more of a form element. Whereas html_tag is more of a render element, traditionally used for void elements, often in the HTML <head>. Like placing meta tags or placing JavaScript and CSS libraries in script tags.

Improve this answer
4

Good question. The way I see it, the container is a simple way to wrap things in a <div>. This is useful to add structure to forms, but also very useful for other situations where you need to build larger render arrays. I often use it like this (simplified example) because it makes your code clearer:

$build['wrapper'] = [
  '#type' => 'container',
  '#attributes' => ['class' => ['select-wrapper']],
];

$build['wrapper']['select'] = [
  '#type' => 'select',
  '#title' => $this->t('Select'),
  '#options' => $options,
  '#empty_option' => $this->t('- Select an option -'),
];

Also, the fact that a container doesn't require additional settings makes it suitable for and often used in the #theme_wrappers property like this:

$form['description'] = [
  '#markup' => $description,
  '#theme_wrappers' => ['container'],
];

Personally, I only use the html_tag type for simple elements other than a div, for instance:

$build['heading'] = [
  '#type' => 'html_tag',
  '#tag' => 'h2',
  '#value' => 'My Title',
];

Hope that helps!

Improve this answer
2

The container element makes most sense in a form. It can be arranged in groups, it can be made optional and the ID, if missing, is auto-generated.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.