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

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:

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>:

• Dlaczego? Cały komponent „Projekty” stanowi spójną, tematyczną sekcję na stronie. Użycie <section> jasno komunikuje, że jest to wydzielony blok treści poświęcony jednemu tematowi.
• Zaleta: Poprawia strukturę dokumentu dla wyszukiwarek i technologii wspomagających, które mogą „przeskakiwać” między sekcjami.

<header> wewnątrz <section>:

• Dlaczego? Nagłówek „Projekty” oraz towarzyszący mu tekst wprowadzający (<p>) stanowią wprowadzenie do tej konkretnej sekcji. Element <header> jest idealny do grupowania takich elementów.
• Zaleta: Precyzyjnie określa rolę tego bloku – to nagłówek dla tej sekcji, a nie ogólny nagłówek strony.

<h2> dla tytułu sekcji:

• Dlaczego? <h2> jest odpowiednim poziomem nagłówka dla tytułu głównej sekcji, zakładając, że <h1> jest zarezerwowany dla najważniejszego nagłówka strony (np. tytuł strony głównej).
• Zaleta: Zachowuje prawidłową hierarchię nagłówków, co jest fundamentalne dla SEO i dostępności.

Poszczególne kafle / projekty

<article> dla każdego projektu:

• Dlaczego? Każdy pojedynczy projekt (np. „Leśny Pąk”, „Serce Puszczy”) jest samodzielną, niezależną jednostką treści. Można by go wyjąć z tej listy i umieścić w innym miejscu (np. na osobnej podstronie projektu), a nadal miałby sens. To idealne zastosowanie dla <article>.
• Zaleta: Wyszukiwarki i czytniki ekranowe rozpoznają każdy projekt jako odrębny element, co poprawia indeksowanie i nawigację. Klasy WordPressa (post_class(), the_ID()) naturalnie pasują do <article>.

<header> wewnątrz <article>:

• Dlaczego? Każdy projekt ma swój tytuł (<h3>) i cenę, które pełnią rolę wprowadzenia do konkretnego projektu. Użycie <header> w <article> jest w pełni poprawne i zwiększa precyzję semantyczną.
• Zaleta: Dalsza precyzja w strukturze – wiemy, że ten nagłówek odnosi się do konkretnego projektu.

<h3> dla tytułu projektu:

• Dlaczego? Hierarchia <h2> (tytuł sekcji) -> <h3> (tytuł projektu w sekcji) jest zachowana.
• Zaleta: Jasna struktura treści dla użytkowników i maszyn.

<img> z atrybutem alt:

• Dlaczego? Każde zdjęcie projektu ma atrybut alt z opisowym tekstem.
• Zaleta: Niezbędne dla dostępności (czytniki ekranowe odczytują ten tekst) oraz dla SEO (wyszukiwarki rozumieją, co jest na zdjęciu).

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

• Dlaczego? Przyciski „Więcej” to w rzeczywistości linki, które prowadzą do podstron z pełnym opisem projektu. Semantycznie <a> jest właściwym elementem do nawigacji. Wygląd „przycisku” jest nadawany przez CSS (klasa shps-btn-primary).
• Zaleta: Poprawne linkowanie i jasne wskazanie, że element służy do nawigacji.

Minimalne użycie <div>:

• Dlaczego? Elementy <div> są używane strategicznie – głównie jako kontenery do celów stylizacji (np. dla siatek w Tailwind CSS) lub grupowania elementów, gdy nie ma bardziej semantycznego odpowiednika. Nie są nadużywane tam, gdzie <section>, <article>, <header> czy <p> są bardziej odpowiednie.
• Zaleta: Ogranicza „div-itis” (nadmierne użycie div), co sprawia, że kod jest czystszy i łatwiejszy do zrozumienia.

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:

• Zrozumiały dla przeglądarek i wyszukiwarek, co sprzyja lepszemu pozycjonowaniu (SEO)
• Łatwy w nawigacji dla użytkowników, w tym osób korzystających z czytników ekranowych
• Przejrzysty i łatwy w utrzymaniu dla każdego programisty

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ą.