Znaczniki tekstowe

Akapit

Znacznik <p> - uniwersalny pojemnik do grupowania małych elementów frazowych, oddzielania ich od siebie i dalszej stylizacji. Domyślnie akapit jest elementem blokowym, to znaczy, że on zaczyna się w nowej linii i ma dopełnienie pionowe, które można zmienić w CSS.

<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque eligendi, a
  eaque, esse itaque porro non exercitationem odio earum quos perferendis!
</p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, totam velit
  asperiores non temporibus ut nisi minima?
</p>

Często konieczne jest wypełnienie znacznika pustym tekstem, w przypadku, gdy sam tekst, który zostanie umieszczony w serwisie, nie będzie jeszcze dostępny. Aby to zrobić, używa się specjalnego symbolu zastępczego.

Pomocne

W edytorze VSCode, w dokumencie HTML można wpisać kod lorem10, następnie nacisnąć klawisz Tab. Stworzy to tablicę tekstową składającą się z 10 słów. Zamiast 10 można wpisać dowolną liczbę.

Nagłówki

Grupa znaczników<h1>...<h6> - definiuje nagłówki tekstowe sekcji semantycznych różnych poziomów, które wskazują znaczenie sekcji treści znajdującej się po nich. Jest to narzędzie do strukturyzacji treści tekstowych.

Znacznik <h1> jest najczęściej używany tylko raz, jako nagłówek strony głównej. Reszta nagłówków może być używana tyle razy, ile się chce, ale one zawsze powinny być używane poprawnie, zgodnie z hierarchią.

Pomocne

Wyszukiwarki zwracają szczególną uwagę na nagłówki, więc prawidłowe użycie tej grupy znaczników jest niezwykle ważne. Nie określajcie poziomu nagłówka na podstawie rozmiaru tekstu w układzie. Nie każdy duży tekst zawiera nagłówki. Nagłówek jest tym, co w znaczeniu jest nagłówkiem sekcji treści.

Listy

Listy pozwalają uporządkować kolekcje i zaprezentować je w sposób wizualny i wygodny dla użytkownika. Lista to kontener, którego elementami podrzędnymi mogą być tylko elementy listy, znaczniki <li>.

Znacznik <ol> - tworzy listę numerowaną (uporządkowaną), to znaczy każdy element listy jest numerowany. Przeglądarka automatycznie numeruje elementy w kolejności, a jeśli usunąć jeden lub więcej elementów takiej listy, pozostałe numery zostaną automatycznie przeliczone. Numerację elementów można kontrolować za pomocą specjalnych atrybutów listy.

Służy do wyświetlania działań w określonej kolejności, takich jak przepis.

<h1>Jak zaparzyć herbatę</h1>
<p>
  Szczegółowe instrukcje dla opornych, po prostu powtórz, a odniesiesz sukces!
</p>

<ol>
  <li>Zagotować wodę</li>
  <li>Wsypać herbatę do kubka</li>
  <li>Wlać wrzątek do kubka</li>
  <li>Czekać 10 minut, po czym można pić</li>
</ol>

Znacznik <ul> - tworzy listę wypunktowaną (nieuporządkowaną), której każdy element zaczyna się od małego znaku (punktora). Dzięki CSS punktor można usunąć lub zastąpić.

Służy do umieszczania zestawu w dowolnej kolejności, na przykład listy kurortów.

<h1>Najgorętsze kurorty</h1>
<p>Eksperci zalecają odwiedzenie w tym roku następujących lokalizacji.</p>

<ul>
  <li>Tunezja</li>
  <li>Turcja</li>
  <li>Grecja</li>
  <li>Egipt</li>
</ul>

Uwaga

Zgodnie ze specyfikacją w znacznikach <ul> i <ol> można zagnieżdżać tylko elementy listy - znaczniki <li>. Przy tym wewnątrz znaczników<li> mogą być zagnieżdżone inne dowolne znaczniki.

Listy zagnieżdżone

Tworzenie listy wielopoziomowej jest proste - umieszczamy jeszcze jedną listę w element listy. Jest to często używane do tworzenia menu wielopoziomowych.

<ul>
  <li>
    Komputery i akcesoria
    <ul>
      <li>Procesory</li>
      <li>Monitory</li>
      <li>Karty graficzne</li>
    </ul>
  </li>
  <li>
    Artykuły gospodarstwa domowego
    <ul>
      <li>Lodówki</li>
      <li>Telewizory</li>
      <li>Pralki</li>
    </ul>
  </li>
  <li>
    Sprzęty gospodarstwa domowego
    <ul>
      <li>Fotele</li>
      <li>Materace</li>
      <li>Kominki elektryczne</li>
    </ul>
  </li>
</ul>

Link

