Önceki makalelerde de belirttiğim gibi HTML versiyonu DOCTYPE Kullanımı ile belirlenir. HTML-5’te doctype kullanımındaki zahmeti ortadan kaldırılmış ve sadece şeklinde standartlaştırılmıştır. Doctype, browser’a sayfanın kullanılan html dili versiyonu hakkında browserlara bilgi vermek için kullanılır.
Dediğim gibi HTML5 ile önceki uzun uzun yazdığımız DOCTYPE kullanımı basitleştirilmiştir. Zaten amaçta kodlarda işlevselliğin ön plana çıkmasını sağlamak olduğu için öncelikle DOCTYPE kullanımından başlanılmış işe.
HTML 5 ile gelen tek yenilik doctype değil tabi ki. HTML 5 ile geçmişte kullandığımız tablo yapısı ile tasarımlar siteleri yavaşlattığı gerekçesi ile ortadan kaldırılmaya çalışılmıştır. Table-Design dediğimiz o uygulama ile gerçekten çok zahmetlice işler yapıyor ve fazlası ile zaman kaybediyorduk. Şimdi HTML 5’te Div kullanımı ön plana çıkarılmış ve W3 standartlarında da bu konu üzerinde durulmuştur.
Aynı şekilde arama motorları da W3 standartlarına uyarak sitelerde yeni HTML5 kullanımını teşvik etmektedir. Table design ile birlikte css kullanımının daha fazla yaygınlaşması için CSS3 ile de desteklenmiştir yeni sistem. Daha önceleri de css de div’lere özellik tanımlamak için yazılan div class isimleri css3 ile standartlaştırılmış ve bunlar html5 te kullanılmıştır. Header, footer, nav, aside, article gibi class isimleri html5 ile etiket halini almışlardır.
Bu yeni etiketlerin kullanımındaki en önemli amaç, arama motoru botlarına; bu etiketlerin kullanıldığı alanda ne tür içeriğin olduğunu bildirmektir. Örneğin, nav etiketleri içerisinde sitenin menüleri kullanılır. Footer etiketleri sitenin alt bilgi kısmının olduğunu belirtir. Article site yazarının bilgilerinin olduğu bölümdür gibi bilgilerle botların siteyi daha iyi ve hızlı taramasına imkan sağlanır.
HTML 5 İle Gelen Etiketler
HTML 5 ile büyük bir çığır açıldı diyebiliriz. Aslında gereklilikten doğan bir güncellemeydi. Çünkü javascript ve diğer html bağlantılı dillerinde kendisini yenilemesi. Browserların gelişmesi ve yeni kodlama temellerinin atılması. HTML’in de kendini geliştirmesinin önünü açmış oldu.
HTML 5 ile gelen yeni etiketlere bakacak olursak;
, , , , , , , , , , , , , , , Bu etiketler HTML 5 ile birlikte gelirken, HTML ve XHTML sürümlerinde kalan ve artık kullanılmayacak olan etiketlerde oldular.
, , , , , , , , , , , <![CDATA[, <frameset>, <frame></code></pre>
<p>HTML 5 ile gelen tüm yenilikler arama motorları ve tarayıcıların siteleri daha sağlıklı bir şekilde yorumlayabilmeleri için türetilmişlerdir. Aynı şekilde kullanımdan kaldırılan etiketlerin etkilerini CSS ile yapabiliyor olmamız artık kullanılmalarına sebep olmuştur.</p>
<p>HTML 5 ile birlikte sadece etiketler getirilmedi. Aynı zamanda parametrelerde de değişiklikler ve yenilikler oldu; autocomplate, autofocus, form, form overrides, list, min, max, height, width, step, multiple,pattern, placeholder.</p>
<p>HTML 5 gerçekten kullanıcı ve yazılımcı dostu bir sistem olarak karşımıza çıktı. Daha önceleri sayfa içerisinde biraz canlılık ve etkileşim istediğimizde başvurduğumuz javascript kodlarını eskisi kadar sık kullanmıyoruz. Tabi ki bunun nedeni jquery gibi freamworklerin de piyasaya çıkmış olması ama asıl önemli olan HTML 5 ile bazı javascript kodlarının yerine direk olarak yeni gelen etiketleri ve css özelliklerini kullanarak işlemler yapabiliyoruz.</p>
<p> HTML-5’in amacı ve en büyük getirisi, arama motorları tarafından indexlenme şekli oldu. HTML-5’ten önce arama motoru botları sayfayı ziyaret ettiğinde sayfadaki tüm kodları tarar ve yazısal içerikleri, bağlantıları alır ve gerekli incelemeyi yapardı. HTML-5 ile gelen yapısal etiketler sayesinde Semantik web dediğimiz, Web-3.0 Kavramı da böylece gelmiş oldu.</p>
<p>Semantik webde HTML 5 ile gelen yeni etiket ve parametreler işimizi kolaylaştırıyor. Örneğin; Header etiketleri arasına eklediğimiz kodların sayfanın üst kısmını ilgilendirdiği, Nav etiketlerinin bağlantıları ya da menüleri ilgilendirdiğini, sidebar etiketleri arasındakilerin sitenin sol veya sağ tarafındaki blog kısmı olduğunu gibi bölümleri tanımlayarak sayfamızdaki alanları önem sırasına göre indexliyor ve buna göre de bizim de işimize gelen kısmı sayfamızdaki önemli yerleri ilgili etiketler arasına koyuyor olmamızdır.</p>
<div class="clear"></div>
</div>
</div>
<div class="sidebar">
<h4 style="">Kategoriler</h4>
<div class="sidelinks">
<a href="https://www.wpxsoft.com/yazilar/css-html"><span>CSS - HTML</span></a>
<a href="https://www.wpxsoft.com/yazilar/php-pdo-mysql"><span>PHP (PDO) - MYSQL</span></a>
<a href="https://www.wpxsoft.com/yazilar/javascript-ajax"><span>JAVASCRİPT - AJAX</span></a>
<a href="https://www.wpxsoft.com/yazilar/sosyal-medya"><span>SOSYAL MEDYA</span></a>
<a href="https://www.wpxsoft.com/yazilar/web-tasarim"><span>WEB TASARIM</span></a>
</div>
<h4 style="margin-top:25px;">Popüler Başlıklar</h4>
<div class="sidelinks">
<a href="https://www.wpxsoft.com/yazi/php-5-4-8-ve-php-5-3-18-guncelleme-yapildi"><span>PHP 5.4.8 ve PHP 5.3.18 Güncelleme Yapıldı</span></a>
<a href="https://www.wpxsoft.com/yazi/php-nasil-daha-hizli-calistirilir"><span>Php Nasıl daha hızlı çalıştırılır</span></a>
<a href="https://www.wpxsoft.com/yazi/web-sitesinin-onemi-nedir"><span>Web Sitesinin Önemi Nedir ?</span></a>
<a href="https://www.wpxsoft.com/yazi/javascript-atama-operatorleri"><span>JavaScript Atama Operatörleri</span></a>
<a href="https://www.wpxsoft.com/yazi/javascript-aritmetik-operatorler"><span>JavaScript Aritmetik Operatörler</span></a>
<a href="https://www.wpxsoft.com/yazi/javascript-operatorler"><span>Javascript Operatörler</span></a>
<a href="https://www.wpxsoft.com/yazi/javascript-degiskenler"><span>Javascript Değişkenler</span></a>
<a href="https://www.wpxsoft.com/yazi/javascript-yorum-satirlari-kullanimi"><span>Javascript Yorum Satırları Kullanımı</span></a>
<a href="https://www.wpxsoft.com/yazi/javascript-calisma-prensibi"><span>JavaScript Çalışma Prensibi</span></a>
<a href="https://www.wpxsoft.com/yazi/javascript-yazim-kurallari"><span>JavaScript yazım kuralları</span></a>
</div>
</div>
</div>
<div class="clear"></div>
<br>
<div class="footer">
<div id="wrapper">
<div class="footslogan">
<div id="wrapper">
<h4>Ürün ve hizmetlerimiz hakkında daha detaylı bilgi almak için hemen arayın. </h4>
</div>
</div>
<div class="line"></div>
<div class="footinfos footcopyright">
<img class="footlogo" src="https://www.wpxsoft.com/resources/uploads/logo/2019-04-28/wpxsoft-web-tabanli-yazilim-teknolojileri-2.svg" width="245" height="auto" alt="logo" title="logo">
<div class="clear"></div>
<span>Copyright © 2024 Tüm Hakları Saklıdır.</span>
<div class="clear"></div>
<h4>info@wpxsoft.com</h4>
<h5>Yeni Mahalle 161 Sokak No:37 Nazilli / AYDIN</h5>
<div class="clear"></div>
<img class="gprimage" src="https://www.wpxsoft.com/templates/website/Modern/images/gdpr.png" alt="This site is GDPR compliant." title="This site is GDPR compliant." width="auto" height="35"/><div class="clearmob">
</div>
</div>
<div class="footblok"><a style="padding-left:0px;color:white;" href="javascript:void 0;">
<h3>Site içi Bağlantılar</h3>
</a>
<a href="https://www.wpxsoft.com/iletisim">Bize Ulaşın</a>
<a href="https://www.wpxsoft.com/referanslar">Referanslar</a>
<a href="https://www.wpxsoft.com/haberler">Haber ve Duyurular</a>
<a href="https://www.wpxsoft.com/yazilar">Blog'tan Yazılar</a>
<a href="https://www.wpxsoft.com/bilgi-bankasi">Bilgi Bankası</a>
<a href="https://www.wpxsoft.com/kisisel-veriler-ve-genel-gizlilik-sozlesmesi">Gizlilik Sözleşmesi</a>
<a href="https://www.wpxsoft.com/hizmet-ve-kullanim-sozlesmesi">Hizmet Sözleşmesi</a>
</div>
<div class="footblok"><a style="padding-left:0px;color:white;" href="javascript:void 0;">
<h3>Web Hosting</h3>
</a>
<a href="https://www.wpxsoft.com/kategori/ekonomik-hosting">Ekonomik SSD Hosting</a>
<a href="https://www.wpxsoft.com/kategori/profesyonel-hosting">Profesyonel SSD Hosting</a>
<a href="javascript:void 0;">Reseller (Bayi) Hosting</a>
<a href="https://www.wpxsoft.com/kategori/ekonomik-hosting">Bireysel Paketler</a>
<a href="javascript:void 0;">Kurumsal Paketler</a>
<a href="https://www.wpxsoft.com/kategori/profesyonel-hosting">WordPress Hosting</a>
</div>
<div class="footblok"><a style="padding-left:0px;color:white;" href="javascript:void 0;">
<h3>Web Site Paketleri</h3>
</a>
<a>E-Ticaret Paketleri</a>
<a>Kurumsal Web Site Paketleri</a>
</div>
<div class="footblok"><a style="padding-left:0px;color:white;" href="javascript:void 0;">
<h3>Alan Adı Tescil</h3>
</a>
<a href="https://www.wpxsoft.com/alan-adi">.com Alan Adı Tescil</a>
<a href="https://www.wpxsoft.com/alan-adi">.net Alan Adı Tescil</a>
<a href="https://www.wpxsoft.com/alan-adi">.org Alan Adı Tescil</a>
<a href="https://www.wpxsoft.com/alan-adi">.in Alan Adı Tescil</a>
<a href="https://www.wpxsoft.com/alan-adi">.co Alan Adı Tescil</a>
<a href="https://www.wpxsoft.com/alan-adi">.pro Alan Adı Tescil</a>
</div>
<div class="line"></div>
<div class="footsosyal">
<a href="https://www.facebook.com/wpxsoftyazilim" target="_blank" title="Facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a><a href="https://www.instagram.com/wpxsoft" target="_blank" title="Instagram"><i class="fa fa-instagram" aria-hidden="true"></i></a><a href="https://www.tumblr.com/blog/wpxsoft" target="_blank" title="Tumblr"><i class="fa fa-tumblr" aria-hidden="true"></i></a><a href="https://www.youtube.com/channel/UCn2hUXaPQGGWbcnUQM6MFhw" target="_blank" title="Youtube"><i class="fa fa-youtube" aria-hidden="true"></i></a> </div>
</div>
</div>
<!-- Analytics Code START -->
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-58199121-13"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-58199121-13');
</script>
<!-- Analytics Code END -->
<!-- Support Code START -->
<script src="//code-eu1.jivosite.com/widget/Itfv5MEJO0" async></script><!-- Support Code END -->
<script src="https://www.wpxsoft.com/templates/website/Modern/js/aos.js"></script>
<script type="text/javascript">
AOS.init({
easing: 'ease-out-back',
duration: 1000
});
</script>
<a href="#0" class="cd-top">Top</a>
<style>
.wa-widget {
left: 0;
}
.wa-widget-content {
left: 0;
}
@media (max-width: 460px){
.wa-widget-toggle {
float: left;
}
}
</style>
<script src="https://www.wpxsoft.com/coremio/modules/Addons/WhatsappChat/js/whatsapp-widget.min.js"></script>
<form id="general-support" class="wa-widget" data-target="#_hide" action="905309767545" data-chat="general-support"></form>
<script>
var generalSupport = new WhatsAppWidget(document.getElementById('general-support'), {
name: "Wpxsoft",
division: "Yönetici",
photo: "https://www.wpxsoft.com/images/user_chat.png",
introduction: "Merhaba! Yardıma ihtiyacın olursa ben her zaman buradayım ",
}, [
{
data: '*Bulunduğu Sayfa:* '+"https://www.wpxsoft.com/yazi/html5-ve-html5-ile-gelen-etiketler",
type: 'hidden',
required: false
},
{
data: 'Adınız: ',
type: 'text',
required: false },
{
data: 'Mesajınız: ',
type: 'text',
required: true
},
]);
$(function(){
$(".chat-send").html("<strong>"+"<i class='fa fa-paper-plane'></i>"+" Sohbete Başla</strong>");
});
</script>
</body>
</html>]]> 