Опишете празните места в HTML и тяхното използване…

Пробелите в HTML, наричани също "whitespace", са символи, които браузърът не показва (интервали, табулации, символи за нов ред). Обикновено браузърите ги съкращават в един интервал при рендиране, с изключение на определени елементи и CSS свойства.

Използване:

Подобряване на четливостта на кода: Разработчиците използват интервали за визуално разделяне на елементите в HTML изходния код, което го прави по-разбираем и структуриран. Това не влияе на визуализацията на страницата в браузъра.
Разделяне на inline елементи: Браузърите автоматично добавят интервал между inline елементи, поставени един до друг в HTML кода. Това поведение може да бъде променено с CSS.
Елементи, които запазват интервалите:
- <pre>: Запазва всички интервали и нови редове, форматирайки текста точно както е в изходния код.
- <code>: Обикновено се използва вътре в <pre> за запазване на форматирането на кода.
- <textarea>: Вътре в текстовото поле интервалите и новите редове се запазват.
CSS свойството white-space: Позволява да се контролира как браузърът обработва интервалите вътре в елемента:
- normal (по подразбиране): Съкращава интервалите, новите редове се игнорират (с изключение на <br>).
- nowrap: Съкращава интервалите, но предотвратява новите редове.
- pre: Еквивалентно на използването на <pre>.
- pre-wrap: Запазва интервалите и новите редове, като позволява автоматично пренасяне на реда според ширината на контейнера.
- pre-line: Съкращава интервалите, но запазва новите редове.

Пример за съкращаване на интервалите:

HTML:

<p>
    Много        интервали

    и
    пренасяния
    на
    редове
</p>

Резултат в браузъра:

Много интервали и пренасяния на редове

Пример с използване на <pre>:

HTML:

<pre>
    Запазват се
        всички
            интервали
    и
    пренасяния
</pre>

Резултат в браузъра:

    Запазват се
        всички
            интервали
    и
    пренасяния

Пример с използване на CSS white-space:

HTML:

<div class="pre-wrap">
    Този текст ще запази
        своите интервали
            и пренасяния

    на редове,
    и ще се автоматично променя ширината.
</div>

CSS:

.pre-wrap {
    white-space: pre-wrap;
    border: 1px solid black;
    width: 150px;
}

Опишете празните места в HTML и тяхното използване.