En İyi 50 HTML Röportaj Soruları ve Cevapları (2026)

HTML Mülakatına mı hazırlanıyorsunuz? Karşılaşabileceğiniz soruları dikkatlice düşünün. Bu mülakatlar önemlidir çünkü teknik derinliği, problem çözme yaklaşımlarını ve temel web geliştirme kavramlarının pratik uygulamalarını ortaya koyarlar.

HTML rollerindeki fırsatlar, yeni başlayanlardan 5 veya 10 yıllık deneyime sahip kıdemli profesyonellere kadar geniş bir yelpazede yer almaktadır. İşverenler, teknik uzmanlık, alan uzmanlığı ve analiz becerilerini soru-cevap yoluyla değerlendirir. Güçlü profesyonel deneyim, köklü deneyim ve çok yönlü beceri seti, adayların temel, ileri ve teknik zorlukların üstesinden gelmelerine yardımcı olur.

Analizimiz, 60'tan fazla teknik liderin sağladığı geri bildirimlerden, 45'ten fazla yöneticinin görüşlerinden ve 100'den fazla profesyonelle yapılan görüşmelerden yararlanıyor. Bu bakış açıları bir araya geldiğinde, farklı beklentiler ve gelişen sektör ihtiyaçları vurgulanıyor.

HTML Mülakat Soruları ve Cevapları

En İyi HTML Mülakat Soruları ve Cevapları

1) HTML nedir ve neden web geliştirmenin omurgası olarak kabul edilir?

Köprü Metni İşaretleme Dili (HTML), belgeleri yapılandırmak ve web içeriğine anlam kazandırmak için tasarlanmış web'in temel dilidir. Başlıklar, paragraflar, bağlantılar, resimler ve multimedya gibi öğeleri tanımlayarak tarayıcıların bunları yorumlayıp işlemesine olanak tanır. Web geliştirmenin omurgası olarak adlandırılmasının nedeni, karmaşıklığı ne olursa olsun her web sayfasının düzenini ve içeriğini tanımlamak için HTML kullanmasıdır. HTML olmadan, CSS ve JavaSenaryonun şekillendirilecek veya manipüle edilecek bir temeli olmazdı.

👉 Ücretsiz PDF İndir: HTML Mülakat Soruları


2) HTML ile HTML5 arasındaki farkı örneklerle açıklayınız.

HTML standart işaretleme dilidir, HTML5 ise 2014 yılında tanıtılan modern ve daha güçlü versiyonudur. HTML5, Flash gibi üçüncü taraf eklentilere olan ihtiyacı ortadan kaldıran semantik öğeler, multimedya desteği ve API'ler getirdi.

Özellikler HTML HTML5
doktip Uzun ve karmaşık Basit:
Multimedia Eklentilere ihtiyaç var ,
Grafik Yerel olarak desteklenmiyor ,
Formlar Sınırlı girdiler Yeni girdiler gibi email, date
Anlamsal etiketler Güvenilen , ,

Örnek:

<video controls>
	<source src="sample.mp4" type="video/mp4">
</video>

3) Bir HTML belgesinin temel yapısı nasıl düzenlenir?

Her HTML belgesi, tarayıcıların içeriği doğru yorumlamasını sağlamak için tanımlanmış bir yapıyı takip eder. En üstte HTML5 kullanımını belirten bildirim. öğe, içeriğin tamamını kapsar ve bölünür Ve . meta verileri, başlığı, CSS ve betiklere bağlantıları içerirken, görünür içeriği işler. Örneğin:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Sample Page</title>
</head>
<body>
	<h1>Hello World</h1>
</body>
</html>

4) HTML'de etiketler ve öğeler nelerdir? Örnekler verin.

Etiketler, tarayıcıya içeriğin nasıl görüntüleneceğini bildiren açılı parantezler içine alınmış anahtar sözcüklerdir. Ancak bir öğe, açılış etiketi, içerik ve kapanış etiketinden oluşan yapının tamamını ifade eder. Örneğin:

  • Etiket: Ve
  • Ürün: Bu bir paragraftır

Bazı öğeler kendi kendine kapanır, örneğin: Ve , yani kapanış etiketlerine ihtiyaç duymazlar.


5) HTML'de hangi liste türleri desteklenir ve nerelerde kullanılır?

HTML destekler üç ana liste türü:

  1. Sıralı Liste ( ) – öğeler sayı veya harflerle görünür.
  2. Sırasız Liste ( ) – öğeler madde işaretleriyle birlikte görünür.
  3. Descriptiyon Listesi ( ) – terimler ve tanımları için kullanılır.

Örnek:

<dl>
	<dt>HTML</dt>
	<dd>HyperText Markup Language</dd>
</dl>

Listeler sıklıkla gezinme menüleri, içerik organizasyonu ve sözlük terimleri için kullanılır.


6) HTML'de nitelikler nasıl kullanılır ve yaygın örnekleri nelerdir?

Nitelikler, HTML öğelerine ek bilgi sağlar. Her zaman açılış etiketi içinde belirtilir ve bir ad-değer çiftini takip eder. Yaygın örnekler şunlardır:

  • src içinde görüntü konumu için.
  • href hiperlink hedefi için.
  • id ve class şekillendirme ve JavaKomut dosyası hedeflemesi.
  • alt Erişilebilirlik için görsellerde.

Örneğin:

<img src="logo.png" alt="Company Logo">

7) Semantik HTML ögeleri nelerdir ve ne gibi faydalar sağlarlar?

Anlamsal öğeler, anlamlarını hem geliştiriciler hem de tarayıcılar için açıkça tanımlar. Örnekler şunlardır: , , , , Ve .

Faydaları:

  • Ekran okuyucular için erişilebilirliği iyileştirin.
  • Arama motorlarına daha net içerik anlamı sağlayın (SEO).
  • Kod okunabilirliğini ve sürdürülebilirliğini artırın.

Örnek:

