Shapes / Blog / Anatomia dobrego kodu. Jak semantyka HTML i czyste CSS tworzą przewagę

Anatomia dobrego kodu. Jak semantyka HTML i czyste CSS tworzą przewagę

Awatar autora
Łukasz Kmieć

21 sierpnia 2025

W dzisiejszym świecie cyfrowym, gdzie liczy się nie tylko wygląd, ale i fundamenty, jakość kodu HTML jest kluczowa. Estetyka strony jest tym, co przyciąga oko, ale to solidna, semantyka kodu HTML oraz czysty i efektywny CSS decydują o jej wydajności, dostępności i pozycji w wyszukiwarkach.

Jako projektant, dążę zawsze do tworzenia rozwiązań, które nie tylko wyglądają świetnie, ale również stoją na mocnych fundamentach. Przyjrzyjmy się temu na konkretnym przykładzie – analizie rzeczywistego komponentu strony internetowej.

Studium przypadku: sekcja „Projekty”

Przeanalizujmy komponent „Projekty”, który zawiera nagłówek, wprowadzenie oraz listę poszczególnych projektów (domów). To klasyczny element, który często spotykamy na stronach firm budowlanych, deweloperskich czy portfolio.

Oto, jak wygląda ten komponent:

Komponent strony internetowej z produktami

Dlaczego to działa dobrze?

Na pierwszy rzut oka komponent ten prezentuje się estetycznie, ale prawdziwa magia dzieje się „pod maską” – w kodzie HTML i CSS (przy użyciu Tailwind CSS). Moim celem było stworzenie struktury, która jest:

Semantyczna: Elementy HTML opowiadają o swojej roli na stronie.

Dostępna: Ułatwia nawigację i zrozumienie treści osobom korzystającym z technologii wspomagających (np. czytniki ekranowe).

Zoptymalizowana pod SEO: Wyszukiwarki lepiej rozumieją strukturę treści, co może poprawić widoczność strony.

Łatwa w utrzymaniu: Kod jest czytelny i łatwy do modyfikacji dla innych programistów (lub dla mnie w przyszłości).

Przyjrzyjmy się kluczowym fragmentom kodu i ich semantycznemu uzasadnieniu:

