Meta i responsywność — HTML

Sekcja <head> przekazuje przeglądarce i wyszukiwarkom informacje o stronie.

Jak to działa?

Znacznik viewport pomaga poprawnie skalować stronę na telefonach. <meta name="description"> opisuje zawartość strony.

Przykład 1 — poznaj zapis

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Nauka HTML od podstaw">
  <title>Podstawy HTML</title>
</head>

To fragment dokumentu umieszczany w <html>.

Przeczytaj kod linijka po linijce

<head>Tworzymy nagłówek porządkujący treść strony.
<meta charset="utf-8">Ten znacznik określa element lub strukturę dokumentu.
<meta name="viewport" content="width=device-width, initial-scale=1">Ten znacznik określa element lub strukturę dokumentu.

Oczekiwany wynik / efektpo uruchomieniu przykładu

Metadane dokumentu; w body nie ma jeszcze treści do pokazania.

Ten przykład dotyczy metadanych dokumentu — nie pojawia się jako treść strony.

Przykład 2 — podobny problem, inne dane

Teraz przyjrzyj się drugiemu przykładowi. Zwróć uwagę na to, co zmieniło się w kodzie, a co w wyniku. Spróbuj przewidzieć rezultat przed przeczytaniem odpowiedzi.

<p>HTML &amp; CSS</p>

Wynik drugiego przykładupo uruchomieniu przykładu

Na stronie: HTML & CSS.

◉Podgląd w przeglądarceHTML/CSS — bez uruchamiania skryptów

Sprawdź, czy rozumiesz

Wróć do pierwszego przykładu, zmień jedną wartość i spróbuj samodzielnie przewidzieć wynik. Następnie uruchom kod i porównaj rezultat. W ten sposób nauczysz się nie tylko przepisywać instrukcje, ale rozumieć ich działanie.

Spróbuj samodzielnie

Uzupełnij opis i tytuł własnej strony.