path: root/files/pl/web/guide/html/html5/index.html

---
title: HTML5
slug: HTML/HTML5
tags:
  - CSS3
  - HTML
  - HTML 5
translation_of: Web/Guide/HTML/HTML5
---
<p><span class="seoSummary"><strong>HTML5</strong> jest najnowszą wersją standardu opisującego język <a href="/pl/docs/HTML" title="HTML">HTML</a>. </span>Termin ten możemy zdefiniować na dwa sposoby:</p>

<ul>
 <li><span class="seoSummary">Jest to nowa wersja <em>języka</em> HTML, zawierająca nowe elementy, atrybuty i zachowania,</span></li>
 <li><span class="seoSummary">większy zestaw technologii, które pozwala na bardziej różnorodne i potężne tworzenie stron i aplikacji internetowych.</span> Zestaw ten czasem nazywamy <em>HTML5 &amp; friends</em>, jednak często skracamy do nazwy po prostu <em>HTML5</em>.</li>
</ul>

<p>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.</p>

<ul>
 <li><em>Semantyka</em>: pozwala na bardziej precyzyjne opisanie zawartości.</li>
 <li><em>Komunikacja</em>: pozwala w sposób nowoczesny na komunikację z serwerem.</li>
 <li><em>Offline &amp; Storage</em>: pozwala stronom internetowym na bardziej efektywne przechowywanie danych lokalnie i w trybie offline.</li>
 <li><em>Multimedia</em><strong>: odtwarzanie plików audio i wideo bezpośrednio z przeglądarki.</strong></li>
 <li><em>Efekty i Grafika 2D/3D</em>: pozwala w znacznie bardziej zróżnicowany sposób prezentować możliwości stron lub aplikacji internetowych.</li>
 <li><em>Wydajność &amp; Integracja</em>: zapewnia większą prędkość i lepszą optymalizację wykorzystania sprzętu komputerowego.</li>
 <li><em>Dostęp do urządzenia</em><strong>: zastosowanie w wielu urządzeniach wejścia i wyjścia.</strong></li>
 <li><em>Style</em>: pozwala autorom na tworzenie ładniejszych motywów.</li>
</ul>

<div class="cleared row topicpage-table">
<h2 id="Semantyka" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3827/HTML5_Semantics_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Semantyka</h2>

<dl>
 <dt><a href="/pl/docs/Web/Guide/HTML/Sekcje_oraz_konspekt_dokumentu_HTML5" title="Elementy sekcji stosowane w dokumencie HTML5">Elementy sekcji zawarte w dokumencie HTML5</a></dt>
 <dd>Poznaj nowe elementy przedstawiające sekcje dokumentu wprowadzone do HTML5: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}} i {{HTMLElement("aside")}}.</dd>
 <dt><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">Zastosowanie elementów audio i video</a></dt>
 <dd>Elementy {{HTMLElement("audio")}} i {{HTMLElement("video")}} pozwalają zagnieżdżać i zarządzać zawartością multimediów.</dd>
 <dt><a href="/en-US/docs/HTML/Forms_in_HTML" title="Formularze w HTML5">Formularze w HTML5</a></dt>
 <dd>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")}}.</dd>
 <dt>Nowe <span style="line-height: 1.5;">semantyczne </span><span style="line-height: 1.5;">elementy </span></dt>
 <dd>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 <a href="/pl/docs/Web/HTML/Element" title="HTML/HTML5/HTML5_element_list">elementów poprawności HTML 5</a>.</dd>
 <dt>Ulepszenia w {{HTMLElement("iframe")}}</dt>
 <dd>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")}}.</dd>
 <dt><a href="/en-US/docs/MathML" title="MathML">MathML</a></dt>
 <dd>Pozwala na bezpośrednie umieszczanie formuł matematycznych.</dd>
 <dt><a href="/en-US/docs/HTML/HTML5/Introduction_to_HTML5" title="HTML/HTML5/Introduction_to_HTML5">Wprowadzenie do HTML5</a></dt>
 <dd>Ten artykuł pokazuje jak przekazać przeglądarce, że używasz HTML 5 na swojej stronie internetowej lub w aplikacji.</dd>
 <dt><a href="/en-US/docs/HTML/HTML5/HTML5_Parser" title="HTML/HTML5/HTML5 parser">Parser zgodny z HTML5</a></dt>
 <dd>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.</dd>
</dl>