<!-- kontener sekcji -->
<section class="px-[5%] py-12 md:py-16 lg:py-20">

  <!-- kontener główny, robi marginesy boczne -->
  <div class="container mx-auto">

    <!-- nagłówek całej sekcji -->
    <header class="grid grid-cols-1 md:grid-cols-12 gap-10 md:gap-12 mb-10 md:mb-20">
      <div class="md:col-span-4">
        <h2 class="font-bold text-3xl md:text-4xl header-with-line tracking-tight">
          Projekty
        </h2>
      </div>
      <div class="md:col-span-8">
        <p class="text-lg md:text-xl">
          Zobacz nasze najciekawsze realizacje. Jeśli potrzebujesz spersonalizowanego projektu, skontaktuj się z nami, a przygotujemy dla Ciebie ofertę.
        </p>
      </div>
    </header>

    <!-- kontener na kafle (artykuły) -->
    <div class="grid grid-cols-1 lg:grid-cols-3 auto-cols-fr gap-10 md:gap-12">

      <!-- pojedynczy kafel (artykuł) o szerokości 2/3 -->
      <article id="post-164" class="flex flex-col border border-border-primary sm:col-span-2 sm:row-span-2">

        <figure class="flex w-full flex-col items-center justify-center self-start mb-5 md:mb-6 lg:mb-12">
          <a href="/oferta/sloneczne-wzgorze/" title="Dom drewniany z tarasem – Słoneczne Wzgórze">
            <img width="1820" height="1213" src="sloneczne-wzgorze.jpeg" class="rounded-xl wp-post-image" alt="Dom drewniany z tarasem – Słoneczne Wzgórze">
          </a>
        </figure>

        <div class="block grid grid-cols-1 gap-x-8 sm:grid-cols-3">
          <div class="sm:col-span-1">
            <div class="flex flex-row justify-between items-center gap-4 sm:flex-col sm:items-start">
              <header>
                <h3 class="mb-2 font-bold text-2xl md:text-3xl">
                  <a href="/oferta/sloneczne-wzgorze/" title="Dom drewniany z tarasem – Słoneczne Wzgórze">Dom drewniany z tarasem – Słoneczne Wzgórze</a>
                </h3>
                <div class="text-lg">
                  <span>183 600</span>
                  <span>PLN</span> brutto
                </div>
              </header>
              <div>
                <a href="/oferta/sloneczne-wzgorze/" class="shps-btn-primary px-6 h-14 bg-[#dd0000] text-white text-lg font-semibold rounded-lg transition-transform duration-300 ease-in-out hover:scale-105 flex items-center justify-center">Więcej</a>
              </div>
            </div>
          </div>
          <div class="sm:col-span-2 mt-6 sm:mt-0">
            <p class="text-lg">
              Dom drewniany z tarasem to kolejna propozycja dla naszych klientów. Główne wejście prowadzi do wiatrołapu i dalej do holu...
            </p>
          </div>
        </div>

      </article>

      <!-- pojedynczy kafel (artykuł) o szerokości 1/3 -->
      <article id="post-164" class="flex flex-col justify-center border border-border-primary">

        <figure class="mb-5 md:mb-6">
          <a href="/oferta/serce-puszczy/" title="Duży dom drewniany z garażem – Serce Puszczy">
            <img width="860" height="574" src="serce-puszczy.jpeg" class="rounded-xl wp-post-image" alt="Duży dom drewniany z garażem – Serce Puszczy">
          </a>
        </figure>

        <div class="flex gap-4 flex-row items-center justify-between">
          <header>
            <h3 class="mb-1 md:mb-2 font-bold text-2xl md:text-3xl">
              <a href="/oferta/serce-puszczy/" title="Duży dom drewniany z garażem – Serce Puszczy">Duży dom drewniany z garażem – Serce Puszczy</a>
            </h3>
            <div class="text-lg">
              <span>313 200</span>
              <span>PLN</span> brutto
            </div>
          </header>
          <div>
            <a href="/oferta/serce-puszczy/" class="shps-btn-primary px-6 h-14 bg-[#dd0000] text-white text-lg font-semibold rounded-lg transition-transform duration-300 ease-in-out hover:scale-105 flex items-center justify-center">Więcej</a>
          </div>
        </div>

      </article>

      <!-- pojedynczy kafel (artykuł) o szerokości 1/3 -->
      <article id="post-164" class="flex flex-col justify-center border border-border-primary">

        [tu kod kafla podobny jak powyżej]

      </article>

    </div>

  </div>
</section>

W kodzie PHP zastąpiłem dynamiczne treści statycznymi przykładami, aby ułatwić analizę HTML.

Kluczowe elementy i ich znaczenie semantyczne

<section>:

<header> wewnątrz <section>:

<h2> dla tytułu sekcji:

Poszczególne kafle / projekty

<article> dla każdego projektu:

<header> wewnątrz <article>:

<h3> dla tytułu projektu:

<img> z atrybutem alt:

<a> dla linków „Więcej”:

Minimalne użycie <div>:

Podsumowanie

Powyższy komponent jest przykładem, jak połączenie semantyki HTML z nowoczesnym podejściem do stylizacji (jak w tym przypadku Tailwind CSS) tworzy solidną, wydajną i dostępną stronę internetową.

Dzięki wyborowi tagów HTML, takich jak <section>, <header>, <h2>, <article>, <h3> oraz poprawnemu użyciu atrybutów alt dla obrazów, kod jest:

Dobra strona internetowa to połączenie dobrego UX, atrakcyjnego wyglądu z solidnym zapleczem technicznym. Kładę nacisk na czysty i semantycznie poprawny kod. To on decyduje o stabilności, wydajności i pozycjonowaniu Twojej witryny.

Jeśli szukasz profesjonalisty, który zadba o każdy detal, aby Twoja strona przynosiła realne efekty biznesowe, skontaktuj się ze mną.

Zobacz także