Андрей Ежгуров

А Mongo ли виновата? Ключевая фраза в вопросе: "вывожу их в html". А по умолчанию при показе html любые последовательности пробельных символов (табуляции, пробелы, переводы строк и т.д.) отображаются как один пробел.

Чтобы текст выводился как есть - со всеми пробельными символами - надо использовать либо https://webref.ru/html/pre, либо https://webref.ru/css/white-space.

IMG можно было вкладывать в A еще на заре Web. В современном HTML в A можно вкладывать блочные теги, если сам этот A находится в блочном теге. Так что DIV внутри A возможен.

Безусловно запрещено вкладывать в тег A теги: INPUT, TEXTAREA, BUTTON, SELECT.

СЕО-"якорь" имел смысл лет 15-20 назад, когда алгоритмы поисковых систем были примитивными. В современном мире его значимость сильно преувеличена. Впрочем, ни один сеошник не знает и не может знать, какие факторы какую роль играют: поисковые системы не публикуют алгоритмы ранжирования, а без них любые рекомендации - это шаманские пляски с бубном.

В обработчике$tabMenu.on("click", function() {слишком высоко поднимаемся по DOM, захватывая все табы всех меню. А надо подниматься до подменю - чтобы изменять состояние табов только этого меню. Просто заменить в этом обработчикеgetWrapper = $(this).closest($wrapper);наgetWrapper = $(this).closest('section');.

Например, саму очистку от тегов можно сделать так:

function strip_tags(text, tags = []) {
  return text.replace(/(<\/?)([a-z]+|h[1-6])\b[^<>]*>/gi,
    (match, p1, p2) => tags.includes(p2.toLowerCase()) ? p1 + p2 + '>' : '');
}

Вызов strip_tags(data, ['span', 'a']) вернёт текст data, из которого удалены все теги, кроме <span> и <a>, а у оставшихся тегов удалены все атрибуты.

Например, вот так: https://jsfiddle.net/46v0h12e/
Просто наложил поверх общей тени сдвинутую вниз белую непрозрачную тень.

Использовать один из плагинов https://masonry.desandro.com, https://packery.metafizzy.co/ или https://isotope.metafizzy.co

font-family: Helvetica, Arial, sans-serif;

Перечисляем шрифты через запятую. Браузер проверяет наличие шрифтов слева направо и использует первый найденный. Последним в списке стоит sans-serif - шрифт без засечек по умолчанию.

Размещать <input> внутри <a> запрещено стандартом html. Внутри ссылки не должно быть "интерактивных" тегов.

$(function() {
  $('.module').click(function() {
    if (!$(this).toggleClass('selected').hasClass('selected')) {
      $(this).removeClass('hovered');
    }
  }).mouseout(function() {
    if ($(this).hasClass('selected')) { $(this).addClass('hovered'); }
  });
});

Это делается не библиотеками, а конструкциями @media в CSS, которые автоматически меняют стили в зависимости от ширины экрана.

Нормальная адаптивная вёрстка - это когда от ширины экрана зависят только стили при неизменном HTML. Уже давно используемые флексбоксы (flex) и набирающие популярность сетки (гриды, grid) позволяют легко это реализовать.

Например, вот так: https://jsfiddle.net/3hfwrwmq/390/8/

Просто наложил сверху по краям 2 блока с непрозрачным фоном, совпадающим с основным фоном страницы.