Ostatnio edytowany:

Elementy HTML

Autor: Virtual Patriot

Język HTML oferuje nam ponad sto różnych elementów HTML. Każda strona internetowa zbudowana jest zazwyczaj z bardzo wielu różnych elementów HTML.

Czym jest element HTML?

Wyobraź sobie puste pudełko, do którego możesz włożyć różne rzeczy.

Takim pustym pudełkiem w świecie wirtualnym jest właśnie element HTML.

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

<article></article>

<p></p>

<div></div>

Gdy wspomniane elementy HTML umieścimy w zawartości pliku HTML, a następnie wspomniany plik HTML zapiszemy oraz wyświetlimy w oknie przeglądarki internetowej, wtedy naszym oczom ukaże się następujący rezultat:

Po prostu widzimy pustą, przezroczystą na białym tle przestrzeń, ponieważ w zawartości naszych przykładowych elementów HTML nie znajduje się nic. Innymi słowy nasze przykładowe elementy HTML posiadają zawartość pustą.

Większość elementów HTML zbudowana jest z dwóch tagów. Tagu otwierającego zawartość elementu HTML oraz tagu zamykającego zawartość elementu HTML.

Tag otwierający zawartość elementu HTML posiada następującą składnię: <tag>.

Tag zamykający zawartość elementu HTML posiada następującą składnię: </tag>.

Słowo tag należy zastąpić nazwą interesującego nas elementu HTML.

Przykład:

<p></p>

Pomiędzy tagiem otwierającym oraz tagiem zamykającym zawartość elementu HTML możemy umieścić interesującą nas zawartość.

<article>przykładowa zawartość</article>

<p>przykładowa zawartość</p>

<div>przykładowa zawartość</div>

Rezultat:

przykładowa zawartość

przykładowa zawartość

przykładowa zawartość

Naszym oczom ukazała się zawartość trzech elementów HTML, czyli elementu article, elementu p oraz elementu div. Zawartością każdego ze wspomnianych elementów HTML jest ciąg znaków przykładowa zawartość i właśnie ten ciąg znaków został trzykrotnie wyświetlony w oknie przeglądarki internetowej.

Przeglądarka internetowa nadal może mieć problem z poprawnym wyświetlaniem polskich znaków, jednak rozwiązaniem tego problemu zajmiemy się nieco później.

Zawartością elementów HTML mogą również być inne elementy HTML.

Przykład:

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

Rezultat:

Mój ulubiony kwiat

Moim ulubionym kwiatem jest róża.

Dlaczego w języku HTML występuje ponad sto różnych elementów HTML?

Ponieważ tak samo, jak w świecie realnym występuje wiele różnych elementów służących do budowy naszego świata realnego, tak samo język HTML oferuje nam wiele różnych elementów HTML służących do budowy świata wirtualnego.

Tak samo, jak w świecie realnym każdy otaczający nas element reprezentuje sobą z góry określoną rzecz, tak samo każdy element HTML występujący w języku HTML reprezentuje sobą z góry określoną rzecz.

Trudno żebyśmy w lodówce przechowywali garderobę, prawda?

W naszym przykładzie, element article jest informacją dla przeglądarki internetowej o tym, że właśnie w tym miejscu w kodzie HTML znajduje się zawartość, która jest treścią jednego z naszych artykułów.

Element h1 znajdujący się w zawartości elementu article jest informacją dla przeglądarki internetowej oraz będzie informacją dla użytkownika o tym, jaki tytuł posiada nasz artykuł.

Element p znajdujący się w zawartości elementu article jest informacją dla przeglądarki internetowej oraz będzie informacją dla użytkownika o tym, jaką treść posiada nasz artykuł.

Ponadto element b znajdujący się w zawartości elementu p pełni rolę wyszczególnionej informacji dla użytkownika o tym, iż naszym ulubionym kwiatem jest wyłącznie róża.

Niektóre elementy HTML domyślnie różnią się wyglądem od innych elementów HTML. Na przykład tekst znajdujący się w zawartości elementu "h1" jest nieco większy oraz bardziej pogrubiony. Kontrolowaniem wyglądu poszczególnych elementów HTML zajmuje się język CSS, który jednak na tę chwilę nie jest dla nas istotny.

Każdy element HTML pełni z góry określoną rolę w kodzie HTML, jednak kto to wszystko ustala?

Źródłem wszystkich źródeł w mniejszym lub w większym stopniu, nawet jeżeli autorzy różnych treści na temat różnych języków budujących stronę internetową o tym nie wiedzą, jest organizacja W3C. Wspomniana organizacja ustala wszystkie standardy, zasady, jakie powinniśmy przestrzegać w naszym kodzie HTML i nie tylko, lecz z przestrzeganiem tych zasad przez autorów stron internetowych różnie bywa, jednak czasami nawet nieprzestrzeganie niektórych zasad nie jest poważnym błędem.

Bo przecież odwiedzasz różne strony internetowe najczęściej ze względu na treść, jaką Ci oferują, a nie ze względu na to, że ich kod został doskonale lub mniej doskonale napisany, prawda?

Jednak my postaramy nauczyć się i zrozumieć główne zasady i idee języka HTML.

To, które elementy HTML mogą występować w zawartości poszczególnych elementów HTML regulują pewne prawa, które jednak poznamy znacznie później.

Wracając do budowy elementu HTML. Wszystkie formy, które zostały zaprezentowane poniżej są prawidłowe.

<article>przykładowa zawartość</article>

<ARTICLE>przykładowa zawartość</ARTICLE>

<aRTicLE>przykładowa zawartość</ArtICle>

<ARTicle>przykładowa zawartość</artICLE>

Jednak mimo wszystko zalecam Ci posługiwanie się wyłącznie małymi literami do zapisywania tagu otwierającego oraz tagu zamykającego zawartość elementu HTML.