<article>
	<h2>News Update</h2>
	<p>Latest update about web development trends.</p>
</article>

8) Blok düzeyindeki ve satır içi öğeler arasındaki farkı örneklerle açıklayın.

Blok düzeyindeki öğeler, örneğin , , Ve , kapsayıcılarının tüm genişliğini kaplar ve yeni bir satırda başlar. , , ve gibi satır içi öğeler , yalnızca içeriklerinin gerektirdiği kadar genişlik kaplar.

Menşei Örnekler özellikleri
blok seviyesi , Yeni satırdan başla, tam genişlikte
Çizgide , Metin içindeki akış, genişlik içeriğe bağlıdır

9) Hiperlinkler nasıl oluşturulur ve mutlak ve bağıl URL'ler arasındaki fark nedir?

Hiper bağlantılar, etiketi kullanılarak oluşturulur. href özniteliği.

  • Mutlak URL: Protokol ve etki alanı dahil olmak üzere tam yolu içerir.
    Örnek: <a href="https://example.com/page.html">Visit</a>
  • Bağıl URL: Geçerli sayfaya göre bir dosyayı ifade eder.
    Örnek: <a href="/tr/about.html">About Us</a>

Harici kaynaklara bağlantı verirken mutlak URL'ler tercih edilirken, aynı web sitesi içerisinde bağıl URL'ler daha verimlidir.


10) Rolü nedir? etiketi ve nitelikleri?

The etiketi, kullanıcı girdilerini toplamak ve bir sunucuya göndermek için kullanılır. En önemli iki özelliği şunlardır:

  • aksiyon – verinin nereye gönderileceğini tanımlar.
  • yöntem – HTTP yöntemini belirtir ( GET or POST ).

Örnek:

<form action="/tr/submit" method="post">
	<input type="text" name="username">
	<input type="submit">
</form>

11) HTML5 formlarında hangi farklı tipte giriş alanları mevcuttur?

HTML5, kullanılabilirliği artırmak ve veriye bağımlılığı azaltmak için yeni giriş türleri sundu JavaKomut dosyası doğrulaması. Yaygın türler şunlardır:

  • Metin tabanlı: metin, şifre, e-posta, url, arama, tel.
  • Tarih ve saat bazlı: tarih, tarih-saat-yerel, ay, hafta, saat.
  • Sayısal: sayı, aralık.
  • Boole: onay kutusu, radyo.
  • Dosya ve renk: dosya, renk.

Örnek:

<input type="email" placeholder="Enter your email">
<input type="date">
<input type="range" min="1" max="10">

Bu girdi türleri, tarayıcıların tarihler veya renk seçiciler için takvimler gibi optimize edilmiş kullanıcı arayüzü denetimleri sunmasına olanak tanır, kullanıcı deneyimini iyileştirir ve form hatalarını azaltır.


12) HTML5 anlamsal etiketleri nasıl kullanılır? , , , Ve kullanımda farklılık var mı?

Genel etiketlerin yerini almak üzere anlamsal etiketler tanıtıldı Öğeleri bir araya getirir ve sayfa yapısına anlam katar.

Etiket Amaç Örnek E-posta
Üst bölüm, genellikle logolar/navigasyon ile Site navigasyon
Alt bölüm, telif hakkı veya bağlantılar Sayfa altbilgisi
İlgili içeriğin mantıksal gruplandırılması Blog bölümü
Tek başına ayakta durabilen bağımsız içerik Haber makalesi

Örnek:

<article>
	<header><h2>Breaking News</h2></header>
	<p>Details of the story...</p>
	<footer>Author: John Doe</footer>
</article>

Bu unsurların kullanılması SEO'yu ve erişilebilirliği iyileştirir.


13) Satır içi CSS, dahili CSS ve harici CSS arasındaki farkı açıklayınız.

CSS'yi HTML'ye uygulamanın üç temel yolu vardır:

  1. Satır içi CSS: Öğelere doğrudan uygulanarak style özniteliği.
    Örnek: <p style="color:red;">Text</p>
  2. Dahili CSS: İçinde beyan edildi tags in the .
  3. Harici CSS: Bir bağlantı aracılığıyla .css dosya kullanarak .
Yöntem Avantajlar Dezavantajlar
Çizgide Hızlı, spesifik Bakımı zor, yeniden kullanılabilirliği yok
İç Tek sayfa için iyi Birden fazla sayfada yeniden kullanılamaz
dış Tekrar kullanılabilir, temiz Ek dosya yüklemesi gerektirir

En iyi uygulama kullanmaktır harici CSS sürdürülebilirlik için.


14) HTML varlıkları nelerdir ve neden kullanılırlar?

HTML varlıkları, HTML belgelerinde ayrılmış karakterleri, sembolleri veya görünmez karakterleri temsil etmek için kullanılan özel kodlardır. <, > ve & gibi karakterlerin kod olarak yorumlanmak yerine doğru şekilde görüntülenmesini sağlarlar.

Ortak varlıklara örnekler:

  • < →
  • > → >
  • & → &
  • © → ©
  • → bölünmez boşluk

Örneğin:

<p>Use <strong> instead of <b>.</p>

Varlıklar, kod okunabilirliğini korumak ve oluşturma sorunlarını önlemek için çok önemlidir.


15) Nasıl Elementler nasıl çalışır, avantajları ve dezavantajları nelerdir?

The etiketi, bir HTML sayfasının başka bir sayfanın içine yerleştirilmesine olanak tanır. Genellikle video, harita veya harici widget'ları yerleştirmek için kullanılır.

Avantajları:

  • Harici içeriklerin kolay entegrasyonu YouTube veya Google Haritalar.
  • İçeriğin ana sayfadan ayrılması.

Dezavantajları:

  • Ek istekler nedeniyle yükleme performansı yavaşlıyor.
  • Güvenlik riskleri (clickjacking, siteler arası betik çalıştırma).
  • Her zaman SEO dostu değildir.

Örnek:

<iframe src="https://www.example.com" width="600" height="400"></iframe>

Modern alternatifler genellikle daha iyi kontrol ve güvenliğe sahip API'leri veya yerleştirme yöntemlerini öneriyor.


16) HTML'deki meta etiketleri nelerdir ve SEO'yu nasıl etkilerler?

Meta etiketleri, web sayfasının içine yerleştirilen bilgi parçacıklarıdır. Bir HTML belgesinin bölümü. Sayfa hakkında meta veri sağlarlar ancak kullanıcılara gösterilmezler.

Meta etiketlerinin temel türleri:

  • Descriptiyon:
  • Anahtar kelimeler (kullanımdan kaldırıldı):
  • Görünüm (duyarlı tasarım):
  • Karakter seti:

Arama motorları, arama sonuçlarında doğrudan etkileyen snippet'ler oluşturmak için meta açıklamalarını kullanır. tıklama oranı (TO).


17) HTML bağlantılarında mutlak, göreli ve kök-göreli yollar arasındaki fark nedir?

Bağlantılar yol referanslarına bağlı olarak üç farklı şekilde yazılabilir.

Menşei Örnek E-posta Kullanım çantası
kesin https://example.com/images/pic.jpg Dış kaynaklar
Bağıl resimler/resim.jpg Aynı dizin veya alt dizin
Kök-bağıl /varlıklar/görüntüler/resim.jpg Alan kökünden

Mutlak yollar kaynak erişimini garanti eder ancak taşınabilirliği azaltır. Göreli yollar içeriğin taşınmasını kolaylaştırırken, kök-göreli yollar büyük siteler arasında tutarlılığı sağlar.


18) Coğrafi Konum, Web Depolama ve benzeri HTML5 API'leri nasıl çalışır? Canvaişlevselliğini nasıl artırabilirim?

HTML5, eklentilere ihtiyaç duymadan web uygulamalarının yeteneklerini genişleten API'leri tanıttı.

  • Coğrafi Konum API'si: Kullanıcı konumunu alır (izinle).
  • Web Depolama API'si: Sağlar localStorage ve sessionStorage 10MB'a kadar anahtar-değer verilerini depolamak için.
  • Canvas API'si: Şekillerin, resimlerin ve animasyonların doğrudan bir web sayfasına çizilmesine olanak tanır.

Örnek: Yerel Depolama

localStorage.setItem("user", "John");
alert(localStorage.getItem("user"));

Bu API'ler modern uygulamalarda etkileşimi ve performansı artırır.


19) Aşağıdakilerin kullanılmasının avantajlarını ve dezavantajlarını açıklayın: düzen tasarımı için bir öğe.

Bir zamanlar sayfa düzeni için tablolar kullanılıyordu ancak artık kullanımı önerilmiyor.

Avantajları:

  • Tablolu veriler için yapı sağlar.
  • Tüm tarayıcılarda desteklenir.

Dezavantajları:

  • Ekran okuyucuların yanlış kullanımı durumunda erişilebilirlik zayıflıyor.
  • Sayfanın görüntülenmesini yavaşlatır.
  • Flexbox ve Grid gibi CSS düzen sistemlerine kıyasla bakımı daha zordur.

En iyi pratik: Kullanmak kesinlikle tablo verileri (örneğin, programlar, ürün karşılaştırmaları) ve düzen için CSS.


20) Tek bir HTML öğesine birden fazla CSS sınıfı uygulanabilir mi? Bu nasıl sağlanır?

Evet, HTML, birden fazla CSS sınıfının boşluklarla ayrılarak tek bir öğeye uygulanmasına olanak tanır. class öznitelik. Bu teknik, modüler ve yeniden kullanılabilir stilleri mümkün kılar ve tekrarları önler.

Örnek:

<p class="text-bold text-red highlight">Important Notice</p>

Burada, element, üç sınıftan da stilleri devralır. Bu yaklaşım, BirleştirmeyiTasarımları daha ölçeklenebilir ve bakımı daha kolay hale getiriyor.


21) Aradaki fark nedir? ve HTML'de?

İkisi birden ve genel kapsayıcılardır, ancak farklı amaçlara hizmet ederler.

  • içerik veya düzen yapılarının daha büyük bölümlerini gruplamak için kullanılan blok düzeyinde bir öğedir.
  • küçük metin parçalarını biçimlendirmek veya gruplamak için kullanılan satır içi bir öğedir.
Özellikler
ekran blok seviyesi Çizgide
kullanım Düzen, konteynerler Metni vurgulama
Örnek E-posta Sarma bölümleri Stil kelimeleri

Örnek:

<div class="container">
	<p>This is a <span class="highlight">highlighted</span> word.</p>
</div>

22) Nasıl olur? Element çalışması nedir ve nerelerde kullanılır?

The HTML5'teki element, çözünürlüğe bağlı, bitmap tabanlı bir çizim yüzeyi sağlar. Grafikleri, animasyonları, çizelgeleri ve hatta basit oyunları doğrudan tarayıcıda görüntülemek için kullanılır. JavaKomut dosyası API'leri gibi getContext("2d") geliştiricilerin şekiller, yollar, resimler ve metinler çizmesine olanak tanır.

Örnek:

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(20, 20, 150, 50);
</script>

Kullanım örnekleri arasında gösterge panelleri, gerçek zamanlı görselleştirmeler ve etkileşimli animasyonlar yer alır.


23) Arasındaki farkı açıklayın id ve class HTML'deki nitelikler.

Her ikisi de id ve class stil ve görünüm için kullanılan niteliklerdir JavaScript hedeflemesi vardır ancak benzersizlikleri ve uygulamaları bakımından farklılık gösterirler.

özellik özellikleri Örnek E-posta
id Bir belgede benzersiz olmalı; tek bir öğe için kullanılır.
sınıf Birden fazla elemana uygulanabilir; gruplamaya olanak sağlar.

Örnek Kullanım:

<div id="main-header">Welcome</div>
<p class="text-highlight">Hello</p>

En iyi uygulama: Kullanım id benzersiz tanımlayıcılar için ve class yeniden kullanılabilir şekillendirme grupları için.


24) HTML5'te data-* nitelikleri nelerdir ve faydaları nelerdir?

MKS data-* Nitelikler, geliştiricilerin özel verileri doğrudan HTML öğelerinin içinde depolamasına olanak tanır. Bu niteliklere ön ek olarak data- ardından bir isim gelir ve bunlara erişim sağlanır JavaSenaryo.

Faydaları:

  • DOM'u etkilemeden meta verilerin hafif depolanmasını etkinleştirin.
  • Dinamik uygulamalar, araç ipuçları veya istemci tarafı işlemleri için kullanışlıdır.

Örnek:

<button data-user="123" data-role="admin">Edit User</button>
<script>
	let btn = document.querySelector("button");
	console.log(btn.dataset.user); // 123
</script>

Bu özellik, durum ve dinamik davranışların yönetiminde esneklik sağlar.


25) ARIA rolleri ve nitelikleri kullanılarak HTML'de erişilebilirlik nasıl sağlanır?

HTML'deki erişilebilirlik, web uygulamalarının engelli bireyler tarafından kullanılabilir olmasını sağlar. ARIA (Erişilebilir Zengin İnternet Uygulamaları) rolleri ve nitelikleri, yardımcı teknolojilere ek bağlam sağlar.

ARIA niteliklerine örnekler:

  • role=”navigation” – gezinme menülerini tanımlar.
  • aria-label=”Kapat” – açıklayıcı etiketler sağlar.
  • aria-hidden=”true” – ekran okuyucularından öğeleri gizler.

Örnek:

<button aria-label="Close window">X</button>

Geliştiriciler, anlamsal HTML'yi ARIA nitelikleriyle birleştirerek kapsayıcılığı artırır ve WCAG gibi erişilebilirlik standartlarına uyum sağlar.


26) Satır içi, blok ve satır içi blok elemanları arasındaki fark nedir?

HTML öğeleri, görüntüleme davranışlarına göre kategorilere ayrılır.

Menşei özellikleri Örnekler
Çizgide Yeni bir satıra başlamayın; sadece içerik kadar geniş olsun. ,
Engellemek Yeni bir satırdan başlayarak tüm genişliği kaplar. ,
Satır içi blok Inline gibi davranır ancak blok özelliklerine (yükseklik, genişlik) izin verir. , tarz

Örnek:

<span>Inline</span>
<div>Block</div>
<span style="display:inline-block; width:100px;">Inline-block</span>

27) HTML'deki görselleri daha iyi performans için nasıl optimize edersiniz?

Görsellerin optimize edilmesi, sayfa yükleme sürelerini azaltır ve SEO'yu iyileştirir. Stratejiler şunlardır:

  • Modern formatları kullanarak WebP or AVIF.
  • Duyarlı görsellerin uygulanması Ve srcset.
  • Düzen kaymalarını önlemek için genişlik ve yükseklik niteliklerini ayarlama.
  • Resimleri yüklemeden önce sıkıştırıyoruz.
  • Tembel yükleme kullanarak loading="lazy".

Örnek:

<img src="image.webp" alt="Optimized Image" loading="lazy">

İyi optimize edilmiş görseller kullanıcı deneyimini geliştirir ve Core Web Vitals puanlarını iyileştirir.


28) Bir HTML sayfasının tarayıcıdaki yaşam döngüsü nedir?

Bir HTML sayfasının yaşam döngüsü birkaç adımdan oluşur:

  1. Ayrıştırma: Tarayıcı HTML'yi okur ve Belge Nesne Modelini (DOM) oluşturur.
  2. Kaynak yükleme: Bağlantılı CSS, JS ve görseller getirilir.
  3. Oluşturma: Tarayıcı stil ve düzen öğelerini uygular.
  4. betik: JavaScript, gerektiğinde DOM'u çalıştırır ve yönetir.
  5. Etkileşim: Tıklama ve kaydırma gibi olaylar işlenir.

Bu yaşam döngüsünü anlamak, geliştiricilerin optimizasyon yapmasına yardımcı olur işleme hızı, engelleyici komut dosyalarını en aza indirin ve verimli sayfa yüklemesi sağlayın.


29) Semantik HTML kullanmanın avantajları ve dezavantajları nelerdir?

Anlamsal HTML, web sayfalarının anlamını ve erişilebilirliğini artırır ancak aynı zamanda dikkate alınması gereken hususlar da vardır.

Avantajlar Dezavantajlar
Ekran okuyucular için erişilebilirliği iyileştirir. Yeni etiketlerin öğrenilmesini gerektirir.
Yapıyı netleştirerek SEO'yu geliştirir. İlk geliştirme süresini artırabilir.
Daha kolay kod okunabilirliği ve sürdürülebilirliği. Eski tarayıcıların desteği sınırlı olabilir.

Genel olarak, avantajları dezavantajlarından daha ağır basmaktadır ve bu da semantik HTML'i modern geliştirmede en iyi uygulama haline getirmektedir.


30) Nasıl? Duyarlı görseller için kullanılan eleman nedir?

The Element, geliştiricilerin farklı cihazlar veya ekran çözünürlükleri için birden fazla görüntü kaynağı sağlamasına olanak tanır. İç içe geçmiş gibi niteliklere sahip öğeler media ve type.

Örnek:

<picture>
	<source srcset="image-large.webp" media="(min-width: 800px)">
	<source srcset="image-small.webp" media="(max-width: 799px)">
	<img src="fallback.jpg" alt="Responsive Image">
</picture>

Bu, mobil cihazların daha küçük resimler yüklemesini, masaüstü bilgisayarların ise daha yüksek çözünürlüklü resimler almasını sağlayarak performansı artırır performans ve tepkisellik.


31) HTML5'e ses eklemenin farklı yolları nelerdir?

