Домой / Html учебник / 13 Урок. Оптимизация html кода

13 Урок. Оптимизация html кода

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

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *