Ostatnio edytowany:

Białe znaki

Autor: Virtual Patriot

Pustym elementem HTML jest ten element HTML, który nie zawiera w swojej zawartości niczego.

Przykładowe puste elementy HTML zostały zaprezentowane poniżej.

<article></article>

<p></p>

<div></div>

Jednak czy następujące elementy HTML są również pustymi elementami HTML?

<article> </article>

<p>   </p>

<div>
</div>

Żaden z powyższych elementów HTML nie jest pustym elementem HTML, ponieważ każdy z powyższych elementów HTML zawiera w swojej zawartości coś, a tym czymś w tym wypadku jest znak należący do grupy białych znaków, czyli takich znaków, które my na pierwszy rzut oka możemy nie zauważyć, lecz które występują w naszym kodzie HTML.

Czy puste pudełko występujące w świecie realnym nie zawiera w swojej zawartości niczego? Powietrza nie zauważymy gołym okiem, lecz powietrze może przecież być zawartością wspomnianego pudełka.

Nasz przykładowy element article nie jest pustym elementem HTML, ponieważ zawartością naszego przykładowego elementu article jest jeden znak spacji (czyli znak tworzony w momencie gdy naciśniemy klawisz SPACE).

Nasz przykładowy element p nie jest pustym elementem HTML, ponieważ zawartością naszego przykładowego elementu p jest jeden znak tabulacji (czyli znak tworzony w momencie gdy naciśniemy klawisz TAB).

Nasz przykładowy element div nie jest pustym elementem HTML, ponieważ zawartością naszego przykładowego elementu div jest jeden znak przejścia do nowej linii (czyli znak tworzony w momencie gdy naciśniemy klawisz ENTER).

Możesz włączyć dla siebie widoczność białych znaków klikając w następującą ikonę w programie Notepad++:

włączenie białych znaków w programie notepad++

Rezultat w oknie programu Notepad++:

widoczność białych znaków w programie notepad++

Jak możemy zauważyć każdy biały znak został oznaczony przez program Notepad++ na swój sposób. Znak spacji za pomocą małej pomarańczowej kropki. Znak tabulacji za pomocą małej pomarańczowej strzałki w prawo. Znak przejścia do nowej linii za pomocą oznaczenia CRLF.

Widząc oraz rozróżniając białe znaki możemy bardziej precyzyjniej określić co jest zawartością naszego przykładowego elementu article.

widoczność białych kodu HTML znaków w programie notepad++

Zawartością naszego przykładowego elementu article jest znak przejścia do nowej linii, znak spacji, znak spacji, element h1, znak przejścia do nowej linii, znak spacji, znak spacji, element p, znak przejścia do nowej linii, ciąg znaków Mój, znak spacji, ciąg znaków ulubiony, znak spacji, ciąg znaków kwiat, ciąg znaków Moim, znak spacji, ciąg znaków ulubionym, znak spacji, ciąg znaków kwiatem, znak spacji, ciąg znaków jest, znak spacji, element b, znak . oraz ciąg znaków róża.

Zdolność rozpoznawania przez nas białych znaków może wydawać się nam mało przydatna, lecz wiedza na temat białych znaków może czasami dać nam odpowiedź na nurtujące nas pytania.

Jednym z tych pytań może być pytanie - Dlaczego przykładowe kody HTML zaprezentowane poniżej dają nam ten sam rezultat po wyświetleniu ich w oknie przeglądarki internetowej?

<article>
  <h1>Mój ulubiony kwiat</h1>
  <p>Moim ulubionym kwiatem jest <b>róża</b>.</p>
</article>
<article>
  <h1>
    Mój
    ulubiony
    kwiat
  </h1>
  
  <p>
    Moim
    ulubionym
    kwiatem
    jest
    <b>róża</b>
    .
  </p>
</article>
<article>
  <h1>Mój       ulubiony       kwiat</h1>
  <p>Moim       ulubionym      kwiatem      jest <b>róża</b>.</p>
</article>
<article><h1>Mój ulubiony kwiat</h1><p>Moim ulubionym kwiatem jest <b>róża</b>.</p></article>

Ponieważ mechanizm przeglądarki internetowej odpowiadający za wyświetlanie treści reprezentowanej przez zawartość elementu HTML posiada pewne domyślne zasady dotyczące wyświetlania białych znaków. Dlatego każdy znak przejścia do nowej linii jest zamieniany na jeden znak spacji, natomiast jeżeli występujące obok siebie znaki są białymi znakami, znaki te zamieniane są na jeden znak spacji. Dlatego każdy ze wcześniej zaprezentowanych kodów HTML daje nam ten sam rezultat:

Mój ulubiony kwiat

Moim ulubionym kwiatem jest róża.

Jeżeli chcielibyśmy zmienić zasady dotyczące interpretowania przez przeglądarkę internetową białych znaków występujących w zawartości interesującego nas elementu HTML moglibyśmy skorzystać z właściwości white-space języka CSS, lecz na tę chwilę nie jest to dla nas istotne, ponieważ na tę chwilę głównie skupiamy się na zagadnieniach języka HTML, a nie na zagadnieniach języka CSS. Dlatego na tę chwilę między innymi wiedza na temat "Dlaczego treść elementu - p - została wyświetlona w oknie przeglądarki internetowej pod treścią elementu - h1" nie jest dla nas istotna.