What's difference between "attributes", "title_attributes", and "content_attributes"?

Question

Is there any difference between writing CSS classes directly to Html tags and using the Attribute class?

Is there any difference between attributes, title_attributes, and content_attributes? What is the usage of each of them?

I read Using attributes in templates, but it doesn't explain that clearly.

Answer 1

This depends on the template you use. If you use for example the node template

node.html.twig

<article{{ attributes }}>

  {{ title_prefix }}
  {% if not page %}
    <h2{{ title_attributes }}>
      <a href="{{ url }}" rel="bookmark">{{ label }}</a>
    </h2>
  {% endif %}
  {{ title_suffix }}

  {% if display_submitted %}
    <footer>
      {{ author_picture }}
      <div{{ author_attributes }}>
        {% trans %}Submitted by {{ author_name }} on {{ date }}{% endtrans %}
        {{ metadata }}
      </div>
    </footer>
  {% endif %}

  <div{{ content_attributes }}>
    {{ content }}
  </div>

</article>

You have four attributes variables

1. attributes
2. title_attributes
3. author_attributes
4. content_attributes

The difference between them is that they have different targets in the html markup of the template. The main attributes variable in a node is for the <article> tag, in a form for the <form> tag or in other templates often a simple wrapper <div>. If a template defines additional attributes variables they are for that specific part of the template, in a node for the title, author and content.

Always add attributes to the existing variable like explained in the linked documentation. Never replace it with your own attributes, because a lot of code depends on that the template is actually using the attributes variables.