Как создать сайт

Шаг 3. Особенности HTML

Прежде чем редактировать код веб-страницы, следует принять во внимание некоторые особенности, которые присущи HTML при работе с текстом.

Любое количество пробелов идущих подряд, на веб-странице отображается как один

Сколько бы вы не поставили пробелов между словами, это никак не повлияет на конечный вид текста. Это же правило относится к символам табуляции и переносу текста. Поэтому не ставьте лишних пробелов, поскольку это лишь увеличит общий объем файла, но никак не изменит вид документа в браузере. В качестве образца возьмем один текст и напишем его в коде HTML по-разному (пример 3.1).

Пример 3.1. Способы написания текста в коде HTML

<p>Измеряй микрометром. Отмечай мелом. Отрубай топором. </p>
<p>Измеряй микрометром.   Отмечай мелом.   Отрубай топором.</p>
<p>Измеряй микрометром. 
Отмечай мелом. 
Отрубай топором. </p>

Несмотря на разное написание, отображаться эти строки будут одинаково.

Замечание 1

Исключением из этого правила является тег PRE, внутри которого любое число пробелов отображается именно так, как оно указано в коде.

Замечание 2

Обычно символы табуляции в коде HTML применяются для того, чтобы установить отступ слева, таким образом выровнять теги «лесенкой» и создать «красивый» удобочитаемый код. Помните при этом, что пользователи редко заглядывают в исходный код документа, им это просто не надо, зато каждый символ табуляции или пробела увеличивает ненужный объем файла. А это в итоге влияет на скорость загрузки и отображения документа.

Нет расстановки переносов в тексте

HTML не поддерживает расстановку переносов в словах, как это делают текстовые редакторы. Это условие несущественно, пока не используется выравнивание текста по ширине. В этом случае, блок текста выравнивается по левому и правому краю. Короткие строки при этом растягиваются за счет автоматического добавления пробелов между словами. Иногда пустые блоки между словами настолько велики, что портят внешний вид страницы и ухудшают читабельность текста.

Представьте, что у вас в середине предложения есть какое-нибудь длинное слово, вот например «Дегидроэпиандростерон». В текстовом редакторе это слово будет перенесено по слогам так, чтобы текст занял указанную ширину, а на веб-странице подобное слово будет отображаться целиком, без переносов.

Текст занимает ширину окна браузера

Если вы просто напишите одну длинную строку в коде HTML, то в браузере она будет отформатирована, чтобы текст поместился по ширине в окно. Переносы текста будут добавлены автоматически в местах пробела или дефиса. Что произойдет, если в тексте нет ни того, ни другого символа? Браузер не сможет создать переносы и отобразит текст одной строкой. Если она шире окна браузера, то неминуемо появится горизонтальная полоса прокрутки.