<h2 id="Połączenia" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3839/HTML5_Connectivity_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Połączenia</h2>

<dl>
 <dt><a href="/en-US/docs/WebSockets" title="WebSockets">Web Sockets (dwukierunkowa komunikacja z serwerem)</a></dt>
 <dd>Pozwala tworzyć stabilne połączenie pomiędzy stroną i serwerem, i  wymieniać nie-HTML-owe dane.</dd>
 <dt><a href="/en-US/docs/Server-sent_events/Using_server-sent_events" title="Server-sent_events/Using_server-sent_events">Server-Sent Events (zdarzenia wysłane przez serwer)</a></dt>
 <dd>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.</dd>
 <dt><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt>
 <dd>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.</dd>
</dl>

<h2 id="Tryb_Offline_i_przechowywanie" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3833/HTML5_Offline_Storage_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Tryb Offline i przechowywanie</h2>

<dl>
 <dt><a href="/en-US/docs/HTML/Using_the_application_cache" title="Offline_resources_in_Firefox">Zasoby offline: pamięć cache aplikacji</a></dt>
 <dd>Firefox w pełni wspiera specyfikację zasobów offline HTML5. Większość innych przeglądarek wspiera ją w podobnym stopniu.</dd>
 <dt><a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Zdarzenia online i offline</a></dt>
 <dd>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.</dd>
 <dt><a href="/en-US/docs/DOM/Storage" title="DOM/Storage">Sesje WHATWG po stronie klienta i trwałe przechowywanie (aka Magazyn DOM)</a></dt>
 <dd>Sesje po stronie klienta i trwałe magazynowanie pozwalają aplikacjom sieciowym przechowywać dane strukturalne po stronie klienta.</dd>
 <dt><a href="/en-US/docs/IndexedDB" title="IndexedDB">IndexedDB</a></dt>
 <dd>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.</dd>
 <dt><a href="/en-US/docs/Using_files_from_web_applications" title="Using_files_from_web_applications">Używanie plików z aplikacji internetowych</a></dt>
 <dd>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 <span style="font-family: monospace;">{{HTMLElement("input")}}</span> z <strong><a href="/en-US/docs/HTML/Element/Input#attr-type" title="HTML/Element/input#attr-type">atrybutem type</a></strong> <span style="font-family: courier new;">file</span> i nowym atrybutem elementu: <a href="/en-US/docs/HTML/Element/Input#attr-multiple" title="HTML/Element/input#attr-multiple"><strong>multiple</strong></a>. Istnieje także <a href="/en-US/docs/DOM/FileReader" title="DOM/FileReader"><code>FileReader</code></a>.</dd>
</dl>

<h2 id="Multimedia" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3835/HTML5_Multimedia_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Multimedia</h2>

<dl>
 <dt><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">Zastosowanie elementów audio i video w HTML5</a></dt>
 <dd>Znaczniki {{HTMLElement("audio")}} i {{HTMLElement("video")}} pozwalają osadzać i manipulować nowymi zawartościami multimedialnymi.</dd>
 <dt><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt>
 <dd>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.</dd>
 <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">Używanie API kamery internetowej</a></dt>
 <dd>Pozwala używać, manipulować i przechowywać obrazy z kamerki komputerowej.</dd>
 <dt>Track and WebVTT</dt>
 <dd>Znacznik {{HTMLElement("track")}} pozwala  tworzyć napisy i rozdziały. <a href="/en-US/docs/HTML/WebVTT" title="HTML/WebVTT">WebVTT</a> jest formatem ścieżek tekstowych.</dd>
</dl>

<h2 id="EFEKTY_I_GRAFIKA_3D" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3841/HTML5_3D_Effects_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">EFEKTY I GRAFIKA 3D</h2>

<dl>
 <dt><a href="/en-US/docs/Canvas_tutorial" title="Przewodnik po Canvas">Przewodnik po Canvas</a></dt>
 <dd>Informacje o nowym elemencie <code>{{HTMLElement("canvas")}}</code> wraz z opisem jak działa użyty do rysowania grafik i obiektów w Firefoksie.</dd>
 <dt><a href="/en-US/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">HTML5 text API dla elementów &lt;canvas&gt;</a></dt>
 <dd>HTML5 text API jest teraz wspierane przez elementy {{HTMLElement("canvas")}}.</dd>
 <dt><a href="/en-US/docs/WebGL" title="WebGL">WebGL</a></dt>
 <dd>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")}}.</dd>
 <dt><a href="/en-US/docs/SVG" title="SVG">SVG (Scalable Vector Graphics) - skalowalna grafika wektorowa </a></dt>
 <dd>Bazujący na XML-u format grafiki wektorowej, który może być bezpośrednio osadzony w HTML-u.</dd>
