HTML5 - Sözdizimi

HTML 5 dili, Web'de yayınlanan HTML 4 ve XHTML1 belgeleriyle uyumlu "özel" bir HTML sözdizimine sahiptir, ancak HTML 4'ün daha ezoterik SGML özellikleriyle uyumlu değildir.

HTML 5, XHTML ile aynı sözdizimi kurallarına sahip değildir, burada küçük harfli etiket adlarına ihtiyacımız vardı, özniteliklerimizi alıntılayarak, bir niteliğin bir değeri olması ve tüm boş öğeleri kapatması gerekiyordu.

HTML5 çok fazla esneklikle gelir ve aşağıdaki özellikleri destekler -

Büyük harfli etiket adları.
Öznitelikler için alıntılar isteğe bağlıdır.
Öznitelik değerleri isteğe bağlıdır.
Boş elemanların kapatılması isteğe bağlıdır.

DOCTYPE

HTML'nin eski sürümlerindeki DOCTYPE'ler daha uzundu çünkü HTML dili SGML tabanlıydı ve bu nedenle bir DTD'ye başvuru gerektiriyordu.

HTML 5 yazarları, DOCTYPE'ı aşağıdaki gibi belirtmek için basit sözdizimi kullanırlar -

<!DOCTYPE html>

Yukarıdaki sözdizimi büyük / küçük harfe duyarlıdır.

Karakter kodlaması

HTML 5 yazarları, Karakter Kodlamasını aşağıdaki gibi belirtmek için basit sözdizimi kullanabilir:

<meta charset = "UTF-8">

Yukarıdaki sözdizimi büyük / küçük harfe duyarlıdır.

<script> etiketi

Komut dosyası öğelerine aşağıdaki gibi "text / javascript" değerine sahip bir type özelliği eklemek yaygın bir uygulamadır -

<script type = "text/javascript" src = "scriptfile.js"></script>

HTML 5, gerekli ek bilgileri kaldırır ve aşağıdaki sözdizimini kullanabilirsiniz -

<script src = "scriptfile.js"></script>

<link> etiketi

Şimdiye kadar aşağıdaki gibi <link> yazıyordunuz -

<link rel = "stylesheet" type = "text/css" href = "stylefile.css">

HTML 5, gerekli olan fazladan bilgileri kaldırır ve aşağıdaki sözdizimini kullanabilirsiniz -

<link rel = "stylesheet" href = "stylefile.css">

HTML5 Öğeleri

HTML5 öğeleri, başlangıç etiketleri ve bitiş etiketleri kullanılarak işaretlenir. Etiketler, aralarında etiket adı olacak şekilde açılı parantezler kullanılarak sınırlandırılmıştır.

Başlangıç etiketleri ile bitiş etiketleri arasındaki fark, ikincisinin etiket adından önce bir eğik çizgi içermesidir.

Aşağıda bir HTML5 öğesi örneği verilmiştir -

<p>...</p>

HTML5 etiket adları büyük / küçük harfe duyarlı değildir ve tümü büyük harfle veya büyük / küçük harf karışık olarak yazılabilir, ancak en yaygın kural küçük harfle devam etmektir.

Öğelerin çoğu, <p> ... </p> gibi bazı içerikler içerir, bir paragraf içerir. Bununla birlikte, bazı öğelerin herhangi bir içerik içermesi yasaktır ve bunlar geçersiz öğeler olarak bilinir. Örneğin,br, hr, link, meta, vb.

İşte HTML5 Öğelerinin tam listesi .

HTML5 Özellikleri

Öğeler, bir öğenin çeşitli özelliklerini ayarlamak için kullanılan nitelikler içerebilir.

Bazı öznitelikler genel olarak tanımlanır ve herhangi bir öğede kullanılabilirken diğerleri yalnızca belirli öğeler için tanımlanır. Tüm özniteliklerin bir adı ve değeri vardır ve aşağıdaki örnekte gösterildiği gibi görünür.

Aşağıda, bir div öğesinin "example" değeri kullanılarak sınıf adlı bir öznitelikle nasıl işaretleneceğini gösteren bir HTML5 özniteliği örneği verilmiştir -

<div class = "example">...</div>

Öznitelikler yalnızca başlangıç etiketlerinde belirtilebilir ve asla bitiş etiketlerinde kullanılmamalıdır.

HTML5 nitelikleri büyük / küçük harfe duyarlı değildir ve tümü büyük harf veya karışık olarak yazılabilir, ancak en yaygın kural küçük harf kullanmaktır.

İşte HTML5 Özelliklerinin tam listesi .

HTML5 Belgesi

Daha iyi bir yapı için aşağıdaki etiketler sunulmuştur -

section- Bu etiket, genel bir belge veya uygulama bölümünü temsil eder. Belge yapısını belirtmek için h1-h6 ile birlikte kullanılabilir.
article - Bu etiket, bir blog girişi veya gazete makalesi gibi bir belgenin bağımsız bir içeriğini temsil eder.
aside - Bu etiket, sayfanın geri kalanıyla yalnızca biraz alakalı olan bir içerik parçasını temsil eder.
header - Bu etiket, bir bölümün başlığını temsil eder.
footer - Bu etiket, bir bölümün altbilgisini temsil eder ve yazar, telif hakkı bilgileri vb. Hakkında bilgiler içerebilir.
nav - Bu etiket, belgenin gezinme amaçlı bir bölümünü temsil eder.
dialog - Bu etiket, bir görüşmeyi işaretlemek için kullanılabilir.
figure - Bu etiket, bir resim veya video gibi bazı gömülü içerikle birlikte bir resim yazısı ilişkilendirmek için kullanılabilir.

Bir HTML 5 belgesinin biçimlendirmesi aşağıdaki gibi görünecektir -

<!DOCTYPE html> 

<html>  
   <head> 
      <meta charset = "utf-8"> 
      <title>...</title> 
   </head> 
  
   <body> 
      <header>...</header> 
      <nav>...</nav> 
      
      <article> 
         <section> 
            ... 
         </section> 
      </article> 
      <aside>...</aside> 
      
      <footer>...</footer> 
   </body> 
</html>

<!DOCTYPE html>  

<html>  
   <head> 
      <meta charset = "utf-8"> 
      <title>...</title> 
   </head> 
  
   <body> 
      <header role = "banner"> 
         <h1>HTML5 Document Structure Example</h1> 
         <p>This page should be tried in safari, chrome or Mozila.</p> 
      </header> 
   
      <nav> 
         <ul> 
            <li><a href = "https://www.tutorialspoint.com/html">HTML Tutorial</a></li> 
            <li><a href = "https://www.tutorialspoint.com/css">CSS Tutorial</a></li> 
            <li><a href = "https://www.tutorialspoint.com/javascript">
            JavaScript Tutorial</a></li> 
         </ul> 
      </nav> 
   
      <article> 
         <section> 
            <p>Once article can have multiple sections</p>
         </section> 
      </article> 
   
      <aside> 
         <p>This is  aside part of the web page</p> 
      </aside> 
   
      <footer> 
         <p>Created by <a href = "https://tutorialspoint.com/">Tutorials Point</a></p> 
      </footer> 
   
   </body> 
</html>

Aşağıdaki sonucu verecektir -