BCG – Biznesowe Centrum Gospodarcze

HTML (HyperText Markup Language) to fundamentalny język znaczników używany do tworzenia i strukturyzowania zawartości stron internetowych.

Określa strukturę dokumentu poprzez zestaw elementów, które definiują nagłówki, akapity, obrazy, linki i inne komponenty wyświetlane przez przeglądarki.

W dobie cyfrowej transformacji biznesu zrozumienie podstaw HTML jest kluczowe nie tylko dla specjalistów technicznych, ale również dla marketerów, SEO i twórców treści.

Czym jest znacznik HTML?

Spis treści artykułu [pokaż]

Znacznik HTML to podstawowy element języka, który składa się z tagu otwierającego i tagu zamykającego, z treścią pomiędzy nimi. Znaczniki umieszczane są między nawiasami ostrymi (< i >).

Struktura znacznika

Każdy znacznik HTML zawiera:

  • tag otwierający – rozpoczyna dany element, np. <p>;
  • tag zamykający – kończy element, np. </p>;
  • treść – informacja umieszczona pomiędzy tagami;
  • atrybuty – dodatkowe informacje wpływające na wygląd lub działanie elementu.

Przykład podstawowej struktury:

<p>To jest przykładowy akapit.</p>

W tym przykładzie <p> to tag otwierający, </p> to tag zamykający, a „To jest przykładowy akapit.” to treść elementu.

Rodzaje znaczników HTML

Znaczniki HTML można podzielić na kilka kategorii w zależności od ich funkcji:

  • strukturalne – np. <header>, <section>, które organizują układ strony;
  • tekstowe – np. <p>, <strong>, służące do formatowania treści;
  • multimedialne – np. <img>, pozwalające na osadzanie obrazów.

Fundamentalna struktura strony – znaczniki podstawowe

Każda strona internetowa opiera się na trzech głównych znacznikach, które tworzą jej szkielet:

<html>

Znacznik <html> pełni rolę kontenera dla całego dokumentu – obejmuje sekcję <head> i <body>. Bez tego elementu przeglądarka może błędnie zinterpretować zawartość strony, co prowadzi do problemów z wyświetlaniem.

<head>

Sekcja <head> zawiera metadane, tytuł strony i odnośniki do zewnętrznych zasobów. Elementy w tej części nie są widoczne dla użytkownika, ale są kluczowe dla prawidłowego działania strony. Najczęściej umieszcza się tu:

  • <title> – tytuł strony wyświetlany w karcie przeglądarki;
  • <meta> – metadane, m.in. deklarację kodowania znaków (charset);
  • <link> – odnośniki do zewnętrznych arkuszy stylów CSS;
  • <style> – wbudowane style CSS.

<body>

Znacznik <body> definiuje główną zawartość strony widoczną dla użytkownika – teksty, obrazy, linki i interaktywne elementy.

Bez tych elementów strona nie będzie działać poprawnie – to one tworzą fundament każdej witryny.

Przykład podstawowej struktury

Oto minimalny szablon dokumentu HTML5:

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Tytuł strony</title>
<link rel="stylesheet" href="styles.css">
<style>
/* Tutaj możemy umieścić własne style CSS */
</style>
</head>
<body>
<!-- Tutaj umieszczamy zawartość strony -->
</body>
</html>

Deklaracja <!DOCTYPE html> informuje przeglądarkę, że dokument jest zgodny z HTML5.

Znaczniki strukturalne treści

Oprócz podstawowych elementów <html>, <head> i <body>, HTML5 wprowadził semantyczne znaczniki strukturalne, które działają jak drogowskazy. Ułatwiają one organizację treści, poprawiają dostępność i pomagają wyszukiwarkom lepiej rozumieć zawartość.

Znaczniki sekcji strony

Poniższa tabela przedstawia najważniejsze znaczniki sekcji i ich zastosowanie:

Znacznik Opis
<header> Górna część strony lub sekcji – zwykle logo, tytuł, menu nawigacyjne
<nav> Sekcja przeznaczona na linki nawigacyjne
<main> Główna, unikalna treść strony
<section> Grupuje powiązane tematycznie treści (jak rozdziały w książce)
<article> Samodzielna jednostka treści – np. wpis blogowy, artykuł, wiadomość
<aside> Zawartość poboczna, uzupełniająca główny temat
<footer> Dolna część strony – dane kontaktowe, informacje prawne, linki do polityk

Znaczniki nagłówków i tekstu

Nagłówki (<h1> do <h6>)

Nagłówki dzielą stronę na logiczne części i budują hierarchię treści. <h1> powinien pojawić się tylko raz i jasno określać główny temat strony. Kolejne poziomy, takie jak <h2> czy <h3>, wyznaczają sekcje i podsekcje.

Przykład użycia nagłówków:

<h1>Główny tytuł strony</h1>
<h2>Podsekcja pierwsza</h2>
<h3>Podsekcja drugiego poziomu</h3>

Akapit (<p>)

Znacznik <p> definiuje paragraf tekstu i jest jednym z najczęściej używanych elementów do strukturyzowania treści.

Przykład akapitu:

<p>To jest przykładowy akapit tekstu.</p>

Inne znaczniki tekstowe

Najczęściej używane znaczniki do wyróżnień to:

  • <strong> – wyróżnia ważny fragment, zwykle pogrubieniem;
  • <em> – akcentuje treść, zwykle kursywą;
  • <span> – niewielki, liniowy kontener używany do selektywnego stylowania tekstu.

Znaczniki struktury spoza głównych sekcji

<div>

<div> to uniwersalny, blokowy kontener do grupowania i stylowania elementów. Służy m.in. do budowania layoutu.

Przykład użycia <div>:

<div class="container">
<p>Treść wewnątrz kontenera.</p>
</div>

Listy

HTML udostępnia trzy podstawowe elementy do tworzenia list:

  • <ul> (unordered list) – lista nienumerowana;
  • <ol> (ordered list) – lista numerowana;
  • <li> (list item) – pojedynczy element listy umieszczany wewnątrz <ul> lub <ol>.

Przykład listy nienumerowanej:

<ul>
<li>Pierwszy element</li>
<li>Drugi element</li>
</ul>

Tabele

Tabele tworzy się z wykorzystaniem następujących znaczników:

  • <table> – kontener całej tabeli;
  • <tr> – wiersz tabeli;
  • <th> – komórka nagłówka wiersza lub kolumny;
  • <td> – zwykła komórka tabeli;
  • <caption> – podpis lub opis tabeli umieszczany bezpośrednio po otwarciu <table>.

Przykład prostej tabeli:

<table>
<caption>Przykładowa tabela</caption>
<tr>
<th>Kolumna 1</th>
<th>Kolumna 2</th>
</tr>
<tr>
<td>Komórka 1</td>
<td>Komórka 2</td>
</tr>
</table>

Znaczenie HTML dla SEO i marketingu cyfrowego

Dla specjalistów marketingu i SEO prawidłowe użycie semantycznych znaczników HTML ma kluczowe znaczenie dla dostępności i widoczności w wyszukiwarkach. Prawidłowe użycie znaczników strukturalnych:

  • ułatwia crawlerom wyszukiwarek (takim jak Googlebot) zrozumienie struktury strony,
  • poprawia czytelność treści dla użytkowników,
  • wpływa na widoczność w wynikach wyszukiwania,
  • zwiększa dostępność strony dla osób z niepełnosprawnościami.

Semantyczne elementy nadają treści logiczny porządek, wyznaczają granice między sekcjami i ułatwiają użytkownikom szybkie odnalezienie potrzebnych informacji.