<data>

Элемент <data> позволяет хранить в своём содержимом данные в формате, понятном человеку, а в атрибуте value — в формате, понятном машинам.

Так можно передать числовое значение для текста:

        
          
          Жили у бабуси <data value="2">два</data> весёлых гуся.
          Жили у бабуси <data value="2">два</data> весёлых гуся.

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

А можно указать другие полезные данные:

        
          
          Один <data value="grey">серый</data>,другой <data value="white">белый</data>.
          Один <data value="grey">серый</data>,
другой <data value="white">белый</data>.

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Ещё один пример: вы разрабатываете интернет-магазин, который занимается продажей компьютеров. У вас есть множество типов, моделей и конфигураций — и у каждого есть свой ID, который используется в базе данных. Эти ID мало что скажут пользователям, поэтому лучше выводить названия компьютеров в формате, который они могут понять. Но тут же в атрибуте value тега <data> можно хранить ID, который используется для удобного доступа к нужной модели:

        
          
          <ul>  <li>    <data value="2020138256">      MacBook Pro 13 M1 8 Gb 256 Gb mid. 2020    </data>  </li>  <li>    <data value="2020138512">      MacBook Pro 13 M1 8 Gb 512 Gb mid. 2020    </data>  </li>  <li>    <data value="20201316256">      MacBook Pro 13 M1 16 Gb 256 Gb mid. 2020    </data>  </li></ul>
          <ul>
  <li>
    <data value="2020138256">
      MacBook Pro 13 M1 8 Gb 256 Gb mid. 2020
    </data>
  </li>
  <li>
    <data value="2020138512">
      MacBook Pro 13 M1 8 Gb 512 Gb mid. 2020
    </data>
  </li>
  <li>
    <data value="20201316256">
      MacBook Pro 13 M1 16 Gb 256 Gb mid. 2020
    </data>
  </li>
</ul>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Элемент <data> стоит использовать, когда вы не хотите выделять элементы на вёрстке, например, при помощи <div> или <span>, но вам нужно связать текст с внутренним ID или значением, который вы будете использовать при обработке запросов пользователя.

Похожим образом работают дата-атрибуты, можно использовать их, если уже есть какой-то элемент, который потом нужно обработать.

Элемент <data> поддерживает глобальные атрибуты и корректно работает во всех современных браузерах.