HTML5 - składnia

Język HTML 5 ma „niestandardową” składnię HTML, która jest zgodna z dokumentami HTML 4 i XHTML1 publikowanymi w Internecie, ale nie jest zgodna z bardziej ezoterycznymi funkcjami SGML w HTML 4.

HTML 5 nie ma tych samych reguł składni, co XHTML, gdzie potrzebowaliśmy nazw znaczników pisanych małymi literami, cytowania naszych atrybutów, atrybut musiał mieć wartość i zamykać wszystkie puste elementy.

HTML5 zapewnia dużą elastyczność i obsługuje następujące funkcje -

Nazwy znaczników pisane wielkimi literami.
Cytaty są opcjonalne dla atrybutów.
Wartości atrybutów są opcjonalne.
Zamykanie pustych elementów jest opcjonalne.

DOCTYPE

DOCTYPE w starszych wersjach HTML były dłuższe, ponieważ język HTML był oparty na SGML i dlatego wymagał odniesienia do DTD.

Autorzy HTML 5 użyliby prostej składni do określenia DOCTYPE w następujący sposób -

<!DOCTYPE html>

W powyższej składni nie jest rozróżniana wielkość liter.

Kodowanie znaków

Autorzy HTML 5 mogą użyć prostej składni, aby określić kodowanie znaków w następujący sposób -

<meta charset = "UTF-8">

W powyższej składni nie jest rozróżniana wielkość liter.

Tag <script>

Powszechną praktyką jest dodawanie atrybutu typu o wartości „text / javascript” do elementów skryptu w następujący sposób -

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

HTML 5 usuwa dodatkowe wymagane informacje i możesz użyć po prostu następującej składni -

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

Tag <link>

Do tej pory pisałeś <link> w następujący sposób -

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

HTML 5 usuwa dodatkowe wymagane informacje i możesz po prostu użyć następującej składni -

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

Elementy HTML5

Elementy HTML5 są oznaczane za pomocą tagów początkowych i końcowych. Znaczniki są rozdzielane nawiasami ostrymi z nazwą znacznika pomiędzy.

Różnica między tagami początkowymi i końcowymi polega na tym, że te ostatnie zawierają ukośnik przed nazwą tagu.

Poniżej znajduje się przykład elementu HTML5 -

<p>...</p>

W nazwach tagów HTML5 wielkość liter nie jest rozróżniana i można je pisać wielkimi lub mieszanymi, chociaż najczęściej stosuje się małe litery.

Większość elementów zawiera jakąś treść, np. <p> ... </p> zawiera akapit. Jednak niektóre elementy nie mogą w ogóle zawierać treści i są one znane jako elementy void. Na przykład,br, hr, link, metaitp.

Oto pełna lista elementów HTML5 .

Atrybuty HTML5

Elementy mogą zawierać atrybuty używane do ustawiania różnych właściwości elementu.

Niektóre atrybuty są definiowane globalnie i mogą być używane w dowolnym elemencie, podczas gdy inne są definiowane tylko dla określonych elementów. Wszystkie atrybuty mają nazwę i wartość i wyglądają tak, jak pokazano poniżej w przykładzie.

Poniżej znajduje się przykład atrybutu HTML5, który ilustruje, jak oznaczyć element div atrybutem o nazwie class, używając wartości „przykład” -

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

Atrybuty można określać tylko w tagach początkowych i nigdy nie można ich używać w tagach końcowych.

W atrybutach HTML5 nie jest rozróżniana wielkość liter i można je pisać wielkimi lub mieszanymi, chociaż najczęstszą konwencją jest trzymanie się małych liter.

Oto pełna lista atrybutów HTML5 .

Dokument HTML5

Dla lepszej struktury wprowadzono następujące tagi -

section- Ten tag reprezentuje ogólny dokument lub sekcję aplikacji. Może być używany razem z h1-h6 do wskazania struktury dokumentu.
article - Ten znacznik reprezentuje niezależną część treści dokumentu, na przykład wpis na blogu lub artykuł w gazecie.
aside - Ten tag reprezentuje fragment treści, który jest tylko nieznacznie powiązany z pozostałą częścią strony.
header - Ten tag reprezentuje nagłówek sekcji.
footer - Ten tag reprezentuje stopkę sekcji i może zawierać informacje o autorze, informacje o prawach autorskich itp.
nav - Ten tag reprezentuje sekcję dokumentu przeznaczoną do nawigacji.
dialog - Tego tagu można użyć do zaznaczenia rozmowy.
figure - Tego znacznika można użyć do powiązania podpisu z pewną zawartością osadzoną, taką jak grafika lub wideo.

Znaczniki dokumentu HTML 5 wyglądałyby następująco -

<!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>

To da następujący wynik -