Хочешь сайт? Легко!

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

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

Сколько бы вы не поставили пробелов между словами, это никак не повлияет на конечный вид текста. То же правило относится к символам табуляции и переносу текста. Приведённые ниже строки будут отображаться на веб-странице одинаково, несмотря на их разное написание.

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

Исключением из этого правила является элемент <pre>, содержимое которого отображается именно так, как оно указано в коде, с учётом всех пробелов. По этой причине <pre> часто применяется для фрагментов программ, где важны пробелы (пример 1).

Пример 1. Использование <pre>

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>pre</title>
 </head>
 <body>
  <pre>public boolean shouldOverrideUrlLoading(WebView view, String url) {
  if (url.startsWith("http://") || url.startsWith("https://")) {
    view.getContext().startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse(url)));
    return true;
  } else {
    return false;
  }
}</pre>
 </body>
</html>

Результат данного примера показан на рис. 1.

Текст внутри <pre>

Рис. 1. Текст внутри <pre>

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

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

Переносы в тексте

Браузер самостоятельно переносит текст на новую строку в тех местах, где встречается пробел или дефис. Но по правилам русского языка в некоторых случаях переносы запрещены. Так, нельзя разрывать переносом сокращения, вроде «т. д.», отрывать инициалы от фамилии, от значения единицы измерения (5 км) и обозначение года (1917 г.) и др. Чтобы запретить перенос в определённых местах, вместо пробела применяется неразрывный пробел &nbsp;, как показано в примере 2.

Пример 2. Неразрывный пробел

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Пробел</title>
 </head>
 <body> 
  <p>Возврат к стереотипам аннигилирует глубокий 
  полифонический роман, именно об этом говорил 
  Б.&nbsp;В.&nbsp;Томашевский в своей работе 
  1925&nbsp;года.</p>
 </body>
 </html>

И, наоборот, там, где в длинных словах желательно поставить перенос строки, вы можете использовать элемент <wbr> или спецсимвол &shy;. И тот и другой вариант работает одинаково — слово отображается целиком, когда оно помещается в строке, а если не помещается, то в указанных местах делается перенос (пример 3). Есть только небольшая разница в отображении — &shy; добавляет при переносе дефис, а <wbr> нет.

Пример 3. Переносы в тексте

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Переносы</title>
 </head>
 <body> 
  <p>Название орудия — сорока&shy;пяти&shy;миллиметровая 
  противотанковая пушка образца 1942&nbsp;года (М-42).</p>
 </body>
</html>

Специальные символы

Преимуществом кодировки UTF-8 является то, что она позволяет напрямую вставлять символы, которых на клавиатуре нет, к примеру знаки зодиака. На сайте utf8icons.com вы можете найти множество различных символов, скопировать их и вставить в свой код HTML. Главное, чтобы текстовый редактор поддерживал кодировку UTF-8.

При этом некоторые символы нельзя вставлять в код напрямую. К примеру, если в тексте понадобились символы < и >, а вы вставите их в код, то HTML воспримет их как теги, что может привести к ошибке отображения. В подобных случаях используется специальная форма написания, показанная в табл. 1.

Табл. 1. Спецсимволы
&lt; Знак «меньше»
&gt; Знак «больше»
&quot; Двойная кавычка
&amp; Амперсанд
&nbsp; Неразрывный пробел
&shy; Мягкий перенос

Спецсимвол начинается с амперсанда (символ &), затем идёт текстовое обозначение символа и заканчивается всё точкой с запятой. Любое отклонение от такой формы записи приведёт к тому, что символ отображаться не будет.

Таким образом, чтобы вывести код HTML, в тексте мы используем следующую запись (пример 4).

Пример 4. Использование спецсимволов

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Угловые скобки</title>
 </head>
 <body>
  <p>&lt;meta charset=&quot;utf-8&quot;&gt;</p>
 </body>
</html>