HTML5 şunları sağlar: Harici eklentilere olan ihtiyacı ortadan kaldıran bir öğedir. Tarayıcılar arası uyumluluğu sağlamak için MP3, OGG ve WAV gibi birden fazla formatı destekler. Geliştiriciler, içinde birden fazla kaynak belirleyebilir. öğe, tarayıcının desteklenen ilk biçimi seçmesine olanak tanır.

Örnek:

<audio controls>
	<source src="sound.mp3" type="audio/mpeg">
	<source src="sound.ogg" type="audio/ogg">
	Your browser does not support the audio element.
</audio>

Avantajları arasında yerel kontroller, otomatik oynatma, döngü ve altyazılı erişilebilirlik yer alır .


32) Nasıl olur? Etiket çalışması nedir ve avantajları nelerdir?

The element, üçüncü taraf oynatıcılar olmadan video yerleştirmeye olanak tanır. Desteklenen formatlar arasında MP4 (H.264), WebM ve Ogg bulunur. Geliştiriciler, aşağıdakiler gibi birden fazla kaynak ve özellik ekleyebilir: controls, autoplay, loop, ve poster.

Örnek:

<video controls width="600" poster="thumbnail.jpg">
	<source src="movie.mp4" type="video/mp4">
	<source src="movie.webm" type="video/webm">
	Your browser does not support the video tag.
</video>

Avantajları:

  • Flash'a olan bağımlılığı ortadan kaldırır.
  • Altyazılarla yerleşik erişilebilirlik sağlar.
  • Daha iyi performans ve güvenlik sunar.

33) HTML formlarını kullanmanın avantajları ve dezavantajları nelerdir?

Formlar kullanıcı girdisi için olmazsa olmazdır ancak güçlü ve zayıf yönleri de vardır.

Avantajlar Dezavantajlar
Standartlaştırılmıştır, tüm tarayıcılarda desteklenir. Güvenlik risklerine (örneğin XSS, CSRF) karşı savunmasızdır.
Backend sunucularla kolay entegrasyon. Kötü tasarlanmış formlar kullanılabilirliği azaltır.
Doğrulama ve çoklu giriş türlerini destekler. Güvenli veri işleme için HTTPS gereklidir.

En iyi uygulama: Anlamsal form etiketlerini, istemci ve sunucu tarafında doğrulamayı ve güvenli iletim yöntemlerini kullanın.


34) İstemci tarafı form doğrulaması sunucu tarafı doğrulamasından nasıl farklıdır?

İstemci tarafı doğrulaması HTML5 nitelikleri kullanılarak tarayıcıda gerçekleştirilir ( required, pattern ) Veya JavaSenaryo. Anında geri bildirim sağlar ancak atlanabilir.

Sunucu tarafı doğrulaması Verinin sunucuya iletilmesinden sonra gerçekleşir, güvenliği ve doğruluğu sağlar.

Görünüş İstemci tarafı Sunucu tarafı
hız Anında geri bildirim Daha yavaş, teslimden sonra
Güvenlik Baypas edilebilir Daha güvenli
Örnek E-posta PHP, Node.js doğrulaması

En iyi uygulama, optimum kullanılabilirlik ve güvenlik için her iki yöntemi birleştirmektir.


35) Amacı nedir? viewport Duyarlı tasarımda meta etiketi nedir?

MKS viewport meta etiketi, web sayfalarının mobil cihazlarda düzgün görüntülenmesini sağlar. Varsayılan olarak, birçok mobil tarayıcı masaüstü sayfalarını küçültür. Viewport etiketi, ölçekleme ve genişlik üzerinde kontrol sağlar.

Örnek:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Faydaları:

  • Duyarlı düzenleri garanti eder.
  • Yakınlaştırma sorunlarını önler.
  • Küçük ekranlarda Core Web Vitals'ı ve kullanılabilirliği iyileştirir.

Bunlar olmadan web siteleri mobil cihazlarda küçük ve kullanılamaz görünebilir.


36) Nasıl Ve Elementler HTML5 uygulamalarını nasıl iyileştirir?

: Modal açılır pencereler oluşturmak için yerel bir yol sağlar. Şu şekilde açılıp kapatılabilir: JavaSenaryo ( show() ve close() ).

: Etkinleştirilene kadar oluşturulmayan yeniden kullanılabilir HTML parçalarını tanımlar JavaSenaryo.

Örnek:

<dialog id="myDialog">Hello!</dialog>
<template id="card">
	<div class="card">Reusable content</div>
</template>

Faydaları:

  • harici modal kütüphanelere olan bağımlılığı ortadan kaldırır.
  • DOM'u karıştırmadan dinamik işleme olanak tanır.

37) Aradaki farkları açıklayın , , and .

Betikler düzgün yönetilmezse sayfa oluşturulmasını engelleyebilir.

özellik Davranış Kullanım çantası
Yürütme tamamlanana kadar HTML ayrıştırmasını engeller. Küçük satır içi betikler
Asenkron olarak yüklenir, hazır olduğunda hemen çalıştırılır. Analitik, reklamlar
Asenkron olarak yüklenir, HTML ayrıştırmasından sonra çalıştırılır. DOM'a bağımlı betikler

Örnek:

<script src="main.js" defer></script>

kullanma async ve defer performansı artırır ve render-bloklama sorunlarını önler.


38) HTML'deki formların güvenli bir şekilde işlenmesini nasıl sağlayabilirsiniz?

Form güvenliği hem HTML uygulamalarını hem de arka uç güvenlik önlemlerini gerektirir.

Temel uygulamalar şunları içerir:

  • Veri iletimi için her zaman HTTPS kullanın.
  • Girişleri hem istemci hem de sunucu tarafında doğrulayın.
  • Kullan autocomplete="off" Şifreler gibi hassas alanlar için öznitelik.
  • Uygula rel="noopener noreferrer" dış form eylemleri üzerinde.
  • Token'larla Siteler Arası İstek Sahteciliğini (CSRF) önleyin.

