Атрибут translate тега <header>

Описание

Атрибут translate указывает, следует ли переводить содержимое тега <header> при автоматическом переводе страницы (например, в Google Translate). Принимает значения "yes" (по умолчанию) или "no".

Пример использования:
<header translate="no"> <h1>NASA</h1> <p>National Aeronautics and Space Administration</p> </header> <header translate="yes"> <h1>Welcome message</h1> <p>This content can be translated</p> </header>

Особенности значений:

Значение Описание Когда использовать
yes Разрешает перевод содержимого Для обычного переводимого текста
no Запрещает автоматический перевод Для имен собственных, брендов, терминов

Рекомендации по использованию:

  • Используйте translate="no" для:
    • Названий компаний (Google, Apple)
    • Торговых марок и брендов
    • Технических терминов
    • Кодовых обозначений
  • Сочетайте с атрибутом lang для лучшего результата
  • Не заменяет полноценную локализацию сайта
  • Для важного контента используйте ручной перевод

Пример с CSS:

<style> [translate="no"] { border-left: 3px solid #e74c3c; padding-left: 10px; } [translate="no"]::after { content: " (do not translate)"; font-size: 0.8em; color: #7f8c8d; } </style> <header translate="no"> <h1>COVID-19 Research Initiative</h1> </header>

Ограничения и совместимость:

  • Поддерживается большинством современных браузеров
  • Не все сервисы перевода учитывают этот атрибут
  • Не влияет на ручной перевод контента
  • Не заменяет полноценную многоязычную версию сайта
  • Для важного контента лучше использовать явную локализацию

Примечание: Атрибут translate особенно полезен для многоязычных сайтов, но не гарантирует, что переводчики обязательно учтут эту подсказку. Для полного контроля над переводом используйте профессиональные решения локализации.