HTML Alapok - PowerFull Dev's

1. Dokumentum alapok

Minden projekt induljon egy minimális, de pontos dokumentumstruktúrával. Használj kódformattert (Prettier) és állíts be <html lang="hu">-t, hogy a böngészők és az olvasóprogramok tudják a nyelvet.

<!DOCTYPE html>
<html lang="hu">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>PowerFull Dev's</title>
  </head>
  <body>...</body>
</html>

Használj favicont és manifestet PWA-hoz.
A <main> elem egyszer szerepeljen, segíti a fókusz ugrást.
Adj <link rel="canonical"> taget a duplikált URL-ek ellen.

2. Tipográfia és inline elemek

A heading-hierarchia adja az oldal ritmusát. Mindig egyetlen h1 legyen, majd logikus sorrendben haladj lefelé.

<h1>Fő téma</h1>
<p>Bekezdés <strong>kiemeléssel</strong> és <em>hangsúlyokkal</em>.</p>
<figure>
  <img src="diagram.png" alt="Architektúra diagram" loading="lazy" />
  <figcaption>Diagram felirat.</figcaption>
</figure>

Pro tipp: a <dl> elemmel szólistákat, paraméter-sorokat dokumentálhatsz.

3. Navigáció, linkek és média

Nav: használj <nav aria-label="Fő navigáció">-t és aktív linkhez aria-current-et.
Képekhez adj width/height attribútumot vagy style="aspect-ratio"-t, így elkerülöd a layout shift-et.
Videónál <track kind="captions"> adja a feliratot.

<picture>
  <source srcset="hero.avif" type="image/avif" />
  <img src="hero.jpg" alt="Csapat" loading="lazy" />
</picture>

4. Layout szekciók

Gondolkodj modulokban: <header>, <main>, <section>, <article>, <aside>, <footer>. Ezek a szemantikus tagek javítják az accessibility-t és a SEO-t.

<section aria-labelledby="services">
  <div class="grid">
    <article>
      <h3 id="services">Szolgáltatások</h3>
      <p>Rövid leírás...</p>
    </article>
    <aside>FAQ vagy CTA</aside>
  </div>
</section>

Container query (@container) mellett elég logikus blokkokat készíteni, a CSS intézi a méretre igazítást.

5. Formok és validáció

Használd a böngésző beépített szabályait, majd adj rá saját hibakezelést.

<form novalidate>
  <label for="email">E-mail</label>
  <input id="email" name="email" type="email" required aria-describedby="emailHelp" />
  <small id="emailHelp">Soha nem osztjuk meg.</small>
  <button>Küldés</button>
</form>
<script>
  const form = document.querySelector('form');
  form.addEventListener('submit', (event) => {
    if (!form.checkValidity()) {
      event.preventDefault();
      form.reportValidity();
    }
  });
</script>

A <fieldset> + <legend> páros segít csoportosítani az inputokat.

6. Accessibility és ARIA

Adj fókusz-állapotot minden interaktív elemnek (:focus-visible).
Használj aria-live="polite" régiót a dinamikus visszajelzésekhez.
Színek: legalább 4.5:1 kontraszt szövegre, 3:1 UI elemekre.

<button aria-pressed="false" role="switch">Éjszakai mód</button>
<div role="status" aria-live="polite" hidden id="status"></div>

7. Komponensek és include-ok

Statikus site-oknál használj template engine-t (Eleventy, Astro) vagy natív Web Components-et. Dokumentáld Storybookban, ezzel csökken a regressziók száma.

<template id="cta-card">
  <article class="cta">
    <slot name="title"></slot>
    <slot name="content"></slot>
    <button><slot name="action"></slot></button>
  </article>
</template>

Használj design token JSON-t (Style Dictionary) a színekhez és spacinghez.

8. Meta adatok és SEO

<head>
  <meta name="description" content="HTML best practice útmutató" />
  <meta property="og:type" content="article" />
  <meta property="og:image" content="https://cdn.powerfull.dev/html.png" />
  <script type="application/ld+json">
  {"@context":"https://schema.org","@type":"TechArticle","name":"HTML útmutató"}
  </script>
</head>

Multi-language oldalnál <link rel="alternate" hreflang="..."> párosokat is adj hozzá.

9. Mini landing oldal

<header class="hero">
  <p class="eyebrow">Új kurzus</p>
  <h1>PowerFull Dev's Roadmap</h1>
  <p>Build + Learn + Ship</p>
  <a class="btn" href="#apply">Csatlakozom</a>
</header>
<section class="grid">
  <article>
    <h3>Workshop</h3>
    <p>Live kódolás Twitch-en.</p>
  </article>
  <article>
    <h3>Mentorálás</h3>
    <p>Heti 1:1 coaching.</p>
  </article>
</section>

Használj loading="lazy" és decoding="async" attribútumot az illusztrációkra.

10. Tooling és minőségbiztosítás

Lint: HTMLHint vagy @html-eslint CI-ben.
Link checker: npx @11ty/eleventy-link-checker vagy lychee.
Vizuális teszt: Playwright + Percy/Loki screenshot diff.
Performance: Lighthouse CI + WebPageTest.
Formatting: Prettier pre-commit hook (lint-staged).

11. Hibakeresés és DevTools

Elements panel: ellenőrizd a Flex/Grid overlay-t.
Console: console.table() segít adatot olvasni.
Coverage panel: felesleges CSS/JS mérés.

Átmeneti outline: document.body.classList.add('debug-outline') + CSS-ben .debug-outline * { outline: 1px dashed #ff6b6b; }.

12. Deployment és workflow

CI/CD csőben futtasd a buildet, majd automatikus teszteket:

name: html-ci
on: [push]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm test
      - run: npm run build

Statikus site-ot publikálhatsz Netlify, Vercel vagy GitHub Pages platformra (cache busting + gzip/brotli).

🏗️ HTML Alapok