Znaczniki HTML – kilka rodzajów

W HTML istnieją 2 rodzaje tagów (elementów) – takie, które musimy otworzyć i zamknąć oraz znaczniki, które tylko otwieramy (nie mają zamknięcia).

Elementy, które otwieramy i zamykamy

Mają one znacznik początkowy i końcowy. W taki sposób zbudowana jest zdecydowana większość znaczników HTML.

 

 

Elementy bez zamknięcia

Bez zamknięcia, to znaczy bez znacznika, który miałby je zamykać, tak jak widziałeś w przykładzie powyżej. W tego rodzaju znacznikach dodajemy ukośnik przed końcem, tak jak widać poniżej:

 

 

 

Znaczniki HTML w sekcji HEAD

Head, czyli nagłówek dokumentu HTML. Umieszczamy w nim podstawowe informacje o naszej stronie, takie jak tytuł, opis, doctype czy odnośniki do stylów CSS, skryptów JavaScript.

Doctype

Linijka, która określa z jakim typem dokumentu mamy do czynienia. W najnowszym HTML5 doctype jest bardzo krótki i wygląda następująco:

 

 

Title

Tytuł strony, który jest wyświetlany jako największy, niebieski napis w wynikach wyszukiwania Google.

 

 

Treść title ma też duże znaczenie w SEO naszej strony – warto dopilnować, by zawierał najważniejsze słowa kluczowe danej strony, ale nie warto też przesadzać.

Meta

Znacznik meta pozwala nam umieścić dodatkowe informacje o stronie HTML, takie jak:

• Charset, czyli zestaw znaków który wykorzystuje nasza strona. Obecnie najpopularniejszy jest UTF-8.
• Description, czyli opis strony, który był wykorzystywany przez wyszukiwarki takie, jak Google. Dzisiaj jest już znacznie rzadziej wykorzystywany i używają go tylko niektóre wyszukiwarki.
• Keywords, czyli słowa kluczowe strony. Google nie bierze już tego meta tagu pod uwagę przy ustalaniu pozycji strony.
• Author, czyli imię i nazwisko autora strony.

W sekcji HEAD znaczniki te wyglądają następująco:

 

 

 

Znaczniki HTML w sekcji BODY

Body, czyli ciało dokumentu HTML. Wpisujemy tutaj główną treść strony, która jest widoczna dla użytkownika z poziomu przeglądarki.

Elementy blokowe i liniowe

Mało który kurs HTML porusza to zagadnienie, choć jest ono dosyć ważne.

Elementy liniowe to takie, które zajmują tyle miejsca ile im potrzeba i nic więcej.

Przykładem może być znacznik <span>, w którym umieszczamy krótki tekst, mający zmieścić się w 1 linijce, czy też tag <img> umieszczający obrazek, który dopasowuje się do tekstu i układa się obok niego, ale nie zajmuje całej dostępnej powierzchni.

Element blokowy zajmuje całą dostępną szerokość strony.

Znaczy to, że gdy do elementu naszej strony, który ma szerokość 600 px wstawimy element blokowy, to zajmie on 100% szerokości, czyli właśnie 600 pikseli, nawet wtedy, kiedy bez problemu zmieściłby się w 100 pikselach.

Przykładem jest akapit (<p>), blok (<div> – bardzo często wykorzystywany do budowania szkieletu strony) czy nagłówek (od <h1> do <h6>).

 

 

Innym znacznikiem jest <span>. Wykorzystuje się go do zamieszczenia tekstu, który w domyśle ma zajmować mało miejsca, np. kilka wyrazów czy 1 linijka tekstu.