Что такое оптимизация html кода? Это его красивое и структурированное написание. Но всегда ли нужно оптимизировать html код? Давайте разберемся.
Естественно, можно подумать, что наш html код никто не видит, поэтому не обязательно делать его красивым и структурированным. Но оптимизация кода ведь производится не только для красоты, но также и для скорости загрузки страницы, для удобства сканирования страницы поисковыми роботами и т. д.

В конце концов, Вам часто нужно будет менять свой html код, дописывая новые данные или изменяя старые. В четком структурированном коде будет легче разобраться.
Структурирование элементов
Первая мера по оптимизации кода - это сделать код четким и структурированным. Лучше смотрится код, где каждый элемент находится на своем месте. То есть должна соблюдаться иерархия. Посмотрим пример.
Не структурированный код html:
<HTML> <head> <title>Моя страница</title> </head> <body> Тут текст тут текст тут текст </body> </HTML>
Структурированный html код:
<HTML> <head> <title>Моя страница</title> </head> <body> Тут текст тут текст тут текст </body> </HTML>
Согласитесь, выглядит красивее и более разборчиво. То есть каждый вложенный элемент отбиваем двойным табом (4 пробела). Очень удобно это делать в программе Web Development Studio (клик - скачать). Либо в других подобных редакторах.
Html комментарии в коде
Еще одной интересной мерой по оптимизации html кода являются комментарии в коде. Они уже нужны лично для Вас, чтобы Вы не заблудились в своём большом коде.
Вот так выглядят html комментарии:
<!-- -->
Внутри пишется комментарий.
Как работают такие комментарии? Они не видны при просмотре страницы в браузере, а служат только в качестве подсказки разработчику html кода.
Пример html комментария в коде:
<HTML> <head> <title>Моя страница</title> </head> <body> <p class="center">Тут текст тут текст тут текст</p> <!--Этот параграф будет по центру--> <p>Тут текст тут текст тут текст</p> </body> <!--Это счетчик посетителей--> <script type="text/javascript"> document.write("<a href='//www.liveinternet.ru/click' <img src='//counter.yadro.ru/h.6;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+ ";"+Math.random()+ </script> <!--Конец счетчика посетителей--> </HTML>
Заключение
Оптимизация html кода, безусловно, важна. И не только для красоты и опрятности кода, но также для других немаловажных моментов. Если у Вас есть чем поделиться, прошу в комментарии 🙂