Znacznik <a> - służy do tworzenia linków, tekstu, po kliknięciu którego przechodzimy do innej strony, ściągamy plik itp. Tekst linku jest wyświetlany w przeglądarce z podkreśleniem, kolor czcionki jest niebieski, po najechaniu na link kursor myszy zmienia widok.

Adres linku jest określony w wymaganym atrybuciehref="adres". Adres to URL, który może wskazywać stronę, plik, dowolny zasób.

<a href="https://google.com">Link do strony głównej Google</a>

Atrybuty target i rel

Domyślnie link otwiera się w bieżącej zakładce przeglądarki. Atrybut target="wartość" określa, w której zakładce ma zostać otwarty dokument, do którego prowadzi link. Jeśli wartość _blank, to strona otworzy się na nowej karcie przeglądarki.

Atrybut rel uzupełnia atrybut href o informacje o relacji między bieżącym dokumentem a połączonym, i jest używany w połączeniu z atrybutem target="_blank".

<!-- Link do zasobu zewnętrznego otwiera się w bieżącej karcie -->
<a href="https://www.facebook.com/">Facebook</a>

<!-- Link do zasobu wewnętrznego otwiera się w nowej karcie -->
<a href="https://www.facebook.com/" target="_blank" rel="noreferrer noopener">
  Facebook
</a>

Atrybut download

Jeśli w href linku ścieżka do pliku jest określona, przeglądarka spróbuje go otworzyć w bieżącym oknie, jeśli potrafi przetwarzać pliki tego typu. Zwykle dzieje się tak w przypadku obrazków i plików PDF.

Atrybut download="nazwa pliku" informuje przeglądarkę, że określony zasób nie powinien być otwierany, ale ładowany w momencie kliknięcia linku przez użytkownika. Wartość atrybutu określa nazwę wczytywanego pliku, czyli można zmienić nazwę podczas pobierania. Atrybutu można użyć bez określania wartości, wtedy będzie użyta nazwa oryginalnego pliku.

<!-- Link do pobrania pliku -->
<a href="/ścieżka/к/cv.pdf" download>Pobierz CV</a>

Wartości specjalne href

Linki umożliwiają nie tylko przejście do innych stron i pobieranie plików, ale także wykonywanie połączeń telefonicznych, wysyłanie wiadomości czy wykonywanie połączeń przez Skype.

<!-- Link do numeru telefonu -->
<a href="tel:+14251234563">+1 (425) 123-45-63</a>

<!-- Link do adresu e-mail  -->
<a href="mailto:example@mail.ru">example@mail.ru</a>

Link do zakotwiczenia

Link do zakotwiczenia służy do tworzenia nawigacji na bieżącej stronie. Na przykład, aby szybko przejść do jakiejś sekcji (jak w tych materiałach). Po kliknięciu takiego linku przeglądarka przewinie stronę do zakotwiczenia, bez jej ponownego ładowania.

Aby utworzyć link do zakotwiczenia, trzeba dodać do znacznika, do którego chcemy przewinąć stronę, atrybut id - unikalny identyfikator. Natomiast atrybutowi href w linku ustawić wartość zaczynającą się od znaku #, po którym jest wskazany identyfikator elementu.

Przycisk

Element interaktywny, który ożywia się za pomocą JavaScript. Na przykład przycisk do otwierania i zamykania wyskakującego okienka, przełączania menu mobilnego lub przesyłania formularza. Musi być wyraźnie określony atrybut type. Jego wartość domyślna to - submit, ale najczęściej potrzebujemy wartości button. Tak, przycisk typu „przycisk”, taka osobliwość.

<button type="button">Otwórz okno modalne</button>

Pomocne

Ważne jest, aby nie mylić linku i przycisku. Jeśli po kliknięciu na element interfejsu przejdziesz do jakiegoś adresu, to znaczy znajduje się tam „href”, to jest link. Jeśli po kliknięciu coś się dzieje bez ponownego ładowania lub przekierowywania strony, to na pewno jest przycisk.

Atrybut lang

Jeśli strona zawiera tekst w różnych językach, aby zrobić go bardziej dostępnym dla technologii asystujących, można ustawić atrybut lang nie tylko dla całego dokumentu, ale także dla poszczególnych znaczników.

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="utf-8" />
    <meta name="description" content="Instrukcja obsługi ciasteczek" />
    <title>Ciasteczka są smaczne!</title>
  </head>
  <body>
    <p>Instrukcja obsługi</p>
    <p lang="en">Operating instructions</p>
    <p lang="fr">Manuel d'utilisation</p>
  </body>
</html>

Uwaga

To jest możliwość, zalecenie, a nie wymaganie. Układ zgodnie z pomocą technologii asystujących wykonywany jest tylko na życzenie klienta.