Örnek:

<form method="post" action="/tr/secure" autocomplete="off">
	<input type="password" name="pwd" required>
</form>

Güvenli formlar veri sızıntılarına ve yaygın güvenlik açıklarına karşı koruma sağlar.


39) HTML5'te çerezler, localStorage ve sessionStorage arasındaki fark nedir?

HTML5, çerezlere alternatif olarak Web Depolama'yı tanıttı.

Depolama türü Kapasite Ömür HTTP ile mi gönderildi?
Çerezler ~4KB Son kullanma tarihine kadar Evet
yerel depolama ~5–10MB Temizlenene kadar kalıcı Yok hayır
oturumDepolama ~5MB Tarayıcı/sekme kapatılana kadar Yok hayır

Örnek:

localStorage.setItem("theme", "dark");
console.log(localStorage.getItem("theme"));

Web Depolama, her HTTP isteğinde veri gönderilmediğinden performansı artırır.


40) HTML, görsellerin, formların ve multimedyanın erişilebilirliğini nasıl ele alır?

Erişilebilirlik, engelli kullanıcılar için kapsayıcılığı sağlar.

  • resimler: Kullanım alt Ekran okuyucular için nitelikler.
  • Formlar: Bağlantılı ekle for girdileri tanımlayan nitelikler.
  • Multimedya: Altyazı sağlayın ( (videolar için) ve transkriptler.

Örnek:

<img src="logo.png" alt="Company Logo">
<label for="email">Email</label>
<input type="email" id="email">

Erişilebilirlik standartlarına (WCAG, ARIA) uyulması, web uygulamalarının daha kullanılabilir ve yasalara daha uygun olmasını sağlar.


41) Kullanmanın faydaları nelerdir? multimedya içeren bir öğe?

The eleman içinde kullanılır veya Altyazı, açıklama veya açıklama gibi metin parçaları sağlamak. Bu, erişilebilirliği ve kullanılabilirliği artırır.

Faydaları:

  • İşitme engelli kullanıcılara yardımcı olur.
  • Metin taranabilir olduğundan SEO'yu geliştirir.
  • Gürültülü ortamlarda kullanıcı deneyimini iyileştirir.

Örnek:

<video controls>
	<source src="movie.mp4" type="video/mp4">
	<track src="captions.vtt" kind="subtitles" srclang="en" label="English">
</video>

Bu, multimedya içeriğinin daha geniş bir kitleye ulaşmasını sağlar.


42) Nasıl contenteditable HTML'de öznitelik çalışması?

MKS contenteditable Öznitelik, kullanıcıların harici araçlara ihtiyaç duymadan doğrudan tarayıcıda bir öğenin içeriğini düzenlemesine olanak tanır.

Örnek:

<p contenteditable="true">This paragraph is editable.</p>

Kullanım durumlarda:

  • Tarayıcı içi düzenleyiciler.
  • Not alma veya CMS benzeri uygulamalar.
  • Etkileşimli özelliklerin prototiplenmesi.

Yararlı olmasına rağmen, veriler sunuculara gönderildiğinde kontrolsüz düzenlemeler güvenlik riskleri oluşturabileceğinden dikkatli kullanılmalıdır.


43) HTML tasarımında aşamalı iyileştirme ile zarif bozulma arasındaki fark nedir?

Bunlar farklı tarayıcı yeteneklerini ele almak için kullanılan iki yaklaşımdır.

Yaklaşım Konsept Örnek E-posta
Aşamalı Geliştirme Temel HTML ile başlayın ve yetenekli tarayıcılar için gelişmiş özellikler ekleyin. Bir form temel HTML ile çalışır, ancak şunu kullanır: JavaMümkünse betik doğrulaması.
Zarif Bozulma Önce gelişmiş özellikleri oluşturun ve eski tarayıcılar için bir geri dönüş noktası sağlayın. Tuval tabanlı bir grafik, statik bir görüntüye geri döner.

Günümüzde evrensel erişimi garanti altına aldığı için aşamalı iyileştirme tercih edilen stratejidir.


44) HTML5'te mikro veri nedir ve SEO için nasıl faydalıdır?

Mikro veri, yapılandırılmış verileri öznitelikler kullanarak HTML öğelerine yerleştirmenin bir yoludur. itemscope, itemtype, ve itempropArama motorları bunu sonuçlarda zengin snippet'ler sağlamak için kullanır.

Örnek:

<div itemscope itemtype="https://schema.org/Book">
	<span itemprop="name">HTML Mastery</span>
	by <span itemprop="author">Jane Doe</span>
</div>

Faydaları:

  • Zengin snippet'lerle görünürlüğü artırır.
  • Arama motorlarına bağlam sağlar.
  • Arama sonuçlarında CTR'yi artırır.

45) Satır içi çerçevelerin kullanılmasının avantajları ve dezavantajları nelerdir? )?

Biz değindik Daha önce bahsetmiştik ama avantajlarını ve dezavantajlarını özetleyelim.

Avantajlar Dezavantajlar
Üçüncü taraf içeriklerin kolay entegrasyonu. Sayfa performansını yavaşlatır.
Dış kaynakları izole eder. Clickjacking'e karşı savunmasız.
Haritaları, videoları yerleştirmek için kullanışlıdır. SEO dostu olmayan içerikler genellikle göz ardı edilir.

En iyi uygulama kullanmaktır Az miktarda kullanın ve özelleştirmeye ve güvenli entegrasyona izin veren API'leri veya yerleştirmeleri tercih edin.


46) Nasıl kullanıyorsunuz? Ve HTML5'te öğeler?

Bu öğeler, daraltılabilir içerik bölümleri oluşturur JavaSenaryo.

Örnek:

<details>
	<summary>Click for more details</summary>
	<p>This text is revealed when expanded.</p>
</details>

