X Powszechnie używane tagi HTML, które warto znać dla początkujących

W dążeniu do kariery programisty front-end, nauka języka HTML jest niemal nieunikniona. HTML, czyli Hypertext Markup Language, stanowi fundament dla większości stron internetowych, z którymi stykamy się na co dzień.

Struktura HTML opiera się na kilku kluczowych elementach, takich jak tagi, atrybuty i elementy. W tym opracowaniu skoncentrujemy się na tagach HTML. Te elementy pozwalają przeglądarkom internetowym prawidłowo interpretować i organizować treść strony, od nagłówków, przez akapity, aż po obrazy i inne elementy. Tagi HTML działają jak instrukcje, które informują przeglądarkę, w jaki sposób ma prezentować i formatować daną zawartość.

Przeglądarki internetowe interpretują tagi HTML sekwencyjnie, od góry do dołu dokumentu. Nie ma narzuconego limitu co do ilości tagów, które mogą być zawarte w obrębie jednej strony internetowej.

Wszystkie znaczniki HTML są otaczane nawiasami ostrymi < >
Każdy znacznik HTML pełni konkretną rolę i wyznaczoną funkcję
Większość znaczników HTML występuje w parach: otwierający <tag> i zamykający </tag>

Różnica między tagami, elementami i atrybutami HTML

Terminy „tag HTML” i „element HTML” są często używane zamiennie, jednak z technicznego punktu widzenia, nie są one synonimami.

Tagi HTML stanowią podstawę definicji elementów HTML. Elementy powstają poprzez otoczenie treści znacznikiem otwierającym i zamykającym, które definiują typ elementu, z którym mamy do czynienia.

Oto przykład elementu HTML:

<p> To jest akapit </p>

<p> jest tutaj przykładem znacznika HTML.

Atrybuty HTML uzupełniają informacje o elementach HTML, dodając im cechy i modyfikując ich zachowanie. Atrybuty zawsze są umieszczone w tagu otwierającym elementu.

Poniżej znajduje się przykład atrybutu HTML:

<button id="ZatwierdzZamowienie" class="przycisk">Zamów</button>

Podstawowe Tagi HTML, które warto znać

Język HTML, od momentu wprowadzenia przez Tima Bernersa-Lee w 1993 roku, przeszedł znaczną ewolucję. Pierwsza wersja HTML zawierała 18 znaczników. Z każdą kolejną aktualizacją pojawiały się nowe tagi; ostatnia znacząca aktualizacja to HTML5 z 2014 roku.

Porównanie HTML z HTML5 ujawnia wprowadzenie znaczników semantycznych takich jak <article>, <header> i <footer>, które precyzyjniej określają rolę poszczególnych części strony. Obecnie istnieje ponad 100 tagów HTML. Poniżej przedstawiamy niektóre z najczęściej używanych, które warto znać:

<!DOCTYPE>

Deklaracja DOCTYPE, choć technicznie nie jest tagiem, informuje przeglądarkę o typie dokumentu, który ma zostać wczytany. Określa ona wersję języka HTML, której używamy w naszym dokumencie.

W HTML5 deklarację dokumentu określamy jako:

<!DOCTYPE html>

lub

<!doctype html>

Należy pamiętać, że deklaracja ta nie ma znacznika zamykającego i nie jest wrażliwa na wielkość liter.

<html> </html>

Tag <html>…</html> znajduje się bezpośrednio po deklaracji DOCTYPE. To on określa, że dokument jest stroną internetową, i wewnątrz niego zagnieżdżone są wszystkie pozostałe elementy. Tag <html> wyznacza początek i koniec dokumentu HTML.

Konstrukcja znacznika <html> jest następująca:

<html>Zawartość</html>

<head> </head>

Sekcja nagłówka dokumentu HTML jest definiowana przez tag <head>. Jest on umieszczony wewnątrz tagu <html> i zawiera ogólne informacje o stronie, takie jak jej tytuł czy autor.

Tag <head> zawiera inne tagi, które dostarczają dodatkowych informacji o stronie, ale ich zawartość nie jest wyświetlana bezpośrednio w treści strony.