</dl>

<div class="section">
<h2 id="WYDAJNOŚĆ_i_iNTEGRACJA" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3831/HTML5_Performance_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">WYDAJNOŚĆ i iNTEGRACJA</h2>

<dl>
 <dt><a href="/en-US/docs/DOM/Using_web_workers" title="Using web workers">Web Workers</a></dt>
 <dd>Umożliwia przekazanie działania JavaScript do wątków w tle, dzięki czemu zapobiega spowalnianiu wydarzeń interaktywnych.</dd>
 <dt><code><a href="/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code> Poziom 2</dt>
 <dd>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" <a href="/en-US/docs/AJAX" title="AJAX">Ajax-a.</a></dd>
 <dt>JIT-compiling JavaScript engines (kompilowalne silniki JavaScript)</dt>
 <dd>Nowa generacja silników JavaScript jest o wiele potężniejsza i ma świetną wydajność.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history" title="DOM/Manipulating_the_browser_history">API do obsługi przycisku wstecz (History API)</a></dt>
 <dd>Pozwala manipulować historią przeglądania. Jest użyteczne zwłaszcza na stronach ładujących interaktywnie nowe informacje.</dd>
 <dt><a href="/en-US/docs/HTML/Content_Editable" title="HTML/Content Editable">Atrybut contentEditable: przekształć swoją stronę w encyklopedię!</a></dt>
 <dd>HTML5 ustandaryzował atrybut contentEditable. Dowiedz się więcej o tej właściwości.</dd>
 <dt><a href="/en-US/docs/DragDrop/Drag_and_Drop" title="DragDrop/Drag_and_Drop">Przeciągnij i upuść</a></dt>
 <dd>API 'przeciągnij i upuść' w HTML5 wspiera przeciąganie i upuszczanie elementów wewnątrz strony i pomiędzy stronami. Upraszcza to także API dla dodatków i aplikacji bazujących na technologiach Mozilli.</dd>
 <dt><a href="/en-US/docs/Focus_management_in_HTML" title="Focus_management_in_HTML">Zarządzanie aktywnością w HTML</a></dt>
 <dd>Nowe atrybuty HTML5 <code>activeElement</code> i <code>hasFocus</code> są już wspierane.</dd>
 <dt><a href="/en-US/docs/Web-based_protocol_handlers" title="Web-based_protocol_handlers">Obsługa protokołów opartych na sieci</a></dt>
 <dd>Możesz teraz zarejestrować aplikacje internetowe jako obsługę protokołów używając funkcji <code>navigator.registerProtocolHandler().</code></dd>
 <dt><a href="/en-US/docs/DOM/window.requestAnimationFrame" title="DOM/window.requestAnimationFrame"><code>requestAnimationFrame</code></a></dt>
 <dd>Pozwala kontrolować renderowanie animacji dla uzyskania optymalnej wydajności.1</dd>
 <dt><a href="/en-US/docs/DOM/Using_full-screen_mode" title="DOM/Using_full-screen_mode">Pełnoekranowe API</a></dt>
 <dd>Kontroluje użycie całego ekranu dla stron internetowych lub aplikacji sieciowych bez wyświetlania UI przeglądarki.</dd>
 <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">Blokowanie kursora</a></dt>
 <dd>Powala zablokować wskaźnik do zawartości, więc  gry i podobne aplikacje nie utracą aktywności kiedy kursor będzie na granicy okna.</dd>
 <dt><a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Zdarzenia online i offline</a></dt>
 <dd>Aby stworzyć dobrze obsługującą tryb offline aplikację internetową trzeba wiedzieć, kiedy aplikacja jest rzeczywiście offline. Prawdę mówiąc, musisz wiedzieć też, kiedy aplikacja powróci do stanu online.</dd>
</dl>

<h2 id="DOSTĘP_DO_URZĄDZENIA" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3837/HTML5_Device_Access_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">DOSTĘP DO URZĄDZENIA</h2>