Faydaları:

  • Kullanıcı etkileşimini iyileştirir.
  • Erişilebilirliği artırır (klavye ve ekran okuyucu dostudur).
  • Geleneğe bağımlılığı önler JavaSenaryo çözümleri.

Bu, özellikle SSS veya ilerici açıklama arayüzleri için faydalıdır.


47) HTML ve XHTML arasındaki temel farklar nelerdir?

HTML ve XHTML (Genişletilebilir HTML) işaretleme dilleridir, ancak XHTML daha katı XML kurallarını takip eder.

Özellikler HTML XHTML
Sözdizimi Esnek Sıkı, XML uyumlu
Etiket kapatma İsteğe bağlı Zorunlu
Büyük küçük harf duyarlılığı Büyük/küçük harfe duyarlı değil Küçük harf olmalı
Hata işleme Tarayıcılar affedicidir Ayrıştırma hataları işlemeyi bozuyor

Örnek: HTML'de geçerlidir ancak olmalıdır XHTML'de. Günümüzde esnekliği nedeniyle HTML5 büyük ölçüde XHTML'in yerini almıştır.


48) HTML'deki farklı belge türü türleri nelerdir ve neden önemlidirler?

Doctype, tarayıcıya hangi HTML sürümünün kullanılacağını söyler.

Türleri:

  1. HTML5: (basit, modern).
  2. HTML 4.01 Sıkı/Geçişli/Çerçeve Kümesi.
  3. XHTML 1.0 Sıkı/Geçişli/Çerçeve Kümesi.

Doğru doctype'ı kullanmak, tarayıcılar arasında tutarlı bir görüntüleme sağlar. HTML5 doctype artık standarttır.


49) HTML etiketleriyle SEO'yu nasıl geliştirirsiniz? , <meta> ve <h1>?

SEO doğru anlamsal yapılandırmaya dayanır.

  • : Sıralamada önemli olan sayfa başlığını tanımlar.
  • : Arama motorları için bir kesit sağlar.
  • Başlıklar ( – ): İçerik hiyerarşisini düzenleyin.
  • Görsellerdeki alt nitelikleri: Resim arama görünürlüğünü iyileştirin.
  • Şema işaretlemesi: Yapılandırılmış veriler sağlar.

Örnek:

<title>HTML Interview Questions</title>
<meta name="description" content="Comprehensive HTML interview guide with answers.">
<h1>Top HTML Questions</h1>

50) Aradaki farklar nelerdir? ve HTML'de?

Her ikisi de kullansa da href niteliklerine göre amaçları da farklılık göstermektedir.

Etiket Amaç Örnek E-posta
Sayfalar arasında gezinmek için köprüler oluşturur. buraya tıklayın
CSS veya simgeler gibi harici kaynaklarla ilişkileri tanımlar.

The öğesi hiçbir zaman sayfa gövdesinde görünmezken, tıklanabilir metin veya görseller oluşturur.


🔍 Gerçek Dünya Senaryoları ve Stratejik Yanıtlarla En İyi HTML Mülakat Soruları

1) Anlamsal ve anlamsal olmayan HTML öğeleri arasındaki fark nedir ve neden önemlidir?

Görüşmeyi yapan kişinin aradığı şey: Anlamsallık, erişilebilirlik, SEO ve sürdürülebilirlik konularında anlayış.

Örnek cevap:

"Semantik unsurlar gibi , , , Ve Hem tarayıcılara hem de yardımcı teknolojilere anlam ve yapı aktarırlar. Daha iyi yer işareti gezinmesi sayesinde erişilebilirliği artırır, arama motorlarının içerik hiyerarşisini anlamasına yardımcı olur ve kodu daha sürdürülebilir hale getirirler. Anlamsal olmayan öğeler gibi: ve hiçbir içsel anlam taşımazlar ve uygun bir anlamsal öğenin bulunmadığı durumlar için saklanmaları en iyisidir. Önce anlamsal öğelere öncelik veririm, ardından yalnızca gerektiğinde sınıflar veya ARIA nitelikleriyle zenginleştiririm."


2) Karmaşık bir formu düz HTML kullanarak nasıl erişilebilir ve kullanıcı dostu hale getirirsiniz?

Görüşmeyi yapan kişinin aradığı şey: Yerel form denetimleri, etiketler, kısıtlamalar ve erişilebilirlik niteliklerine hakim olma.

Örnek cevap:

"Uygun çağrışımlarla başlıyorum, uygun ifadeleri kullanıyorum type gibi özellikler email, tel, ve date, ve Ekle required, min, ve pattern Kısıtlama doğrulaması için. İlgili alanları şu şekilde gruplandırıyorum: Ve . kullanıyorum aria-describedby girdileri yardımcı metne ve hata mesajlarına bağlamak, net bir şekilde sağlamak placeholder etiketleri değiştirmeden metin ve etkinleştir autocomplete gibi belirteçler given-name ve address-line1Yerel doğrulama mesajlarına güveniyorum ancak bunu, ilk geçersiz alana odaklanan erişilebilir hata özetleriyle tamamlıyorum."


3) En iyi performansla duyarlı görselleri nasıl sunacağınızı açıklayın.

Görüşmeyi yapan kişinin aradığı şey: Pratik kullanımı , sizes, Ve .

Örnek cevap:

"Ben kullanıyorum ile srcset birden fazla çözünürlük ve bir sizes Düzenin gerçek işlenmiş genişliğini yansıtan öznitelik. Sanat yönetimi için görselleri medya şartlandırılmış unsurları her zaman dahil ederim width ve height yer ayırmak ve düzen kaymasını azaltmak için ve ben düşünüyorum loading="lazy" "Katlama altı görseller için. Uygun durumlarda, AVIF veya WebP gibi modern formatları yedeklerle birlikte sunuyorum."


4) Eski bir sayfa, düzen için tablolar kullanır ve erişilebilir değildir. Sayfayı yeniden düzenlemeye nasıl yaklaşırsınız?

