Dokumentacja HTML z przykładami: Znaczniki HTML

Q: Czym różni się znacznik HTML od elementu HTML?

Znacznik to kod, który wpisujesz, na przykład albo . Element to całość, którą przeglądarka z niego buduje: znacznik otwierający, jego atrybuty, treść i znacznik zamykający. Hi to dwa znaczniki, które tworzą jeden element p.

Q: Czy w znacznikach HTML liczy się wielkość liter?

Nie. i dają ten sam element, podobnie jak każda mieszanka wielkich i małych liter. Standardowym stylem są małe litery i to one pojawiają się w wyniku większości formaterów.

Czym jest znacznik HTML

Znacznik HTML to nazwa w nawiasach ostrych, która oznacza fragment treści. Większość znaczników występuje w parach: znacznik otwierający, na przykład <p>, i znacznik zamykający z ukośnikiem, na przykład </p>. Wszystko pomiędzy nimi to treść, a cały pakiet to element.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Tags</title>
</head>
<body>
  <h1>A heading</h1>
  <p>A paragraph with a <strong>strong</strong> word and a <a href="#end">link</a>.</p>
  <ul>
    <li>A list item</li>
    <li>Another list item</li>
  </ul>
  <p id="end">The browser draws each element in its own way.</p>
</body>
</html>

Zmień <h1> na <h2> (zarówno znacznik otwierający, jak i zamykający), a nagłówek się zmniejszy. To nazwa znacznika mówi przeglądarce, czym jest treść.

Anatomia: znaczniki, atrybuty i elementy

<a href="/docs/html/links" class="nav">Links</a>

Część	W przykładzie
Znacznik otwierający	`<a href="/docs/html/links" class="nav">`
Nazwa znacznika	`a`
Atrybuty	`href="/docs/html/links"` i `class="nav"`
Treść	`Links`
Znacznik zamykający	`</a>`
Element	wszystko powyższe razem

Atrybuty zawsze trafiają do znacznika otwierającego, nigdy do zamykającego. Opisuje je strona o atrybutach.

W nazwach znaczników wielkość liter nie ma znaczenia: <P> i <p> to to samo. Pisz je małymi literami.

Znaczniki puste: bez znacznika zamykającego

Niektóre elementy nie mogą niczego zawierać, więc mają tylko znacznik otwierający. Nazywa się je elementami pustymi (void elements; mówi się też o znacznikach samozamykających się):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Void tags</title>
</head>
<body>
  <p>Line one<br>Line two after a br</p>
  <hr>
  <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40'%3E%3Crect width='120' height='40' rx='6' fill='%232563eb'/%3E%3C/svg%3E" alt="A blue rectangle">
  <p><input type="text" placeholder="An input"></p>
</body>
</html>

Pełna lista: area, base, br, col, embed, hr, img, input, link, meta, source, track, wbr.

Możesz je zapisać jako <br /> z ukośnikiem. W HTML ukośnik nic nie robi; jest dozwolony, żeby kod w stylu XHTML dalej działał. Ukośnik w zwykłym znaczniku, jak <div />, też jest ignorowany, co oznacza, że div nadal jest otwarty.

Zagnieżdżanie znaczników

Elementy umieszcza się w innych elementach. Zasada brzmi: zamykaj znaczniki w odwrotnej kolejności niż je otwierasz. Ostatni otwarty zamyka się jako pierwszy.

<p>This is <strong>very <em>important</em></strong>.</p>   <!-- correct -->
<p>This is <strong>very <em>important</strong></em>.</p>   <!-- wrong -->

