HTML hâlâ web'in temeli
HTML, modern web'in en kararlı katmanı. JavaScript framework'leri her 2-3 yılda bir popülaritesini değiştirir, CSS yaklaşımları döngüsel olarak yeniden tartışılır, ama HTML'in semantik yapısı 25 yıldır temelde aynı amaçla çalışıyor: içeriğin anlamlı, erişilebilir ve makine-okunabilir biçimde sunulması. AIOR olarak her web projesinde HTML'i ciddiye alıyoruz; framework seçiminden bağımsız, üretilen markup kalitesi sitenin SEO performansını, erişilebilirlik durumunu ve uzun vadeli bakım maliyetini doğrudan etkiliyor.
Semantik etiketler — gerçekten kullanılıyor mu?
HTML5 ile gelen semantik etiketler (`<article>`, `<section>`, `<nav>`, `<aside>`, `<header>`, `<footer>`, `<main>`) 2026'da artık tartışılan bir konu değil; standart. Ancak gerçek hayatta hâlâ `<div class="header">`, `<div class="article">` kalıplarıyla yazılmış kod gözüküyor. AIOR projelerinde her PR review'unda semantik markup kontrolü yapıyoruz: heading hiyerarşisi (h1 sadece bir kez, h2-h6 doğru iç içe), landmark elementlerin doğru kullanımı, listelerin gerçek `<ul>`/`<ol>` olarak yazılması. Bu yapı sadece SEO için değil, ekran okuyucu deneyimi için de hayati.
Erişilebilirlik (a11y) — opsiyonel değil
2026'da WCAG AA seviyesi erişilebilirlik artık çoğu pazarda yasal gereklilik. AB'de Accessibility Act, ABD'de ADA kararları, Türkiye'de Kamu kurumları için TS EN 301 549 zorunlu. AIOR'da uyguladığımız kontrol listesi:
- Tüm interaktif elementler klavye ile erişilebilir.
- `alt` özniteliği görsellerde anlamlı (dekoratif ise `alt=""` ile belirtilir).
- Form elementlerinde `<label>` bağlantısı zorunlu.
- Renk kontrastı WCAG AA için 4.5:1 (normal metin), 3:1 (büyük metin).
- `role` ve `aria-*` öznitelikleri sadece native HTML semantiği yetersiz kaldığında kullanılır — `<button>` yerine `<div role="button">` yazmak kötü kalıp.
- Focus yönetimi: tab sırası mantıklı, focus indicator görünür.
Forms — modern özellikler
HTML5 form özellikleri (input types: `email`, `tel`, `url`, `number`, `date`; constraint validation: `required`, `pattern`, `min`/`max`) çoğu form senaryosunu JavaScript olmadan çözüyor. AIOR projelerinde varsayılan yaklaşımımız: önce HTML constraint validation, ardından JavaScript ile zenginleştirme. `inputmode` özniteliği mobil deneyimi belirgin iyileştiriyor — sayı girişi için `inputmode="numeric"` doğru klavyeyi getirir. `autocomplete` öznitelikleri tarayıcının form auto-fill performansını ve güvenliğini artırıyor.
Performance — HTML'in sessiz katkıları
Modern web performansının önemli bir kısmı doğru HTML yazımıyla başlar:
- `<img>` etiketlerinde `width` ve `height` her zaman belirtilir — CLS (Cumulative Layout Shift) problemini sıfırlar.
- `loading="lazy"` özniteliği ile viewport dışı görseller geç yüklenir.
- `decoding="async"` görüntü çözümlemesini ana thread'ten ayırır.
- `<picture>` ve `srcset` ile responsive görsel teslim mantıklı.
- `<link rel="preload">` kritik kaynakları (font, hero image) erken indirir.
- `<link rel="preconnect">` üçüncü taraf DNS çözümlemesini hızlandırır.
Bu küçük dokunuşların kümülatif etkisi Core Web Vitals metriklerinde belirgin iyileşme yaratıyor.
Schema.org ve yapılandırılmış veri
SEO için yapılandırılmış veri 2026'da hâlâ önemli; özellikle Google'ın rich snippets (yıldız, fiyat, etkinlik tarihi) gösterimi için. JSON-LD format AIOR'ın varsayılan tercihi — microdata veya RDFa'ya göre kod ile içerikten ayrı tutulabilir, bakımı kolay. Organization, Product, Article, BreadcrumbList, FAQPage en sık kullandığımız şemalar. Schema.org doğruluğunu schema-validator (Google'ın aracı) ile her commit öncesi doğruluyoruz.
Open Graph ve sosyal paylaşım
`<meta property="og:*">` ve Twitter Card öznitelikleri sosyal medyada paylaşım performansını doğrudan etkiliyor. AIOR projelerinde her sayfa için `og:title`, `og:description`, `og:image`, `og:url`, `og:type` zorunlu; opsiyonel olarak `og:locale` ve `og:site_name`. Görsel boyutu 1200×630 ideal. Bu detayların eksik olması bir paylaşımın 5 kat daha az tıklanmasıyla sonuçlanabilir.
Web Components — gerçek hayatta yeri
Custom Elements ve Shadow DOM yıllar önce vaat edilenden daha yavaş benimsendi ama belirli kullanım durumları için olgunlaştı. AIOR'da framework-agnostic UI bileşenlerinde (multiple framework'lerle çalışacak embed widgets) Web Components tercih ediyoruz. Lit kütüphanesi yazım deneyimini hatırı sayılır iyileştirdi.
Sonuç
HTML'i framework tarafından üretilen "iskelet" olarak görmek 2026'da artık yeterli değil. Doğru semantik markup, sıkı erişilebilirlik disiplini, performans bilinçli yapı ve doğru schema.org kullanımı — bunlar web projelerinin uzun vadeli SEO ve kullanıcı deneyimi başarısını belirleyen unsurlar. AIOR olarak müşteri projelerinde framework'ten bağımsız olarak HTML kalitesini her zaman birinci sınıf metrik kabul ediyoruz. Sizin tarafınızda son projede HTML/erişilebilirlik denetimi hangi araçlarla yapılıyor — axe DevTools, Lighthouse, WAVE, yoksa manuel inceleme mi?
HTML is still the foundation of the web
HTML is the most stable layer of the modern web. JavaScript frameworks shift popularity every two or three years; CSS approaches get cyclically reargued; but HTML's semantic structure has worked toward fundamentally the same purpose for 25 years: presenting content in a meaningful, accessible, and machine-readable form. At AIOR we take HTML seriously on every web project; regardless of framework choice, the quality of the produced markup directly affects the site's SEO, accessibility status, and long-term maintenance cost.
Semantic tags — are they actually used?
The semantic tags that came with HTML5 (`<article>`, `<section>`, `<nav>`, `<aside>`, `<header>`, `<footer>`, `<main>`) are no longer a debate in 2026; they're standard. Yet in real life we still see code written with patterns like `<div class="header">`, `<div class="article">`. At AIOR every PR review checks semantic markup: heading hierarchy (one h1, h2-h6 properly nested), correct use of landmark elements, lists actually written as `<ul>`/`<ol>`. This structure matters not only for SEO but for the screen-reader experience.
Accessibility (a11y) — not optional
In 2026 WCAG AA-level accessibility is a legal requirement in most markets. The EU Accessibility Act, US ADA rulings, and TS EN 301 549 for public bodies in Turkey are mandatory. The checklist we apply at AIOR:
- All interactive elements accessible by keyboard.
- `alt` attribute meaningful on images (decorative images use `alt=""`).
- Form elements have associated `<label>`.
- Colour contrast meets WCAG AA — 4.5:1 (normal text), 3:1 (large text).
- `role` and `aria-*` only when native HTML semantics fall short — writing `<div role="button">` instead of `<button>` is an anti-pattern.
- Focus management: logical tab order, visible focus indicator.
Forms — modern features
HTML5 form features (input types like `email`, `tel`, `url`, `number`, `date`; constraint validation: `required`, `pattern`, `min`/`max`) handle most form scenarios without JavaScript. AIOR's default on projects: HTML constraint validation first, then JavaScript enrichment. The `inputmode` attribute meaningfully improves the mobile experience — `inputmode="numeric"` brings up the right keyboard for numeric input. The `autocomplete` attribute improves the browser's auto-fill performance and security.
Performance — HTML's quiet contributions
A meaningful share of modern web performance starts with correct HTML writing:
- Always set `width` and `height` on `<img>` — eliminates CLS (Cumulative Layout Shift).
- `loading="lazy"` defers images outside the viewport.
- `decoding="async"` separates image decoding from the main thread.
- `<picture>` and `srcset` make sensible responsive delivery.
- `<link rel="preload">` for critical resources (fonts, hero images).
- `<link rel="preconnect">` warms third-party DNS resolution.
The cumulative effect of these small touches shows up clearly in Core Web Vitals.
Schema.org and structured data
Structured data is still important for SEO in 2026 — especially for Google's rich snippets (stars, prices, event dates). JSON-LD is AIOR's default format — separable from markup, more maintainable than microdata or RDFa. Organization, Product, Article, BreadcrumbList, FAQPage are the schemas we most often use. We validate schema accuracy with Google's schema validator before every commit.
Open Graph and social sharing
`<meta property="og:*">` and Twitter Card attributes directly affect social sharing performance. On every AIOR project, `og:title`, `og:description`, `og:image`, `og:url`, `og:type` are mandatory; optional `og:locale` and `og:site_name`. Image size 1200×630 is ideal. Missing these can result in a share getting 5× fewer clicks.
Web Components — real-world fit
Custom Elements and Shadow DOM were adopted more slowly than promised, but they've matured for specific use cases. At AIOR we use Web Components for framework-agnostic UI components (embeds that run alongside multiple frameworks). The Lit library substantially improved the authoring experience.
Bottom line
Treating HTML as "the skeleton the framework spits out" is no longer enough in 2026. Correct semantic markup, strict accessibility discipline, performance-aware structure, and proper schema.org use — these determine the long-term SEO and user-experience success of web projects. At AIOR, HTML quality is a first-class metric on every project regardless of framework. What tools do you use for HTML/accessibility audit on your latest project — axe DevTools, Lighthouse, WAVE, or manual review?