Görüşmeyi yapan kişinin aradığı şey: Göç stratejisi, risk yönetimi ve test.

Örnek cevap (gerekli ifade #1'i kullanır):

"Önceki görevimde, tablo tabanlı yapıları, aşağıdaki gibi anlamsal kapsayıcılarla değiştirdim: , , ve düzen için CSS Grid. Riski azaltmak için dilimler halinde geçiş yaptım, her tablo bölgesini anlamsal bölümlere eşledim ve bir HTML doğrulayıcı ve aXe ile doğruladım. Uygun başlık seviyeleri, yer işaretleri ve klavye odak sırası ekledim. Görsel regresyon testleriyle eşitliği doğruladım ve aralayıcı görselleri ve kullanım dışı bırakılmış öznitelikleri kaldırarak performansı iyileştirdim.


5) Nasıl yapılır defer ve async Açık differ, and why should HTML authors care?

Görüşmeyi yapan kişinin aradığı şey: İşleme ve engelleme davranışının anlaşılması.

Örnek cevap:

"async bir betiği kullanılabilir hale gelir gelmez indirir ve çalıştırır, bu da sırasız yürütmeye neden olabilir. defer Ayrıştırma sırasında indirmeler yapılır, ancak HTML ayrıştırıldıktan sonra yürütme garanti edilir. HTML yazarları buna dikkat etmelidir çünkü engelleyici betikler ilk oluşturmayı geciktirir. Varsayılan olarak defer DOM hazırlığına ve rezervine bağlı sayfa betikleri için async “analitik gibi bağımsız senaryolar için.”


6) Piksel mükemmelliğindeki tasarım isteklerini anlamsal, erişilebilir HTML ile dengelediğiniz bir zamanı anlatın.

Görüşmeyi yapan kişinin aradığı şey: İşbirliği, iletişim ve ilkeli uzlaşmalar.

Örnek cevap (gerekli ifade #2'i kullanır):

"Önceki bir pozisyonda, anlamsal olmayan işaretlemeyi teşvik eden iç içe geçmiş dekoratif sarmalayıcılar gerektiren bir tasarım vardı. Önce anlamsal bir yapı önerdim, ardından görsel sonuçları ekstra kodlar yerine CSS ile elde ettim. "Öğeler. Ekran okuyucu gezinme iyileştirmelerini gösterdim ve üzerinde anlaşılan bileşen API'sini belgeledim. Bu uzlaşma, erişilebilirliği ve sürdürülebilirliği korurken amaçlanan görünümü korudu."


7) Boyutları olmayan görseller ve iframe'ler nedeniyle kümülatif bir düzen kayması fark ettiniz. Planınız nedir?

Görüşmeyi yapan kişinin aradığı şey: Gerçek performans sorunlarına pratik çözümler.

Örnek cevap (gerekli ifade #3'i kullanır):

"Önceki işimde tüm Ve elementler ve eklenen içsel width ve height Kaynak en boy oranıyla eşleşen öznitelikler. CSS kullandım max-width: 100% Duyarlı bir şekilde ölçeklendirmek için ve dinamik içerik söz konusu olduğunda CSS'yi uyguladım aspect-ratio "Özellik veya kapsayıcı yer tutucuları. Performans panelinde ve Lighthouse'da iyileştirmeler doğruladım ve düzen kaymasının azaldığını doğruladım."


8) Erişilebilir HTML tabloları yazmak için en iyi uygulamalar nelerdir?

Görüşmeyi yapan kişinin aradığı şey: Doğru yapısal işaretleme ve yardımcı teknik destek.

Örnek cevap:

"Ben kullanıyorum özlü bir başlık için, , , Ve yapı için ve Başlıkları tanımlamak için. Çok düzeyli başlıklara sahip karmaşık tablolar için, headers ve id Hücreleri eşlemek için öznitelikler kullanıyorum. Düzen için tablo kullanmaktan kaçınıyorum, hücreler içindeki içerik için yeterli metin kontrastı sağlıyorum ve gerekirse bağlam için tablonun dışında özetler sunuyorum.”


9) Birden fazla HTML çıktısının dikkat çekmek için yarıştığı durumlarda sıkı teslim tarihleriyle nasıl başa çıkıyorsunuz?

Görüşmeyi yapan kişinin aradığı şey: Önceliklendirme, iletişim ve kalite baskı altında.

Örnek cevap (gerekli ifade #4'i kullanır):

"Son görevimde, görevleri kullanıcı etkisi ve bağımlılık zincirlerine göre sınıflandırdım. Önce en yüksek etkiye sahip, en düşük riskli sayfaları teslim ettim, paydaşlara artıları ve eksileri ilettim ve doğrulama, erişilebilirlik kontrolleri ve temel performans bütçelerini içeren bir "tamamlandı" tanımı oluşturdum. Kalitenin gerilemesini önlemek için ertelenen iyileştirmeleri ve planlanan takip düzeltmelerini belgeledim."


10) Tek sayfalık bir pazarlama sitesi, SEO dostu olmalıdır. JavaBetiğe bağımlılık. Hangi HTML stratejilerini uyguluyorsunuz?

Görüşmeyi yapan kişinin aradığı şey: Arama dostu, dayanıklı içerik sunma yeteneği.

Örnek cevap:

"Birincil içeriğin HTML'de görüntülenmesini sağlıyorum, HTML tarafından enjekte edilmiyor JavaKomut dosyası. Mantıksal başlık hiyerarşisi ve tanımlayıcı metin kullanıyorum. ve <meta name=”description”>, kanonik URL'ler ve semantik bölümler. Gerektiğinde içeriği uygun mikro veriler veya JSON-LD ile işaretliyor, anlamlı dahili bağlantılar sağlıyor ve önizlemeler için sosyal meta etiketleri ekliyorum. Belge taslağını doğruluyor ve statik bir site haritasıyla taranabilirliği onaylıyorum.

Bu yazıyı şu şekilde özetleyin: