H1 w HTML - Jak używać poprawnie? SEO i dostępność

Miłosz Grabowski .

8 marca 2026

Programista pracuje nad kodem, na ekranie widać tekst i schemat blokowy. H1 html.

Nagłówek pierwszego poziomu porządkuje stronę, a przy okazji mówi użytkownikowi i robotom, jaki jest główny temat podstrony. W praktyce to jeden z tych elementów, które wyglądają banalnie, dopóki nie zaczną rozjeżdżać struktury treści, dostępności i SEO. Poniżej pokazuję, jak rozumiem rolę nagłówka h1 w HTML, kiedy warto trzymać się jednego głównego nagłówka, czym różni się od tytułu strony i jak uniknąć błędów, które najczęściej widzę w projektach.

Najkrócej mówiąc, dobrze ustawiony nagłówek porządkuje stronę i ułatwia jej odczyt

  • h1 powinien jasno mówić, o czym jest dana strona lub sekcja.
  • Najbezpieczniejszy układ to jeden wyraźny h1 i logicznie ułożone h2 oraz h3.
  • h1 nie służy do robienia dużego tekstu; od tego jest CSS.
  • Tytuł strony w i nagłówek w treści to dwa różne elementy.
  • Multiple h1 bywają poprawne semantycznie, ale w prostych projektach zwykle nie pomagają w czytelności.

Co oznacza element h1 w strukturze dokumentu

Element h1 to nagłówek najwyższego poziomu w danym kontekście. W praktyce oznacza to, że ma on opisywać główny temat strony albo główną część sekcji, a nie być kolejnym ozdobnikiem w layoucie. Przeglądarka wyświetli go jak blok, ale jego najważniejsza rola jest semantyczna: pomaga zrozumieć, co jest osią treści.

To rozróżnienie jest ważne, bo zbyt często widzę strony, na których h1 pełni funkcję dekoracyjną albo zastępuje logo, slogan czy krzykliwy claim marketingowy. Taki zabieg zwykle wygląda dobrze tylko na makiecie. Kiedy przychodzi do porządkowania treści, czytnik ekranu, edytor CMS i wyszukiwarka dostają sygnały, które nie zgadzają się z rzeczywistą treścią.

W specyfikacji HTML poziom nagłówka wynika z numeru w nazwie: h1 otwiera najwyższy poziom, h2 niższy, h3 jeszcze głębiej i tak dalej. Dzięki temu można budować przejrzystą strukturę bez zgadywania, które zdanie jest „najważniejsze” wizualnie. Gdy to jest jasne, dużo łatwiej zaplanować całą hierarchię nagłówków na stronie.

Kobieta wskazuje na nagłówki HTML: `<h1>` Co to jest domena internetowa i czym się różni od hostingu? `<h2>` Do czego jest potrzebna domena? Adres Twojej wirtualnej siedziby `<h3>` Zakup i rejestracja domeny oraz jej utrzymanie.

Jak ułożyć hierarchię nagłówków na stronie

W praktyce zaczynam od jednego, jednoznacznego h1, a dopiero potem rozbijam treść na sekcje h2. To podejście jest proste, czytelne i odporne na błędy zespołowe, bo każdy wie, gdzie kończy się temat główny, a gdzie zaczynają się wątki poboczne. Jeśli strona jest długa, h2 robią za rozdziały, a h3 za podpunkty, ale nie powinny być używane przypadkowo tylko dlatego, że „ładnie wyglądają”.

Najczęściej stosuję taki układ:

  • Strona główna - h1 opisuje ofertę lub główną obietnicę marki.
  • Artykuł blogowy - h1 jest tytułem tekstu, a h2 prowadzą przez kolejne argumenty.
  • Kategoria sklepu - h1 nazywa kategorię, a h2 mogą opisywać filtry, poradnik zakupowy lub sekcję z bestsellerami.
  • Strona usługi - h1 wskazuje konkretną usługę, a h2 rozwijają zakres, proces i korzyści.

Ważny wyjątek: formalnie HTML pozwala na więcej niż jeden h1, jeśli dokument jest zbudowany z osobnych sekcji. Ja traktuję to jako opcję dla świadomie zaprojektowanej struktury, a nie domyślny wybór. W prostym serwisie jeden wyraźny h1 zwykle daje lepszą czytelność niż kilka równorzędnych nagłówków, które konkurują ze sobą o uwagę.

Jeśli chcesz, by struktura była łatwa do skanowania, pilnuj jeszcze jednej rzeczy: nie przeskakuj poziomów bez powodu. H2 po h1 to naturalny krok, H3 powinien rozwijać konkretny fragment h2, a nie zastępować element, którego po prostu zabrakło. Z takiej logiki korzystają zarówno ludzie, jak i narzędzia wspomagające dostępność.

Kiedy ta hierarchia jest ustawiona poprawnie, warto porównać h1 z innymi elementami, które często mylą nawet doświadczone zespoły.

Różnice między h1, tytułem strony i headerem

Najwięcej nieporozumień widzę wokół trzech pojęć: nagłówka h1, tytułu dokumentu w i elementu

. Każdy z nich spełnia inną rolę, więc zamiana jednego na drugi zwykle kończy się chaosem, nawet jeśli wizualnie wszystko wygląda poprawnie.

Element Gdzie się pojawia Po co istnieje Jak go traktuję w praktyce
h1 W treści strony Opisuje główny temat widoczny dla użytkownika To najważniejszy nagłówek na stronie lub w sekcji
title W sekcji metadanych dokumentu Określa tytuł dokumentu, który widzi karta przeglądarki i wyniki wyszukiwania Traktuję go jako osobny komunikat, dopasowany do kliknięcia, a nie do samego układu strony
header W treści strony lub sekcji Grupuje elementy wstępne, np. logo, nav, h1, formularz albo krótkie wprowadzenie Używam go jako kontenera, nie jako nagłówka
hgroup W treści strony Łączy h1 z podtytułem lub tagline Przydaje się rzadziej, ale bywa wygodny przy tytułach z dopowiedzeniem

Najprostsza zasada brzmi tak: h1 mówi, o czym jest strona na ekranie, title mówi, jak strona ma się wyświetlić poza nią. Tytuł może być bardziej „sprzedażowy” albo krótszy, a h1 bardziej opisowy i zgodny z treścią. Z kolei header nie ma własnej hierarchii - to tylko pudełko na elementy wstępne, które pomagają czytać układ.

