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

А 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. Внутри ссылки не должно быть "интерактивных" тегов.

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

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

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

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

Разумеется, у тебя будет единица. Ты в переменную name записываешь значение поля до того, как оно изменилось. Надо получать значение поля в момент клика по кнопке.

Можно так:

<input type="text" class="form-control" name="name" id="name" value="1" placeholder="Имя">
<button class="btn btn-default" onclick="TFunction(document.getElementById('name').value)">Отправить</button>

Но куда лучше:

<input type="text" class="form-control" name="name" id="name" value="1" placeholder="Имя">
<button class="btn btn-default" onclick="TFun()">Отправить</button>
<script>
  function TFun(){
    alert(document.getElementById('name').value);
  }
</script>