Некоторые умолчания, сущности и оформление кода

О некоторых мелочах многие книги по HTML забывают рассказать, по той причине, что для гуру они являются чем-то само собой разумеющимся. Например пробелы и табуляции в HTML-коде и вне его.

Дело в том, внутри HTML-тегов любое количество пробелов, табуляций и переносов строк выводится как один пробел. Вот такой код:

<p>Пример           html-кода			 с разными


 переносами, 
 табуляциями и     случайным		 количеством 
 пробелов между 
 словами.</p>

На практике этот код будет отображён так:

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

А вот количество невидимых символов между тегами вообще не имеет никакого значения. Они все «проглатываются» при интерпретации HTML-кода.

Как оформлять HTML-код и CSS-код, это вопрос привычки. Все стандарты здесь на уровне рекомендаций. Я предпочитаю вложенные теги отбивать на табуляцию вперёд. Вот так:

<div>
	<p>Параграф с каким-то текстом.</p>
	<ul>
		<li>Первый элемент списка.</li>
		<li>Второй элемент списка.</li>
		<li>Третий элемент списка.</li>
	</ul>
</div>

Тогда возникает вопрос, как я делаю листинги, если пробелы и табуляции сглатываются? Существует тег <pre>, его назначение — выводить текст таким, каким он набран внутри данного тега. Кроме как для оформления листингов его почти не используют. А чтобы теги внутри моего кода не сглатывались браузером, я заменяю символы < и > на &lt; и &gt; соответственно. Код, выводящий листинг выше, на самом деле выглядит так:

<pre><code class="html">&lt;div&gt;
	&lt;p&gt;Параграф с каким-то текстом.&lt;/p&gt;
	&lt;ul&gt;
		&lt;li&gt;Первый элемент списка.&lt;/li&gt;
		&lt;li&gt;Второй элемент списка.&lt;/li&gt;
		&lt;li&gt;Третий элемент списка.&lt;/li&gt;
	&lt;/ul&gt;
&lt;/div&gt;</code></pre>

Ещё существует один способ выводить много пробелов подряд внутри HTML. Это поочерёдное использование обычных пробелов и сущностей неразрывного пробела.

<p>Текст, разделённый &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; пробелами.</p>

А вот он работает внутри этого документа:

Текст, разделённый           пробелами.

Что такое неразрывный пробел? Это сущность, которая не даёт HTML-парсеру разделить два слова и перенести последнее из них на следующую строку, в случае если они должны быть перенесены. Если вы заметили, HTML-парсер не знает, как правильно переносить слова, если они не умещаются в строчку, поэтому браузер переносит сразу по словам.

С точки зрения типографики, предлоги и союзы должны переноситься вместе со следующим после них словом на другую строку. Если вы хотите оттипографировать свой текст и сделать так, чтобы это правило выполнялось, вы должны использовать сущность неразрывный пробел — &nbsp; (Non-Breaking SPace). Вот так будет выглядеть оттипографированное предложение:

<p>С&nbsp;точки зрения типографики, предлоги и&nbsp;союзы должны переноситься вместе со&nbsp;следующим после них словом на&nbsp;другую строку. Если вы хотите оттипографировать свой текст и&nbsp;сделать так, чтобы это правило выполнялось, вы&nbsp;должны использовать сущность неразрывный пробел&nbsp;&mdash; &amp;nbsp; (Non-Breaking SPace). Вот так будет выглядеть оттипографированное предложение:</p>

Комментарии

Кусок текста, который не нужно отображать HTML или CSS интерпретатору, называется комментариями. Комментарии оставляют программисты себе на будущее, иногда для того, чтобы их увидел программист, который будет работать с сайтом или для того, чтобы скрыть часть кода, который, возможно, позднее надо будет опубликовать. Делаются они так:

<!-- Я комментарий в HTML-коде -->

Комментарии нельзя, да и не имеет смысла, вкладывать друг в друга. Уже рабочий HTML-код правильно комментировать так:

<p>Обычный параграф с текстом.</p>
<!--p> Временно закомментированный параграф </p-->
<p>Обычный параграф с текстом.</p>

А вот так неправильно:

<p>Обычный параграф с текстом.</p>
<!--<p> Временно закомментированный параграф </p>-->
<p>Обычный параграф с текстом.</p>

Хотя, этот метод тоже сработает.

CSS-комментарии делаются следующим образом:

.jspDrag /* точка в начале, означает, что свойства применятся ко всем тегам с атрибутом class, равным jspDrag */
{
	background: #000;		/* Чёрный фон */
	position: relative;		/* Метод позиционирования - relative, или относительный */
/*	top: 0;
	left: 0;
	cursor: pointer;	*/
	opacity:.8;			/* На 80% НЕпрозрачен ( .8 == 0.8 == 80% ) */
	border-radius:4px;		/* Радиус скругления углов блока 4 пикселя */
}

Пересечения

В старых стандартах HTML были допустимы пересечения тегов, подобные приведённому ниже:

<p>Какой-то <font size=6>текст, в <b>которым решили</font> использовать пересекающиеся</b> теги.

Сейчас такой код считается невалидным. Т.к. код должен представлять собой дерево элементов. Если элементы пересекаются, то полноценного дерева не построишь. Обратите внимание, вышеприведённый листинг написан в стиле старого стандарта: тег <p> не закрывается, параметр size имеет значение, не обрамлённое кавычками.