Przeglądarki nie odrzucają błędnego zagnieżdżenia. Naprawiają je, a naprawa nie zawsze jest tym, o co chodziło. Ten przykład przekazuje parserowi przeglądarki dwa źle zagnieżdżone fragmenty i wypisuje strukturę, którą faktycznie zbudował:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nesting</title>
  <style>
    pre { background: #e5e7eb; padding: 8px; white-space: pre-wrap; }
  </style>
</head>
<body>
  <pre id="out"></pre>
  <script>
    const snippets = [
      '<p>Bold <b>and <i>italic</b> overlap</i>.</p>',
      '<p>A paragraph <div>with a div inside</div></p>'
    ];
    const box = document.createElement('div');
    document.getElementById('out').textContent = snippets.map((html) => {
      box.innerHTML = html;
      return 'You wrote:     ' + html + '\nBrowser built: ' + box.innerHTML;
    }).join('\n\n');
  </script>
</body>
</html>

Zachodzą dwie naprawy. Nakładające się <b> i <i> zostają podzielone na dodatkowe elementy. A <p> nie może zawierać <div>, więc przeglądarka zamyka akapit przed divem, a zbłąkany </p> zamienia w nowy, pusty akapit. Gdy CSS albo JavaScript zachowują się dziwnie, błędne zagnieżdżenie to jedna z pierwszych rzeczy do sprawdzenia.

Elementy blokowe i inline

Większość znaczników należy do jednej z dwóch grup wyświetlania. Elementy blokowe (div, p, od h1 do h6, ul, section) zaczynają się w nowej linii i zajmują pełną szerokość. Elementy inline (span, a, strong, em, code) stoją w linii tekstu i są tak szerokie jak ich treść.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Block and inline</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    div, p { border: 2px solid #2563eb; }
    span, a, strong { border: 2px solid #f59e0b; }
  </style>
</head>
<body>
  <div>div is block</div>
  <p>p is block, with <span>a span</span>, <a href="#">a link</a> and <strong>strong</strong> inline.</p>
</body>
</html>

Niebieskie pola rozciągają się na całą szerokość strony; bursztynowe obejmują tylko swój tekst. CSS może to zmienić właściwością display, ale każdy znacznik zaczyna od swojej wartości domyślnej. Zobacz div i span, dwa ogólne kontenery.

Najczęściej używane znaczniki HTML

Znacznik	Przeznaczenie
`<html>`, `<head>`, `<body>`	Szkielet dokumentu
`<title>`, `<meta>`, `<link>`	Informacje o stronie w head
Od `<h1>` do `<h6>`	Nagłówki
`<p>`	Akapit
`<a>`	Link
`<img>`	Obrazek
`<ul>`, `<ol>`, `<li>`	Listy
`<strong>`, `<em>`	Tekst ważny i akcentowany
`<br>`, `<hr>`	Nowa linia, podział tematyczny
`<div>`, `<span>`	Ogólne kontenery blokowy i inline
`<table>`, `<tr>`, `<th>`, `<td>`	Tabele
`<form>`, `<input>`, `<label>`, `<button>`	Formularze
`<header>`, `<nav>`, `<main>`, `<footer>`, `<section>`, `<article>`	Struktura strony ze znaczeniem

Listę na jedną stronę do wydrukowania znajdziesz w ściągawce HTML.

Znaczniki, które nie istnieją

Jeśli wpiszesz znacznik, którego przeglądarka nie zna, nie będzie błędu. Utworzy nieznany element, pokaże jego treść i potraktuje go jak element inline:

<p>Before <card style="border: 2px solid #16a34a; padding: 2px 6px">an unknown tag</card> after.</p>
<p>A custom element: <user-badge style="background: #e5e7eb; padding: 2px 6px">user-badge</user-badge></p>

Nieznany znacznik nie ma znaczenia dla wyszukiwarek ani czytników ekranu, więc wybieraj prawdziwe znaczniki. Jeśli budujesz własny komponent w JavaScript, nadaj mu nazwę z łącznikiem (user-badge): nazwy z łącznikiem są zarezerwowane dla własnych elementów i nigdy nie kolidują z przyszłymi znacznikami HTML.

Częste błędy

Brak znacznika zamykającego. Brakujący </a> albo </strong> zamienia resztę strony w link albo pogrubiony tekst. Przeglądarki zamykają niektóre znaczniki za ciebie (</p>, </li>), ale nie te.
Zamykanie znacznika pustego. </br> i </img> są niepoprawne. Przeglądarki czytają nawet </br> jako otwierające <br>, więc <br></br> daje dwie nowe linie.
Nakładające się znaczniki. Zamykaj w odwrotnej kolejności: <b><i>x</i></b>, nigdy <b><i>x</b></i>.
Blok wewnątrz akapitu. <div>, lista albo nagłówek w <p> wcześniej kończą akapit. Użyj <div> jako zewnętrznego kontenera.
Wybieranie znaczników dla wyglądu. Użyj <h2>, bo to nagłówek, a nie dlatego, że jest duży. Rozmiar i grubość należą do CSS.

Najczęściej zadawane pytania

Czym różni się znacznik HTML od elementu HTML?

Znacznik to kod, który wpisujesz, na przykład <p> albo </p>. Element to całość, którą przeglądarka z niego buduje: znacznik otwierający, jego atrybuty, treść i znacznik zamykający. <p>Hi</p> to dwa znaczniki, które tworzą jeden element p.

Które znaczniki HTML nie potrzebują znacznika zamykającego?

Elementy puste (void) nie mogą mieć treści, więc nie mają znacznika zamykającego: <br>, <hr>, <img>, <input>, <meta>, <link>, <source>, <track>, <wbr>, <area>, <base>, <col> i <embed>.

Pisać <br> czy <br />?

Oba zapisy to poprawny HTML. Ukośnik na końcu jest dozwolony w elementach pustych i przeglądarka go ignoruje. W znaczniku niepustym, takim jak <div />, ukośnik też jest ignorowany, więc div pozostaje otwarty aż do </div>.

Czy w znacznikach HTML liczy się wielkość liter?

Nie. <P> i <p> dają ten sam element, podobnie jak każda mieszanka wielkich i małych liter. Standardowym stylem są małe litery i to one pojawiają się w wyniku większości formaterów.

Ile jest znaczników HTML?

Obecny standard HTML definiuje ponad 100 elementów, ale codzienne strony używają około 20 do 30 z nich: nagłówków, akapitów, linków, obrazków, list, div, span, formularzy i semantycznych znaczników układu.

Co się stanie, jeśli użyję znacznika, który nie istnieje?

Przeglądarka i tak utworzy dla niego element, wyświetli jego treść i potraktuje go jak element inline bez szczególnego znaczenia. Własne elementy są dozwolone, jeśli nazwa zawiera łącznik, na przykład <user-card>.

Powiązane zagadnienia