Sayfa içeriği
Tarayıcı desteğin konsepti
Chrome, Edge, Firefox, Safari, Opera, brave vb. Web sitelerine göz atmak için kullanabileceğin birçok tarayıcı vardır.
Bu tarayıcılar yıllar içinde geliştirilmiştir, bu nedenle her biri için düzinelerce sürüm bulabilirsin ve bugüne kadar sürekli olarak güncellenmektedirler.
HTML'ye gelince, etiketler ve özellikler çoğu tüm tarayıcılarda aynıdır, ancak aşağıdakileri bilmeni gerekiyor:
- Yalnızca bazı tarayıcılarda kullanılabilen çok az ek etiket ve özellik vardır.
- Tüm tarayıcılarda ortak olan etiketler vardır, ancak bunlar sayfanın açıldığı tarayıcının türüne bağlı olarak farklı şekilde görüntülenebilir.
Tarayıcılar arasındaki fark sorununu çözmek
Oluşturduğun tasarımın kullanıcıya olduğu gibi görünmesini sağlamak için hangi tarayıcıyı kullanırsa kullansın tüm tarayıcılarda ortak olan kodların kullanılması tercih ediyorum.
Ayrıca, bunun için endişelenmeni gerek yok çünkü gelecekte Bootstrap ve UIkit gibi hazır kütüphaneler ve aynı tasarıma sahip tüm tarayıcılarda çalışan tasarımlar oluşturmak için diğer harika kütüphaneler kullanacaksın.
Tüm HTML etiketleri
Aşağıdaki tablo, tüm dil etiketlerini, özelliklerini ve bunları destekleyen tarayıcıları, her bir etiketin kapsamlı örnekleriyle birlikte içerir.
| No | Kullanımı |
Etiket |
|---|---|---|
| 1 | Kodda yorum veya not eklemek için kullanılır. Okumaya devam et |
<!-- --> |
| 2 | Tarayıcıya sayfada hangi HTML sürümünün desteklendiğini söylemek için kullanılır. Okumaya devam et |
<!DOCTYPE> |
| 3 | Sayfada bir bağlantı görüntülemek için kullanılır. Okumaya devam et |
<a> |
| 4 | Fare üzerine getirildiğinde gösterilen kısaltılmış biçimde yerleştirilmiş bir kelimeyi tanımlamak için kullanılır. Okumaya devam et | <abbr> |
| 5 | Sayfada yazar için iletişim bilgilerini görüntülemek için kullanılır. Okumaya devam et |
<address> |
| 6 | Görüntü haritasında <map> etiketi tarafından ayarlanan ve tıklanabilir bir bağlantı haline getiren bir noktayı işaretlemek için kullanılır. Okumaya devam et |
<area> |
| 7 | İçine yerleştirilen içerik tek bir satırda görüntülenir, ancak kullanım amacı bu değildir. Genel olarak, sayfada makaleler, yorumlar, kartlar vb. koleksiyonu görüntüleniyorsa, bunların her biri bu türden bir etiket içinde görüntülenebilir. Okumaya devam et |
<article> |
| 8 | İçine yerleştirilen içerik tek bir satırda görüntülenir, ancak kullanım amacı bu değildir. Genel olarak, bu tür bir etiketin içine sayfa içeriğiyle doğrudan ilgili olmayan içerik yerleştirilebilir. Ayrıca, sayfa tasarımı sayfa boyunca bir yan menü içeriyorsa, menünün içeriği bu tür bir etiketin içine yerleştirilebilir. Okumaya devam et |
<aside> |
| 9 | Sayfadaki bir ses dosyasının oynatıcısını görüntülemek için kullanılır. Okumaya devam et |
<audio> |
| 10 | Bir paragraftaki kelimeleri kalın olarak göstermek için kullanılır. Okumaya devam et |
<b> |
| 11 | Sayfaya yerleştirilen herhangi bir göreli yolun başlayacağı temel yolu belirtmek için kullanılır. Okumaya devam et |
<base> |
| 12 | Metnin başka bir dilde yazılmış bir kısım içermesi ve bu dilin diğer metnin görüntülenme şeklini etkilemesi durumunda, bu kısmı bu etiketin içine koyabilirsiniz, böylece tarayıcı onu metnin geri kalanından ayırır ve böylece etkilemez. Okumaya devam et |
<bdi> |
| 13 | Metnin görünümünü ve içindeki her karakterin yönünü değiştirmek için de kullanılır. Okumaya devam et |
<bdo> |
| 14 | Alıntılanan metni, her tarafta kenar boşlukları olacak şekilde tek bir satırda görüntülemek için kullanılır. Okumaya devam et |
<blockquote> |
| 15 | Kullanıcının karşısına çıkacak olan sayfa içeriğinin içerisine yerleştirilmesi gerektiğinden sayfanın ana bölümlerinden biri olarak kabul edilir. Okumaya devam et |
<body> |
| 16 | Geçerli satırın sonunu bildirmek, yani kalan içeriği yeni bir satırda görüntülemek için kullanılır. Okumaya devam et |
<br> |
| 17 | Bir sayfada bir düğme görüntülemek için kullanılır. Okumaya devam et |
<button> |
| 18 | Grafikleri sayfada belirli bir alan içinde görüntülemek için kullanılır ve içinde görüntülenen grafiklerin JavaScript kodu ile çizildiğini ve canlandırıldığını belirtir. Okumaya devam et |
<canvas> |
| 19 | Bir tabloya basit bir başlık veya açıklama eklemek için kullanılır. Okumaya devam et |
<caption> |
| 20 | Bir sayfada görüntülenen önemli bir çalışmanın başlığını vurgulamak için kullanılır. Okumaya devam et |
<cite> |
| 21 | Bir sayfada kodu görüntülemek için kullanılır. Okumaya devam et |
<code> |
| 22 | Tablonun sütunları <colgroup> etiketi ile gruplandırılmışsa, aynı gruba yerleştirilen sütunların görünüm özelliklerini belirtmek için span><col> etiketi kullanılabilir, bu özelliklerin CSS kodu tarafından belirtildiğine dikkat edelim. Okumaya devam et |
<col> |
| 23 | Colgroup özelliği, görünüm özelliklerini değiştirmek için tablo sütunlarını gruplara ayırır ve bu özelliklerin CSS kodu tarafından belirlendiğini gösterir. Okumaya devam et |
<colgroup> |
| 24 | İçine yerleştirilen içerik üzerinde gerçek bir etkisi yoktur, ancak içine yerleştirilen içeriğe karşılık gelen bir değer eklemek için kullanılır.Örneğin, programcı, sayfanın içeriğini karşılık gelen değerlere göre artan sırada düzenleyebilir. Okumaya devam et |
<data> |
| 25 | Metin kutusuna bir değer girdiğinde kullanıcının önünde görünen önceden yapılandırılmış seçenekleri görüntülemek için kullanılır. Datalist'te ayırt edici olan, kullanıcının girdiği karakterlere göre göreceli olması ve kendisine aynı harflerle başlayan seçeneklerin sunulmasıdır. Okumaya devam et |
<datalist> |
| 26 | Açıklama listelerinde belirli bir terim altında bir açıklama veya seçenek görüntülemek için kullanılır. Okumaya devam et |
<dd> |
| 27 | Silinen metni görüntülemek için kullanılır. Okumaya devam et |
<del> |
| 28 | Kullanıcının gösterip gizleyebileceği ek ayrıntıları görüntülemek için <summary> etiketiyle birlikte kullanılır. Okumaya devam et |
<details> |
| 29 | Açıklama yapılacak terimden bahsetmek için kullanılır ve fare üzerine gelindiğinde görünen bir ipucunun da gösterilebileceğini belirtir. Okumaya devam et |
<dfn> |
| 30 | İçeriği bir sayfada içeriğin üzerinde görüntülemek için kullanılır. Okumaya devam et |
<dialog> |
| 31 | İçine konulan içerik tek bir satırda görüntülenir ve sayfadaki her bölüm ve iç bölümleri de bu tür bir etiketin içine yerleştirildiğinden, asıl kullanım amacı sayfanın içeriğini bölmektir. Okumaya devam et |
<div> |
| 32 | Bir sayfada bir açıklama listesi görüntülemek için kullanılır. Okumaya devam et |
<dl> |
| 33 | Açıklama listelerinde bir terimi veya başlığı görüntülemek için kullanılır. Okumaya devam et |
<dt> |
| 34 | Metni italik olarak görüntülemek için kullanılır. Okumaya devam et |
<em> |
| 35 | Sayfada harici içerik görüntülemek için kullanılır, bu içerik uygulama, resim, video vb. olabilir. Okumaya devam et |
<embed> |
| 36 | Bir formdaki ortak alanları gruplandırmak için kullanılır. Okumaya devam et |
<fieldset> |
| 37 | <figure> etiketi içindeki nesnenin açıklamasını görüntülemek için kullanılır. Okumaya devam et |
<figcaption> |
| 38 | Bir sayfada resim, kod veya grafiğin görüntülenmesi için bir yer ayırmak için kullanılır. Okumaya devam et |
<figure> |
| 39 | İçine yerleştirilen içerik tek bir satırda görüntülenir, ancak kullanım amacı bu değildir. Genel olarak yazarın adı, iletişim bilgileri, telif hakkı ve içeriğe bağlantılar yer almaktadır. Okumaya devam et |
<footer> |
| 40 | Kullanıcıdan veri almak için sayfada bir form görüntülemek için kullanılır. Okumaya devam et |
<form> |
| 41 | Bu etiketleri sayfada başlıkları görüntülemek için kullanırız. Okumaya devam et |
<h1>-<h6> |
| 42 | Tasarım dosyalarını, sayfa komut dosyalarını, site simgesini ve diğer önemli şeyleri içine dahil etme olasılığının yanı sıra tarayıcıya sayfanın içeriğinin nasıl görüntüleneceğini bildirmek için kullanıldığı için sayfanın ana bölümlerinden biri olarak kabul edilir. Okumaya devam et |
<head> |
| 43 | İçine yerleştirilen içerik tek bir satırda görüntülenir, ancak kullanım amacı bu değildir. Genel olarak, site bölümlerinin üst kısmında görüntülenen veya sitenin tüm sayfalarının üst kısmında görüntülenen, bir üst menü, site logosu, arama düğmesi vb. içerebilecek içerik, içine yerleştirilebilir. Okumaya devam et |
<header> |
| 44 | Bir sayfada yatay bir çizgi görüntülemek için kullanılır. Okumaya devam et |
<hr> |
| 45 | Tüm sayfa etiketlerinin yerleştirilmesi gereken temel etiket olduğu için sayfadaki ilk etiket olarak yerleştirilir. Okumaya devam et |
<html> |
| 46 | Metni italik olarak görüntülemek için kullanılır. Okumaya devam et |
<i> |
| 47 | İçerisindeki başka bir sayfanın içeriğini görüntülemek için bir sayfaya çerçeve yerleştirmek için kullanılır. Okumaya devam et |
<iframe> |
| 48 | Bir sayfada bir resim görüntülemek için kullanılır. Okumaya devam et |
<img> |
| 49 | HTML form elemanlarından biridir ve kullanıcının belirli bir veri veya değer girmesini sağlar. Okumaya devam et |
<input> |
| 50 | HTML'de kullanılan bir işarettir ve metin parçalarının altını çizmek için kullanılır. Okumaya devam et |
<ins> |
| 51 | Klavyedeki düğmelerin adlarını görüntülemek için kullanılır. Okumaya devam et |
<kbd> |
| 52 | Forma yerleştirilen bir elemana özel bir isim vermek için kullanılır. Okumaya devam et |
<label> |
| 53 | <fieldset> etiketi tarafından gösterilen sınırlar içinde görünen bir başlık eklemek için kullanılır. Okumaya devam et |
<legend> |
| 54 | <ol>, <ul> veya <menu> etiketleri tarafından oluşturulan menüye öğe eklemek için kullanılır. Okumaya devam et |
<li> |
| 55 | Sayfaya harici dosyaları dahil etmek için kullanılır ve genellikle tasarım dosyalarını ve site simgesini dahil etmek için kullanıyoruz. Okumaya devam et |
<link> |
| 56 | İçine yerleştirilen içerik tek bir satırda görüntülenir, ancak kullanım amacı bu değildir. HTML'de kullanılan bir etikettir ve web sayfasının ana içeriğini belirtmek için kullanılır. Bu etiket, bir web sayfasındaki en önemli içeriği belirtmek için kullanılır ve genellikle web sayfalarının ortasında yer alır. Tarayıcılar, "<main>" etiketi içindeki içeriği sayfanın ana içeriği olarak kabul eder ve sayfanın geri kalan kısmından ayrı olarak işler. Okumaya devam et |
<main> |
| 57 | Bir resim veya grafik üzerindeki belirli alanlara bağlantılar eklemek için kullanılır. Bu etiket, bir resim veya grafik haritasını belirtmek için kullanılır ve "<area>" etiketi ile birlikte kullanılır. Tarayıcılar, "<map>" etiketi ile belirtilen haritayı işler ve kullanıcının tıkladığı alana bağlı olarak belirli bir bağlantıya yönlendirir. Okumaya devam et |
<map> |
| 58 | Bir metin parçasını vurgulamak veya belirginleştirmek için kullanılır. Okumaya devam et |
<mark> |
| 59 | Web sayfasının meta verilerini belirtmek için kullanılır. Bu etiket, bir web sayfasının başlığı, karakter kodlaması, açıklaması, anahtar kelimeleri ve diğer bilgileri gibi meta verilerini içerir. Tarayıcılar, "<meta>" etiketi içindeki bilgileri sayfanın meta verileri olarak kullanır ve web sayfasını daha iyi anlamlandırmak veya dizine eklemek için kullanır. Okumaya devam et |
<meta> |
| 60 | Sayfada bir mezura görüntülemek için kullanılır, yüzdesi, kendisi için ayarlanmış olan en küçük ve en büyük değere kıyasla mevcut değerine göre belirlenir. Okumaya devam et |
<meter> |
| 61 | Web sayfasının gezinme bağlantılarını belirtmek için kullanılır. Okumaya devam et |
<nav> |
| 62 | Kullanıcının tarayıcısı sayfanın JavaScript kodunun çalıştırılmasına izin vermiyorsa, kullanıcının sayfasında alternatif içerik görüntülemek için kullanılır. Okumaya devam et |
<noscript> |
| 63 | Sayfada harici içerik görüntülemek için kullanılır, bu içerik bir uygulama, resim, video vb olabilir. Okumaya devam et |
<object> |
| 64 | Bir sayfada sıralı bir liste görüntülemek için kullanılır. Okumaya devam et |
<ol> |
| 65 | Bir form elemanındaki seçeneklerin gruplanmasını sağlamak için kullanılır. Okumaya devam et |
<optgroup> |
| 66 | <select> etiketi ile oluşturulan bir açılır listeye seçenek eklemek veya <datalist> etiketi ile oluşturulan bir yardımcı listeye seçenek eklemek için içine bir öğe eklemek için kullanılır. Okumaya devam et |
<option> |
| 67 | Form elemanının işlenmiş değerini göstermek veya başka bir hesaplama veya işlem sonucunu göstermek için kullanılır. Okumaya devam et |
<output> |
| 68 | Bir paragraf belirtmek için kullanılır. Okumaya devam et |
<p> |
| 69 | Bir nesne için belirli bir parametreyi belirtmek için kullanılır. Okumaya devam et |
<param> |
| 70 | Sayfada tek bir görseli göstermek için kullanılır fakat bu görselleri değiştirmek için uygun gördüğümüz sayfanın boyutuna göre başka bir görselle değiştirilebilir. Okumaya devam et |
<picture> |
| 71 | Önceden biçimlendirilmiş bir metin bloğunu belirtmek için kullanılır. Okumaya devam et |
<pre> |
| 72 | Belirli bir işlemin tamamlanmasından sonra kullanıcıya ne kadar kaldığını göstermek amacıyla bir ilerleme çubuğu görüntülemek için kullanılır. Okumaya devam et |
<progress> |
| 73 | Alıntılanan metni " " arasında görüntülemek için kullanılır. Okumaya devam et |
<q> |
| 74 | Tarayıcı, kendisine ayarlanan sözcük üzerinde dipnotu görüntüleme özelliğini desteklemiyorsa, dipnotun etrafında köşeli parantezleri görüntülemek için <ruby> etiketinin içinde kullanılır. Okumaya devam et |
<rp> |
| 75 | <ruby> etiketi içinde bulunduğu kelime üzerinde dipnot görüntülemek için kullanılır. Okumaya devam et |
<rt> |
| 76 | Bir kelimenin üstünde veya yanında dipnot görüntülemek için kullanılır. Okumaya devam et |
<ruby> |
| 77 | Silinen metni görüntülemek için kullanılır. Okumaya devam et |
<s> |
| 78 | Bir web sayfasında bir örnek metin bloğunu belirtmek için kullanılır ve genellikle kod örnekleri veya terminal çıktıları için kullanılır. Okumaya devam et |
<samp> |
| 79 | Sayfaya javascript kodu eklemek için kullanılır. Okumaya devam et |
<script> |
| 80 | İçine yerleştirilen içerik tek bir satırda görüntülenir, ancak kullanım amacı bu değildir. Genel olarak, sayfanın herhangi bir ayrı bölümü (yorum bölümü, en son makaleler vb.) bu tür bir etiketin içine yerleştirilebilir. Okumaya devam et |
<section> |
| 81 | Değerlerinden seçilmesi gereken bir açılır liste eklemek için kullanılır. Okumaya devam et |
<select> |
| 82 | Bir web sayfasındaki belirli bir metni daha küçük boyutta görüntülemek için kullanılır ve genellikle dipnotlar, hukuki uyarılar veya benzeri küçük metinler için kullanılır. Okumaya devam et |
<small> |
| 83 | Hangi tür tarayıcı kullanıyor olursa olsun, tarayıcının kullanıcıya gösterebilmesini sağlamak için sayfada görüntülenecek birkaç ses veya video formatı hazırlamak için kullanılır. Okumaya devam et |
<source> |
| 84 | İçine konulan içerik üzerinde herhangi bir etkisi yoktur ve asıl kullanım amacı CSS kodu ile paragraflara yerleştirilmiş bazı içeriklerin görünümünü değiştirmektir. Okumaya devam et |
<span> |
| 85 | Paragraftaki önemli kelimeleri koyu olarak göstermek için kullanılır. Okumaya devam et |
<strong> |
| 86 | Bir web sayfasının genel stilini veya belirli bir bölümünün stilini belirlemek için kullanılır ve genellikle CSS (Cascading Style Sheets) kodlarını içerir. Okumaya devam et |
<style> |
| 87 | Metni, yanındaki metnin geri kalanından biraz daha aşağıda görüntülemek için kullanılır. Okumaya devam et |
<sub> |
| 88 | <details> etiketindeki gizli içeriği göstermek için tıklanabilen kısayol metnini görüntülemek için kullanılır. Okumaya devam et |
<summary> |
| 89 | Metni, yanındaki metnin geri kalanından biraz daha yüksekte görüntülemek için kullanılır. Okumaya devam et |
<sup> |
| 90 | Bir sayfada SVG grafiklerini görüntülemek için kullanılır. Okumaya devam et |
<svg> |
| 91 | Bir sayfada tablo görüntülemek için kullanılır. Okumaya devam et |
<table> |
| 92 | HTML tablosunun ana bölümüdür ve tablonun satırlarını ve hücrelerini içerir. Okumaya devam et |
<tbody> |
| 93 | Bir tabloya normal bir sütun eklemek için kullanılır. Okumaya devam et |
<td> |
| 94 | Sayfada daha sonra görüntülenecek içeriği gizli bir şekilde hazırlamak için kullanılır ve gösterilmesi gerektiğinde JavaScript ile bir kopyası oluşturulabilir. Okumaya devam et |
<template> |
| 95 | Sayfaya çok satırlı bir metin kutusu eklemek için kullanılır. Okumaya devam et |
<textarea> |
| 96 | Bir tablonun sonunda farklı şekilde görüntülenecek bilgileri içeren satırları gruplandırmak için kullanılır. Okumaya devam et |
<tfoot> |
| 97 | Tablodaki bir sütunun veya satırın başlığını temsil eden bir alan eklemek için kullanılır. Okumaya devam et |
<th> |
| 98 | HTML tablosunun başlık kısmını içerir ve genellikle tablonun ilk satırında yer alır. Okumaya devam et |
<thead> |
| 99 | Arama motorlarının metinde belirtilen tarih ve saati daha iyi anlaması için kullanılır. Okumaya devam et |
<time> |
| 100 | Tarayıcı sekmesinde gösterilecek sayfanın başlığını belirtmek için kullanılır. Okumaya devam et |
<title> |
| 101 | Tabloya satır eklemek için kullanılır. Okumaya devam et |
<tr> |
| 102 | Ses dosyasına veya sayfada görüntülenen videoya altyazı eklemek için kullanılır. Okumaya devam et |
<track> |
| 103 | Metnin altında bir satır görüntülemek için kullanılır. Okumaya devam et |
<u> |
| 104 | Bir sayfada sırasız bir liste görüntülemek için kullanılır. Okumaya devam et |
<ul> |
| 105 | Aritmetik işlemlerde kullanılan değişkenlerin isimlerini metnin geri kalanından farklı bir şekilde göstermek için kullanılır. Okumaya devam et |
<var> |
| 106 | Sayfada bir video görüntülemek için kullanılır. Okumaya devam et |
<video> |
| 107 | Metnin tamamı aynı satırda görüntülenemiyorsa, metnin nerede kesilip yeni bir satırda gösterileceğini belirtmek için kullanılır. Okumaya devam et |
<wbr> |