HTML 5

  • Post author:
  • Post category:HTML

Czym różni się HTML 5 od HTML ?

Język HTML 5 należy do jednych z najnowszych wersji języka HTML. Zawiera ulepszone funkcje języka aby tworzenie stron internetowych było prostsze w związku z tym bardziej przyjazne dla osób zajmujących się kodowaniem stron. Zdefiniowane przez HTML5 istniejące elementy jak i znaczniki były dla programistów tworzących strony internetowe mieli do swojej dyspozycji wiele więcej znaczników niż w zwykłym HTML czy XHTML 1.0 .

Branża tworzenia stron internetowych znacznie ewoluowała w stosunkowo krótkim czasie, w związku z tym jeszcze 10-15 lat temu, strona internetowa zawierała jedynie obrazy i treści. Dzisiaj tworzone strony internetowe są zupełnie inne w związku z tym przypominają one aplikacje internetowe a nie statyczne strony HTML.

Stworzenie HTML5 było wynikiem zmienionego krajobrazu sieci web wraz ze wzrostem zapotrzebowania na coraz szybsze i wydajniejsze aplikacje internetowe.

W HTML5 znajduje się szereg elementów semantycznych, technologii i interfejsów API po to aby ułatwić komunikację statycznej części strony z dynamiczną.

Prosty przykład struktury <HEAD> HTML5 strony internetowej.

<!DOCTYPE html>
<html lang="pl">
 <head>
 <meta charset="utf-8">
 <title>Podstawowa struktura strony w HTML5</title>
 <meta name="description" content="Podstawowa struktura strony w HTML5">
 <link rel="stylesheet" href="css/styles.css">
 </head>

Jak można zauważyć znacznik <!DOCTYPE> został znacznie uproszczony i nie trzeba już myśleć jaki nagłówek wybrać tak aby wszystkie elementy strony współdziałały.

W HTML4 Transitional – nagłówek wygląda następująco :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//PL" "http://www.w3.org/TR/html4/loose.dtd">

W XHTML 1.0 Strict – nagłówek wygląda następująco :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Nagłówek w HTML5 to :

<!DOCTYPE html>

Różnicę w długości TAGU DOCTYPE widać na pierwszy rzut oka.

Teraz zajmiemy się następnym elementem dobrze stworzonej strony internetowej. Mianowicie sekcją HEAD w związku z tym godne uwagi jest to że można korzystać z tych nagłówków również w HTML5. Tutaj uproszczeniu uległy meta-tagi podczas gdy różnice HTML5 a HTML4 oraz XHTML są przedstawione poniżej:

META TAG w XHTML oraz HTML4 :

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

META TAG w HTML5 :

<meta charset="utf-8">

Tagi HTML5 które nie uległy zmianie w stosunku do poprzedniej wersji to :

<title>Tytuł strony HTML5</title>
<meta name="description" content="">
<meta name="keywords" content="" />
<meta name="author" content="">

Teraz przedstawię różnicę pomiędzy tagami CSS oraz JS, podstawowa różnica to długość linku CSS i JavaScript .

HTML5
<link rel="stylesheet" href="css/styles.css">
<script src="js/scripts.js"></script>

HTML4 ORAZ XHTML
<link rel='stylesheet' href='css/styles.css' type='text/css' media='all' />
<script type='text/javascript' src='js/scripts.js'></script>