Что такое HTML импорт и как это работает?
Перевод статьи «What are HTML Imports and How Do They Work?», Paula Borowska.
Вы когда-нибудь замечали, что включение одной HTML страницы в другую, это какая-то инородная концепция? Это то, что должно быть просто, но не это не часто происходит. Это не невозможно, но трудно. К счастью есть HTML импорт, который позволяет запросто помещать HTML страницы, а также CSS и JavaScript файлы, внутрь других HTML страниц.
Введение в HTML импорт
HTML импорт, это простая для понимания вещь; это способ вставки на страницу других HTML страниц. Вы можете сказать, что в этом нет ничего особенного, так вот есть; раньше вы не могли это так просто сделать.
Интересно то, что HTML это самые простые файлы, но иногда с ними труднее всего работать. Даже PHP файлы имеют возможность включения, почему же HTML этого не может? Благодаря веб-компонентам, мы, теперь, можем включать одни HTML документы в другие. Также, при помощи этого же тега, мы можем подключать CSS и JavaScript. (Жить стало намного лучше.)
Обходные пути
Раньше, одним из обходных путей было подключение при помощи iFrame; это тяжелые HTML элементы, загружаемые отдельным окном внутри текущего документа. Это немного не то, что нам нужно и при этом с ними, не очень то легко взаимодействовать. iFram’ы могут быть удивительно разочаровывающими, когда с ними приходится работать. Следующим вариантом был AJAX, это когда вы загружали страницу при помощи JavaScript и включали её контент. Это, на самом деле, довольно неудобный и утомительный способ.
Начнём
Базовый синтаксис
Прежде чем смотреть примеры, давайте глянем на синтаксис подгрузки файла через тег импорта. Импорт, это новый тип link тега, так что должно быть нетрудно понять следующую строчку:
Такие строки помещаются в шапке, как вы уже привыкли поступать с JavaScript или CSS файлами.
Базовый пример
Чтобы импорт сработал, страницы должны находиться на одном и том же сервере. Начнем с файла index.html. Это простая HTML страница с базовым импортом:
Видите, я не врала о том, как все просто; это так же просто, как загрузка таблицы стилей или JavaScript-файла.
Внутри intro.html
Что же внутри импортированной страницы?
Это просто div с текстом внутри. Не нужно body или head или чего-то ещё.
Вставка импортированного HTML
Чтобы отобразить импортированный HTML, нам нужно написать несколько строчек на JavaScript. Этот код должен находиться в главном HTML-файле, в нашем случае, index.html. Данный код должен находиться в том месте, где мы хотим увидеть импортированный html. В нашем примере после ‘Hello from Designmodo.’
В нашем скрипте мы получаем контент и присваиваем его переменной. Потом мы просто добавляем содержимое переменной в HTML.
Переходим на следующий уровень
Вы когда-нибудь слышали о CSS атрибуте scoped? Атрибут scoped позволяет вам ограничивать действие тега 
Если хотите почитать побольше об атрибуте scoped, посмотрите, что говорит W3C.
Быстрый способ подключить CSS к HTML
Основная задача каскадных таблиц стилей (CSS) — добавить документам HTML оформление без программирования или сложной логики. Это цвета, шрифты, расположение отдельных блоков на странице и т.д. Учимся подключать CSS к сайту.
В принципе, внешний вид текста и изображений можно изменить атрибутами HTML (например, выделить заголовок), но это устаревший способ оформления, лучше использовать средства CSS.
В таблице стилей мы прописываем стили (правила) представления элементов. Каждое правило состоит из селектора и блока объявлений. Селектор в левой части правила определяет, на какие части документа распространяется правило. Блок объявлений в правой части помещается в фигурные скобки и состоит из одного или более объявлений, разделенных точкой с запятой. Другими словами, данное правило говорит браузеру, что и как мы хотим изменить в нашем документе. Что — это часть слева (селектор), а как — это часть справа (блок объявлений в фигурных скобках).
Селекторов слева может быть несколько, если мы хотим одинаковым образом изменить несколько элементов. Также и объявлений справа может быть несколько, если мы хотим дать целый ряд указаний для изменений определенного элемента (например, сменить и размер шрифта, и цвет элемента, и его местоположение на странице, а еще добавить рамку).
Способы подключения CSS
Таблицу стилей можно прописать конкретно в коде HTML-страницы, обрамив правила тегами . Все это вставляется в код страницы сразу после заголовка (тег ).
Таким образом, наша страница будет теперь выглядеть следующим образом:
Полный код такой страницы:
Обратите внимание на оформление кода CSS. На самом деле не обязательно начинать каждое объявление с новой строки или оставлять отдельные строки для фигурных скобок. Просто принято оформлять код именно так для лучшей читаемости, при этом перед объявлениями ставится табуляция или несколько пробелов.
Внешние таблицы стилей
Теперь вместо тегов в HTML-файлы нужно вставить код, который указывает на местонахождение внешней таблицы стилей. Он вставляется в то же самое место после заголовка ( ), где мы раньше размещали встроенные стили:
Он будет выглядеть так:
В данном примере не указан путь до файла styles.css, потому что он лежит в той же папке, что и документ HTML. Если же файл находится в другой папке или вообще на другом сервере, то следует указать полный абсолютный или относительный путь к нему. В случае нашего сервера достаточно относительного пути с указанием только папки, где лежит файл. В случае другого сервера потребуется полный абсолютный путь с указанием доменного имени.
Импорт чужого CSS
Из предыдущего раздела понятно, как использовать чужой стиль в своем документе: просто укажите URL соответствующего файла в своих HTML-документах.
Как подключить CSS — это лишь начало большой и интересной дороги по изучению веб-программирования. Курс «Профессия — веб-разработчик» познакомит вас с основными инструментами веб-разработчика: HTML, CSS, JavaScript и PHP. Годовая программа обучения идеально подходит людям, которые хотят с чистого листа освоить навыки профессионального веб-разработчика, а также начинающим программистам.
В итоге вы научитесь создавать свои собственные веб-проекты и сможете претендовать на позицию джуниор-разработчика.
Пишет про разработку в Skillbox. Работал главным редактором сайта «Хабрахабр», ведет корпоративные блоги.
Как подключить html к css и сделать асинхронную загрузку
В этом уроке вы узнаете, как подключить css к html. Рассмотрим несколько вариантов с примерами. Также поговорим про асинхронную загрузку стилей и хаки под разные браузеры.
Как подключить css к html отдельным файлом
Сейчас покажу, как подключить css к html отдельным файлом стилей. Создается отдельный файл css. Далее при помощи специальных команд он подключается к необходимым документам. Такой вид называется внешней таблицей стилей.
Для простой структуры html документа это выглядит так:
Также заметьте, что имя файла может быть любое на латинице. Главное, чтобы у него было расширение css. Для основного файла стилей всего сайта я рекомендую указывать имя style.
В общем, этот способ наиболее распространен при создании сайта. Во-первых, так удобно. Если много стилей, то лучше их вынести в отдельный файл, а не пихать все в html.
Во-вторых, вы можете сразу подключать несколько файлов. Один основной со своего сайта. А второй с другого проекта или сервиса.
Например, вставка кнопок социальных сетей с сервиса. Вы прописываете путь к файлу стилей кнопок именно с того сервиса, который эти кнопки вам предоставил.
Итак, теперь вы знаете, как подключить внешний css. Используйте его, как основной способ. Ниже идут еще несколько вариантов подключения. Они тоже пригодятся, но как дополнительные варианты решения.
Подключение CSS внутренними стилями
На странице выглядит это так:
Данный способ подключения css не очень удобен. Как правило, он используется в основном для асинхронной загрузки стилей. О ней мы еще ниже поговорим.
Подключение CSS к html через import
Можно указывать как абсолютный, так и относительный путь к файлу. Вот как выглядит на странице:
Комбинация импорта и внутренних стилей
На странице это выглядит так:
Подключение CSS в CSS
Вот пример подключения нескольких файлов стилей в одном css:
Inline CSS
В примере видно, что с помощью атрибута style мы задали жирное начертание и красный цвет текста в абзаце (теге p).
Такой вариант будет полезен, когда нужно задать разные стили для одного элемента (тега). Например, стилизация разных абзацев. Еще часто используют для стилизации разных ячеек таблиц. Так информация воспринимается намного лучше.
Данный метод используется не так часто. Ведь он указывает стилизацию только для одного конкретного тега. Поэтому все элементы страницы таким способом стилизовать не очень удобно.
Но как я говорил выше, в некоторых ситуациях такой способ может пригодиться.
Скажу, что если инлайн стили вы будете использовать как в качестве дополнительной стилизации, то ничего плохого не будет.
Загрузка CSS для определенного браузера
Обязательно хочу упомянуть про загрузку css для определенного браузера. Ведь каждый из них может отображать сайт по-разному. На одном проект может хорошо отображаться, а на другом криво.
Например, мы вставили какую-то рамку. В одном браузере, она может отображаться хорошо. Однако в другом, она может быть кривой, слишком большой или вовсе, отсутствовать.
Поэтому важно чтобы во всех программах просмотр ресурса был максимально одинаков и удобен. Но к сожалению, не все браузеры одинаково отображают элементы и стили сайта.
Чтобы решить этот вопрос с разным отображением стилей, были созданы специальные CSS хаки. Это особые селекторы, которые воспринимаются определенным браузером и игнорируются другими.
Ниже я дам вам несколько примеров. Однако самым наилучшим вариантом будет отказ от подключения разных css стилей для различных браузеров. Старайтесь делать единые стили для всех браузеров.
Это сложно, но возможно!
Но если все получится, то это будет большим плюсом. Ваш проект будет хорошо отображаться во всех браузерах. Даже в тех, о которых вы могли и не знать.
Чтобы этого добиться, рекомендую не усложнять проекты. Добавляйте только то, что действительно, необходимо. Еще обращайте внимание на валидацию кода. Ведь правильный тип документа имеет большое значение в согласованной работе браузеров.
CSS хаки
Вот несколько примеров css хаков для Internet Explorer.
Браузер IE может воспринимать код, который находится в комментариях. Поэтому если у вас не получился вариант выше, то можно использовать такое решение:
Вместо 7 указываем предпочтительную версию IE.
Также в теге head можно дополнительно отдельным файлом подключить css к html. Тут тоже вставляем код между комментариями.
Хак для Mozila Firefox:
Асинхронная загрузка CSS
При асинхронной загрузки CSS браузер не приостанавливает рендер всего, что расположено под строкой подключения файла до того, как сам файл не будет распарсен.
Это может существенно ускорить загрузку сайта. Особенно на мобильных устройствах.
В общем, при обычной загрузке, браузер не отобразит страницу, пока не обработает информацию о макете и стиле. Из-за чего сама страница будет загружаться дольше обычного. Ниже я покажу, как это можно исправить.
Используем внутренние стили
Можно вставить внутренние стили для первого экрана на сайте. А уже ниже подключать отельный файл css.
Таким образом, при первом заходе пока страница подгружается пользователь не увидит один ее скелет. Ну а дальше при обработке страницы, браузер с тега body полностью загрузит все стили и скрипты.
Еще такой метод можно использовать если нужно загружать лишь небольшой кусок стилей. Во-первых, будет меньше вероятности ошибиться. Во-вторых, сам html файл не будет слишком большим. Если же нужно будет вставить большой кусок стилей, то это может сильно увеличить вес страницы.
Объединение файлов
Еще один способ ускорить загрузку страницы, это объединение файлов стилей в один общий. Так браузер тоже сможет быстрее обработать страницу.
Самое простое, это перенести все необходимые стили с других файлов в один. Или же можно через @import попробовать в самом файле css подключать другие стили.
Но на это может уйти немного больше времени. Поэтому лучше, когда все стили прописаны в одном общем файле.
Заключение
Теперь вы знаете, как подключить html к css. Для этой задачи есть несколько вариантов решения. Подключение отельным файлом css будет вашим основным вариантом. Ведь как правило файл стилей тоже не маленький. Поэтому будет не разумно писать все прямо в html.
Есть еще и другие способы подключения. Используйте их только как дополнительный вариант.
В общем, как дополнительный вариант, вам может пригодится использование встроенных или внутренних стилей. Это очень полезно если нужно стилизовать какой-то элемент на определенной странице и при этом не затрагивать основной файл css.
Нестандартные шрифты: как подключить и оптимизировать
Текст — основная часть контента на большинстве сайтов, и важно грамотно подходить к его отрисовке. В этой статье мы разберём базовые моменты, касающиеся подключения и оптимизации шрифтов.
Сразу стоит отметить, что самый простой вариант — вообще не подключать сторонние шрифты и пользоваться стандартными, которые предустановлены в большинстве операционных систем. Это хорошо знакомые Arial, Times New Roman и так далее — эти шрифты называются веб-безопасными, достаточно просто указать название одного из таких шрифтов в коде, и всё будет работать.
Но чаще всего дизайн макета не позволяет обойтись веб-безопасным шрифтом, а требует использовать какой-то нестандартный. В этом случае при загрузке страницы файл со шрифтом нужно подгружать с сервера по той же схеме, что и остальные ресурсы — CSS-файлы, изображения и так далее. Он может весить довольно много, именно поэтому для быстрой загрузки страницы выгоднее сначала рассмотреть возможность использования стандартных шрифтов. Но даже с нестандартными шрифтами можно избежать большинства проблем, если уделить внимание оптимизации.
Выбираем формат шрифта
Все слышали про TTF и OTF. Но это форматы, которые предоставляются с минимальным сжатием или совсем без него. Их стоит использовать только в том случае, если нужна поддержка очень старых браузеров.
Подключение шрифтов с помощью Google Fonts
Есть простой и удобный способ подключить нестандартный шрифт — использовать Google Fonts. Это бесплатный сервис, с помощью которого можно подключать шрифты, но не хранить их на своём сервере. Чтобы им воспользоваться, необходимо выбрать шрифт и добавить одно или несколько нужных начертаний, а затем вставить в ссылку, которую сгенерирует Google Fonts во вкладке Embed.
Этого достаточно, чтобы шрифт подключился. Теперь его можно использовать в свойстве font-family без каких-либо дополнительных действий.
Стоит отметить, что после основного шрифта важно указать веб-безопасный. В случае, если нестандартный шрифт не загрузится, браузер воспользуется альтернативным. Его нужно подобрать максимально похожим на основной шрифт.
Плюсы этого способа — простота использования и всегда актуальные версии шрифтов, Google Fonts их часто обновляет. Но у него есть и минус — запросы к сторонним серверам могут негативно повлиять на скорость загрузки страницы. Если выбираете этот способ, стоит обратить внимание на оптимизацию.
Подключение шрифтов с помощью правила @font-face
Название шрифта, которое затем нужно использовать, чтобы задать элементам подключённый шрифт.
Адрес файла со шрифтом, который нужно подключить, и его формат. Если адресов несколько, их можно указать через запятую. В этом случае важен порядок — браузер будет последовательно пытаться подключить файлы. Первым должен быть самый подходящий формат, а далее — запасные варианты. Также с помощью функции local можно добавить возможность перед загрузкой шрифта с сервера проверить, установлен ли он на компьютере пользователя. Если да, запроса к серверу за шрифтом не будет — при рендеринге используется локальная версия. Но у этого способа есть минус — шрифт на компьютере пользователя может быть устаревшим, и тогда страница отобразится не совсем так, как было задумано.
Базовый вариант правила:
Для улучшения производительности правило @font-face лучше всего прописывать в самом начале CSS-файла. Так браузер сможет раньше начать обработку шрифта.
Оптимизация
Выбор современного формата шрифта, который обладает хорошей степенью сжатия — это только первый шаг к оптимизации. Можно сделать гораздо больше, чтобы увеличить скорость загрузки страницы и сделать пользовательский опыт при взаимодействии с интерфейсом приятнее.
FOIT, FOUT и FOFT
Пока шрифт загружается, при рендеринге можно наблюдать разное поведение текста.
FOIT (Flash of Invisible Text) — с англ. «мелькание невидимого текста». При таком поведении, пока шрифт не загрузится, текст не отображается и появляется только после загрузки шрифта. Значительная проблема — во время загрузки нет доступа к текстовому контенту.
FOUT (Flash of Unstyled Text) — с англ. «мелькание неоформленного текста». Во время загрузки используется шрифт, заданный по умолчанию (системный, например), а после загрузки страница перерисовывается с использованием загрузившегося шрифта. Эта перерисовка довольно заметна и может быть нежелательна.
FOFT (Flash of Faux Text) — с англ. «мелькание синтезированного текста». Это поведение можно наблюдать в промежутке, когда основное начертание уже загрузилось, а дополнительные (жирное, курсивное и так далее) — нет. Браузер имитирует нужное начертание до загрузки настоящей версии. В этом случае страница может перерисовываться несколько раз по мере загрузки начертаний.
Свойство font-display
У свойства есть несколько значений, которые определяют поведение текста во время загрузки шрифта:
auto — поведение по умолчанию, зависит от браузера.
block — текст не отображается в течение короткого периода (3 секунды), затем отрисовывается запасной шрифт, если основной ещё не загрузился. Как только загрузка завершается, текст перерисовывается снова.
swap — сразу же отрисовывается запасной шрифт, после загрузки шрифта — повторный рендеринг.
fallback — в течение очень короткого периода (100 миллисекунд) не отображается ничего, затем браузер использует запасной шрифт и ждёт 3 секунды — если шрифт всё ещё не загрузился, остаётся запасной шрифт. Далее не важно, загрузился шрифт или нет, замена не произойдёт. Если шрифт загрузится, то он применится только при обновлении страницы.
optional — текст не отображается в течение 100 миллисекунд, а затем отрисовывается запасным шрифтом. Даже если шрифт загрузится после этого, замена произойдёт только при обновлении страницы.
Предзагрузка шрифтов
Ещё один способ оптимизации — предварительная загрузка шрифтов. С её помощью можно изменить обычную приоритизацию загрузки ресурсов, тем самым сказав браузеру, что важно загрузить шрифт в первую очередь.
Стоит учесть, что браузер загрузит шрифт в любом случае — даже если он не используется на странице. И, обладая высоким приоритетом, эта загрузка может блокировать загрузку других ресурсов, поэтому нужно грамотно выбирать, что именно предзагружать. Например, если на странице используются три разных шрифта, стоит предзагрузить только основной шрифт без дополнительных начертаний.
Для того, чтобы предзагрузка сработала, нужно поместить в ссылку на шрифт и задать атрибуту rel значение preload :
Уменьшение количества глифов шрифта
По умолчанию шрифт может содержать глифы (буквы, символы) разных языков и просто редко используемые. С помощью свойства unicode-range можно установить диапазон нужных символов в системе Unicode, тогда браузер будет подгружать сабсет (подмножество) шрифта только в тот момент, когда на странице появится символ из этого диапазона. Предварительно нужно подготовить файлы шрифтов, разбив их на группы.
Например, можно отдельно подключить латиницу и кириллицу, если на сайте представлены версии на двух языках. И с помощью unicode-range браузер поймёт, какой сабсет нужен для конкретной страницы, и загрузит только его. Такой файл будет иметь меньший вес и ускорит загрузку страницы.
Также можно проанализировать, какие конкретно глифы используются на сайте и создать кастомный сабсет исключительно с ними. Для этого есть специальные инструменты.
Google Fonts по умолчанию использует сабсеты. Это можно увидеть, открыв CSS-файл, который подключается в при использовании сервиса. Для каждого языка есть отдельный сабсет. Пример для латиницы и кириллицы:
В статье разобраны только базовые способы оптимизации шрифтов. Но даже их достаточно, чтобы улучшить пользовательский опыт и значительно уменьшить вес файлов шрифтов, ускорив тем самым загрузку страницы.
Полезности
HTML шорты: посторонние шрифты. Про подключение шрифтов и методы оптимизации.
Статья о font-display. В ней кроме прочего приведена наглядная схема того, как работают все значения свойства.
Исчерпывающее руководство по стратегиям загрузки веб-шрифтов. Подробный разбор плюсов и минусов методов подключения и оптимизации шрифтов.
Оптимизация шрифтов. В статье разобраны разные методы: использование сабсетов шрифтов в зависимости от языка, HTTP-кеширование, Font Loading API и так далее.
Subsetting Fonts with Glyphhanger. Статья о том, как использовать инструмент для создания сабсетов.
Самые простые способы обработки включений HTML в HTML
Дата публикации: 2019-05-22
От автора: для меня крайне удивительно, что никогда не было возможности включения HTML в другие HTML-файлы. Похоже, на горизонте нет ничего, что могло бы решить эту проблему. Я говорю о прямом включении, взять кусок HTML и вставить его прямо в другой.
Например, сценарий использования для большей части всего Интернета, включение заголовка и футера для всех страниц:
Это не реально, кстати. Я просто хотел бы, чтобы вы поняли, о чем речь.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Люди искали другие языки, чтобы решить эту проблему. В некотором смысле, это предварительная обработка HTML. Задолго до того, как мы обрабатывали CSS, мы использовали инструменты для манипулирования HTML. И мы до сих пор делаем это, потому что идея включений полезна практически для любого веб-сайта в мире.
Использовать PHP
Можете ли вы использовать вместо этого PHP?
Это выполнит включение на уровне сервера, и запрос будет выполнен на уровне файловой системы на сервере, поэтому это должно быть намного быстрее, чем решение на стороне клиента.
Использовать Gulp
Что может быть еще быстрее, чем на стороне сервера? Если включение предварительно обрабатывается еще до того, как оно будет на сервере. У Gulp есть множество процессоров, которые могут это делать. Одним из них является gulp-file-include. Это будет выглядеть так:
И вы бы обработали это так:
Похоже, что этот конкретный плагин имеет необычные функции, в которых вы можете передавать переменные во включения, что позволяет создавать небольшие компоненты, управляемые данными.
Использовать Grunt
Это то, что делает плагин grunt-bake. Вы настраиваете Grunt для обработки HTML:
Тогда HTML может использовать этот специальный синтаксис для включений:
Использовать Handlebars
У Handlebars есть партиалы. Вы регистрируете их:
И после этого используете:
Есть также причудливые функции, которые позволяют оценивать и передавать данные. Вам все еще понадобится процессор, чтобы запустить их, вероятно, что-то вроде gulp-handlebars. Говоря о языках шаблонов, которые используют фигурные скобки … Mustache тоже имеет их.
Использовать Pug
Pug — это препроцессор HTML с совершенно новым синтаксисом для HTML, который немного более лаконичен. Хотя он поддерживает включения.
Затем вы запускаете это с чем-то вроде gulp-pug.
Использовать Nunjucks
Я люблю Nunjucks! Nunjucks имеет включения. Мы бы сделали это так:
Если вы поместите это в файл с именем index.njk, то можете обработать его с помощью простого скрипта Node в index.html следующим образом:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Или обработайте это чем-то вроде gulp-nunjucks. 11ty имеет встроенный Nunjucks, как и большинство других, упомянутых до сих пор. Это может подойти вам, если вы на самом деле создаете маленький сайт.
Использовать Ajax
Предположим, у вас есть …
Вы можете получить содержимое для заголовка и футера из соответствующих файлов и вывести содержимое.
Говоря о JavaScript … Если вы создаете сайт с использованием практически любого JavaScript-фреймворка, построение с помощью компонентов является одной из основных идей, и разбивка на части, которые вы хотите включить в другие файлы, не должна стать проблемой. Что-то вроде import Header from «./header.js»; и является территорией React.
Использовать фреймы
Вы могли бы сделать это:
Но содержимое в этих iframe не использует тот же DOM, поэтому это немного странно, не говоря уже о том, что этот стиль медленный и неудобный (поскольку iframes не знает высоты содержимого).
Скотт Джел задокументировал классную идею: вы можете заставить iframe внедрить свое содержимое на родительскую страницу, а затем удалить самого себя.
Использовать Jekyll
Jekyll — это генератор статических сайтов на основе Ruby с включениями. Вы сохраняете включения в папке /_includes/, а затем:
Jekyll — это отличный инструмент, так что я привожу здесь именно его, но есть еще куча генераторов статических сайтов, и, готов поспорить, что любой из них может сделать и это в том числе.
Использовать Sergey
Хорошо, я назову еще один SSG, потому что он довольно новый и очень компактный. В Sergey есть формат стиля веб-компонентов:
Вы задаете имена файлам header.html и footer.html, вставляете их в папку /includes/, а затем будет выполнена сборка с обработкой включений, когда вы запустите скрипт npm.
Использовать Apache SSI
Apache, супер-пупер общий веб-сервер, он может выполнять включения. Вы можете сделать это так:
Я уверен, что есть какой-то способ заставить это работать, и если вы это сделаете, то это здорово, что ему не нужно других зависимостей.
Использовать CodeKit
Это только для Mac, но в CodeKit есть специальный язык, называемый Kit, суть 90% того, что он обрабатывает, это включения HTML. Он использует специальные комментарии HTML:
Использовать Dreamweaver
Lol, шутка. Но это действительно работает.
Черт побери. Это довольно много способов, не так ли?
Автор: Chris Coyier
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Верстка. Быстрый старт
Практический курс по верстке адаптивного сайта с нуля!