HTML5 jest najnowszą wersją standardu opisującego język HTML. Termin ten możemy zdefiniować na dwa sposoby:
- Jest to nowa wersja języka HTML, zawierająca nowe elementy, atrybuty i zachowania,
- większy zestaw technologii, które pozwala na bardziej różnorodne i potężne tworzenie stron i aplikacji internetowych. Zestaw ten czasem nazywamy HTML5 & friends, jednak często skracamy do nazwy po prostu HTML5.
Zawarta poniżej treść przeznaczona jest do zastosowania przez wszystkich programistów, strona zawiera dużo informacji na temat technologii HTML5, która została opisana w kilku grupach podzielonych według ich funkcji.
- Semantyka: pozwala na bardziej precyzyjne opisanie zawartości.
- Komunikacja: pozwala w sposób nowoczesny na komunikację z serwerem.
- Offline & Storage: pozwala stronom internetowym na bardziej efektywne przechowywanie danych lokalnie i w trybie offline.
- Multimedia: odtwarzanie plików audio i wideo bezpośrednio z przeglądarki.
- Efekty i Grafika 2D/3D: pozwala w znacznie bardziej zróżnicowany sposób prezentować możliwości stron lub aplikacji internetowych.
- Wydajność & Integracja: zapewnia większą prędkość i lepszą optymalizację wykorzystania sprzętu komputerowego.
- Dostęp do urządzenia: zastosowanie w wielu urządzeniach wejścia i wyjścia.
- Style: pozwala autorom na tworzenie ładniejszych motywów.
Semantyka
- Elementy sekcji zawarte w dokumencie HTML5
- Poznaj nowe elementy przedstawiające sekcje dokumentu wprowadzone do HTML5: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}} i {{HTMLElement("aside")}}.
- Zastosowanie elementów audio i video
- Elementy {{HTMLElement("audio")}} i {{HTMLElement("video")}} pozwalają zagnieżdżać i zarządzać zawartością multimediów.
- Formularze w HTML5
- Spojrzenie na ulepszenia formularzy sieciowych w HTML5: wymuszenie poprawności API, kilka nowych atrybutów, nowe wartości dla atrybutów {{HTMLElement("input")}} {{htmlattrxref("type", "input")}} i nowego elementu {{HTMLElement("output")}}.
- Nowe semantyczne elementy
- Obok sekcji, elementów mediów i formularzy, są liczne, nowe elementy takie jak: {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, lub {{HTMLElement("meter")}} i {{HTMLElement("main")}}, zwiększenie ilości elementów poprawności HTML 5.
- Ulepszenia w {{HTMLElement("iframe")}}
- Używając atrybutów {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}} i {{htmlattrxref("srcdoc", "iframe")}} , autorzy mogą teraz precyzyjniej określać poziom bezpieczeństwa i pożądane wyświetlanie elementów {{HTMLElement("iframe")}}.
- MathML
- Pozwala na bezpośrednie umieszczanie formuł matematycznych.
- Wprowadzenie do HTML5
- Ten artykuł pokazuje jak przekazać przeglądarce, że używasz HTML 5 na swojej stronie internetowej lub w aplikacji.
- Parser zgodny z HTML5
- Parser, który przetwarza dokument HTML na DOM, został rozszerzony i teraz precyzyjnie definiuje zachowanie we wszystkich przypadkach, nawet w wypadku niepoprawnego HTML-a. To prowadzi do znacznie większej przewidywalności zachowania strony i współpracy między przeglądarkami zgodnymi z HTML 5.
Połączenia
- Web Sockets (dwukierunkowa komunikacja z serwerem)
- Pozwala tworzyć stabilne połączenie pomiędzy stroną i serwerem, i wymieniać nie-HTML-owe dane.
- Server-Sent Events (zdarzenia wysłane przez serwer)
- Pozwala serwerowi na "własnowolne" wysyłanie zdarzeń do klienta, inaczej niż w przypadku klasycznego paradygmatu, w którym serwer mógł wysyłać dane tylko w odpowiedzi na zapytanie klienta.
- WebRTC
- Ta technologia, w której RTC oznacza Komunikację Czasu Rzeczywistego(Real-Time Communication), pozwala na łączenie się z innymi i kontrolowanie wideokonferencji bezpośrednio z przeglądarki, bez potrzeby korzystania z wtyczek lub zewnętrznych aplikacji.
Tryb Offline i przechowywanie
- Zasoby offline: pamięć cache aplikacji
- Firefox w pełni wspiera specyfikację zasobów offline HTML5. Większość innych przeglądarek wspiera ją w podobnym stopniu.
- Zdarzenia online i offline
- Firefox 3 wspiera zdarzenia WHATWG online i offline, dzięki czemu aplikacje i dodatki mogą wykryć czy istnieje aktywne połączenie internetowe, a także wykrywać kiedy połączenie wygaśnie i kiedy jest aktywne.
- Sesje WHATWG po stronie klienta i trwałe przechowywanie (aka Magazyn DOM)
- Sesje po stronie klienta i trwałe magazynowanie pozwalają aplikacjom sieciowym przechowywać dane strukturalne po stronie klienta.
- IndexedDB
- IndexedDB jest sieciowym standardem przechowywania znacznych ilości danych strukturalnych w przeglądarce i wysokiej wydajności wyszukiwania w tych danych za pomocą indeksów.
- Używanie plików z aplikacji internetowych
- Wsparcie dla nowego API plików HTML5 zostało dodane do Gecko, tworząc możliwość dostępu aplikacji internetowych do plików lokalnych wybranych przez użytkownika. Obejmuje też wsparcie dla wielokrotnego wyboru plików z użyciem {{HTMLElement("input")}} z atrybutem type file i nowym atrybutem elementu: multiple. Istnieje także
FileReader.
Multimedia
- Zastosowanie elementów audio i video w HTML5
- Znaczniki {{HTMLElement("audio")}} i {{HTMLElement("video")}} pozwalają osadzać i manipulować nowymi zawartościami multimedialnymi.
- WebRTC
- Ta technologia, w której RTC oznacza Komunikację Czasu Rzeczywistego(Real-Time Communication), pozwala na łączenie się z innymi i kontrolowanie wideokonferencji bezpośrednio z przeglądarki, bez potrzeby korzystania z wtyczek lub zewnętrznych aplikacji.
- Używanie API kamery internetowej
- Pozwala używać, manipulować i przechowywać obrazy z kamerki komputerowej.
- Track and WebVTT
- Znacznik {{HTMLElement("track")}} pozwala tworzyć napisy i rozdziały. WebVTT jest formatem ścieżek tekstowych.
EFEKTY I GRAFIKA 3D
- Przewodnik po Canvas
- Informacje o nowym elemencie
{{HTMLElement("canvas")}}wraz z opisem jak działa użyty do rysowania grafik i obiektów w Firefoksie. - HTML5 text API dla elementów <canvas>
- HTML5 text API jest teraz wspierane przez elementy {{HTMLElement("canvas")}}.
- WebGL
- WebGL przenosi grafikę 3D do sieci poprzez wprowadzenie API, które ściśle odpowiada OpenGl ES 2.0 i może być używane w znacznikach HTML5 {{HTMLElement("canvas")}}.
- SVG (Scalable Vector Graphics) - skalowalna grafika wektorowa
- Bazujący na XML-u format grafiki wektorowej, który może być bezpośrednio osadzony w HTML-u.
WYDAJNOŚĆ i iNTEGRACJA
- Web Workers
- Umożliwia przekazanie działania JavaScrit do wątków w tle, dzięki czemu zapobiega spowalnianiu wydarzeń interaktywnych.
XMLHttpRequestPoziom 2- Umożliwia asynchroniczne pobieranie części strony, co umożliwia wyświetlanie elementów dynamicznych, zmieniających się w zależności od czasu i działań użytkownika. Jest to "następca" Ajax-a.
- JIT-compiling JavaScript engines (kompilowalne silniki JavaScript)
- Nowa generacja silników JavaScript jest o wiele potężniejsza i ma świetną wydajność.
- API do obsługi przycisku wstecz (History API)
- Pozwala manipulować historią przeglądania. Jest użyteczne zwłaszcza na stronach ładujących interaktywnie nowe informacje.
- Atrybut contentEditable: przekształć swoją stronę w encyklopedię!
- HTML5 ustandaryzował atrybut contentEditable. Dowiedz się więcej o tej właściwości.
- Przeciągnij i upuść
- The HTML5 drag and drop API allows support for dragging and dropping items within and between web sites. This also provides a simpler API for use by extensions and Mozilla-based applications.
- Focus management in HTML
- The new HTML5
activeElementandhasFocusattributes are supported. - Web-based protocol handlers
- You can now register web applications as protocol handlers using the
navigator.registerProtocolHandler()method. requestAnimationFrame- Allows control of animations rendering to obtain optimal performance.
- Fullscreen API
- Controls the usage of the whole screen for a Web page or application, without the browser UI displayed.
- Pointer Lock API
- Allows locking the pointer to the content, so games and similar applications don't lose focus when the pointer reaches the window limit.
- Online and offline events
- In order to build a good offline-capable web application, you need to know when your application is actually offline. Incidentally, you also need to know when your application has returned to an online status again.
DOSTĘP DO URZĄDZENIA
- Using the Camera API
- Allows using, manipulating, and storing an image from the computer's camera.
- Touch events
- Handlers to react to events created by a user pressing touch screens.
- Using geolocation
- Let browsers locate the position of the user using geolocation.
- Detecting device orientation
- Get the information when the device on which the browser runs changes orientation. This can be used as an input device (e.g., to make games that react to the position of the device) or to adapt the layout of a page to the orientation of the screen (portrait or landscape).
- Pointer Lock API
- Allows locking the pointer to the content, so games and similar application don't lose focus when the pointer reaches the window limit.
Styling
CSS has been extended to be able to style elements in a much more complex way. This is often referred as CSS3, though CSS is not a monolithic specification any more and the different modules are not all at level 3: some are at level 1 and others at level 4, with all the intermediate levels covered.
- New background styling features
- It is now possible to put a shadow to a box, using {{cssxref("box-shadow")}} and multiple backgrounds can be set.
- More fancy borders
- Not only it is now possible to use images to style borders, using {{cssxref("border-image")}} and its associated longhand properties, but rounded borders are supported via the {{cssxref("border-radius")}} property.
- Animating your style
- Using CSS Transitions to animate between different states or using CSS Animations to animate parts of the page without a triggering event, you can now control mobile elements on your page.
- Typography improvement
- Authors have better control to reach better typography. They can control {{cssxref("text-overflow")}} and hyphenation, but also can add a shadow to it or control more precisely its decorations. Custom typefaces can be downloaded and applied thanks to the new {{cssxref("@font-face")}} at-rule.
- New presentational layouts
- In order to improve the flexibility of designs, two new layouts have been added: the CSS multi-column layout, and the CSS flexible box layout.