To rozróżnienie najlepiej widać na konkretnych przykładach, bo wtedy przestaje być teorią, a staje się narzędziem do pisania lepszych stron.

Przykłady, które najlepiej pokazują zastosowanie

Strona artykułu

W artykule blogowym h1 powinien być tytułem tekstu, a nie skrótem reklamowym. Jeśli piszę o optymalizacji strony, to nagłówek w stylu „Jak poprawić strukturę nagłówków w HTML” działa lepiej niż ogólnik typu „Lepsze efekty już dziś”. Pierwszy wariant od razu ustawia temat i pomaga czytelnikowi ocenić, czy to treść dla niego.


  

    
Jak poprawić strukturę nagłówków w HTML

    
Praktyczny przewodnik dla osób budujących strony i dbających o SEO.

  


  
Dlaczego hierarchia ma znaczenie

  
Jak uniknąć najczęstszych błędów

Sklep internetowy

Na stronie kategorii h1 najlepiej nazywa całą kategorię, np. „Buty trekkingowe męskie”. To lepsze niż zbyt szerokie „Obuwie” albo upchany slogan sprzedażowy, bo użytkownik od razu wie, gdzie jest i co przegląda. W e-commerce precyzja w nagłówku ma realne znaczenie, bo skraca drogę do filtra, produktu i decyzji zakupowej.

Przeczytaj również: Etykiety formularzy () - Jak tworzyć użyteczne formularze?

Strona usługowa

W przypadku usług h1 powinien mówić o konkretnej usłudze, np. „Projektowanie sklepów internetowych” albo „Audyt SEO dla małych firm”. Taki nagłówek daje spójność między reklamą, treścią i intencją użytkownika, a to często ważniejsze niż sama ozdobność layoutu. Gdy ten schemat działa, najczęściej psują go te same, powtarzalne błędy.

Najczęstsze błędy, które psują czytelność i SEO

Najgroźniejszy błąd to używanie h1 jak dekoracji. Jeśli nagłówek jest wielki, efektowny i świetnie wygląda w hero, ale nie mówi nic o temacie strony, to z semantyką nie ma już wiele wspólnego. Drugi częsty problem to zbyt ogólny h1, który nie odróżnia jednej podstrony od drugiej.

  • H1 opisuje markę zamiast treści - na stronie artykułu lepiej użyć tytułu tekstu niż nazwy firmy.
  • H1 jest zbyt długi - kilka zdań w jednym nagłówku męczy czytelnika i rozmywa komunikat.
  • H1 służy tylko do wielkości tekstu - semantyka zostaje wtedy poświęcona na rzecz wyglądu.
  • Brakuje logicznej kolejności - h3 bez h2 albo kilka przypadkowych nagłówków robi bałagan w strukturze.
  • Ten sam nagłówek występuje wszędzie - to częsty problem w szablonach, które kopią tę samą treść na wielu podstronach.

Nie przesadzam też z wpychaniem słów kluczowych do nagłówka. Jedno precyzyjne sformułowanie zwykle działa lepiej niż sztuczny ciąg fraz, który brzmi jak SEO z dawnej epoki. Dla użytkownika liczy się przede wszystkim jasność, a dopiero później optymalizacja pod wyszukiwarkę.

Na koniec zostaje jeszcze warstwa wizualna, bo nawet dobrze napisany h1 da się zepsuć złym CSS-em i chaotyczną prezentacją na mobile.

Jak dopracować wygląd i sprawdzić stronę przed publikacją

Nie używam h1 po to, żeby „zrobić duży tekst”. Najpierw dbam o semantykę, a dopiero potem ustawiam wygląd w CSS. To ważne, bo domyślne style przeglądarek różnią się między projektami, a zresetowany arkusz stylów potrafi całkiem zmienić proporcje nagłówków.

h1 {
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.1;
  margin: 0 0 0.75rem;
  max-width: 18ch;
}

Taki zapis robi dwie praktyczne rzeczy. Po pierwsze, pozwala h1 dobrze skalować się na różnych ekranach bez łamania układu. Po drugie, ograniczenie szerokości pomaga utrzymać nagłówek w czytelnym rytmie, zwłaszcza gdy tytuł jest dłuższy i trzeba go obejrzeć na telefonie.

Przed publikacją sprawdzam jeszcze kilka rzeczy:

  • czy na stronie jest jeden wyraźny główny temat;
  • czy h1 nie konkuruje z logo, sliderem albo hasłem reklamowym;
  • czy h2 prowadzą po treści w logicznej kolejności;
  • czy tytuł w jest spójny z h1, ale nie musi być identyczny;
  • czy nagłówki są czytelne także bez kolorów, obrazów i efektów wizualnych.

Jeśli po takiej kontroli nagłówki nadal wydają się chaotyczne, zwykle problem leży nie w samym h1, tylko w zbyt słabo zaplanowanej strukturze treści. I właśnie dlatego lubię zaczynać projekt od hierarchii, a nie od kolorów czy fontów.

FAQ - Najczęstsze pytania

H1 to nagłówek najwyższego poziomu, opisujący główny temat strony lub sekcji. Jest kluczowy dla semantyki treści i pomaga zarówno użytkownikom, jak i wyszukiwarkom zrozumieć, o czym jest dana podstrona.
Najbezpieczniej i najczytelniej jest stosować jeden wyraźny nagłówek H1 na stronę. Chociaż HTML dopuszcza wiele H1 w złożonych strukturach, w prostych projektach jeden H1 zapewnia lepszą klarowność i spójność.
H1 to nagłówek widoczny w treści strony, opisujący jej główny temat. Tag to tytuł dokumentu, wyświetlany w karcie przeglądarki i wynikach wyszukiwania. <title> może być bardziej "sprzedażowy", H1 bardziej opisowy.</div> </div> </div><div class="group relative mb-4 border-b border-[#8B7556]/20 dark:border-slate-700 pb-3" data-faq-item> <button type="button" data-faq-toggle aria-expanded="false" class="inline-flex w-full justify-between uppercase-text items-center gap-4 rounded-t text-left text-base lg:text-xl"> <span class="dark:text-white">Jakie są najczęstsze błędy przy używaniu H1?</span> <span class="text-2xl transition-transform" data-faq-icon>+</span> </button> <div class="overflow-hidden transition-[max-height] duration-300 ease-out max-h-0" data-faq-content> <div class="pt-3 text-sm lg:text-base text-gray-600 dark:text-slate-300">Częste błędy to używanie H1 jako dekoracji (zamiast semantycznego znaczenia), zbyt ogólny lub długi tekst, brak logicznej hierarchii nagłówków (np. H3 bez H2) oraz ten sam H1 na wielu podstronach.</div> </div> </div><div class="group relative mb-4 border-b border-[#8B7556]/20 dark:border-slate-700 pb-3" data-faq-item> <button type="button" data-faq-toggle aria-expanded="false" class="inline-flex w-full justify-between uppercase-text items-center gap-4 rounded-t text-left text-base lg:text-xl"> <span class="dark:text-white">Czy H1 wpływa na SEO?</span> <span class="text-2xl transition-transform" data-faq-icon>+</span> </button> <div class="overflow-hidden transition-[max-height] duration-300 ease-out max-h-0" data-faq-content> <div class="pt-3 text-sm lg:text-base text-gray-600 dark:text-slate-300">Tak, H1 ma znaczenie dla SEO. Pomaga wyszukiwarkom zrozumieć kontekst i główny temat strony. Dobrze zoptymalizowany H1, zawierający kluczowe frazy, może poprawić widoczność strony w wynikach wyszukiwania.</div> </div> </div> </section> <script>(()=>{var a=(s,i,o)=>{let r=async()=>{await(await s())()},t=typeof i.value=="object"?i.value:void 0,c={rootMargin:t==null?void 0:t.rootMargin},n=new IntersectionObserver(e=>{for(let l of e)if(l.isIntersecting){n.disconnect(),r();break}},c);for(let e of o.children)n.observe(e)};(self.Astro||(self.Astro={})).visible=a;window.dispatchEvent(new Event("astro:visible"));})();</script><astro-island uid="ZPEPiz" prefix="r18" component-url="/_astro/Rating.CzVa5Rgg.js" component-export="default" renderer-url="/_astro/client.0yjHk_dc.js" props="{"host":[0,"garmax.pl"],"slug":[0,"h1-w-html-jak-uzywac-poprawnie-seo-i-dostepnosc"],"type":[0,"post"],"initialAvg":[0,0],"initialCount":[0,0],"colour":[0,"cyan"]}" ssr client="visible" opts="{"name":"Rating","value":true}" await-children><section class="mt-14 pt-10 border-t border-gray-200 dark:border-slate-700"><div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4"><div><div class="text-lg font-semibold dark:text-slate-200 mb-1">Oceń artykuł</div><p class="text-sm text-gray-500 dark:text-slate-400">Średnia<!-- -->:<!-- --> <strong class="dark:text-slate-200">0.0</strong> / 5<!-- --> · <!-- -->0<!-- --> <!-- -->ocen</p></div><div class="flex items-center gap-0.5"><button type="button" aria-label="1 stars" class="p-0.5 transition-transform hover:scale-110 cursor-pointer"><img src="/_astro/fill_star.jXrMNHLT.svg" width="25" height="25" alt="" loading="lazy"/></button><button type="button" aria-label="2 stars" class="p-0.5 transition-transform hover:scale-110 cursor-pointer"><img src="/_astro/fill_star.jXrMNHLT.svg" width="25" height="25" alt="" loading="lazy"/></button><button type="button" aria-label="3 stars" class="p-0.5 transition-transform hover:scale-110 cursor-pointer"><img src="/_astro/fill_star.jXrMNHLT.svg" width="25" height="25" alt="" loading="lazy"/></button><button type="button" aria-label="4 stars" class="p-0.5 transition-transform hover:scale-110 cursor-pointer"><img src="/_astro/fill_star.jXrMNHLT.svg" width="25" height="25" alt="" loading="lazy"/></button><button type="button" aria-label="5 stars" class="p-0.5 transition-transform hover:scale-110 cursor-pointer"><img src="/_astro/fill_star.jXrMNHLT.svg" width="25" height="25" alt="" loading="lazy"/></button></div></div></section><!--astro:end--></astro-island> <div class="mt-12 flex flex-col rounded-2xl border border-gray-300 dark:border-slate-700 p-6 lg:mt-8"> <p class="uppercase-text text-xl dark:text-white">Tagi</p> <div class="mt-4 flex flex-wrap gap-2"> <span class="rounded-full border border-gray-300 bg-gray-100 px-4 py-1.5 text-sm dark:border-slate-600 dark:bg-slate-800 dark:text-slate-200"> h1 html </span><span class="rounded-full border border-gray-300 bg-gray-100 px-4 py-1.5 text-sm dark:border-slate-600 dark:bg-slate-800 dark:text-slate-200"> nagłówek h1 w html </span><span class="rounded-full border border-gray-300 bg-gray-100 px-4 py-1.5 text-sm dark:border-slate-600 dark:bg-slate-800 dark:text-slate-200"> rola nagłówka h1 w seo </span><span class="rounded-full border border-gray-300 bg-gray-100 px-4 py-1.5 text-sm dark:border-slate-600 dark:bg-slate-800 dark:text-slate-200"> jak używać nagłówka h1 </span><span class="rounded-full border border-gray-300 bg-gray-100 px-4 py-1.5 text-sm dark:border-slate-600 dark:bg-slate-800 dark:text-slate-200"> błędy w nagłówkach h1 </span> </div> </div> <div class="bg-light-cyan mt-10 flex w-full flex-col items-center gap-6 p-6 lg:flex-row lg:items-start lg:gap-12 lg:p-16" data-author-info> <a href="/autorzy/milosz-grabowski"> <figure class="relative h-[100px] w-[100px] lg:h-[148px] lg:w-[148px]"> <img src="https://imageoptimizecdn-blog.online/unsafe/rs:fill:300:300/q:80/plain/https%3A%2F%2Ffrce8xp4ye4n.compat.objectstorage.eu-frankfurt-1.oraclecloud.com%2Fblog-assets%2Favatar%2Favatar-16461-k5oheYQ9uZ%2F62c7236be8573715186fffb78e2121c8.webp" alt="Autor Miłosz Grabowski" width="148" height="148" class="rounded-full h-full w-full object-cover shadow-md shadow-gray-300 dark:shadow-slate-700"> </figure> </a> <div class="flex flex-col gap-2"> <a href="/autorzy/milosz-grabowski" class="uppercase-text text-center text-xl lg:text-left lg:text-[28px] dark:text-white"> Miłosz Grabowski </a> <div class="text-center font-sans text-sm text-[#575756] dark:text-slate-300 lg:text-left lg:text-base line-clamp-4 cursor-pointer" data-author-bio>Nazywam się Miłosz Grabowski i od 11 lat zajmuję się tworzeniem stron internetowych, e-commerce oraz optymalizacją SEO. Moja przygoda z tymi tematami zaczęła się z pasji do technologii i chęci pomagania innym w budowaniu ich obecności w sieci. Lubię dzielić się wiedzą na temat skutecznych strategii marketingowych oraz technik, które pozwalają na zwiększenie widoczności w internecie. W mojej pracy staram się zawsze dostarczać rzetelne, zrozumiałe i aktualne informacje. Dokładnie sprawdzam źródła, porównuję różne podejścia i upraszczam złożone zagadnienia, aby każdy mógł łatwo zrozumieć, jak skutecznie wykorzystać potencjał swojego biznesu online. Śledzę najnowsze trendy w branży, co pozwala mi na bieżąco dostosowywać moje podejście do zmieniającego się rynku.</div> </div> </div> <astro-island uid="Z1khS7T" prefix="r19" component-url="/_astro/Comments.DalFATTo.js" component-export="default" renderer-url="/_astro/client.0yjHk_dc.js" props="{"host":[0,"garmax.pl"],"slug":[0,"h1-w-html-jak-uzywac-poprawnie-seo-i-dostepnosc"],"type":[0,"post"],"initialComments":[1,[]],"colour":[0,"cyan"]}" ssr client="visible" opts="{"name":"Comments","value":true}" await-children><section class="mt-14 pt-10 border-t border-gray-200 dark:border-slate-700"><header class="flex items-center gap-3 mb-8"><svg width="22" height="22" aria-hidden="true" class="text-gray-400"><use href="#i-message-square"></use></svg><div class="text-2xl font-bold dark:text-slate-200">Komentarze<!-- --> (<!-- -->0<!-- -->)</div></header><form class="rounded-2xl border border-gray-200 dark:border-slate-700 p-5 lg:p-6 bg-white dark:bg-slate-800/30"><div class="text-lg font-semibold mb-4 dark:text-slate-200">Dodaj komentarz</div><div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4"><div><label class="text-sm font-medium text-gray-700 dark:text-slate-300 flex items-center gap-1.5 mb-1.5"><svg width="14" height="14" aria-hidden="true"><use href="#i-user"></use></svg>Nazwa</label><input type="text" class="w-full rounded-lg border px-3 py-2.5 text-sm bg-white dark:bg-slate-900/50 dark:text-slate-200 focus:outline-none focus:ring-2 border-gray-200 dark:border-slate-600 focus:ring-gray-400/20" value=""/></div><div><label class="text-sm font-medium text-gray-700 dark:text-slate-300 flex items-center gap-1.5 mb-1.5"><svg width="14" height="14" aria-hidden="true"><use href="#i-mail"></use></svg>Email</label><input type="email" class="w-full rounded-lg border px-3 py-2.5 text-sm bg-white dark:bg-slate-900/50 dark:text-slate-200 focus:outline-none focus:ring-2 border-gray-200 dark:border-slate-600 focus:ring-gray-400/20" value=""/></div></div><div class="mb-4"><label class="text-sm font-medium text-gray-700 dark:text-slate-300 mb-1.5 block">Komentarz</label><textarea rows="4" class="w-full resize-none rounded-lg border px-3 py-2.5 text-sm bg-white dark:bg-slate-900/50 dark:text-slate-200 focus:outline-none focus:ring-2 border-gray-200 dark:border-slate-600 focus:ring-gray-400/20"></textarea></div><button type="submit" class="w-full sm:w-auto px-6 py-2.5 rounded-lg text-sm font-semibold text-white bg-cyan hover:opacity-90 transition disabled:opacity-50">Wyślij wiadomość</button></form></section><!--astro:end--></astro-island> </div> <aside class="col-span-9 -top-24 2xl:top-2 max-h-fit sticky left-0 lg:col-span-3"> <div> <p class="uppercase-text text-gray-two dark:text-white text-2xl">Udostępnij artykuł</p> <div class="mt-6 flex gap-4"> <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fgarmax.pl%2Fh1-w-html-jak-uzywac-poprawnie-seo-i-dostepnosc" target="_blank" rel="noopener noreferrer nofollow" aria-label="Share on Facebook" class="rounded-lg text-black dark:text-white border border-gray-300 dark:border-slate-700 p-2 inline-flex items-center justify-center h-10 w-10"> <img src="/_astro/fb_three.BPeVOosF.svg" width="20" height="20" alt="facebook" class="h-5 w-5 object-contain dark:invert"> </a> <a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fgarmax.pl%2Fh1-w-html-jak-uzywac-poprawnie-seo-i-dostepnosc" target="_blank" rel="noopener noreferrer nofollow" aria-label="Share on X" class="rounded-lg text-black dark:text-white border border-gray-300 dark:border-slate-700 p-2 inline-flex items-center justify-center h-10 w-10"> <img src="/_astro/pint_three.CRAMTuqn.svg" width="20" height="20" alt="x" class="h-5 w-5 object-contain dark:invert"> </a> <a href="https://pinterest.com/pin/create/button/?url=https%3A%2F%2Fgarmax.pl%2Fh1-w-html-jak-uzywac-poprawnie-seo-i-dostepnosc" target="_blank" rel="noopener noreferrer nofollow" aria-label="Share on Pinterest" class="rounded-lg text-black dark:text-white border border-gray-300 dark:border-slate-700 p-2 inline-flex items-center justify-center h-10 w-10"> <img src="/_astro/x_three.BZFSKaMz.svg" width="20" height="20" alt="pinterest" class="h-5 w-5 object-contain dark:invert"> </a> <button type="button" data-copy-link="https://garmax.pl/h1-w-html-jak-uzywac-poprawnie-seo-i-dostepnosc" aria-label="Copy link" class="rounded-lg border border-gray-300 dark:border-slate-700 p-2 inline-flex items-center justify-center h-10 w-10"> <img src="/_astro/copy_three.DIwzzruL.svg" width="20" height="20" alt="link" class="h-5 w-5 object-contain dark:invert"> </button> </div> </div> <script data-astro-rerun="false"> if (!window.__shareCopyInit) { window.__shareCopyInit = true; document.addEventListener("click", (e) => { const btn = e.target?.closest?.("[data-copy-link]"); if (!btn) return; const url = btn.dataset.copyLink; if (!url || !navigator.clipboard) return; navigator.clipboard.writeText(url).catch(() => {}); }); } </script> <div class="mt-8 lg:mt-12"> <p class="uppercase-text text-gray-two dark:text-white text-2xl">Przeczytaj także z tej samej kategorii</p> <div class="mt-4 flex flex-col gap-8 lg:mt-8 lg:gap-4"> <article class="relative flex flex-col gap-4 border-b border-black/5 dark:border-white/5 pb-4 lg:flex-row"> <figure class="group relative h-44 w-full min-w-fit overflow-hidden rounded-2xl lg:h-28 lg:w-auto"> <img src="https://imageoptimizecdn-blog.online/unsafe/rs:fill:300:180/q:75/plain/https%3A%2F%2Ffrce8xp4ye4n.compat.objectstorage.eu-frankfurt-1.oraclecloud.com%2Fblog-assets%2Fthumbnail%2F35411cd92cdf2103bc9e01e1e2ccb5af%2Fhtml-ins-jak-poprawnie-oznaczac-dodany-tekst.webp" width="300" height="180" alt="Fragment kodu HTML z podstawową strukturą strony: <!DOCTYPE html>, <html>, <head> z <title> i <body> z zawartością." loading="lazy" class="h-full w-full rounded-2xl object-cover shadow-md shadow-gray-300 dark:shadow-slate-700 duration-300 group-hover:scale-110 lg:w-32"> <a href="/html-ins-jak-poprawnie-oznaczac-dodany-tekst" aria-label="HTML ins - Jak poprawnie oznaczać dodany tekst?" class="absolute left-0 top-0 h-full w-full rounded-2xl duration-300 group-hover:bg-black/40"></a> </figure> <div class="flex flex-col gap-2"> <a href="/html-ins-jak-poprawnie-oznaczac-dodany-tekst" aria-label="HTML ins - Jak poprawnie oznaczać dodany tekst?"> <h3 class="text-gray-two dark:text-slate-200 line-clamp-3 text-lg font-semibold hover-cyan"> HTML ins - Jak poprawnie oznaczać dodany tekst? </h3> </a> <div class="flex items-center gap-1.5 font-sans text-[#575756] dark:text-slate-300"> 10 marca 2026 </div> </div> </article><article class="relative flex flex-col gap-4 border-b border-black/5 dark:border-white/5 pb-4 lg:flex-row"> <figure class="group relative h-44 w-full min-w-fit overflow-hidden rounded-2xl lg:h-28 lg:w-auto"> <img src="https://imageoptimizecdn-blog.online/unsafe/rs:fill:300:180/q:75/plain/https%3A%2F%2Ffrce8xp4ye4n.compat.objectstorage.eu-frankfurt-1.oraclecloud.com%2Fblog-assets%2Fthumbnail%2F0c516f42af210308c819ae5229d991e6%2Fcheckbox-html-jak-dziala-atrybut-checked-uniknij-bledow.webp" width="300" height="180" alt="Dłoń trzyma kwadrat z zaznaczonym ptaszkiem. To znak, że input checkbox checked." loading="lazy" class="h-full w-full rounded-2xl object-cover shadow-md shadow-gray-300 dark:shadow-slate-700 duration-300 group-hover:scale-110 lg:w-32"> <a href="/checkbox-html-jak-dziala-atrybut-checked-uniknij-bledow" aria-label="Checkbox HTML - jak działa atrybut checked? Uniknij błędów!" class="absolute left-0 top-0 h-full w-full rounded-2xl duration-300 group-hover:bg-black/40"></a> </figure> <div class="flex flex-col gap-2"> <a href="/checkbox-html-jak-dziala-atrybut-checked-uniknij-bledow" aria-label="Checkbox HTML - jak działa atrybut checked? Uniknij błędów!"> <h3 class="text-gray-two dark:text-slate-200 line-clamp-3 text-lg font-semibold hover-cyan"> Checkbox HTML - jak działa atrybut checked? Uniknij błędów! </h3> </a> <div class="flex items-center gap-1.5 font-sans text-[#575756] dark:text-slate-300"> 10 marca 2026 </div> </div> </article><article class="relative flex flex-col gap-4 border-b border-black/5 dark:border-white/5 pb-4 lg:flex-row"> <figure class="group relative h-44 w-full min-w-fit overflow-hidden rounded-2xl lg:h-28 lg:w-auto"> <img src="https://imageoptimizecdn-blog.online/unsafe/rs:fill:300:180/q:75/plain/https%3A%2F%2Ffrce8xp4ye4n.compat.objectstorage.eu-frankfurt-1.oraclecloud.com%2Fblog-assets%2Fthumbnail%2Fe65511b017e4a6312923e62e6e6e7e9d%2Fjak-wysrodkowac-tekst-w-html-i-css-proste-metody.webp" width="300" height="180" alt="Kod CSS pokazuje, jak wyśrodkować tekst w HTML za pomocą flexbox i transformacji. Widoczny jest efekt na stronie." loading="lazy" class="h-full w-full rounded-2xl object-cover shadow-md shadow-gray-300 dark:shadow-slate-700 duration-300 group-hover:scale-110 lg:w-32"> <a href="/jak-wysrodkowac-tekst-w-html-i-css-proste-metody" aria-label="Jak wyśrodkować tekst w HTML i CSS? Proste metody!" class="absolute left-0 top-0 h-full w-full rounded-2xl duration-300 group-hover:bg-black/40"></a> </figure> <div class="flex flex-col gap-2"> <a href="/jak-wysrodkowac-tekst-w-html-i-css-proste-metody" aria-label="Jak wyśrodkować tekst w HTML i CSS? Proste metody!"> <h3 class="text-gray-two dark:text-slate-200 line-clamp-3 text-lg font-semibold hover-cyan"> Jak wyśrodkować tekst w HTML i CSS? Proste metody! </h3> </a> <div class="flex items-center gap-1.5 font-sans text-[#575756] dark:text-slate-300"> 12 marca 2026 </div> </div> </article><article class="relative flex flex-col gap-4 border-b border-black/5 dark:border-white/5 pb-4 lg:flex-row"> <figure class="group relative h-44 w-full min-w-fit overflow-hidden rounded-2xl lg:h-28 lg:w-auto"> <img src="https://imageoptimizecdn-blog.online/unsafe/rs:fill:300:180/q:75/plain/https%3A%2F%2Ffrce8xp4ye4n.compat.objectstorage.eu-frankfurt-1.oraclecloud.com%2Fblog-assets%2Fthumbnail%2Fa12d810025bc80fe885c05b1f88a5abd%2Fselektory-css-jak-pisac-lepsze-style-bez-chaosu.webp" width="300" height="180" alt="Kod HTML z listą sprzętu fotograficznego, gdzie selektory CSS będą stylizować elementy." loading="lazy" class="h-full w-full rounded-2xl object-cover shadow-md shadow-gray-300 dark:shadow-slate-700 duration-300 group-hover:scale-110 lg:w-32"> <a href="/selektory-css-jak-pisac-lepsze-style-bez-chaosu" aria-label="Selektory CSS - Jak pisać lepsze style bez chaosu?" class="absolute left-0 top-0 h-full w-full rounded-2xl duration-300 group-hover:bg-black/40"></a> </figure> <div class="flex flex-col gap-2"> <a href="/selektory-css-jak-pisac-lepsze-style-bez-chaosu" aria-label="Selektory CSS - Jak pisać lepsze style bez chaosu?"> <h3 class="text-gray-two dark:text-slate-200 line-clamp-3 text-lg font-semibold hover-cyan"> Selektory CSS - Jak pisać lepsze style bez chaosu? </h3> </a> <div class="flex items-center gap-1.5 font-sans text-[#575756] dark:text-slate-300"> 12 marca 2026 </div> </div> </article><article class="relative flex flex-col gap-4 border-b border-black/5 dark:border-white/5 pb-4 lg:flex-row"> <figure class="group relative h-44 w-full min-w-fit overflow-hidden rounded-2xl lg:h-28 lg:w-auto"> <img src="https://imageoptimizecdn-blog.online/unsafe/rs:fill:300:180/q:75/plain/https%3A%2F%2Ffrce8xp4ye4n.compat.objectstorage.eu-frankfurt-1.oraclecloud.com%2Fblog-assets%2Fthumbnail%2F2fae059b770b449148a9ef195a1c4e50%2Fsection-vs-div-kiedy-uzywac-by-kod-byl-jasny-i-semantyczny.webp" width="300" height="180" alt="Ikona kodu `< />` i tekst "Czym jest Div? Odkrywamy świat HTML-owych kontenerów" wyjaśniają różnicę między `section` a `div`." loading="lazy" class="h-full w-full rounded-2xl object-cover shadow-md shadow-gray-300 dark:shadow-slate-700 duration-300 group-hover:scale-110 lg:w-32"> <a href="/section-vs-div-kiedy-uzywac-by-kod-byl-jasny-i-semantyczny" aria-label="Section vs div - Kiedy używać, by kod był jasny i semantyczny?" class="absolute left-0 top-0 h-full w-full rounded-2xl duration-300 group-hover:bg-black/40"></a> </figure> <div class="flex flex-col gap-2"> <a href="/section-vs-div-kiedy-uzywac-by-kod-byl-jasny-i-semantyczny" aria-label="Section vs div - Kiedy używać, by kod był jasny i semantyczny?"> <h3 class="text-gray-two dark:text-slate-200 line-clamp-3 text-lg font-semibold hover-cyan"> Section vs div - Kiedy używać, by kod był jasny i semantyczny? </h3> </a> <div class="flex items-center gap-1.5 font-sans text-[#575756] dark:text-slate-300"> 13 marca 2026 </div> </div> </article><article class="relative flex flex-col gap-4 border-b border-black/5 dark:border-white/5 pb-4 lg:flex-row"> <figure class="group relative h-44 w-full min-w-fit overflow-hidden rounded-2xl lg:h-28 lg:w-auto"> <img src="https://imageoptimizecdn-blog.online/unsafe/rs:fill:300:180/q:75/plain/https%3A%2F%2Ffrce8xp4ye4n.compat.objectstorage.eu-frankfurt-1.oraclecloud.com%2Fblog-assets%2Fthumbnail%2F506c4ab73baa7dfcbf03ee8a8afadc49%2Fjavascript-push-jak-dodawac-elementy-do-tablicy-bez-bledow.webp" width="300" height="180" alt="Kod JavaScript tworzący obiekty `circle` i dodający je do listy `moleculeList`. Funkcja `addobject` pozwala na dynamiczne `push` nowych kół." loading="lazy" class="h-full w-full rounded-2xl object-cover shadow-md shadow-gray-300 dark:shadow-slate-700 duration-300 group-hover:scale-110 lg:w-32"> <a href="/javascript-push-jak-dodawac-elementy-do-tablicy-bez-bledow" aria-label="JavaScript push - Jak dodawać elementy do tablicy bez błędów?" class="absolute left-0 top-0 h-full w-full rounded-2xl duration-300 group-hover:bg-black/40"></a> </figure> <div class="flex flex-col gap-2"> <a href="/javascript-push-jak-dodawac-elementy-do-tablicy-bez-bledow" aria-label="JavaScript push - Jak dodawać elementy do tablicy bez błędów?"> <h3 class="text-gray-two dark:text-slate-200 line-clamp-3 text-lg font-semibold hover-cyan"> JavaScript push - Jak dodawać elementy do tablicy bez błędów? </h3> </a> <div class="flex items-center gap-1.5 font-sans text-[#575756] dark:text-slate-300"> 15 marca 2026 </div> </div> </article> </div> </div> </aside> </div> </article> <script data-astro-rerun="false"> if (!window.__faqThreeInit) { window.__faqThreeInit = true; document.addEventListener("click", (e) => { const t = e.target; if (!t || !t.closest) return; const toggle = t.closest("[data-faq-toggle]"); if (toggle) { const item = toggle.closest("[data-faq-item]"); const content = item?.querySelector("[data-faq-content]"); const icon = toggle.querySelector("[data-faq-icon]"); if (!content) return; const open = content.classList.toggle("max-h-0"); toggle.setAttribute("aria-expanded", String(!open)); if (icon) icon.textContent = open ? "+" : "−"; return; } const bio = t.closest("[data-author-bio]"); if (bio) bio.classList.toggle("line-clamp-none"); }); } </script> </main> <footer class="w-full bg-white dark:bg-slate-900 border-t border-slate-200 dark:border-slate-700 overflow-hidden mt-16"> <div class="standard-container-size-two py-8 md:py-16"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-x-4 gap-y-8"> <div class="space-y-6"> <a href="/" class="transform transition-transform hover:scale-105 inline-block"> <div class="h-[100px] w-[160px]"> <img src="https://imageoptimizecdn-blog.online/unsafe/rs:fit:320/q:100/plain/https%3A%2F%2Ffrce8xp4ye4n.compat.objectstorage.eu-frankfurt-1.oraclecloud.com%2Fblog-assets%2Flogo%2Fbrand-logo-3808-2u0BOz5Ds4%2Fcc73f689c1011d184d9373ad0ca07363.webp" width="160" height="60" alt="logo" loading="lazy" class="rounded-lg w-full h-full object-contain object-left"> </div> </a> <p class="mt-4 text-sm text-gray-600 dark:text-slate-300 leading-relaxed">Garmax.pl to portal poświęcony tworzeniu stron internetowych, e-commerce oraz SEO. Znajdziesz tu rzetelne informacje, porady oraz analizy, które pomogą w rozwijaniu Twojej obecności w sieci. Dowiedz się, jak skutecznie budować i optymalizować swoje projekty online.</p> <div class="space-y-4"> <ul class="mt-6 flex flex-col gap-3 text-sm dark:text-slate-300"> <li class="inline-flex items-center gap-2.5"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-map-pin size-4 shrink-0 text-gray-700 dark:text-white" aria-hidden="true"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"></path><circle cx="12" cy="10" r="3"></circle></svg> Warszawska 72/92, 15-063 Białystok </li> <li class="inline-flex items-center gap-2.5"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-phone size-4 shrink-0 text-gray-700 dark:text-white" aria-hidden="true"><path d="M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384"></path></svg> <a href="tel:011(+48) 062 572 142">(+48) 062 572 142</a> </li> <li class="inline-flex items-center gap-2.5"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail size-4 shrink-0 text-gray-700 dark:text-white" aria-hidden="true"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path><rect x="2" y="4" width="20" height="16" rx="2"></rect></svg> <a href="mailto:hello@garmax.pl">hello@garmax.pl</a> </li> </ul> </div> </div> <div class="space-y-4"> <a href="/najnowsze-artykuly" class="text-lg font-bold inline-block text-gray-900 dark:text-slate-100 hover:opacity-80 transition-opacity"> Artykuły </a> <ul class="space-y-3"> <li> <a href="https://garmax.pl/linki-w-seo-jak-je-rozumiec-i-wykorzystac" rel="nofollow noopener noreferrer" class="text-sm text-gray-600 dark:text-slate-300 hover:text-gray-900 dark:hover:text-slate-200 transition-colors"> Linki w SEO - Jak je rozumieć i wykorzystać? </a> </li><li> <a href="https://garmax.pl/bootstrap-co-to-kiedy-przyspiesza-prace-a-kiedy-ogranicza" rel="nofollow noopener noreferrer" class="text-sm text-gray-600 dark:text-slate-300 hover:text-gray-900 dark:hover:text-slate-200 transition-colors"> Bootstrap - co to? Kiedy przyspiesza pracę, a kiedy ogranicza? </a> </li><li> <a href="https://garmax.pl/kursywa-italic-oblique-jak-uzywac-ich-poprawnie-w-sieci" rel="nofollow noopener noreferrer" class="text-sm text-gray-600 dark:text-slate-300 hover:text-gray-900 dark:hover:text-slate-200 transition-colors"> Kursywa, italic, oblique - Jak używać ich poprawnie w sieci? </a> </li><li> <a href="https://garmax.pl/widocznosc-strony-w-google-jak-ja-zwiekszyc-i-mierzyc" rel="nofollow noopener noreferrer" class="text-sm text-gray-600 dark:text-slate-300 hover:text-gray-900 dark:hover:text-slate-200 transition-colors"> Widoczność strony w Google - Jak ją zwiększyć i mierzyć? </a> </li><li> <a href="https://garmax.pl/modal-popover-html-popup-co-wybrac-i-jak-zrobic" rel="nofollow noopener noreferrer" class="text-sm text-gray-600 dark:text-slate-300 hover:text-gray-900 dark:hover:text-slate-200 transition-colors"> Modal, popover, html popup - Co wybrać i jak zrobić? </a> </li><li> <a href="https://garmax.pl/adaptive-web-design-kiedy-warto-roznice-ux-bledy" rel="nofollow noopener noreferrer" class="text-sm text-gray-600 dark:text-slate-300 hover:text-gray-900 dark:hover:text-slate-200 transition-colors"> Adaptive Web Design - Kiedy warto? Różnice, UX, błędy </a> </li> </ul> </div> <div class="space-y-4"> <a href="/autorzy" class="text-lg font-bold inline-block text-gray-900 dark:text-slate-100 hover:opacity-80 transition-opacity"> Autorzy </a> <ul class="space-y-3"> <li> <a href="https://garmax.pl/autorzy/milosz-grabowski" class="text-sm text-gray-600 dark:text-slate-300 hover:text-gray-900 dark:hover:text-slate-200 transition-colors">Miłosz Grabowski</a> </li><li> <a href="https://garmax.pl/autorzy/wojciech-sokolowski" class="text-sm text-gray-600 dark:text-slate-300 hover:text-gray-900 dark:hover:text-slate-200 transition-colors">Wojciech Sokołowski</a> </li><li> <a href="https://garmax.pl/autorzy/oliwier-krol" class="text-sm text-gray-600 dark:text-slate-300 hover:text-gray-900 dark:hover:text-slate-200 transition-colors">Oliwier Król</a> </li> </ul> </div> <div class="space-y-4"> <a href="/kategorie" class="text-lg font-bold inline-block text-gray-900 dark:text-slate-100 hover:opacity-80 transition-opacity"> Kategorie </a> <ul class="space-y-3"> <li> <a href="https://garmax.pl/kategorie/programowanie-webowe" class="text-sm text-gray-600 dark:text-slate-300 hover:text-gray-900 dark:hover:text-slate-200 transition-colors">Programowanie webowe</a> </li><li> <a href="https://garmax.pl/kategorie/typografia-i-czcionki" class="text-sm text-gray-600 dark:text-slate-300 hover:text-gray-900 dark:hover:text-slate-200 transition-colors">Typografia i czcionki</a> </li><li> <a href="https://garmax.pl/kategorie/seo" class="text-sm text-gray-600 dark:text-slate-300 hover:text-gray-900 dark:hover:text-slate-200 transition-colors">SEO</a> </li><li> <a href="https://garmax.pl/kategorie/backend-i-api" class="text-sm text-gray-600 dark:text-slate-300 hover:text-gray-900 dark:hover:text-slate-200 transition-colors">Backend i API</a> </li><li> <a href="https://garmax.pl/kategorie/ux-i-ui" class="text-sm text-gray-600 dark:text-slate-300 hover:text-gray-900 dark:hover:text-slate-200 transition-colors">UX i UI</a> </li> </ul> </div> </div> <div class="mt-16 pt-6 border-t dark:border-slate-700"> <ul class="flex flex-wrap justify-center gap-6 text-xs text-gray-600 dark:text-slate-300 lg:justify-start"> <li class="hover:-translate-y-0.5 transition-transform"> <a rel="nofollow noopener noreferrer" href="/regulamin" class="hover:text-gray-900 dark:hover:text-slate-200 transition-colors"> Regulamin </a> </li><li class="hover:-translate-y-0.5 transition-transform"> <a rel="nofollow noopener noreferrer" href="/prawa-autorskie" class="hover:text-gray-900 dark:hover:text-slate-200 transition-colors"> Prawa autorskie </a> </li><li class="hover:-translate-y-0.5 transition-transform"> <a rel="nofollow noopener noreferrer" href="/polityka-prywatnosci" class="hover:text-gray-900 dark:hover:text-slate-200 transition-colors"> Polityka prywatności </a> </li><li class="hover:-translate-y-0.5 transition-transform"> <a rel="nofollow noopener noreferrer" href="/kontakt" class="hover:text-gray-900 dark:hover:text-slate-200 transition-colors"> Kontakt </a> </li> <li class="hover:-translate-y-0.5 transition-transform"> <a href="/polityka-rodo" class="hover:text-gray-900 dark:hover:text-slate-200 transition-colors">Polityka RODO</a> </li><li class="hover:-translate-y-0.5 transition-transform"> <a href="/polityka-redakcyjna" class="hover:text-gray-900 dark:hover:text-slate-200 transition-colors">Polityka Redakcyjna</a> </li><li class="hover:-translate-y-0.5 transition-transform"> <a href="/mapa-witryny" class="hover:text-gray-900 dark:hover:text-slate-200 transition-colors">Mapa witryny</a> </li> </ul> </div> </div> </footer> <astro-island uid="Z20P6tS" prefix="r13" component-url="/_astro/CookieBanner.B5LUbaO5.js" component-export="default" renderer-url="/_astro/client.0yjHk_dc.js" props="{}" ssr client="idle" opts="{"name":"CookieBanner","value":true}"></astro-island> <script type="module">document.addEventListener("astro:after-swap",()=>{try{const t=localStorage.getItem("theme"),o=document.documentElement.dataset.defaultTheme,s=t==="dark"||t==="light"?t:o||"light";document.documentElement.classList.toggle("dark",s==="dark"),document.documentElement.style.backgroundColor=s==="dark"?"#151515":""}catch{}});window.__blogcmsGlobalNavInit||(window.__blogcmsGlobalNavInit=!0,document.addEventListener("click",t=>{const o=t.target;if(!o||!o.closest)return;if(o.closest("[data-search-trigger]")){document.dispatchEvent(new CustomEvent("blogcms:search:open")),document.querySelectorAll("[data-mobile-menu]").forEach(e=>e.classList.add("hidden"));return}const s=o.closest("[data-mobile-menu-toggle]");if(s){const e=s.closest("nav");if(!e)return;const d=e.querySelector("[data-mobile-menu]");if(!d)return;const n=d.classList.contains("hidden");d.classList.toggle("hidden",!n),e.querySelector("[data-icon-open]")?.classList.toggle("hidden",n),e.querySelector("[data-icon-close]")?.classList.toggle("hidden",!n);return}if(o.closest("[data-mobile-menu-trigger]")){const e=o.closest("nav");if(!e)return;e.querySelector("[data-mobile-menu]")?.classList.remove("hidden"),e.querySelector("[data-mobile-cluster]")?.classList.add("hidden"),e.querySelector("[data-mobile-menu-close]")?.classList.remove("hidden");return}const a=o.closest("[data-mobile-menu-close]");if(a){const e=a.closest("nav");if(!e)return;e.querySelector("[data-mobile-menu]")?.classList.add("hidden"),e.querySelector("[data-mobile-cluster]")?.classList.remove("hidden"),a.classList.add("hidden");return}const c=o.closest("button[data-href]");if(c){const e=c.dataset.href;e&&(window.location.href=e)}}),document.addEventListener("astro:after-swap",()=>{document.querySelectorAll("[data-mobile-menu]").forEach(t=>t.classList.add("hidden")),document.querySelectorAll("[data-icon-open]").forEach(t=>t.classList.remove("hidden")),document.querySelectorAll("[data-icon-close]").forEach(t=>t.classList.add("hidden")),document.querySelectorAll("[data-mobile-cluster]").forEach(t=>t.classList.remove("hidden")),document.querySelectorAll("[data-mobile-menu-close]").forEach(t=>t.classList.add("hidden"))}));</script> <astro-island uid="2tVPi8" prefix="r14" component-url="/_astro/DelayedGTM.D9zdm729.js" component-export="default" renderer-url="/_astro/client.0yjHk_dc.js" props="{"gtmId":[0,"GTM-WBCK62MK"]}" ssr client="idle" opts="{"name":"DelayedGTM","value":true}"></astro-island> </body></html>