HTML: Web'in İskeleti - Kapsamlı Bir Öğrenme Rehberi
İnternet dünyasına adım attığınızda gördüğünüz her web sayfasının temelinde yatan bir dil vardır: HTML. HyperText Markup Language (Hiper Metin İşaretleme Dili) anlamına gelen HTML, web sayfalarının yapısını ve içeriğini tanımlamak için kullanılan standart işaretleme dilidir. Tıpkı bir binanın iskeleti gibi, HTML de bir web sayfasının başlıklarını, paragraflarını, resimlerini, bağlantılarını ve diğer tüm öğelerini organize eder. Bu rehber, HTML'in ne olduğundan başlayarak temel etiketlerden modern HTML5 özelliklerine kadar geniş bir yelpazede bilgi sunmayı amaçlamaktadır. İster web geliştirmeye yeni başlıyor olun, ister bilgilerinizi tazelemek isteyin, bu kaynak size yol gösterecektir.
HTML, bir programlama dili değildir; çünkü mantıksal işlemler veya algoritmalar içermez. Bunun yerine, bir işaretleme dilidir. Yani, metin içerisine eklenen özel "etiketler" (tags) aracılığıyla tarayıcıya içeriğin nasıl yorumlanacağını ve görüntüleneceğini söyler. Örneğin, bir metnin başlık olduğunu, bir kelimenin vurgulanması gerektiğini veya bir görselin sayfada nerede yer alacağını HTML etiketleri belirler. CSS (Cascading Style Sheets) ile birlikte sayfanın görünümünü (renkler, fontlar, yerleşim) ve JavaScript ile birlikte sayfanın etkileşimini (dinamik içerik, animasyonlar) kontrol etmek için temel bir yapı taşı görevi görür. Bu üç teknoloji (HTML, CSS, JavaScript), modern web geliştirmenin temelini oluşturur.
HTML'in tarihi, World Wide Web'in (WWW) doğuşuna kadar uzanır. İlk olarak 1991 yılında Tim Berners-Lee tarafından geliştirilen HTML, zaman içinde World Wide Web Consortium (W3C) ve Web Hypertext Application Technology Working Group (WHATWG) gibi kuruluşlar tarafından standartlaştırılarak geliştirilmiştir. HTML4 ile sağlam bir temel oluşturan dil, özellikle HTML5 sürümüyle birlikte multimedya desteği, semantik etiketler ve çeşitli API'lar gibi birçok yenilik kazanarak web'in yeteneklerini önemli ölçüde artırmıştır. Günümüzde HTML, yaşayan bir standarttır ve sürekli olarak güncellenmektedir. Bu rehberde, HTML'in temel prensiplerini, en sık kullanılan etiketleri ve modern web uygulamaları geliştirmek için bilmeniz gereken önemli kavramları adım adım keşfedeceğiz.
HTML Temelleri: Yapı ve Sözdizimi
Her HTML belgesi belirli bir temel yapı üzerine kurulur. Bu yapı, tarayıcının sayfayı doğru bir şekilde yorumlaması için gereklidir. Ayrıca, HTML etiketlerinin nasıl yazıldığına dair belirli kurallar (sözdizimi) bulunur.
Temel HTML Belge Yapısı Nasıldır?
Minimal bir HTML belgesi aşağıdaki temel öğeleri içerir:
Sayfa Başlığı
Ana Başlık
Bu bir paragraf.
: Belge türü bildirimidir. Tarayıcıya bunun bir HTML5 belgesi olduğunu söyler. Her HTML belgesinin en başında yer almalıdır.
: HTML belgesinin kök (root) elemanıdır. Tüm diğer HTML elemanları bu etiket içinde yer alır. lang="tr" niteliği, sayfanın dilinin Türkçe olduğunu belirtir, bu SEO ve erişilebilirlik için önemlidir.
: Sayfa hakkında meta bilgileri içerir. Bu bilgiler tarayıcıda doğrudan görüntülenmez (<code><title></code> hariç). Meta veriler, karakter kodlaması, sayfa açıklaması, anahtar kelimeler, CSS dosyalarının bağlantıları gibi bilgileri barındırır.
: Belgenin karakter kodlamasını belirtir. UTF-8, Türkçe karakterler de dahil olmak üzere dünya dillerinin çoğunu destekleyen evrensel bir standarttır.
: Mobil cihazlarda sayfanın nasıl görüntüleneceğini kontrol eder. width=device-width, sayfa genişliğini cihazın ekran genişliğine ayarlar. initial-scale=1.0, sayfanın ilk yüklenmedeki yakınlaştırma seviyesini belirler. Responsive tasarım için kritik bir etikettir.
<strong><code><title></code>:</strong> Tarayıcı sekmesinde veya pencere başlığında görünen sayfa başlığını tanımlar. SEO için de çok önemlidir.
: Sayfanın kullanıcı tarafından görülebilen tüm içeriğini (metinler, başlıklar, resimler, bağlantılar, tablolar, listeler vb.) içerir.
HTML Etiketleri (Tags) Nedir?
HTML etiketleri, içeriği işaretlemek ve yapılandırmak için kullanılan anahtar kelimelerdir. Genellikle küçüktür (<code><</code>) ve büyüktür (>) işaretleri arasına yazılırlar. Çoğu etiket çiftler halinde gelir: bir açılış etiketi (örn: ) ve bir kapanış etiketi (örn:
). Kapanış etiketinde etiket adının önünde bir eğik çizgi (/) bulunur. Açılış ve kapanış etiketi arasındaki içerik, o etiketin etki ettiği alandır.
İçerik buraya gelir
Bazı etiketler ise "boş" veya "kendiliğinden kapanan" etiketlerdir. Bunlar içerik barındırmazlar ve kapanış etiketleri yoktur (veya açılış etiketinin sonunda / ile belirtilebilir). Örnekler: (satır atlama), (yatay çizgi), (resim), (form girişi).
HTML etiketleri büyük/küçük harfe duyarlı değildir (yani ile aynıdır), ancak genel kabul görmüş standart ve okunabilirlik açısından küçük harf kullanmak tavsiye edilir.
HTML Nitelikleri (Attributes) Nedir?
Nitelikler, HTML etiketlerine ek bilgiler veya özellikler katmak için kullanılır. Her zaman açılış etiketinin içinde yer alırlar ve genellikle isim="değer" çiftleri şeklinde yazılırlar. Değerler her zaman çift tırnak (") veya tek tırnak (') içine alınmalıdır (çift tırnak daha yaygındır).
etiketindeki src niteliği resim dosyasının yolunu, alt niteliği resim yüklenemezse veya ekran okuyucu tarafından okunurken gösterilecek alternatif metni, width ve height nitelikleri ise resmin genişliğini ve yüksekliğini belirtir.
etiketindeki class niteliği, CSS ile stil vermek veya JavaScript ile seçmek için kullanılan bir veya daha fazla sınıf adı tanımlar. id niteliği ise elemente benzersiz bir kimlik atar (sayfada her id sadece bir kez kullanılmalıdır).
Her etiketin kendine özgü desteklediği nitelikler vardır, ancak id, class, style (inline CSS için), title (ek bilgi için üzerine gelince çıkan tooltip) gibi bazı genel nitelikler çoğu etikette kullanılabilir.
HTML Yorumları Nasıl Yazılır?
HTML kodunuza açıklamalar veya notlar eklemek için yorumları kullanabilirsiniz. Yorumlar tarayıcı tarafından işlenmez ve sayfada görüntülenmez. Kodun belirli bölümlerini açıklamak veya geçici olarak kod parçalarını devre dışı bırakmak için kullanışlıdır.
Bu paragraf görünecek.
Bu paragraf da görünecek.
Yorumlar ile biter.
Metin İçeriğini Yapılandırma ve Biçimlendirme
HTML, metin içeriğini anlamlı bir şekilde yapılandırmak ve temel biçimlendirme uygulamak için çeşitli etiketler sunar.
Başlık Etiketleri ( - )
Başlık etiketleri, belgenin veya bölümlerin başlıklarını tanımlamak için kullanılır. en önemli (genellikle sayfanın ana başlığı) ve en büyük başlığı temsil ederken, en az önemli ve en küçük başlığı temsil eder. Başlıklar sadece metni büyütmek için değil, aynı zamanda belgenin yapısını ve hiyerarşisini belirtmek için kullanılmalıdır. Arama motorları ve ekran okuyucular bu hiyerarşiyi anlar.
Ana Sayfa Başlığı
Giriş paragrafı...
Bölüm 1 Başlığı
Bölüm 1 içeriği...
Bölüm 1 Alt Başlığı
Alt bölüm içeriği...
Bölüm 2 Başlığı
Bölüm 2 içeriği...
Genellikle bir sayfada yalnızca bir tane etiketi kullanılması önerilir.
Paragraf, Satır Atlama ve Yatay Çizgi
(Paragraf): Metin bloklarını tanımlar. Tarayıcılar genellikle paragraflar arasına otomatik olarak bir miktar boşluk ekler.
(Line Break): Yeni bir paragrafa başlamadan metin içinde satır atlaması yapar. Şiir veya adres gibi içeriklerde kullanışlıdır. Gereksiz yere paragraflar arası boşluk yaratmak için kullanılmamalıdır (bunun için CSS kullanılmalıdır).
(Horizontal Rule): Konu veya tema değişikliğini belirtmek için yatay bir çizgi çizer. Genellikle blok seviyesinde bir ayırıcı olarak kullanılır.
Bu birinci paragraf. İçerik burada devam ediyor.
Bu ikinci paragraf. Adres örneği:
123 Web Sokak,
İnternet Şehri, WWW 98765
Yatay çizgiden sonraki yeni konuyla ilgili paragraf.
Temel Metin Biçimlendirme Etiketleri
Metin içinde belirli kısımlara vurgu yapmak veya farklı anlamlar katmak için kullanılırlar:
<strong><strong> ve <b> (Kalın): metnin önemli olduğunu belirtirken (semantik anlam), sadece metni stilistik olarak kalın yapar (anlamsal önemi yoktur). Genellikle tercih edilir.
ve (Eğik): (emphasis) metne vurgu katarken (semantik anlam), <i> (italic) metni sadece eğik yapar (teknik terimler, yabancı kelimeler için kullanılabilir). Vurgu için tercih edilir.
<u> (Altı Çizili): Metnin altını çizer. Genellikle bağlantılarla karıştırılabileceği için dikkatli kullanılmalıdır. Yanlış yazımları belirtmek gibi özel durumlar için düşünülebilir.
<s> veya <strike> (Üstü Çizili): Artık geçerli olmayan veya doğru olmayan metinleri belirtmek için kullanılır.
(Subscript): Alt simge metni oluşturur (örn: H2O).
(Superscript): Üst simge metni oluşturur (örn: x2).
: Bilgisayar kodu parçacıklarını belirtmek için kullanılır. Genellikle tek aralıklı (monospace) bir fontla gösterilir.
(Preformatted Text): İçindeki metnin boşluklarını ve satır atlamalarını koruyarak, yazıldığı gibi gösterilmesini sağlar. Genellikle kod blokları için kullanılır (içine etiketi yerleştirilebilir).
: Başka bir kaynaktan alıntılanan uzun metin bloklarını belirtir. Genellikle girintili olarak gösterilir. cite niteliği ile kaynak URL'si belirtilebilir.
: Satır içi kısa alıntıları belirtir. Tarayıcılar genellikle otomatik olarak tırnak işareti ekler. cite niteliği burada da kullanılabilir.
(HTML5): Metnin belirli bir bölümünü vurgulamak veya işaretlemek için kullanılır (örneğin arama sonuçlarında eşleşen kelimeler).
(HTML5): Tarih ve/veya saat bilgisini makine tarafından okunabilir formatta belirtmek için kullanılır. datetime niteliği standart formatta tarih/saat bilgisini içerir.
Önemli uyarı: Lütfen dikkatli olun.
Bu kelimeye vurgu yapılmıştır.
Kimyasal formül: H2O
Matematiksel ifade: E = mc2
Bir kod parçası: console.log('Merhaba');
function selamVer(isim) {
console.log('Merhaba, ' + isim + '!');
}
Bu uzun bir alıntı metnidir...
Atasözü der ki: Damlaya damlaya göl olur.
Arama sonucu: metinde HTML kelimesi bulundu.
Toplantı yapılacak.
Listeler (
, ,
)
HTML, bilgileri listelemek için üç tür liste sunar:
(Unordered List - Sırasız Liste): Öğelerin sırasının önemli olmadığı listelerdir. Öğeler genellikle madde işaretleri (•, -, *) ile gösterilir. Her liste öğesi (List Item) etiketi içine alınır.
(Ordered List - Sıralı Liste): Öğelerin sırasının önemli olduğu listelerdir. Öğeler genellikle sayılar veya harflerle numaralandırılır. Her liste öğesi yine etiketi içine alınır. type (1, a, A, i, I) ve start nitelikleri ile numaralandırma stili ve başlangıç değeri değiştirilebilir.
(Description List - Tanım Listesi): Terimler ve tanımlarını içeren listeler oluşturmak için kullanılır.
(Description Term): Tanımlanacak terimi belirtir.
(Description Details): Terimin tanımını veya açıklamasını belirtir.
Bir birden fazla ile veya birden fazla tek bir ile ilişkilendirilebilir.
Alışveriş Listesi (Sırasız)
Elma
Süt
Ekmek
Yapılacaklar (Sıralı)
E-postaları kontrol et
Raporu tamamla
Toplantıya katıl
Web Terimleri (Tanım Listesi)
HTML
HyperText Markup Language - Web sayfalarının yapısını tanımlar.
CSS
Cascading Style Sheets - Web sayfalarının görünümünü biçimlendirir.
JS
JavaScript - Web sayfalarına etkileşim ve dinamizm katar.
Listeler iç içe de kullanılabilir (bir içine yeni bir
veya başlatılabilir).
Bağlantılar ve Görseller
Web'in temelini oluşturan bağlantılar (hyperlinks) ve sayfaları zenginleştiren görseller, HTML'in vazgeçilmez elemanlarındandır.
Bağlantı Oluşturma ( Etiketi)
(anchor) etiketi, bir sayfadan diğerine veya aynı sayfa içindeki farklı bir bölüme bağlantı oluşturmak için kullanılır. En önemli niteliği href (Hypertext Reference)'dir ve bağlantının hedefini (URL veya sayfa içi ID) belirtir.
Dış Bağlantı: Başka bir web sitesine yönlendirir. URL tam olarak (http:// veya https:// ile) belirtilmelidir.
İç Bağlantı (Göreli URL): Aynı web sitesi içindeki başka bir sayfaya yönlendirir. Tam URL yerine dosya yolu belirtilir.
Sayfa İçi Bağlantı (Anchor Link): Aynı sayfa içindeki belirli bir bölüme atlamak için kullanılır. Hedef bölümün id niteliği href'te # işaretiyle belirtilir.
E-posta Bağlantısı: Kullanıcının varsayılan e-posta istemcisini açarak belirli bir adrese e-posta göndermesini sağlar (mailto: kullanılır).
Telefon Bağlantısı: Mobil cihazlarda doğrudan arama başlatır (tel: kullanılır).
etiketi, web sayfalarına resim eklemek için kullanılır. Bu boş bir etikettir, yani kapanış etiketi yoktur.
src (Source): Görüntülenecek resim dosyasının yolunu (URL veya göreli yol) belirtir. Bu nitelik zorunludur.
alt (Alternative Text): Resim yüklenemediğinde veya ekran okuyucu kullanan kullanıcılar için gösterilecek alternatif bir metin sağlar. SEO ve erişilebilirlik için çok önemlidir ve zorunlu kabul edilmelidir. Eğer resim tamamen dekoratif ise ve içerikle ilgisi yoksa alt="" şeklinde boş bırakılabilir.
width ve height: Resmin genişliğini ve yüksekliğini piksel cinsinden belirtir. Bu nitelikleri eklemek, tarayıcının sayfa yüklenirken resim için yer ayırmasına yardımcı olur ve sayfa düzeninin kaymasını (layout shift) engeller. Ancak, CSS ile boyutlandırma yapmak genellikle daha esnektir (özellikle responsive tasarımda).
title: Resmin üzerine gelindiğinde ek bilgi gösterir.
loading="lazy" (Modern Nitelik): Tarayıcıya resmi hemen değil, kullanıcı sayfayı aşağı kaydırıp resmin görünür alana yaklaştığında yüklemesini söyler. Sayfa yükleme performansını artırabilir.
Duyarlı Görseller ( ve srcset)
Farklı ekran boyutları veya çözünürlükleri için farklı resimler sunarak performansı ve kullanıcı deneyimini iyileştirmek mümkündür.
srcset Niteliği ( içinde): Tarayıcının cihazın piksel yoğunluğuna veya ekran genişliğine göre seçebileceği farklı çözünürlükteki resim dosyalarını tanımlar.
Piksel Yoğunluğu (x tanımlayıcısı):srcset="image-1x.jpg 1x, image-2x.jpg 2x" (Normal ve yüksek çözünürlüklü ekranlar için).
Genişlik (w tanımlayıcısı) ve sizes Niteliği: Tarayıcıya farklı genişliklerdeki resimleri ve resmin farklı ekran boyutlarında ne kadar yer kaplayacağını bildirir. Tarayıcı en uygun olanı seçer. sizes="(max-width: 600px) 100vw, 50vw" (Ekran 600px'den darsa resim ekran genişliğinin %100'ünü, değilse %50'sini kaplar).
Etiketi: Daha gelişmiş kontrol sağlar. Farklı elemanları kullanarak, ekran boyutu, yönlendirme veya tarayıcının desteklediği resim formatı (örn: WebP) gibi koşullara göre farklı resim kaynakları belirlemenizi sağlar. En sona her zaman bir etiketi eklenmelidir (fallback olarak).
Tablolarla Veri Sunumu
HTML tabloları, satır ve sütunlardan oluşan yapılandırılmış verileri sunmak için kullanılır. Eskiden sayfa düzeni için kullanılsalar da, günümüzde bu amaçla CSS kullanılmalıdır. Tablolar sadece tabular veriler (istatistikler, karşılaştırmalar vb.) için uygundur.
Temel Tablo Yapısı
Bir tablo şu temel etiketlerle oluşturulur:
: Tablonun tamamını kapsayan ana etikettir.
(Table Row): Tablo içinde bir satırı tanımlar.
(Table Header): Bir başlık hücresini tanımlar. İçindeki metin genellikle kalın ve ortalanmış olarak gösterilir. Hem sütun başlıkları hem de satır başlıkları için kullanılabilir. scope niteliği ("col" veya "row") başlığın hangi hücrelere başlık yaptığını belirtmek için erişilebilirlik açısından önemlidir.
(Table Data): Bir veri hücresini tanımlar. Normal tablo içeriği burada yer alır.
: Tabloya bir başlık veya açıklama ekler. Genellikle
etiketinden hemen sonra kullanılır ve tablonun içeriğini özetler. Erişilebilirlik için önemlidir.
Aylık Satış Raporu
Ay
Ürün A Satış
Ürün B Satış
Ocak
150
200
Şubat
180
210
Mart
210
250
Not: Örnekteki border="1" niteliği HTML5'te geçerli olsa da, tablo kenarlıklarını ve diğer stilleri CSS ile tanımlamak modern yaklaşımdır.
Tablo Yapısını Gruplama (, , )
Daha karmaşık veya uzun tablolarda, içeriği anlamsal olarak gruplamak için bu etiketler kullanılır:
(Table Head): Tablonun başlık satır(lar)ını gruplar. Bir tabloda en fazla bir tane bulunur.
(Table Body): Tablonun ana veri satırlarını gruplar. Bir tabloda birden fazla olabilir.
(Table Foot): Tablonun alt bilgi veya özet satır(lar)ını gruplar. Bir tabloda en fazla bir tane bulunur.
Bu etiketler, tarayıcının tabloyu daha iyi yorumlamasına yardımcı olur. Örneğin, uzun tablolarda sayfa kaydırıldığında başlık (thead) sabit tutulabilir veya yazdırma sırasında her sayfanın başında/sonunda thead/tfoot tekrarlanabilir. Ayrıca CSS ile farklı bölümleri kolayca biçimlendirmeyi sağlar.
Detaylı Gider Tablosu
Kategori
Açıklama
Tutar (TL)
Ofis
Kira
2500
Ofis
Faturalar
450
Pazarlama
Reklam Gideri
1200
Toplam Gider
4150
, , ve etiketlerinin sırası HTML kodunda önemli değildir (genellikle thead, tfoot, tbody sırası da kullanılır), ancak tarayıcı her zaman başlık, gövde ve alt bilgi sırasında gösterir.
Hücreleri Birleştirme (colspan ve rowspan)
Bazen bir hücrenin birden fazla sütuna veya satıra yayılması gerekebilir.
colspan (Column Span): Bir hücrenin yatay olarak kaç sütunluk yer kaplayacağını belirtir.
veya
etiketine nitelik olarak eklenir.
rowspan (Row Span): Bir hücrenin dikey olarak kaç satırlık yer kaplayacağını belirtir.
veya
etiketine nitelik olarak eklenir.
Zaman Çizelgesi
Saat
Pazartesi
Salı
Çarşamba
09:00 - 10:00
Toplantı
Proje Çalışması
Eğitim
10:00 - 11:00
Mola
Eğitim
11:00 - 12:00
Genel Sunum
Bir hücre birleştirildiğinde, kapladığı alandaki diğer hücreler HTML kodundan çıkarılmalıdır.
HTML Formları ile Kullanıcı Etkileşimi
HTML formları, kullanıcılardan veri toplamak (giriş bilgileri, anketler, iletişim mesajları vb.) ve bu verileri sunucuya göndermek için temel mekanizmadır.
Form Oluşturma ( Etiketi)
Tüm form elemanları etiketi içine alınır. Bu etiket, formun nasıl davranacağını belirleyen önemli niteliklere sahiptir:
action: Form verilerinin gönderileceği sunucu tarafı betiğin (örn: PHP, ASP.NET, Node.js script) URL'sini belirtir. Boş bırakılırsa veya belirtilmezse, form verileri aynı sayfaya gönderilir.
method: Verilerin sunucuya nasıl gönderileceğini belirleyen HTTP metodunu tanımlar.
GET: Form verilerini URL'nin sonuna ekleyerek gönderir (örn: sayfa.php?isim=Ali&yas=30). Kısa, hassas olmayan veriler (arama sorguları gibi) için uygundur. Veri URL'de göründüğü için güvensizdir ve gönderilebilecek veri miktarı sınırlıdır.
POST: Form verilerini HTTP isteğinin gövdesinde (body) gönderir. URL'de görünmez. Daha güvenlidir ve daha büyük miktarda veri göndermek için uygundur (dosya yükleme, giriş bilgileri vb.).
enctype (Encoding Type): Form verileri sunucuya gönderilmeden önce nasıl kodlanacağını belirtir. Genellikle method="POST" ile kullanılır.
application/x-www-form-urlencoded: Varsayılan değerdir. Boşluklar '+' ile, özel karakterler ASCII HEX değerleri ile değiştirilir.
multipart/form-data: Form dosya yükleme () içeriyorsa bu değer kullanılmalıdır. Veriler parçalar halinde gönderilir.
text/plain: Verileri boşlukları '+'ya çevirmeden, basit metin olarak gönderir. Genellikle hata ayıklama dışında kullanılmaz.
name: Forma bir isim verir. JavaScript ile forma erişmek için kullanılabilir.
target: Form gönderildikten sonra sunucudan gelen yanıtın nerede görüntüleneceğini belirtir (_self, _blank vb.).
autocomplete: Tarayıcının form alanlarını otomatik olarak doldurup doldurmayacağını kontrol eder (on veya off).
novalidate: Form gönderilirken HTML5'in yerleşik doğrulama mekanizmalarını devre dışı bırakır.
Giriş Elemanları ()
etiketi, formlardaki en yaygın kullanılan elemandır ve type niteliğine göre farklı türlerde veri girişi sağlar. Boş bir etikettir.
type="email" (HTML5): E-posta adresi girişi (temel format kontrolü yapar).
type="number" (HTML5): Sayısal değer girişi (arttırma/azaltma okları gösterebilir). min, max, step nitelikleri kullanılabilir.
type="date" (HTML5): Tarih seçici gösterir.
type="tel" (HTML5): Telefon numarası girişi (belirli bir format zorlamaz ama mobil cihazlarda sayısal klavye açabilir).
type="url" (HTML5): URL girişi (temel format kontrolü yapar).
type="search" (HTML5): Arama alanı (görünümü text gibidir ama bazı tarayıcılarda temizleme butonu gösterebilir).
type="radio": Radyo düğmesi (bir grup içinden sadece bir seçeneğin seçilmesine izin verir). Aynı gruba ait radyo düğmelerinin name niteliği aynı olmalıdır. value niteliği, seçildiğinde sunucuya gönderilecek değeri belirtir. checked niteliği ile varsayılan olarak seçili gelebilir.
type="checkbox": Onay kutusu (birden fazla seçeneğin seçilmesine veya tek bir seçeneğin işaretlenip/kaldırılmasına izin verir). Aynı konseptteki checkbox'lar için name niteliği aynı olabilir (sunucu tarafında dizi olarak alınabilir). value ve checked nitelikleri bulunur.
type="file": Kullanıcının cihazından dosya seçmesini sağlar. Formun enctype="multipart/form-data" olması gerekir. accept niteliği ile kabul edilecek dosya türleri sınırlandırılabilir (örn: accept="image/png, image/jpeg").
type="submit": Formu gönderme düğmesi. value niteliği düğme üzerindeki metni belirler (varsayılanı "Gönder" veya "Submit").
type="reset": Formdaki tüm alanları varsayılan değerlerine sıfırlama düğmesi.
type="button": Genel amaçlı bir düğme. Varsayılan bir davranışı yoktur, genellikle JavaScript ile işlevsellik kazandırılır. value niteliği düğme üzerindeki metni belirler.
type="hidden": Kullanıcıya görünmeyen ancak formla birlikte sunucuya gönderilmesi gereken verileri (örn: kullanıcı ID, oturum bilgisi) tutmak için kullanılır.
type="range" (HTML5): Belirli bir aralıkta değer seçmek için kaydırıcı (slider) gösterir. min, max, step nitelikleri önemlidir.
type="color" (HTML5): Renk seçici gösterir.
type="datetime-local", type="month", type="week", type="time" (HTML5): Farklı tarih/saat formatları için seçiciler.
Ortak Nitelikler:
name: Alanın adını belirtir. Sunucu tarafında veriyi almak için kullanılır. Form gönderimi için zorunludur (submit, reset, button hariç).
value: Alanın başlangıç değerini veya gönderilecek değeri (radio, checkbox, submit, button için) belirtir.
id: Alana benzersiz bir kimlik atar. etiketi ile ilişkilendirmek ve JavaScript/CSS ile seçmek için kullanılır.
placeholder: Alan boşken görünen ipucu metnini belirtir. Kullanıcı yazmaya başlayınca kaybolur.
required (HTML5): Alanın doldurulmasının zorunlu olduğunu belirtir. Form gönderilmeden önce tarayıcı kontrol yapar.
disabled: Alanı tamamen devre dışı bırakır. Kullanıcı etkileşimde bulunamaz ve değeri formla gönderilmez. Görünümü genellikle soluktur.
maxlength: Metin tabanlı alanlara girilebilecek maksimum karakter sayısını belirler.
min, max, step: Sayısal veya tarih/saat/range türleri için minimum/maksimum değerleri ve artış adımını belirler.
pattern (HTML5): Alanın değerinin eşleşmesi gereken bir düzenli ifade (regular expression) tanımlar. Özel format kontrolü sağlar.
size: Metin tabanlı alanların görünür genişliğini karakter cinsinden belirler.
multiple (HTML5):type="email" veya type="file" için birden fazla değer/dosya seçimine izin verir.
Diğer Form Elemanları (, gereklidir. Başlangıç değeri etiketler arasına yazılır.
: Açılır liste (dropdown) oluşturur. İçindeki seçenekler etiketleri ile tanımlanır.
: Listedeki her bir seçeneği temsil eder. value niteliği, seçenek seçildiğinde sunucuya gönderilecek değeri belirtir. Etiketler arasındaki metin kullanıcıya görünen seçenektir. selected niteliği ile varsayılan olarak seçili gelebilir.
: Uzun listelerdeki seçenekleri gruplamak için kullanılır. label niteliği grup başlığını belirtir. Seçilemez bir öğedir.
etiketi name, id, required, disabled gibi nitelikleri alır. multiple niteliği eklenirse, kullanıcı birden fazla seçenek seçebilir (genellikle Ctrl/Cmd tuşu ile). size niteliği ile aynı anda görünecek seçenek sayısı belirlenebilir.
: Tıklanabilir bir düğme oluşturur. 'a göre daha esnektir çünkü içine metin dışında HTML içeriği (örn: , ) alabilir.
type Niteliği:
submit: Formu gönderir (varsayılan).
reset: Formu sıfırlar.
button: Varsayılan davranışı yoktur (JavaScript için).
name ve value: Form gönderildiğinde sunucuya gönderilecek adı ve değeri belirtir (özellikle birden fazla submit butonu varsa hangisine tıklandığını anlamak için).
disabled niteliği ile devre dışı bırakılabilir.
ve : Form içindeki ilgili elemanları gruplamak için kullanılır. grubu çevreler (genellikle etrafına bir çerçeve çizer), ise bu grubun başlığını belirtir (çerçevenin üzerine yerleşir). Erişilebilirlik ve formun okunabilirliği açısından faydalıdır.
(HTML5): Bir alanı için önceden tanımlanmış seçenekler listesi sunar. Kullanıcı yazmaya başladığında bu listeden öneriler gösterilir, ancak kullanıcı isterse listede olmayan bir değeri de girebilir ('ten farkı budur). elemanının list niteliği, 'in id'si ile eşleşmelidir. Seçenekler ile tanımlanır.
(HTML5): Bir hesaplama veya kullanıcı eyleminin sonucunu göstermek için kullanılır. Genellikle JavaScript ile değeri güncellenir. for niteliği ile hesaplamada kullanılan giriş elemanlarının ID'lerini listeleyebilir. name niteliği de alabilir.
HTML5 Form Doğrulama (Validation)
HTML5, JavaScript'e gerek kalmadan temel form doğrulaması yapmak için yerleşik mekanizmalar sunar. Bu, kullanıcı deneyimini iyileştirir ve sunucu yükünü azaltır.
required Niteliği: Alanın boş bırakılamayacağını belirtir.
Tür Kontrolleri:type="email", type="url", type="number" gibi türler temel format kontrolü yapar.
min ve max Niteliği: Sayısal veya tarih türleri için minimum ve maksimum geçerli değerleri belirler.
minlength ve maxlength Niteliği: Metin tabanlı alanlar için minimum ve maksimum karakter uzunluğunu belirler.
pattern Niteliği: Belirtilen düzenli ifadeye (regex) uymayan girişleri geçersiz kılar. Karmaşık format kontrolleri için güçlü bir araçtır.
Tarayıcı, form gönderilmeye çalışıldığında bu kuralları kontrol eder ve bir hata varsa kullanıcıya varsayılan bir hata mesajı göstererek formu göndermez. Bu varsayılan davranış ve mesajlar CSS ve JavaScript ile özelleştirilebilir (Constraint Validation API).
Doğrulamayı tamamen devre dışı bırakmak için etiketine novalidate niteliği veya gönder düğmesine formnovalidate niteliği eklenebilir.
Unutmayın: İstemci tarafı (HTML5/JavaScript) doğrulama kullanıcı deneyimi için harikadır ancak asla tek başına yeterli değildir. Güvenlik ve veri bütünlüğü için sunucu tarafında da mutlaka doğrulama yapılmalıdır, çünkü istemci tarafı doğrulaması kolayca atlatılabilir.
Semantik HTML: Anlamlı Yapı Kurmak
HTML5 ile birlikte gelen semantik etiketler, web sayfasının farklı bölümlerinin anlamını ve amacını daha açık bir şekilde belirtmek için kullanılır. Bu, hem arama motorlarının (SEO) hem de yardımcı teknolojilerin (ekran okuyucular gibi, erişilebilirlik için) sayfa içeriğini daha iyi anlamasına yardımcı olur. Ayrıca kodun okunabilirliğini ve yönetilebilirliğini artırır.
ve gibi genel amaçlı etiketler yerine, mümkün olduğunda daha spesifik semantik etiketleri kullanmak iyi bir pratiktir.
Temel Sayfa Yapısı İçin Semantik Etiketler
: Genellikle sayfanın veya bir bölümün (, ) başlık bilgilerini içerir. Logo, ana başlık (), navigasyon menüsü gibi öğeleri barındırabilir. Bir sayfada birden fazla olabilir.
(Navigation): Ana gezinme bağlantılarını (menüleri) içeren bölümü tanımlar. Genellikle sayfa başlığında (header) veya kenar çubuğunda (sidebar) bulunur. Sitedeki tüm bağlantı grupları için değil, sadece ana navigasyon blokları için kullanılmalıdır.
: Belgenin veya uygulamanın ana içeriğini temsil eder. Sayfadaki benzersiz, temel içeriği kapsamalıdır. Bir belgede sadece bir tane etiketi olmalıdır ve , , , , veya etiketlerinin içine yerleştirilemez.
: Genellikle sayfanın veya bir bölümün alt bilgi kısmını içerir. Telif hakkı bilgileri, yazar bilgisi, ilgili bağlantılar (gizlilik politikası, kullanım koşulları), iletişim bilgileri gibi öğeleri barındırabilir. Bir sayfada birden fazla olabilir.
: Ana içerikle dolaylı olarak ilgili olan içeriği temsil eder. Kenar çubukları (sidebar), reklamlar, ilgili yazılar listesi, yazar biyografisi gibi içerikler için kullanılır.
Sayfanın Ana Başlığı
Ana İçerik Başlığı
Sayfanın temel içeriği burada yer alır...
İçerik Bölümlendirme Etiketleri ( ve )
: Sayfa içinde bağımsız, kendi kendine yetebilen ve potansiyel olarak yeniden dağıtılabilir (syndication) bir içerik parçasını temsil eder. Forum gönderisi, blog yazısı, gazete makalesi, kullanıcı yorumu gibi içerikler için uygundur. Genellikle kendi başlığını (-) içerir. 'lar iç içe olabilir (örn: yorumlar içeren bir blog yazısı).
: Belge veya uygulama içinde genel, tematik bir bölümü temsil eder. Genellikle bir başlık (-) içerir. 'dan farkı, içeriğin bağımsız olarak anlamlı olmasının gerekmemesidir. Bir sayfanın "Giriş", "Özellikler", "İletişim Bilgileri" gibi mantıksal bölümlerini gruplamak için kullanılır. Eğer daha spesifik bir semantik etiket (, , ) uygun değilse ve içerik gruplanmaya ihtiyaç duyuyorsa kullanılabilir. Sadece stil amacıyla gruplama yapmak için
daha uygundur.
Ne zaman hangisini kullanmalı?
İçerik tek başına mantıklı ve başka bir yerde (örn: RSS akışı) yayınlanabilir mi? Evet ise .
İçerik belgenin ana hatlarında (outline) mantıksal bir bölüm mü oluşturuyor ve genellikle bir başlığı var mı? Evet ise .
Sadece stil veya script amacıyla bir gruplamaya mı ihtiyaç var? Evet ise
.
Blog Yazısı Başlığı
Yayınlanma Tarihi:
Blog yazısının içeriği...
Yorumlar
Yorumcu Adı
Bu harika bir yazı!
Hizmetlerimiz
Sunduğumuz hizmetler hakkında genel bilgi...
Web Tasarım
Yazılım Geliştirme
Diğer Semantik Etiketler (, , , )
: Genellikle bir resim, illüstrasyon, diyagram, kod örneği veya alıntı gibi kendi kendine yeten bir içerik birimini temsil eder. Belgenin ana akışından referans verilebilir ve ana akıştan bağımsız olarak taşınabilir (örn: sayfanın yanına, sonuna).
: elemanının başlığını veya açıklamasını sağlar. içinde ilk veya son eleman olarak yerleştirilebilir.
: Daha önce bahsedildiği gibi, belirli bir zamanı veya tarih/saat aralığını temsil eder. datetime niteliği makine tarafından okunabilir formatı içerir.
: Metnin bir bölümünü, okuyucunun dikkatinin çekilmesi gereken bir referans veya işaretleme amacıyla vurgular (sarı arka plan gibi). Önem () veya vurgu () belirtmez.
ve : Kullanıcının isteğe bağlı olarak görüntüleyebileceği veya gizleyebileceği ek detaylar veya içerik oluşturur (bu rehberde sıkça kullanıldığı gibi). her zaman görünen başlığı veya etiketi içerir. Tıklandığında içindeki diğer içerik görünür/gizlenir.
: Belgenin veya bir 'ın yazarı/sahibi için iletişim bilgilerini (isim, adres, e-posta, telefon, sosyal medya bağlantıları vb.) içerir. Genellikle içinde kullanılır.
Şekil 1: Son 6 ayın aylık büyüme oranları.
Proje tarihinde tamamlanacak.
Arama sonuçlarında ilgili terimler vurgulanmıştır.
Teknik Detayları Göster
Burada sadece ilgilenenlerin görmesi gereken teknik detaylar yer alır...
HTML5 ile Multimedya: Ses ve Video
HTML5, harici eklentilere (Flash gibi) ihtiyaç duymadan web sayfalarına doğrudan ses ve video içeriği eklemeyi sağlayan ve etiketlerini tanıttı.
Ses Ekleme ( Etiketi)
etiketi, ses dosyalarını çalmak için kullanılır.
src Niteliği: Çalınacak ses dosyasının yolunu belirtir.
controls Niteliği: Tarayıcının varsayılan ses kontrol arayüzünü (oynat/duraklat, ses seviyesi, ilerleme çubuğu) gösterir. Bu nitelik olmazsa kullanıcı sesi kontrol edemez (JavaScript ile özel kontroller yapılmadıkça).
autoplay Niteliği: Sayfa yüklenir yüklenmez sesin otomatik olarak çalmaya başlamasını sağlar. Çoğu modern tarayıcı, kullanıcı etkileşimi olmadan otomatik oynatmayı engeller veya kısıtlar, bu yüzden dikkatli kullanılmalıdır.
loop Niteliği: Ses bittiğinde otomatik olarak tekrar başlamasını sağlar.
muted Niteliği: Sesin başlangıçta sessiz olmasını sağlar. Bazen autoplay'in çalışması için gereklidir.
preload Niteliği: Sayfa yüklenirken ses dosyasının nasıl yüklenmesi gerektiğini belirtir:
none: Ses dosyası önceden yüklenmez.
metadata: Sadece dosyanın meta verileri (süre vb.) yüklenir.
auto: Tarayıcı, ses dosyasının tamamını veya bir kısmını önceden yükleyebilir (varsayılan).
Farklı Format Desteği (): Tüm tarayıcılar aynı ses formatlarını desteklemez (yaygın formatlar: MP3, Ogg Vorbis, WAV). Farklı formatlarda aynı ses dosyasını sunarak tarayıcı uyumluluğunu artırmak için içine birden fazla etiketi eklenir. Tarayıcı desteklediği ilk 'u kullanır. etiketi src ve type (MIME türü, örn: audio/mpeg, audio/ogg) niteliklerini alır.
etiketleri arasına, tarayıcının ses etiketini hiç desteklemediği durumlar için bir fallback metni veya bağlantı eklenebilir.
Video Ekleme ( Etiketi)
etiketi, web sayfalarına video içeriği gömmek için kullanılır. etiketiyle aynı temel niteliklerin çoğunu paylaşır: src, controls, autoplay, loop, muted, preload.
Ek olarak şu nitelikler önemlidir:
width ve height: Video oynatıcının boyutlarını piksel cinsinden belirler. CSS ile boyutlandırmak daha esnektir.
poster: Video yüklenmeden veya kullanıcı oynat tuşuna basmadan önce gösterilecek bir resmin (kapak resmi) URL'sini belirtir.
Farklı Format Desteği (): Ses gibi, videolar için de tarayıcı uyumluluğu önemlidir (yaygın formatlar: MP4 (H.264 codec ile), WebM (VP8/VP9 codec ile), Ogg Theora). Farklı formatları etiketleri ile sunmak en iyi yaklaşımdır. type niteliği MIME türünü ve bazen codec bilgisini içerir (örn: video/mp4; codecs="avc1.42E01E, mp4a.40.2").
Yine, desteklenmeyen tarayıcılar için fallback içeriği etiketler arasına eklenebilir.
Altyazı ve Açıklama Eklemek ( Etiketi)
etiketi, veya elemanları için zamanlanmış metin parçaları (altyazılar, başlıklar, açıklamalar, bölümler) eklemek için kullanılır. Erişilebilirlik (işitme engelliler için) ve farklı dillerde içerik sunmak için çok önemlidir.
kind Niteliği: Metin parçasının türünü belirtir:
subtitles: Ana dil konuşmasından farklı bir dildeki çeviri altyazıları.
captions: Ana dildeki konuşmanın transkripsiyonu ve önemli ses efektlerinin açıklamaları (işitme engelliler için).
default Niteliği: Kullanıcı başka bir tercih yapmazsa varsayılan olarak etkinleştirilecek metin parçasını işaretler. Her kind için sadece bir trackdefault olabilir.
WebVTT (.vtt) dosyaları, zaman damgaları ile birlikte metinleri içeren basit metin dosyalarıdır.
İleri HTML Konuları ve En İyi Uygulamalar
HTML'in temellerini öğrendikten sonra, daha gelişmiş konulara ve kod kalitesini artıracak en iyi uygulamalara göz atmak faydalıdır.
HTML ve CSS/JavaScript İlişkisi
Modern web geliştirme, HTML, CSS ve JavaScript'in birlikte çalışmasına dayanır. Bu üç katmanın görev ayrımı şöyledir:
HTML (Yapı - Structure): Sayfanın içeriğini ve anlamsal yapısını tanımlar (başlıklar, paragraflar, listeler, formlar, resimler vb.). Sayfanın iskeletidir.
CSS (Sunum - Presentation): HTML elemanlarının nasıl görüneceğini (renkler, fontlar, boyutlar, konumlandırma, animasyonlar vb.) kontrol eder. Sayfanın görsel stilidir.
JavaScript (Davranış - Behavior): Sayfaya etkileşim ve dinamizm katar. Kullanıcı eylemlerine tepki verme, içeriği değiştirme, sunucuyla iletişim kurma, animasyonları kontrol etme gibi işlevleri yerine getirir. Sayfanın beynidir.
Bu görev ayrımını korumak önemlidir:
HTML'i sadece yapı için kullanın: Görsel biçimlendirme için HTML nitelikleri (örn: , bgcolor, align - çoğu artık geçersizdir) veya gereksiz etiketleri yerine CSS kullanın.
CSS'i sadece sunum için kullanın: İçerik eklemek (CSS content özelliği dikkatli kullanılmalı) veya önemli yapısal bilgileri sadece CSS ile belirtmekten kaçının.
JavaScript'i davranış için kullanın: HTML yapısını veya temel CSS stillerini tamamen JavaScript ile oluşturmaktan kaçının (performans ve erişilebilirlik sorunları olabilir).
CSS dosyaları ile, JavaScript dosyaları ise genellikle kapanmadan önce ile HTML'e dahil edilir.
HTML Doğrulama (Validation) Neden Önemlidir?
Yazdığınız HTML kodunun W3C standartlarına uygun olup olmadığını kontrol etme işlemidir. Doğrulama araçları (örn: W3C Markup Validation Service) kodunuzdaki hataları (yanlış kapatılmış etiketler, geçersiz nitelikler vb.) bulmanıza yardımcı olur.
Neden önemlidir?
Tarayıcı Uyumluluğu: Geçerli HTML, farklı tarayıcıların sayfanızı daha tutarlı bir şekilde yorumlama olasılığını artırır. Geçersiz kod, tarayıcıların hataları tahmin ederek düzeltmeye çalışmasına neden olur, bu da beklenmedik görüntüleme sorunlarına yol açabilir.
Erişilebilirlik: Ekran okuyucular ve diğer yardımcı teknolojiler, sayfayı doğru yorumlamak için geçerli ve anlamsal olarak doğru HTML'e güvenirler.
SEO: Arama motoru botları da sayfaları tararken ve indekslerken geçerli HTML'i tercih eder. Yapısal hatalar, içeriğin doğru anlaşılmasını engelleyebilir.
Bakım Kolaylığı: Standartlara uygun, temiz kodun okunması, anlaşılması ve gelecekte güncellenmesi daha kolaydır.
Profesyonellik: Geçerli kod yazmak, detaylara dikkat ettiğinizi ve profesyonel standartlara uyduğunuzu gösterir.
Tarayıcılar genellikle hatalı HTML kodunu "affedici" bir şekilde işlemeye çalışsa da, bu davranışa güvenmek yerine kodunuzu doğrulamak her zaman en iyi yaklaşımdır.
HTML En İyi Uygulamaları (Best Practices)
Doğru DOCTYPE Kullanın: Her zaman belgenin başına ekleyerek HTML5 modunu etkinleştirin.
Anlamlı (Semantik) Etiketler Kullanın:
ve yerine mümkün olduğunda , , , , , , gibi etiketleri tercih edin.
Mantıklı Başlık Hiyerarşisi Kurun:- etiketlerini içeriğin yapısını yansıtacak şekilde, atlama yapmadan kullanın (örn: 'den sonra gelmemeli). Sayfada genellikle tek bir olmalıdır.
alt Niteliğini Her Zaman Kullanın: Tüm etiketlerinde açıklayıcı alt metinleri sağlayın. Dekoratif resimler için alt="" kullanın.
Formlarda Kullanın: Her form kontrolünü (input, textarea, select) ilişkili bir ile eşleştirin (for ve id kullanarak).
Küçük Harf Kullanın: Etiket ve nitelik adlarında tutarlılık ve okunabilirlik için küçük harf kullanın (örn: ).
Nitelik Değerlerini Tırnak İçine Alın: Tüm nitelik değerlerini çift (") veya tek (') tırnak içine alın (örn: class="button", id='main-nav'). Çift tırnak daha yaygındır.
Kodunuzu Girintileyin (Indent): Okunabilirliği artırmak için iç içe geçmiş etiketleri tutarlı bir şekilde girintileyin.
Gereksiz Etiketlerden Kaçının: Yapıyı veya anlamı gerektirmiyorsa fazladan
veya kullanmaktan kaçının.
HTML Yorumlarını Akıllıca Kullanın: Kodun karmaşık bölümlerini açıklamak veya geçici notlar almak için yorumları kullanın, ancak aşırıya kaçmayın.
Kodunuzu Doğrulayın: Düzenli olarak W3C doğrulayıcı gibi araçlarla kodunuzu kontrol edin ve hataları düzeltin.
Karakter Kodlamasını Belirtin: içinde etiketini kullanın.
Dil Belirtin: etiketinde lang niteliğini kullanın (örn: lang="tr").
CSS ve JavaScript'i Ayrı Dosyalarda Tutun: Inline stillerden (style niteliği) ve inline scriptlerden (onclick vb. veya içinde doğrudan kod) mümkün olduğunca kaçının. Kodun ayrıştırılması, bakımı ve önbelleğe alınması daha kolay olur.
Kısa Bir Bakış: HTML5 API'ları ve Diğer Özellikler
HTML5 sadece yeni etiketler değil, aynı zamanda JavaScript ile kullanılabilecek birçok güçlü API (Application Programming Interface) ve özellik de getirmiştir:
Canvas API: JavaScript kullanarak 2D grafikler (çizimler, animasyonlar, oyunlar) oluşturmak için bir yüzey sağlar.
SVG (Scalable Vector Graphics): XML tabanlı vektörel grafik formatıdır. HTML içine doğrudan gömülebilir ( etiketi) ve CSS/JavaScript ile manipüle edilebilir. Kalite kaybı olmadan ölçeklenebilir.
Geolocation API: Kullanıcının coğrafi konumunu (izin verirse) almak için kullanılır.
Web Storage (localStorage ve sessionStorage): Kullanıcının tarayıcısında veri depolamak için localStorage (kalıcı) ve sessionStorage (oturum süresince) mekanizmalarını sunar. Çerezlerden (cookies) daha fazla depolama alanı sunar ve veriler sunucuya otomatik gönderilmez.
Web Workers: Arka planda JavaScript kodları çalıştırmak için kullanılır, böylece ana kullanıcı arayüzü (UI) thread'i kilitlenmez ve sayfa yanıt vermeye devam eder.
Drag and Drop API: Sayfa içindeki elemanları sürükleyip bırakma işlevselliği eklemeyi sağlar.
Server-Sent Events (SSE): Sunucudan istemciye tek yönlü, otomatik veri akışı sağlar (bildirimler, canlı güncellemeler için).
WebSockets: Sunucu ve istemci arasında çift yönlü, kalıcı bir iletişim kanalı açar (gerçek zamanlı uygulamalar, sohbet, oyunlar için).
Bu API'lar, modern, etkileşimli ve zengin web uygulamaları oluşturmak için HTML, CSS ve JavaScript'in birlikte nasıl çalıştığının harika örnekleridir.
Sonuç: HTML'in Sürekli Gelişimi
HTML, web'in temel taşı olmaya devam ediyor ve sürekli gelişiyor. WHATWG (Web Hypertext Application Technology Working Group) tarafından yönetilen "Yaşayan Standart" (Living Standard) modeli sayesinde, HTML artık büyük, periyodik sürümler yerine sürekli olarak güncelleniyor ve yeni özellikler ekleniyor.
Bu rehber, HTML'in temellerini ve önemli kavramlarını kapsamayı amaçladı. Ancak web teknolojileri dinamik bir alan olduğundan, sürekli öğrenmeye devam etmek, yeni etiketleri ve en iyi uygulamaları takip etmek önemlidir. W3Schools, MDN Web Docs (Mozilla Developer Network) gibi kaynaklar, güncel bilgiler ve detaylı referanslar için mükemmel yerlerdir.
Sağlam bir HTML bilgisi, web geliştirme yolculuğunuzda atacağınız en önemli adımlardan biridir. CSS ve JavaScript ile birleştiğinde, hayalinizdeki web sitelerini ve uygulamalarını hayata geçirmeniz için size güçlü bir temel sağlayacaktır.
