XML — язык для структурирования, хранения и обмена данными. XSLT — язык трансформаций, который преобразует XML в другие форматы, например в HTML. В двух строках:

• XML: структура данных в тегах.
• XSLT: правила, как из этой структуры получить HTML.

Важно: XSLT не изменяет исходный XML — оно генерирует представление (render) для отображения или дальнейшей обработки.

Когда это полезно

• Нужно отделить структуру данных от представления.
• Данные приходят в XML (например, от API или старой системы).
• Нужно быстро генерировать простое HTML без JS и серверной логики.

Примечание: современные SPA и JSON-ориентированные API чаще используют другие подходы. Ниже есть раздел «Альтернативные подходы».

Как добавить пример данных в XML-файл

Чтобы показать XML на веб‑странице, сначала создайте XML-файл и добавьте в него данные.

1. Создайте файл data.xml.
2. В начале укажите версию и кодировку:

3. Свяжите XML с XSL-стилем (файл xmlstylesheet.xsl):

4. Добавьте структурированные данные. В примере корневой тег называется games, а каждая игра — в теге game. Для каждой игры используйте вложенные теги для полей, например name и developer:

   
      The Last of Us Part II
      Naughty Dog
   
   
      Ghost of Tsushima
      Sucker Punch Productions
   
   
      Death Stranding
      Kojima Productions
   

Как использовать XSLT для чтения данных из XML

Создайте XSL-файл, который пройдётся по элементам XML и сгенерирует HTML.

1. В той же папке создайте файл xmlstylesheet.xsl.
2. Укажите версию XSL и базовую оболочку:

3. Внутри добавьте шаблон, который совпадает с корнем и выдаёт HTML:

4. Используйте xsl:for-each, чтобы пройти по каждому элементу game:

5. Внутри цикла применяйте xsl:value-of, чтобы вывести значения тегов name и developer:

Разработчик: 

Полный минимальный пример xmlstylesheet.xsl ниже в разделе «Полные примеры файлов».

Как отобразить данные в HTML

Некоторые браузеры не обрабатывают XSLT напрямую из локальных файлов, а некоторые (например Firefox) поддерживают. Надёжный способ — открыть страницу через локальный сервер или встраивать результат на сервере.

1. Создайте index.html в той же папке.
2. Добавьте базовую структуру HTML:

    
       
       
       
    
    
        
XML и XSLT — пример
        
Следующий контент сгенерирован из XML-файла:
        
    

3. Создайте styles.css и добавьте простое оформление:

html,
body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

p {
  margin-bottom: 24px;
}

Важно: атрибут xslt в iframe не стандартизирован во всех браузерах. Если iframe не работает, используйте серверную трансформацию или XMLHttpRequest/Fetch + XSLTProcessor в JS.

Полные примеры файлов

Ниже — рабочие примеры, которые можно поместить в одну папку и открыть через локальный сервер.

data.xml

   
      The Last of Us Part II
      Naughty Dog
   
   
      Ghost of Tsushima
      Sucker Punch Productions
   
   
      Death Stranding
      Kojima Productions
   

xmlstylesheet.xsl

  

  
    
      
        
        
      
      
        
Список игр (генерируется из XML)
        
          

            

            
Разработчик: 
          
        
      
    
  

index.html и styles.css — показаны выше.

Советы по отладке

• Откройте консоль браузера на предмет ошибок XSLT или CORS.
• Если iframe не загружает XML, запустите простой HTTP-сервер (например, python -m http.server) и откройте http://localhost:8000.
• В Firefox XSLT обычно работает из локальных файлов; в Chrome — чаще блокируется по безопасности.

Когда это не подходит

• Когда требуется богатая интерактивность — используйте JavaScript (Fetch/AJAX) и рендеринг на клиенте.
• Когда у вас JSON-API — проще работать с JSON, чем конвертировать в XML.
• При большом объёме данных XSLT может быть медленнее серверной генерации или виртуизированного рендера на клиенте.

Альтернативные подходы

• Серверная трансформация: трансформируйте XML в HTML на сервере (например, XSLT на Java/.NET/PHP).
• Клиентский JS: загрузите XML через Fetch и преобразуйте через DOM или XSLTProcessor.
• Конвертация в JSON: преобразуйте XML -> JSON, потом рендерьте привычными инструментами.

Быстрый чеклист ролей

Developer:

• Проверить ссылку .
• Открыть через HTTP-сервер и проверить ошибки консоли.

Designer:

• Добавить классы в XSLT для стилизации.
• Подготовить стили в styles.css.

DevOps:

• Настроить MIME-типы для .xml и .xsl на сервере.
• Проверить заголовки CORS для API.

Критерии приёмки

• HTML-страница отображает список игр с именем и разработчиком.
• Файл index.html корректно подключает styles.css.
• При открытии через локальный сервер контент виден в браузере без ошибок XSLT.

Быстрые шаблоны и сниппеты

• Вывести атрибут внутри XSLT: .
• Условие: ….
• Выбор: …….

Краткая терминология

• XML: расширяемый язык разметки для структурированных данных.
• XSLT: язык шаблонов для преобразования XML.
• xsl:for-each: итератор по узлам XML.
• xsl:value-of: вывод значения узла.

Риски и рекомендации

• Риск: несовместимость браузеров. Рекомендация: тестировать в целевых браузерах и использовать серверную трансформацию при необходимости.
• Риск: CORS/заголовки. Рекомендация: отдавать файлы с корректными заголовками через сервер.

Итог

XSLT остаётся простым и надёжным инструментом для генерации HTML из XML. Он полезен, когда данные уже в XML и нужно быстро получить читаемое представление без сложной клиентской логики.

Важно: если требуется интерактивность или современная архитектура, рассмотрите серверную трансформацию или JS‑рендеринг.