Semantic: Anlamsal Elemanlar. Sayfada bir h1 elemanı gördüğümüz zaman bunun bir header olduğunu anlarız ya da p etiketi gördüysek bunun içinde yazı olacağını anlarız <div> ya da <span> kendi başına bir anlam ifade etmezler buna bir id,class özelliği verilmesi lazım Arama motoru h1 gördüğü zaman bunun başlık olduğunu anlar fakat class ya da id verilmemiş bir id etiketini anlayamaz.
Sayfamızda <div id=”footer”> gördüğümüzde bunun bir footer olduğunu anlayabilliriz fakat bu eksi bir kullanımdır HTML5 ile birlikte header,nav,footer vb. alanlar için <header> <nav> <footer> özel etiketler oluşturulmuştur Bu etiketlerin kullanılması arama motoru ve kullanıcıların siteyi anlamasını sağlar websiteleri header,navbar,siderbar,section,footer gibi alanlardan oluşur.
<!--
Semantic: Anlamsal Elemanlar
Sayfada bir h1 elemanı gördüğümüz zaman bunun bir header olduğunu anlarız ya da p etiketi gördüysek bunun içinde yazı olacağını anlarız
<div> ya da <span> kendi başına bir anlam if. etmez buna bir id,class özelliği verilmesi lazım
Arama motoru h1 gördüğü zaman bunun başlık old. anlar fakat class ya da id verilmemiş bir id etiketini anlayamaz
Sayfamızda <div id="footer"> gördüğümüzde bunun bir footer olduğunu anlayabilliriz fakat bu eksi bir kullanımdır
HTML5 ile birlikte header,nav,footer vb alanlar için <header> <nav> <footer> özel etiketler oluşturulmuştur
Bu etiketlerin kullanılması arama motoru ve kullanıcıların siteyi anlamasını sağlar
websiteleri header,navbar,siderbar,section,footer gibi alanlardan oluşur
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
</head>
<body>
<!-- <div id="header"> eski kullanım -->
<header>
<h1>HTML DEMOS</h1>
<nav>
<a href="#">Home</a>
<a href="#">AboutUs</a>
<a href="#">Contact</a>
</nav>
</header>
<section id="section-little">
<article>Story a</article>
<article>Story b</article>
<article>Story c</article>
</section>
<section id="section-big">
<article>Story 1</article>
<article>Story 2</article>
<article>Story 3</article>
</section>
<footer>
Copyright 2020
</footer>
</body>
</html>
Mehmet İçme 
Yorum bırakın