#markup

Sometimes, registering a theme hook and a template for outputting some data can be overkill. Imagine that all you have is a string you need to wrap in a <span> tag or something. In this case, you can use the #markup property, which specifies that the array directly provides the HTML string that needs to be output. Note, however, that the provided HTML string is run through \Drupal\Component\Utility\Xss::filterAdmin for sanitization (mostly, XSS protection). This is perfectly fine because if the HTML you are trying to include here is stripped out, it's a good indication that you are overusing the #markup property and should instead be registering a theme hook.

Going a bit further than just simple markup is the #plain_text property via which you can specify that the text provided by this render array needs to be escaped completely. So basically if you need to output some simple text, you have the choice between these two for very fast output.

Now, if you remember in Chapter 2, Creating Your First Module, at some point our controller returned this array:

return [
 '#markup' => $this->t('Hello World')
];

This is the simplest render array you'll ever see. It has only one element, a tiny string output using the #markup property. Later in this chapter we will adjust this and use a render array provided by our HelloWorldSalutation service in order to make things a bit more themeable. That will be the section where we put into practice many of the things we learn here.

However, as small as you see this array here, it is only part of a larger hierarchical render array that builds up the entire Drupal page and that contains all sorts of blocks and other components. Also, responsible for building this entire big thing is the Drupal render pipeline.