Articles
Wprowadzenie do HTML
Tagi używane w sekcji head

Tagi używane w sekcji head

Ten artykuł wyjaśnia znaczniki używane w sekcji head.

Wyjaśnia tagi używane w sekcji head, takie jak <link>, <script>, <style>.

YouTube Video

Tagi używane w sekcji head

Tag <title> 

1<title>Document Title</title>
  • Znacznik <title> definiuje tytuł dokumentu. Ten tytuł jest wyświetlany w karcie przeglądarki i jest używany w zakładkach oraz wynikach wyszukiwania.

Tag <link>

  • Znacznik <link> służy do łączenia zewnętrznych zasobów z bieżącym dokumentem. Jest często używany do łączenia zewnętrznych plików CSS, ale może być również używany do ikon i innych zewnętrznych zasobów.

Atrybut rel w tagu <link>

Atrybut rel służy do określenia relacji między łączonym zasobem a bieżącym dokumentem w znaczniku <link>. Istnieje wiele typów wartości dla atrybutu rel, ale tutaj wyjaśnimy szczególnie ważne i często używane.

stylesheet 
1<link rel="stylesheet" href="styles.css">
  • stylesheet służy do łączenia zewnętrznego arkusza stylów.

icon 

1<link rel="icon" href="favicon.ico" type="image/x-icon">
  • rel="icon" definiuje ikonę wyświetlaną w karcie przeglądarki lub w zakładce. Poprzez określenie odpowiedniego favikonu, poprawia się branding i wizualna rozpoznawalność strony.

preload 

1<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin="anonymous">
  • preload służy do ładowania zasobów z wyprzedzeniem, zanim rozpocznie się renderowanie strony. Jest to szczególnie przydatne dla zasobów, w których czas ma znaczenie, takich jak czcionki lub duże obrazy. To poprawia wydajność i ulepsza doświadczenie użytkownika.

canonical 

1<link rel="canonical" href="https://example.com/page.html">
  • canonical służy do informowania wyszukiwarek o kanonicznej wersji strony. W przypadku zduplikowanej treści wskazanie kanonicznego URL pomaga skonsolidować ranking wyszukiwarki z perspektywy SEO i zapewnia poprawne indeksowanie treści.

alternate 

1<link rel="alternate" hreflang="en" href="https://example.com/en/">
  • alternate służy do wskazywania stron w różnych językach lub formatach wyszukiwarkom i przeglądarkom. Na stronach wielojęzycznych można określić URL dla każdej wersji językowej w połączeniu z atrybutem hreflang, aby dostarczyć użytkownikom strony w odpowiednim języku.

manifest 

1<link rel="manifest" href="/manifest.json">
  • manifest dostarcza przeglądarce plik manifestu zawierający informacje konfiguracyjne dla PWA (Progressive Web App). Ten plik zawiera informacje takie jak ikona aplikacji, kolor motywu i tryb wyświetlania, co pomaga w instalowaniu i uruchamianiu PWA na urządzeniach mobilnych.

dns-prefetch 

1<link rel="dns-prefetch" href="//example.com">
  • Podczas odwoływania się do zasobów zewnętrznych wcześniejsze wykonanie rozwiązywania nazw DNS domeny może poprawić szybkość ładowania strony. Jest to szczególnie skuteczne dla stron z wieloma zasobami zewnętrznymi lub tam, gdzie pożądane jest szybkie doświadczenie użytkownika.

Tag <style> 

1<style>
2  body {
3    font-family: Arial, sans-serif;
4  }
5</style>
  • Tag <style> służy do definiowania wewnętrznych arkuszy stylów. Służy do stosowania stylów CSS do elementów na stronie, umożliwiając pisanie CSS bez użycia plików zewnętrznych.

Tag <script> 

1<script>
2    console.log('Hello, World!');
3</script>
4<script src="script.js"></script>
  • Tag <script> służy do osadzania kodu JavaScript w dokumencie HTML. Można także łączyć zewnętrzne pliki JavaScript, kontrolując dynamiczne zachowanie strony. Użyj atrybutu src, aby określić plik skryptu.

Atrybuty async i defer

Tag <script> obsługuje dwa atrybuty, async i defer, które wpływają na czas ładowania i wykonywania skryptu. Zwykle skrypty są przetwarzane sekwencyjnie przez przeglądarkę, ale używanie tych atrybutów może poprawić wydajność strony i doświadczenie ładowania.

Atrybut async 
1<script src="script.js" async></script>
  • Używanie atrybutu async pozwala na asynchroniczne ładowanie skryptu. Przeglądarka ładuje skrypt równolegle z innymi zasobami i natychmiast go wykonuje po zakończeniu ładowania.
  • async jest głównie odpowiedni dla niezależnych skryptów i jest używany, gdy skrypt nie zależy od ładowania innych skryptów ani DOM.
Atrybut defer 
1<script src="script.js" defer></script>
  • Użycie atrybutu defer pozwala na asynchroniczne ładowanie skryptu, ale jego wykonywanie następuje po zakończeniu parsowania HTML. Wykonywanie skryptu nie blokuje wyświetlania strony, co poprawia doświadczenie użytkownika.
  • defer jest skuteczny, gdy skrypty muszą zostać wykonane po pełnym załadowaniu DOM. Na przykład nadaje się, gdy chcesz, aby skrypt uruchomił się po załadowaniu całego układu i elementów strony.

Polityka CORS i atrybut crossorigin

Podczas ładowania zewnętrznych skryptów mogą zostać nałożone ograniczenia bezpieczeństwa na podstawie zasady Same-Origin. W takich przypadkach można użyć atrybutu crossorigin, aby umożliwić współdzielenie zasobów.

1<script src="https://example.com/script.js" crossorigin="anonymous"></script>

Atrybut crossorigin można ustawić na jeden z dwóch następujących wartości:.

  • anonymous: Wysyła żądania bez uwzględnienia danych uwierzytelniających.
  • use-credentials: Wysyła żądania z uwzględnieniem danych uwierzytelniających.

Atrybut type

Tag <script> może używać atrybutu type, aby określić typ skryptu. Domyślnie używany jest JavaScript, ale można również określić inne typy skryptów (np. JavaScript modułowy lub język szablonów).

Moduły JavaScript 
1<script type="module" src="module.js"></script>

  • Od ECMAScript 2015 (ES6) wprowadzono moduły w JavaScript, co pozwala na podział kodu na moduły, zwiększając możliwość ponownego użycia. Określając type="module", możesz traktować skrypt jako moduł.

  • Moduły mogą być dzielone na inne moduły za pomocą import i export.

Skrypty inne niż JavaScript 
1<script type="application/ld+json">
2{
3  "@context": "https://schema.org",
4  "@type": "Organization",
5  "name": "Example Inc.",
6  "url": "https://www.example.com"
7}
8</script>
  • W tagu <script> można również określić skrypty inne niż JavaScript. Na przykład, użyj type="application/ld+json", opisując zorganizowane dane, takie jak JSON-LD. JSON-LD to format, który strukturyzuje dane na stronie internetowej, umożliwiając wyszukiwarkom i innym aplikacjom głębsze zrozumienie danych.

Uwagi dotyczące używania tagu <script>

  • Kolejność skryptów: Biblioteki, od których zależą skrypty, muszą być załadowane przed nimi. Na przykład, skrypty korzystające z jQuery muszą być załadowane po załadowaniu samego jQuery.
  • Optymalizacja wydajności: Aby uniknąć wpływu na prędkość ładowania strony, ładuj skrypty tylko wtedy, gdy to konieczne, i unikaj uruchamiania zbędnych skryptów.
  • Środki bezpieczeństwa: Przy używaniu zewnętrznych skryptów upewnij się, że są one ładowane z zaufanych źródeł, aby zapobiec osadzaniu złośliwych skryptów.

Tag <base> 

1<base href="https://example.com/">
  • Tag <base> ustawia bazowy URL dla wszystkich względnych URL-i w dokumencie. URL podany w atrybucie href staje się bazą dla względnych ścieżek w linkach i obrazach. Zazwyczaj jest używany tylko raz na stronę.

Tag <noscript> 

1<noscript>Your browser does not support JavaScript!</noscript>
  • Tag <noscript> definiuje treść, która jest wyświetlana, gdy JavaScript jest wyłączony w przeglądarce. Służy do zapewnienia alternatywnej treści w środowiskach, które nie obsługują JavaScriptu.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video

Walidacja formularzaTagi związane z meta-informacjami