Oto składnia tagu <head>:

<head> ........ </head>

<title> </title>

Tag <title> definiuje tytuł strony, który wyświetla się na pasku tytułu przeglądarki lub karcie. Tag ten jest zawarty w tagu <head> i nie jest widoczny bezpośrednio na stronie.

Składnia tagu <title> jest następująca:

<title>Tagi HTML dla początkujących</title>

Wewnątrz tagu <head> będzie on wyglądać tak:

<head>
    <title>Tagi HTML dla początkujących</title>
  </head>

<body> </body>

Tag <body> zawiera całą widoczną zawartość strony internetowej, taką jak obrazy, linki, teksty, filmy i inne elementy.

W sekcji <body> znajdują się również znaczniki <p> dla akapitów, <a> dla linków, <strong> dla pogrubionego tekstu i <ol> dla list uporządkowanych.

Składnia tagu <body> jest następująca:

<body> Zawartość </body>

<h1> do <h6> Znaczniki

Dokument HTML może zawierać do sześciu poziomów nagłówków. Są one oznaczane tagami od <h1> do <h6>, gdzie <h1> oznacza nagłówek najwyższego poziomu, a <h6> – najniższego.

Nagłówek <h1> jest największy, a nagłówek <h6> jest najmniejszy.

W dokumencie HTML znaczniki nagłówków mogą być zapisane w następujący sposób:

<h1>Nagłówek 1</h1>
    <h2>Nagłówek 2</h2>
    <h3>Nagłówek 3</h3>
    <h4>Nagłówek 4</h4>
    <h5>Nagłówek 5</h5>
    <h6>Nagłówek 6</h6>

Znaczniki od <h1> do <h6> umieszczamy wewnątrz znacznika <body>.

Przykładowo, znacznik <h1> będzie umieszczony tak:

<body>
    <h1> To jest nagłówek 1 >/h1>
  </body>

<p> </p>

Znacznik <p>, czyli znacznik akapitu, służy do grupowania treści w akapity. Naciśnięcie klawisza „Enter” w edytorze kodu nie powoduje automatycznego utworzenia nowego akapitu.

Aby utworzyć więcej niż jeden akapit, należy użyć kilku znaczników <p>. Znaczniki akapitu powinny być umieszczone wewnątrz znacznika <body>.

Składnia znacznika akapitu jest następująca:

<p> ...jakaś treść... </p>

Jeżeli chcemy mieć cztery akapity, kod będzie wyglądał tak:

<body>
      <p>Treść pierwszego akapitu.</p>
      <p>Treść drugiego akapitu.</p>
      <p>Treść trzeciego akapitu.</p>
      <p>Treść czwartego akapitu.</p>
   </body>

<b> </b>

Tag <b> </b> lub po prostu tag pogrubienia, powoduje, że treść zawarta między otwierającym <b> a zamykającym </b> tagiem jest wyświetlana jako pogrubiona.

Tag pogrubienia można umieścić wewnątrz tagu nagłówka, na przykład <h1>, a także wewnątrz znacznika akapitu.

Poniżej kilka przykładów tagu pogrubienia:

<b> Pogrubiony Tag </b>

Wyrażenie „Pogrubiony Tag” będzie wyświetlane w pogrubieniu.

<h1> Na spokojnie, <b> Piąta edycja </b>, edycja zwycięzców </h1>

Fragment „Piąta edycja” zostanie wyświetlony w pogrubieniu.

<i> </i>

Tag kursywy, oznaczany przez <i>, powoduje pochylenie tekstu umieszczonego wewnątrz tagów.

Na przykład, taki kod:

<i> To jest kursywa </i>

Sprawi, że słowa „To jest kursywa” będą wyświetlane w formie pochylonej.

<u> </u>

Tag podkreślenia, czyli <u>, stosuje się, gdy chcemy podkreślić określony fragment tekstu w dokumencie HTML.

Na przykład, taki zapis:

<u> podkreśl te słowa </u>

Spowoduje podkreślenie frazy pomiędzy tagami.

<center> </center>

Tag <center> służy do wyśrodkowania treści w dokumencie HTML.

Na przykład, jeśli mamy tag h2 o treści

Wyśrodkowanie treści w HTML

, możemy go wyśrodkować w następujący sposób:

<center>
    <h2> Wyśrodkowanie treści w HTML </h2>
  </center>

<span> </span>

Tag <span> to ogólny kontener wbudowany, który domyślnie nie ma własnego stylu. Znacznik <span> możemy wykorzystać do grupowania fragmentów tekstu, którym chcemy nadać styl.

Można umieścić go wewnątrz innych tagów, takich jak nagłówki i akapity:

<h2> Naucz się HTML <span> od ekspertów </span> i przygotuj się na rynek </h2>

<p> Naucz się HTML <span> od ekspertów </span> i przygotuj się na rynek </p>

<div> </div>

Znacznik <div>, czyli div, umożliwia grupowanie różnych tagów w dokumencie HTML.

Tagowi <div> możemy nadać „klasę”, co pozwala na dodanie stylizacji za pomocą CSS.

Tak będzie wyglądał div zawierający nagłówki h1, h2 i akapit:

<div>
      <h1> Naucz się HTML </h1>
       <h2> Tagi HTML </h2>
       <p> HTML jest językiem znaczników... </p>
  </div>

<em> </em>

Znacznik <em> służy do wyróżnienia konkretnych słów w dokumencie HTML.

Treść między tagami <em> będzie wyświetlana kursywą.

Wyróżniony fragment tekstu w akapicie, który może pojawić się w edytorze kodu, będzie wyglądał następująco:

<p> Spotkanie rozpocznie się o <em> 08:00 </em>, proszę o punktualność </p>

<sup> </sup>

Znacznik <sup> lub indeks górny umieszcza tekst powyżej normalnej linii tekstu. Idealnym przykładem jest zapisanie liczby X podniesionej do kwadratu: X²

Składnia <sup> w znaczniku akapitu wygląda następująco:

<H1> Harveys <sup>TM </sup> Company Limited </H1>

<sub> </sub>

Indeks dolny lub tag <sub> jest przeciwieństwem znacznika indeksu górnego. Treść wewnątrz tagu <sub> będzie wyświetlana poniżej linii tekstu. Dobrym przykładem jest zapisanie wzoru chemicznego wody jako H₂O.

Składnia znacznika indeksu dolnego jest następująca:

Pamiętaj, że H <sub> 2 </sub> O to wzór chemiczny wody

<br>

<br> jest samozamykającym się tagiem oznaczającym złamanie linii. Cała treść po <br /> rozpocznie się w nowej linii.

Składnia tagu <br> w akapicie jest następująca:

<p> HTML to skrót od Hypertext Markup Language <br>
    Trwa debata na temat tego, czy jest to język programowania, czy nie <br>
    Jednak nie możemy umniejszać jego znaczenia <br>
    HTML jest używany w ponad 95% współczesnych stron internetowych </p>

<ol> </ol>

i

<li> </li>

Znacznik listy uporządkowanej, czyli <ol>, musi być używany z innymi tagami, takimi jak <li>.

Obydwa mogą pojawić się w edytorze kodu w następujący sposób:

<ol>
    <li> Azja </li>
    <li> Afryka </li>
    <li> Europa </li>
  </ol>

Podczas renderowania w przeglądarce, zawartość będzie wyświetlana jako lista numerowana.

Aby zwiększyć atrakcyjność wizualną strony, możemy dodać obrazy. W takim przypadku przydatny jest tag graficzny <img src=””/>, który jest tagiem samozamykającym się.

Składnia tagu obrazu jest następująca:

<img src=“https://cdn.pixabay.com/photo/2015/08/19/15/44/seo-896175_960_720.png”/>

Adres URL w cudzysłowie wskazuje źródło obrazu.

Podsumowanie

Istnieje ponad 100 tagów HTML, ale powyższe są podstawowymi, które powinien znać każdy początkujący programista front-end. HTML jest obsługiwany przez większość edytorów kodu, co zapewnia, że nie popełnisz błędów podczas nauki.

newsblog.pl