CodeGym /Kursy /Frontend SELF PL /Zapoznanie z tagami HTML

Zapoznanie z tagami HTML

Frontend SELF PL
Poziom 1 , Lekcja 2
Dostępny

1. Tagi

Tagi mają różne typy. Po pierwsze, mogą być pojedyncze i podwójne. Najczęściej spotykane są tagi podwójne. I jak się pewnie domyślasz, zawsze występują w parach. Nazywa się je też otwierający i zamykający.

Tag otwierający — to po prostu słowo kluczowe w trójkątnych nawiasach.


<tag>

Przykład:

HTML
      
<h1>
      
    

Tag zamykający wygląda podobnie jak otwierający, ale przed słowem kluczowym jest ukośnik.


</tag>

Przykład:

HTML
      
</h1>
      
    

Tag otwierający zawsze jest pierwszy w parze. NIE może być tak, że najpierw jest tag zamykający, a dopiero potem otwierający. Taki dokument HTML będzie uznany za nieprawidłowy.

2. Drzewo tagów

I jeszcze ważna informacja o tagach podwójnych. W dokumencie może być ich wiele i mogą być zagnieżdżone. To znaczy, że dowolny tekst w dokumencie HTML może być otoczony tagami, nawet jeśli zawiera inne tagi. Przykład:

HTML
      
<html>
    Zwykły tekst
        <a href="http://codegym.cc/about">
            Link do czegoś ciekawego
        </a>
    jeszcze jakiś inny tekst
</html> 
      
    

W dużym skrócie, w tekście HTML może wystąpić sekwencja tagów:


<h1> <h2> </h2> </h1>

Ale nie może być tak:


<h1> <h2> </h1> </h2> 

Jeśli tag otwierający <h2> znajduje się wewnątrz pary <h1>-tagów, to jego odpowiadający tag zamykający </h2> również musi być wewnątrz tej samej pary <h1>-tagów.

Wszystkie tagi w dokumencie tworzą w ten sposób drzewo tagów. Na początku jest tag najwyższego poziomu, który otacza cały dokument, zazwyczaj to <html>, ma on swoje podrzędne tagi, które z kolei mogą mieć swoje i tak dalej.

Właściwie program przetwarzający dokument z tagami, postrzega go dokładnie w ten sposób — jako drzewo tagów z wbudowanym tekstem.

3. Pojedyncze tagi

Pusty tag

Jeśli tag nie ma zawartości, zazwyczaj wygląda tak:


<tag> </tag>

Dla takich tagów wymyślono specjalny kompaktowy zapis:


<tag/>

Zwróć uwagę, że ten tag różni się od tagu zamykającego — ukośnik w nim znajduje się na końcu. To po prostu skrócony zapis pustej pary tagów. Jest nazywany pustym tagiem.

Pojedyncze tagi

W HTML istnieją także specjalne pojedyncze tagi. Nie mają one tagu zamykającego. Lista takich tagów jest zdefiniowana w standardzie HTML. Przykłady:

  • <br> — przeniesienie linii;
  • <hr> — linia podziału;
  • <img> — obrazek.

Łącznie jest ich 14, połowa z nich to tagi pomocnicze, a druga połowa pochodzi z pierwszej wersji HTML. Obecnie takich tagów unika się wprowadzania.

Komentarze
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION