W tym wpisie wytłumaczę dlaczego żadna strona internetowa nie powinna być pisana „z palca” od zupełnych podstaw oraz jakie są zalety korzystania z gotowego kodu Boilerplate. Skupimy się na stronach internetowych zgodnych z HTML5. Przyjrzymy się najpopularniejszej i nowoczesnej propozycji Boilerplate dla HTML5, która zaoszczędzi każdemu koderowi kilka minut podczas rozpoczynania nowego projektu.

Boilerplate w programowaniu to powtarzalny blok kodu w konkretnym języku, który pojawia się w każdym projekcie niezależnie od jego celu i przeznaczenia. HTML Boilerplate to (jak można się łatwo domyślić) pewnego rodzaju szablon HTML strony internetowej, który może być punktem wyjściowym do tworzenia właściwego kodu, który już w całości zależy od osoby, która koduje taki plik.

Z tego powodu, praktycznie żadna strona internetowa nie powstaje w stu procentach od zera. Tworzenie plików HTML całkowicie od zera nie ma najmniejszego sensu, bo byłaby to zupełna strata czasu. Profesjonalista przeznacza cały swój czas na kreatywne myślenie i poprawną implementację użytecznych i wartościowych rozwiązań. Używanie HTML Boilerplate wyrabia dobre nawyki i ma wiele innych zalet, którym poświęcono osobny akapit.

Przykład kodu Boilerplate dla strony HTML5

Każdy dokument HTML5 musi się rozpoczynać od deklaracji typu documentu. W HTML5 wygląda on tak:

<!doctype html>

Taki kod musi się pojawić w pierwszej linii poprawnego dokumentu HTML5. Informuje on przeglądarkę, że to co zamierza ona renderować jest faktycznie stroną zgodną z HTML i przeglądarka działa w trybie standardowym. Brak tego kodu spowoduje, że przeglądarka będzie działać w trybie zgodności (ang. Quirks Mode), co może spowodować nieoczekiwane i niepożądane efekty.

Następny znacznik to główny znacznik <html>z deklaracją języka dokumentu:

<html lang="pl-PL">

W kodzie strony umieszczamy pewne informacje, które nie są widoczne na stronie internetowej. To informacje o dokumencie nie będące jego treścią czyli metadane. Wszystkie te elementy zazwyczaj są umieszczone w sekcji head. Sekcja ta jest kontenerem dla takich elementów jak tytuł, opis, kodowanie znaków, style, skrypty, favicon, kolor przewodni motywu a także inne metadane:

<head>
   <meta charset="utf-8">
   <title></title>
   <meta name="description" content="">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="apple-touch-icon" href="icon.png">
   <link rel="stylesheet" href="css/main.css">
   <meta name="theme-color" content="#fafafa">
 </head>

W sekcji head opcjonalnie możemy umieścić inne tagi np. OpenGraph, lub tagi, dzięki którym usługi zewnętrzne mogą zweryfikować kto jest jej właścicielem.

Następny znacznik to <body>, który zawiera ciało dokumentu czyli zasadniczą treść strony internetowej.

<body>
<p>Hello world!</p>
<script src="js/main.js"></script>
</body>

Przed znacznikiem zamykającym body umieszczamy odniesienia do plików JavaScript a całość kończy znacznik zamykający </html>.

Kompletny Boilerplate może wyglądać tak:

<!doctype html>
<html lang="pl-PL">
<head>
   <meta charset="utf-8">
   <title></title>
   <meta name="description" content="">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="apple-touch-icon" href="icon.png">
   <link rel="stylesheet" href="css/main.css">
   <meta name="theme-color" content="#fafafa">
</head>
<body>
   <p>Hello world!</p>
   <script src="js/main.js"></script>
</body>
</html>

Dobre praktyki

Jak widać, w powyższym kodzie znajdują się odniesienia do nieistniejących plików. Warto zauważyć, że mają już nadane nazwy i są umieszczone w osobnych katalogach. Ten wydawałoby się drobny szczegół znacznie ułatwia pracę, zwalnia od podejmowania błahych decyzji co do tego jak nazwać folder czy plik ze stylami CSS i JS.

Pliki html5boilerplate

Istotą Boilerplate są także takie szczegóły, które standaryzują kod i powodują, że jesteśmy o te kilka kroków do przodu. Szybkie i namacalne efekty pracy nad stroną internetową zwiększają motywację i produktywność. Warto stworzyć puste pliki, które będą na nas już czekały kiedy zdecydujemy się napisać pierwsze linie stylów CSS lub skryptów JS.

Przykłady gotowych paczek z HTML Boilerplate

Popularną paczką startowego kodu HTML5 jest html5boilerplate. Paczka ta jest dobrym punktem startowym do tworzenia nowoczesnych stron i aplikacji internetowych. Paczka oprócz standardowego kodu HTML5 Boilerplate zawiera między innymi:

  • arkusz normalize.css, który powoduje, że renderowanie strony jest bardziej przewidywalne i spójne pomiędzy różnymi przeglądarkami,
  • skrypt modernizr, który ma za zadanie wykryć, które funkcje przeglądarek są niedostępne, dzięki temu ułatwia zastosować praktyki zgodne z progressive-enhancement,
  • plik robots.txt,
  • .htaccess z przydatnymi instrukcjami.

Zalety stosowania HTML Boilerplate

  • oszczędza czas,
  • zwiększa produktywność,
  • obniża prawdopodobieństwo popełnienia błędów,
  • zmniejsza ryzyko powielenia błędów lub przestarzałych praktyk,
  • wyrabia dobre nawyki,
  • standaryzuje kod i strukturę katalogów,
  • zwiększa wydajność i bezpieczeństwo strony za pomocą dopracowanych plików konfiguracyjnych (np. htaccess),
  • rokuje większą przyjazność dla SEO za pomocą utrzymania dobrych praktyk.

Podsumowanie

Temat kodu Boilerplate – tym bardziej w HTML może być z pozoru mało znaczący. Tak naprawdę, prezentowany Boilerplate znacznie ułatwia i przyspiesza tworzenie nowych projektów a w skrajnych przypadkach pomaga przezwyciężyć prokrastynację. Ten malutki kod powoduje, że projekt sam się rozpoczyna i wystarczy go teraz dokończyć 🙂 Posiadanie ulubionej paczki ze standardowym kodem HTML jest dużo lepszym rozwiązaniem niż szukanie w Internecie jakiegoś przypadkowego kodu, który powinien znaleźć się w nagłówku.

Dobrym pomysłem jest personalizacja i tworzenie własnych paczek z kodem Boilerplate. Przytoczoną paczkę html5boilerplate wyposażyłem w kod CSS Bootstrapa 5 i ukryty za pomocą komentarza plik do jego kodu JS. Usunąłem midernizr, bo go zwyczajnie nie używam oraz domyślny plik normalize.css, bo tego typu reguły są już zawarte w Bootstrapie. Taka paczka stanowi dla mnie punkt startowy do tworzenia nowych stron i konwersji projektów PSD, Figma, AdobeXD na postać strony internetowej.

Oceń artykuł na temat: HTML Boilerplate – co to jest i dlaczego warto używać?
Średnia : 4.8 , Maksymalnie : 5 , Głosów : 13