Что такое оптимизация 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 кода, безусловно, важна. И не только для красоты и опрятности кода, но также для других немаловажных моментов. Если у Вас есть чем поделиться, прошу в комментарии 🙂