<dl>
 <dt></dt>
 <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">Używanie API kamery internetowej</a></dt>
 <dd>Pozwala używać, manipulować i przechowywać obrazy z kamerki komputerowej.</dd>
 <dt><a href="/en-US/docs/DOM/Touch_events" title="DOM/Touch_events">Zdarzenia dotykowe</a></dt>
 <dd>Narzędzia do obsługi zdarzeń tworzonych przez użytkownika używającego ekranu dotykowego.</dd>
 <dt><a href="/en-US/docs/Using_geolocation" title="Using geolocation">Geolokacja</a></dt>
 <dd>Pozwól przeglądarce zlokalizować pozycję użytkownika przy użyciu geolokacji.</dd>
 <dt><a href="/en-US/docs/Detecting_device_orientation" title="Detecting_device_orientation">Wykrywanie orientacji urządzenia</a></dt>
 <dd>Pobierz informację o zmianie orientacji urządzenia na którym pracuje przeglądarka. Może ona być użyta jako urządzenie wejściowe( np w grach reagujących na zmianę pozycji urządzenia) lub służyć przystosowaniu layoutu strony do aktualnej orientacji urządzenia (portrait lub landscape)</dd>
 <dt></dt>
 <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">Blokowanie kursora</a></dt>
 <dd>Powala zablokować wskaźnik do zawartości, więc  gry i podobne aplikacje nie utracą aktywności kiedy kursor będzie na granicy okna.</dd>
</dl>

<h2 id="stylizacja" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3829/HTML5_Styling_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">stylizacja</h2>

<p><a href="/en-US/docs/CSS" title="CSS">CSS</a> zostało rozszerzone, aby móc o wiele wygodniej stylizować elementy. Jest często nazywane <a href="/en-US/docs/CSS/CSS3" title="CSS/CSS3">CSS3</a>, choć CSS nie jest monolitycznym tworem, w którym wszystkie elementy są na poziomie 3. Część jest na poziomie 1, część na 4, Lub którymś z poziomów pośrednich.</p>

<dl>
 <dt>Nowe właściwości stylizacji tła</dt>
 <dd>Teraz jest możliwe dodanie cienia do box-ów używając {{cssxref("box-shadow")}}, a także można ustawić <a href="/en-US/docs/CSS/Multiple_backgrounds" title="CSS/Multiple_backgrounds">wielokrotne tło.</a></dd>
 <dt>Bardziej fantazyjne obramowania</dt>
 <dd>Teraz nie tylko możliwe jest stylizowanie obramowań za pomocą obrazów, używając {{cssxref("border-image")}} i związanych z pismem odręcznym właściwościami, ale także zaokrąglenia obramowań są wspierane przez właściwość {{cssxref("border-radius")}}.</dd>
 <dt>Wpraw w ruch swój styl</dt>
 <dd>Używając <a href="/en-US/docs/CSS/Using_CSS_transitions" title="CSS/Using_CSS_transitions">Przejść CSS</a> do animacji przejść pomiędzy różnymi stanami lub używając <a href="/en-US/docs/CSS/Using_CSS_animations" title="CSS/Using_CSS_animations">Animacji CSS</a> do animowania części strony, bez zdarzenia wywołującego, możesz teraz kontrolować elementy interaktywne na twojej stronie.</dd>
 <dt>Poprawa typografii Typography improvement</dt>
 <dd>Autorzy mają większą kontrolę dla osiągnięcia lepszej typografii. Mogą kontrolować {{cssxref("text-overflow")}} i dzielenie wyrazów, a także mogą dodawać <a href="/en-US/docs/CSS/text-shadow" title="CSS/text-shadow">cienie</a> i precyzyjniej kontrolować <a href="/en-US/docs/CSS/text-decoration" title="SVG/Attribute/text-decoration">dekoracje</a> tekstu. Niestandardowe kroje można pobrać i zastosować za pomocą {{cssxref("@font-face")}}.</dd>
 <dt>Nowe, prezentacyjne layouty</dt>
 <dd>W celu polepszenia elastyczności designów zostały dodane dwa nowe layouty: <a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="CSS/Using_CSS_multi-column_layouts">CSS multi-column layout(wielokolumnowy layout CSS) </a>i <a href="/en-US/docs/CSS/Flexbox" title="CSS/Flexbox">CSS flexible box layout(layout elastycznego pudełka CSS)</a>.</dd>
</dl>
</div>
</div>

<dl>
 <dd></dd>
</dl>