Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00326 005231 14100075 na godz. na dobę w sumie
HTML5. Wszystko, co powinniście wiedzieć o programowaniu. Przewodnik profesjonalisty - ebook/pdf
HTML5. Wszystko, co powinniście wiedzieć o programowaniu. Przewodnik profesjonalisty - ebook/pdf
Autor: , Liczba stron: 200
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-9425-9 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> html i xhtml - programowanie
Porównaj ceny (książka, ebook (-20%), audiobook).

Prawda i tylko prawda o HTML5!

Dzięki nowym możliwościom HTML5 pozwala projektantom tworzyć lepsze, bardziej funkcjonalne strony WWW. Usługi geolokalizacyjne, przechowywanie danych w przeglądarce, zaawansowane wsparcie dla multimediów to tylko niektóre z nowości wprowadzonych w piątej wersji tego języka. Zastanawiasz się, jak wykorzystać ten potencjał?

Ta książka doskonale Ci to zademonstruje! Na początek poznasz krótką historię języka HTML i zobaczysz, z jakimi problemami jeszcze niedawno borykali się projektanci stron WWW. Następnie poznasz strukturę nowoczesnej strony WWW oraz elementy strukturalne HTML5. Niezwykle istotnym komponentem składni, pozwalającym na jeszcze lepsze indeksowanie witryn, są mikroformaty dostarczające cennych informacji wyszukiwarkom — rozdział piąty przedstawi Ci dogłębnie to zagadnienie. W dalszej części nauczysz się tworzyć atrakcyjne formularze oraz korzystać z potencjału nowego znacznika < canvas >. Na koniec poznasz format SVG oraz możliwości zastosowania HTML5 w rozwiązaniach mobilnych. Książka ta jest obowiązkową lekturą każdego projektanta stron WWW, który chce być na bieżąco z nowościami w sieci!

Dzięki tej książce:

Twórz nowoczesne witryny WWW dzięki HTML5!

Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

Tytuł oryginału: The Truth About HTML5 Tłumaczenie: Piotr Rajca ISBN: 978-83-246-9422-8 Original edition copyright © 2014 by Luke Stevens and RJ Owen. All rights reserved. Polish edition copyright © 2014 by HELION SA. All rights reserved. All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from the Publisher. Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji. Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli. Autor oraz Wydawnictwo HELION dołożyli wszelkich starań, by zawarte w tej książce informacje były kompletne i rzetelne. Nie bierze jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Wydawnictwo HELION nie ponosi również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce. Wydawnictwo HELION ul. Kościuszki 1c, 44-100 GLIWICE tel. 32 231 22 19, 32 230 98 63 e-mail: helion@helion.pl WWW: http://helion.pl (księgarnia internetowa, katalog książek) Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/html5w Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję. Printed in Poland. • Kup książkę • Poleć książkę • Oceń książkę • Księgarnia internetowa • Lubię to! » Nasza społeczność Spis tre(cid:258)ci O autorach .............................................................................................................11 O recenzencie technicznym ....................................................................................13 S(cid:239)owo wst(cid:218)pne ......................................................................................................15 Wst(cid:218)p ....................................................................................................................17 Rozdzia(cid:239) 1. Nieco udramatyzowana historia j(cid:218)zyka HTML5 .....................................................19 O tym, jak astronauci architektury i W3C próbowali zabić HTML ............................................ 19 Zapewne używacie już XML .............................................................................................................. 20 XH(cid:53)ML narodził się, ale co to właściwie oznaczało? ..............................................................(cid:1)20 Drakońska obsługa błędów (czyli dlaczego po prostu nie walnąć Cię pięścią w nos?) ..... 21 No dobrze, nie tak dosłownie, ale przeglądarka mogła to zrobić .......................................... 21 XHTML wciąż oznaczał coś lepszego od HTML ..................................................................... 21 Jednak szaleństwo dopiero się zaczynało .................................................................................. 22 XHTML 2.0 — niekochany i samotny .............................................................................................. 22 HTML5 — nowa nadzieja… miejmy nadzieję ................................................................................ 23 W3C mówi: „Idźcie do diabła” ................................................................................................... 23 Narodziny WHATWG ................................................................................................................ 24 To zupełnie nowy świat ............................................................................................................... 24 HTML5 i więcej! ............................................................................................................................. 25 HTML5 jest super, odlotowe i w ogóle ............................................................................................. 25 Czy HTML5 to chwilowe zamieszanie, coś ważnego, czy jedno i drugie? ................................ 25 Hixie albo nic ........................................................................................................................................ 26 XHTML 2.0 umarł i wszyscy są szczęśliwi ....................................................................................... 27 HTML5… hm… HTML, chwila… HTML.next? ........................................................................... 27 Czy powinniśmy całkowicie pogrzebać W3C, czy je zaakceptować? ........................................... 28 Reforma .......................................................................................................................................... 28 Eliminacja ...................................................................................................................................... 28 Akceptacja ...................................................................................................................................... 29 W jaki sposób nowe możliwości są obecnie dodawane do HTML5? ........................................... 29 Rozbieżności pomiędzy WHATWG i W3C .................................................................................... 30 TL;DR .................................................................................................................................................... 31 Na czym będziemy się koncentrować? ............................................................................................. 31 Kup książkęPoleć książkę SPIS TRE(cid:165)CI Rozdzia(cid:239) 2. Wszystko, co powinni(cid:258)cie wiedzie(cid:202) o prostej postaci strony WWW w j(cid:218)zyku HTML5 ...................................................33 Zmiany formatowania wprowadzone w HTML5 ........................................................................... 34 A co z rozwiązaniami skryptowymi oraz stylami CSS dla nowych elementów? ........................ 35 A co z HTML5 Boilerplate i Modernizr? ......................................................................................... 35 Rozdzia(cid:239) 3. Wszystko, co powinni(cid:258)cie wiedzie(cid:202) o okre(cid:258)laniu struktury stron w HTML5 ...........37 Nieznaczny smak bólu — wyróżnianie sekcji .................................................................................. 37 Skąd wzięły się te elementy? ............................................................................................................... 38 Kogo to obchodzi? ............................................................................................................................... 39 Sprzeczności u podstaw nowych elementów HTML5 ................................................................... 39 Plan czego? ............................................................................................................................................ 40 Czym są plany dokumentów i czy powinniśmy zwracać na nie uwagę? ..................................... 41 W jaki sposób tworzy się plany (nawet nieświadomie) ................................................................. 41 Podział na sekcje jest starym problemem ........................................................................................ 43 Jeśli zwracamy uwagę na osoby niewidome, musimy zwracać uwagę na nagłówki .................. 43 „Poprawiony” sposób tworzenia planów dokumentów w HTML5 był martwy, jeszcze zanim został wprowadzony ..................................................... 44 Przemycanie wielkich idei prowadzi do martwych idei ................................................................. 45 Rozgałęzienie specyfikacji .................................................................................................................. 45 Element main jest wyjątkiem (mniej więcej) .............................................................................. 46 Jak należy określać strukturę stron HTML5? .................................................................................. 46 Określanie stylów nagłówków w HTML5 jest trochę szalone ...................................................... 47 To nie jest bez znaczenia — ludzie muszą tego uczyć .................................................................... 48 A co to dla nas oznacza? ..................................................................................................................... 49 Sensowne rozwiązanie strukturalnego kodu zapewniającego dostępność .................................. 49 Korzyści ze stosowania ról ARIA ...................................................................................................... 50 Zalecenia dotyczące układu ................................................................................................................ 50 Rozdzia(cid:239) 4. Wszystko, co powinni(cid:258)cie wiedzie(cid:202) o strukturalnych elementach HTML5 .............51 header ............................................................................................................................................... 51 Tak naprawdę to do niczego nie służy ....................................................................................... 52 Jak czytniki ekranowe mogą używać elementu header , skoro może się on pojawiać wszędzie? .................................................................................... 52 Alternatywa ARIA — banner ...................................................................................................... 52 Rekomendacja ............................................................................................................................... 53 nav ..................................................................................................................................................... 53 Dobra intencja, lecz tragedia pod względem dostępności ...................................................... 53 Alternatywa ARIA — navigation ............................................................................................... 54 Rekomendacja ............................................................................................................................... 54 section oraz article ..................................................................................................................... 54 section ........................................................................................................................................ 54 Sekcje == punkty planu ............................................................................................................... 55 Matrioszki ...................................................................................................................................... 55 Rekomendacja ............................................................................................................................... 55 article ......................................................................................................................................... 55 Specyfikacje powinny precyzować ............................................................................................. 56 Zagnieżdżanie elementów article w celu tworzenia artykułów i komentarzy ................ 56 4 Kup książkęPoleć książkę SPIS TRE(cid:165)CI Wyszukiwarki nie potrzebują elementów article ................................................................ 57 Element article nie ma także zawierać głównej treści strony ............................................ 57 Rekomendacja ............................................................................................................................... 57 A zatem, jaka jest różnica pomiędzy elementami article i section ? ............................. 58 aside .................................................................................................................................................. 58 Element aside tworzy sekcje w dziwnych miejscach ........................................................... 59 Alternatywa ARIA — complementary ...................................................................................... 59 Rekomendacja ............................................................................................................................... 59 footer ................................................................................................................................................. 59 Także stopki do niczego nie służą .............................................................................................. 60 Obszerna stopka? Powodzenia! ................................................................................................. 60 Czy mogę prosić o stopkę? .......................................................................................................... 60 Alternatywa ARIA — contentinfo .............................................................................................. 60 Rekomendacja ............................................................................................................................... 60 main .................................................................................................................................................. 61 Głównie bezużyteczna kontrowersja ......................................................................................... 62 Alternatywa ARIA — main ......................................................................................................... 62 Rekomendacja ............................................................................................................................... 62 Inne punkty orientacyjne ARIA ........................................................................................................ 62 Stało się coś śmiesznego… Łagodna degradacja umarła, a JavaScript stał się obowiązkowy ... 63 Badania wykorzystania skryptów Yahoo ................................................................................... 63 Oto, co się dzieje… ....................................................................................................................... 64 Co zrobić? A tak… XP ................................................................................................................. 64 Och, społeczności projektantów… co się stało? .............................................................................. 65 Wniosek — świętej pamięci strukturalne znaczniki HTML5 ....................................................... 65 Rozdzia(cid:239) 5. Wszystko, co powinni(cid:258)cie wiedzie(cid:202) o HTML5. Mikrosemantyka i Schema.org .......67 Semantyka w skrócie ........................................................................................................................... 67 Te problemy zostały rozwiązane ....................................................................................................... 68 Nie ma czegoś takiego jak kod bardziej semantyczny .................................................................... 68 Wielkie idee semantycznego kodu — Semantyczna Sieć ..................................................................... 69 Semantyka jeszcze nie umarła (albo o tym, jak Google i spółka podrzucili mikrosemantyczną bombę) .......................................................................... 69 Handel elektroniczny i prawdziwa (mikro)semantyka .................................................................. 70 Czy prawdziwa semantyka jest obecna? ........................................................................................... 71 Dlaczego warto zwracać uwagę na mikrosemantykę? .................................................................... 71 Schema.org — przyszłość semantyki? .............................................................................................. 72 Czy nie można było zrobić tego wcześniej? ..................................................................................... 72 Semantyczna Sieć, na jaką czekaliśmy? ............................................................................................ 73 Mikroformaty ................................................................................................................................ 73 RDFa ............................................................................................................................................... 73 Mikrodane ...................................................................................................................................... 74 Mikrodane i Schema.org ..................................................................................................................... 74 W jaki sposób nie należy rozpoczynać inicjatywy .......................................................................... 75 Co myślą osoby odpowiedzialne za Schema.org? ........................................................................... 76 Podsumowanie — semantyka i HTML ............................................................................................ 77 5 Kup książkęPoleć książkę SPIS TRE(cid:165)CI Rozdzia(cid:239) 6. Wszystko, co powinni(cid:258)cie wiedzie(cid:202) o HTML5 i SEO ...............................................79 Średniowiecze SEO .............................................................................................................................. 79 Poupychaj swoje słowa kluczowe ...................................................................................................... 79 HTML i SEO ......................................................................................................................................... 80 A co jeśli to pomoże… jakoś? ............................................................................................................ 80 Nieumarłe mity muszą odejść… w końcu ....................................................................................... 81 Rozdzia(cid:239) 7. Wszystko, co powinni(cid:258)cie wiedzie(cid:202) o innych elementach HTML5 ..........................83 Bądź odważny i zgiń, próbując .......................................................................................................... 83 Umieść to w odnośniku albo inne drobiazgi ................................................................................... 84 Umieszczanie elementów blokowych w odnośnikach ............................................................ 84 mark ........................................................................................................................................... 85 figure oraz figcaption .......................................................................................................... 85 time ............................................................................................................................................ 85 details oraz summary .......................................................................................................... 86 small ........................................................................................................................................... 87 address ....................................................................................................................................... 87 cite .............................................................................................................................................. 87 Czy w ogóle powinniśmy używać tych niejasnych małych znaczników? .................................... 87 Rozdzia(cid:239) 8. Wszystko, co powinni(cid:258)cie wiedzie(cid:202) o formularzach HTML5 ...................................89 Powolne przechodzenie do rozwiązań natywnych ......................................................................... 89 Formularze mogą poprawić lub popsuć witrynę ............................................................................ 90 Dobre wiadomości i złe wiadomości ................................................................................................ 90 Zasoby sieciowe dotyczące formularzy HTML5 ............................................................................. 91 Formularze HTML5 — podstawy ..................................................................................................... 92 Nowe typy pól — e-mail, URL, numer telefonu i terminy do wyszukiwania ...................... 92 Atrybuty autocomplete, autofocus, readonly oraz spellcheck ............................................... 93 Formularze HTML5 — ze znakiem zapytania… ............................................................................ 94 Atrybut placeholder ...................................................................................................................... 94 progress ..................................................................................................................................... 95 meter .......................................................................................................................................... 96 Formularze HTML5 — ja bym jeszcze tego nie robił, ale jeśli bardzo chcesz, to możesz spróbować .............................................................................. 97 Atrybut required ........................................................................................................................... 97 Atrybut pattern ............................................................................................................................. 98 Typ pola input — number (ze strzałkami) ............................................................................... 98 Typ pola input — range (suwak) ................................................................................................ 99 Typ pola input — date (widżety wyboru czasu i kalendarze) ................................................ 99 Typ pola input — color (wybór koloru) ......................................................................................... 101 Elementy input i datalist ............................................................................................................ 101 Ty hipokryto! Sądziłem, że stosowanie JavaScriptu jest najgorszym z możliwych rozwiązań .................................................................................... 102 A co z dostępnością? .......................................................................................................................... 102 Rozdzia(cid:239) 9. Wszystko, co powinni(cid:258)cie wiedzie(cid:202) o elemencie canvas, grach i technologii Flash ......................................................................................103 Flash umiera i pozostał nam jedynie HTML5 ............................................................................... 103 Czy płótna i HTML mogą wypełnić lukę? ..................................................................................... 104 Tworzenie treści HTML5 przy użyciu narzędzi dla technologii Flash ...................................... 105 6 Kup książkęPoleć książkę SPIS TRE(cid:165)CI A później przydarzyły się aplikacje ................................................................................................. 105 Wraz z Flashem pochowajmy wszystko, co się z nim wiąże ....................................................... 106 Nie jesteśmy już na płótnie ............................................................................................................... 107 Fajne rzeczy, które można robić, używając elementu canvas ................................................. 108 Etykietki ....................................................................................................................................... 109 Wykresy ........................................................................................................................................ 109 Wizualizacje ................................................................................................................................. 111 Gry ................................................................................................................................................ 114 Operacje na obrazach ................................................................................................................. 116 Aplikacje internetowe korzystające z elementów canvas ................................................. 117 Rysowanie elementów interfejsu użytkownika ...................................................................... 119 Czasami dobra, a czasami zła emulacja płócien w przeglądarkach IE 6 – 8 ................... 122 Przypadkowy świat standardów sieciowych (czyli jak to się stało, że istnieje element canvas ?) ............................................................... 123 Elementy canvas a dostępność .................................................................................................... 124 Aktualny stan elementów canvas ............................................................................................... 125 Prymitywne środowiska dla twórców ...................................................................................... 125 Wydajność ................................................................................................................................... 125 Ograniczona zgodność z przeglądarkami IE .......................................................................... 126 I znowu porównanie do szklanki .............................................................................................. 126 Gry HTML5 — płótna czy nie płótna? ........................................................................................... 126 Czy to w ogóle są płótna? ........................................................................................................... 127 Jak zacząć tworzenie gier przy użyciu elementów canvas ? ..................................................... 127 Gry HTML — poza HTML5 ..................................................................................................... 127 Element canvas — czy jest w nim coś dla mnie? ...................................................................... 128 Element canvas dla projektantów stron ............................................................................. 128 Element canvas dla studentów i hobbystów ...................................................................... 128 Element canvas dla projektantów Flash ............................................................................. 128 Zastosuj go i sam się przekonaj ................................................................................................ 128 Przestrzenna przyszłość płaskich płócien — WebGL .................................................................. 129 Grafika 3D w Sieci — alternatywy dla WebGL ............................................................................. 129 Pokażcie mi dema! ............................................................................................................................. 130 HelloRun ...................................................................................................................................... 130 Epic Citadel .................................................................................................................................. 130 Angry Birds .................................................................................................................................. 131 Interaktywny film muzyczny „3 Dreams in Black” ............................................................... 132 glfx.js — operacje na obrazach .................................................................................................. 132 Quake II ........................................................................................................................................ 132 GT Racing — Motor Academy ................................................................................................. 134 Skid Racer .................................................................................................................................... 134 Inne produkty demonstrujące możliwości WebGL ............................................................... 135 Dla WebGL to wciąż dopiero początek .......................................................................................... 136 Rozdzia(cid:239) 10. Wszystko, co powinni(cid:258)cie wiedzie(cid:202) o audio i wideo w HTML5.............................137 Elementy video i audio w działaniu ...................................................................................... 137 Element audio ................................................................................................................................ 138 Atrybuty elementu audio ...................................................................................................... 138 7 Kup książkęPoleć książkę SPIS TRE(cid:165)CI Element video ................................................................................................................................ 140 Dostępność wideo ....................................................................................................................... 141 API i zasoby sieciowe ................................................................................................................. 142 Kodeki, zabijacie nas .................................................................................................................. 142 Problemy z patentami ................................................................................................................ 143 H.264 na razie zostanie .............................................................................................................. 144 Google grozi, że Chrome będzie obsługiwać wyłącznie WebM, lecz nie spełnia tej groźby ....................................................................................................... 144 Kodeki — co zrobić? .......................................................................................................................... 145 Przykra rzeczywistość ....................................................................................................................... 146 Typy wideo… o rany! ........................................................................................................................ 146 Określanie obsługiwanych typów wideo przy użyciu kodu JavaScript ...................................... 147 Z pomocą spieszą odtwarzacze audio i wideo ............................................................................... 147 MediaElement (wideo i audio, bezpłatny) .............................................................................. 148 VideoJS (wideo, bezpłatny) ....................................................................................................... 148 Flowplayer (wideo, bezpłatny lub komercyjny) ..................................................................... 149 Inne odtwarzacze ........................................................................................................................ 149 Inne skazy na obrazie HTML5 wideo — DRM, strumieniowanie, prezentacje pełnoekranowe .......................................................................................................... 150 DRM .................................................................................................................................................... 150 Media strumieniowe .......................................................................................................................... 151 Fullscreen API .................................................................................................................................... 152 Czy element HTML5 audio jest gotowy do stosowania w grach? ......................................... 153 Podsumowanie ................................................................................................................................... 154 Rozdzia(cid:239) 11. Wszystko, co powinni(cid:258)cie wiedzie(cid:202) o SVG — niegdy(cid:258) konkurencie Flasha, a teraz… ...........................................................155 SVG, SVG… ....................................................................................................................................... 155 SVG — przeglądarki ją w końcu obsługują .................................................................................... 156 Tak, istnieje sposób, by nawet już dziś na poważnie używać SVG ............................................. 157 Wiele twarzy SVG .............................................................................................................................. 157 SVG na początku wieku — wielka niespełniona nadzieja ......................................................... 158 Wsparcie przeglądarek — Android, co do diabła? A, no i IE… ................................................. 158 Przykładowe zastosowania SVG — czy do czegoś mogą się przydać? ....................................... 159 SVG Girl ....................................................................................................................................... 159 D3.js .............................................................................................................................................. 161 Wykresy tworzone przy użyciu biblioteki Highcharts .......................................................... 163 Rozwiązania wykorzystujące Snap.svg ........................................................................................... 163 Rozwiązania wykorzystujące bibliotekę Raphaël .......................................................................... 165 thirteen23 ..................................................................................................................................... 165 Markup.io .................................................................................................................................... 166 DrawAStickman.com ................................................................................................................. 167 Praca z SVG ........................................................................................................................................ 167 Projektowanie elastycznych stron WWW a SVG ......................................................................... 168 Kruczki SVG ....................................................................................................................................... 168 SVG — spadkobierca Flasha? ........................................................................................................... 169 8 Kup książkęPoleć książkę SPIS TRE(cid:165)CI Rozdzia(cid:239) 12. Wszystko, co powinni(cid:258)cie wiedzie(cid:202) o HTML5 w aplikacjach internetowych, zastosowaniach mobilnych i przysz(cid:239)o(cid:258)ci...............................................................171 Wsparcie przeglądarek dla tworzenia aplikacji w HTML5 ......................................................... 171 HTML5 w świecie urządzeń mobilnych — WebKit i nie tylko .................................................. 172 Rynek mobilny to ruchomy cel — znaczący ruch Microsoftu .................................................... 173 Mozilla OS — ambitna platforma mobilna fundacji Mozilla oraz WebAPI ............................. 174 Zgodność obsługi HTML na urządzeniach mobilnych ................................................................ 175 HTML5 w systemach zarządzania treścią ...................................................................................... 175 Wiek JavaScript .................................................................................................................................. 176 JavaScript zabił gwiazdę HTML ...................................................................................................... 176 Modernizr, kiedy mogę używać… i skrypty polyfill ..................................................................... 177 Modernizr .................................................................................................................................... 178 Kiedy mogę użyć… ..................................................................................................................... 178 Skrypty polyfill ............................................................................................................................ 178 HTML5 oraz jego API do tworzenia aplikacji ............................................................................... 178 History API ......................................................................................................................................... 179 Magazyn sieciowy HTML5 (i arkusze stylów generowane programowo) ................................ 180 Magazyn bazy danych ....................................................................................................................... 181 HTML5 Offline (pamięć podręczna aplikacji) .............................................................................. 181 API do geolokalizacji ......................................................................................................................... 182 Inne API, które mogą nas zainteresować ....................................................................................... 183 Co nas czeka w przyszłości — HTML 5.1 ...................................................................................... 184 Podsumowanie ................................................................................................................................... 185 Rozdzia(cid:239) 13. Wszystko, co powinni(cid:258)cie wiedzie(cid:202) o przysz(cid:239)o(cid:258)ci projektowania stron WWW — projektowanie pod k(cid:200)tem ...............................................................................187 Działania po omacku ......................................................................................................................... 188 Wydajność kontra produkcja ........................................................................................................... 188 Zmieniając projekt, róbmy pomiary ............................................................................................... 188 Działajmy obiektywnie ...................................................................................................................... 189 Skorowidz ............................................................................................................191 9 Kup książkęPoleć książkę SPIS TRE(cid:165)CI 10 Kup książkęPoleć książkę R O Z D Z I A (cid:146) 4 (cid:132) (cid:132) (cid:132) Wszystko, co powinni(cid:258)cie wiedzie(cid:202) o strukturalnych elementach HTML5 Co udało nam się zrobić do tej pory? (cid:120) Sformułowaliśmy ogólny (i dosyć niejasny) pomysł, że strukturalne elementy HTML5 starają się coś poprawiać — zwłaszcza tworzenie planów dokumentów, które obecnie tworzy się niejawnie przy użyciu znaczników nagłówków. (cid:120) Określiliśmy, do czego służą plany dokumentów — wspomagają czytniki ekranowe, których działanie w znacznej mierze bazuje na wykorzystaniu nagłówków. (cid:120) Pobieżnie wspomnieliśmy także o lepszym sposobie wspomagania niewidomych użytkowników przeglądających nasze strony, czyli o użyciu punktów orientacyjnych ARIA. Teraz nadszedł czas, żeby przyjrzeć się nieco dokładniej temu, co specyfikacja HTML5 (i to zarówno w wersji W3C, jak i WHATWG) ma do powiedzenia na temat nowych elementów strukturalnych. A zaczniemy od elementu… header O elemencie header trzeba wiedzieć dwie rzeczy: (cid:120) Element ten właściwie nic nie robi. (cid:120) Jego planowany sposób wykorzystania jest zapewne nieco odmienny od tego, co moglibyśmy sądzić. Element header jest doskonałym przykładem, pokazującym, że powszechnie znany i używany termin ma w języku HTML5 zupełnie nowe znaczenie, a jednocześnie ma „utrwalać stosowane wcześniej rozwiązania”. Prawdopodobnie wielu z nas wciąż używa elementu div id= header , a zatem zastąpienie go elementem header powinno przynajmniej uprościć kod, prawda? Cóż, to właśnie jeden z tych momentów, gdy twórcy HTML5 pomyśleli: „Każdy tego używa, więc dlaczego by nie zmienić jego znaczenia?”. Oto, co specyfikacja ma do powiedzenia na temat tego elementu: Element header reprezentuje grupę wprowadzających ułatwień nawigacyjnych. Uwaga: Zamierzonym sposobem użycia tego elementu jest umieszczanie wewnątrz niego nagłówków sekcji (takich jak elementy h1 – h6 czy też element hgroup), jednak nie jest to konieczne. Można go także używać do prezentacji spisu treści sekcji, formularza do wyszukiwania bądź też stosownych logo. Pouczająca jest uwaga: element header jest przeznaczony do tego, by umieszczać w nim nagłówki sekcji. Pamiętajmy, że w języku HTML5 sekcje są tworzone przy użyciu jednego z czterech elementów (article, section, nav oraz aside) i generują pozycję w planie dokumentu. Element header ma być umieszczany Kup książkęPoleć książkę HTML5. WSZYSTKO, CO POWINNI(cid:165)CIE WIEDZIE(cid:109) O PROGRAMOWANIU. PRZEWODNIK PROFESJONALISTY wewnątrz elementów sekcji. Sam z siebie nie tworzy on odrębnej sekcji (choć wizualnie jest często przedstawiany w taki sposób, jakby tworzył) i nie jest dodawany do planu dokumentu. A zatem o header należy myśleć jako o elemencie, który ma zawierać nagłówek sekcji. Może to zatem być cokolwiek, zaczynając do nagłówka głównej sekcji dokumentu, umieszczonego bezpośrednio w elemencie body (w takim przypadku element ten będzie zapewne zawierał logo oraz wszelkie inne elementy, które zazwyczaj traktujemy jako „nagłówek”), a kończąc na nagłówku komentarza. Tak naprawd(cid:218) to do niczego nie s(cid:239)u(cid:285)y Element header ma tylko jedno zastosowanie, mianowicie stwierdza: „To jest nagłówek tej sekcji”. Problem polega na tym, że choć nasz kod może o tym informować, to żadna z przeglądarek ani żaden z agentów innych typów nie wydają się być tym zainteresowane. Co więcej, zgodnie ze stwierdzeniem Hicksona: nigdy się tym już nie zainteresują. Hickson otwarcie przyznał, że wszystkie te nowe elementy mają głównie ułatwiać stosowanie stylów i nie powinny mieć większego wpływu na rozkład dokumentu (warto zapoznać się z jego komentarzem zamieszczonym w dalszej części rozdziału, pt. „Wniosek — świętej pamięci strukturalne znaczniki HTML5”). A zatem, element ten do niczego nie służy i najprawdopodobniej także w przyszłości nie będzie. Jest on semantycznym odpowiednikiem drzewa przewracającego się w lesie, gdy w pobliżu nie ma nikogo, kto by je usłyszał. Zważywszy, że element header ani nie modyfikuje planu dokumentu, ani nie jest do niego dodawany, faktycznymi nagłówkami pojawiającymi się w tym planie (takimi jak Mój wspania(cid:239)y blog ) wciąż pozostają elementy h1 – h6 . A header istnieje tylko po to, by te elementy w nim umieścić, wraz ze wszystkimi innymi informacjami odpowiednimi dla nagłówka, takimi jak data. Przykładowy kod przedstawiający zastosowanie elementu header mógłby więc mieć następującą postać: header h1 Mój kolejny wpis na blogu /h1 p Opublikowany ... /p /header Jak czytniki ekranowe mog(cid:200) u(cid:285)ywa(cid:202) elementu header , skoro mo(cid:285)e si(cid:218) on pojawia(cid:202) wsz(cid:218)dzie? Można by sądzić, że czytniki ekranowe powinny pomijać elementy header i przechodzić bezpośrednio do ich zawartości. Jednak nie możemy mieć pewności (ani my, ani czytniki ekranowe), że pierwszy element header odnaleziony w dokumencie będzie reprezentował główny nagłówek strony. Jeśli kod dokumentu został zapisany w niestandardowej kolejności (na przykład najpierw jest zapisana treść, a potem nagłówek, stopka i pasek boczny), to dokument może zawierać kilka elementów header , z których żaden nie będzie pełnił funkcji typowego nagłówka. W ten sposób, pod względem obsługi nagłówków na stronie, wróciliśmy do punktu wyjścia. Alternatywa ARIA — banner Na szczęście dla niewidomych użytkowników, istnieje alternatywne rozwiązanie. Punkt orientacyjny ARIA banner wyznacza nagłówek w takim znaczeniu, w jakim potocznie go rozumiemy. Oto, w jaki sposób specyfikacja ARIA go definiuje (http://www.w3.org/TR/wai-aria/roles#banner): Region, którego treść odnosi się głównie do witryny, a nie do strony. Do treści odnoszącej się do witryny można zaliczyć takie elementy jak logo lub znak reprezentujący sponsora witryny oraz narzędzie służące do przeszukiwania zawartości witryny. Nagłówek1 jest zazwyczaj umieszczany na samej górze strony i przeważnie zajmuje całą jej szerokość. 1 ang. banner — przyp. tłum. 52 Kup książkęPoleć książkę ROZDZIA(cid:146) 4. (cid:132) WSZYSTKO, CO POWINNI(cid:165)CIE WIEDZIE(cid:109) O STRUKTURALNYCH ELEMENTACH HTML5 Taki nagłówek powinien się pojawiać tylko raz w całym dokumencie, tak by czytniki ekranowe mogły przeskoczyć bezpośrednio do niego i by mogły mieć dużą pewność odnośnie tego, co on reprezentuje — i dokładnie o to nam chodzi. Rekomendacja Przeznaczenie elementu header jest zbyt szerokie (i zbyt bezcelowe), by zapewnić jego przydatność. Zamiast niego warto stosować rozwiązanie ARIA, atrybut role= banner , umieszczany w odpowiednim elemencie (a w razie konieczności w Internet Explorerze 6 także nadmiarową klasę banner ). nav Oto, co na jego temat można znaleźć w specyfikacji: Element nav reprezentuje sekcję strony, zawierającą odnośniki do innych stron lub miejsc w ramach danej strony: sekcję z elementami nawigacyjnymi. Nie wszystkie grupy odnośników znajdujące się na stronie muszą być umieszczane w elementach nav — elementy nav powinny zawierać wyłącznie główne bloki nawigacyjne. W szczególności dotyczy to stopek, które powszechnie zawierają odnośniki do innych stron, takich jak regulamin, strona główna oraz informacje o prawach autorskich. W takich przypadkach wystarczy zastosować jedynie element footer — element nav nie jest konieczny. Element nav nie wyznacza nowej sekcji dokumentu i ma następujące zalety: (cid:120) Jego przeznaczenie jest stosunkowo jasne. (cid:120) Z pozoru jest całkiem użyteczny. Chodzi o to, że jeśli umieścimy elementy nawigacyjne w elemencie nav , to osoby niewidome będą go mogły pominąć i przejść bezpośrednio do treści strony, a później, gdy zechcą przejść na inną stronę, przeskoczyć bezpośrednio do elementów nawigacyjnych. Z punktu widzenia dostępności stron to przecież świetne rozwiązanie, prawda? Dobra intencja, lecz tragedia pod wzgl(cid:218)dem dost(cid:218)pno(cid:258)ci Choć intencje są słuszne, to jednak próba ułatwienia życia jednej mniejszości użytkowników potencjalnie może doprowadzić do jej utrudnienia innej mniejszości — osobom korzystającym z przeglądarek IE 6, 7 oraz 8, w których została wyłączona obsługa języka JavaScript. Ze względu na sposób, w jaki te przeglądarki obsługują „nieznane” elementy HTML, nie są w nich stosowane żadne style CSS. Problem ten może dotknąć jednego użytkownika na 100, co jest większym odsetkiem niż liczba osób korzystających z czytników ekranowych. A to sprawia, że cała idea korzystania z elementu nav staje się nieco problematyczna. (Ten problem dotyczy także wszystkich pozostałych elementów HTML5 opisanych w dalszej części rozdziału). Wiele nowoczesnych platform stara się rozwiązać ten problem, używając języka JavaScript, by skłonić przeglądarki do potraktowania nowych znaczników jako czegoś, co są w stanie obsługiwać, jednak nie da się tego osiągnąć w starszych przeglądarkach, w których wyłączono obsługę języka JavaScript. Ponieważ te nowe znaczniki w ogóle nie będą działać w starszych przeglądarkach, zatem nie są w stanie spełnić jedynego celu, do którego, według Hicksona, mają służyć — poprawiania dostępności stron. 53 Kup książkęPoleć książkę HTML5. WSZYSTKO, CO POWINNI(cid:165)CIE WIEDZIE(cid:109) O PROGRAMOWANIU. PRZEWODNIK PROFESJONALISTY Alternatywa ARIA — navigation Na szczęście, zamiast z elementu nav możemy skorzystać z punktu orientacyjnego ARIA navigation — dodanie do wybranego elementu div (lub ul ) atrybutu role= navigation pozwala poprawić dostępność strony bez jednoczesnego pogarszania jej dla innej grupy użytkowników. Specyfikacja ARIA definiuje punkt orientacyjny navigation (http://www.w3.org/TR/wai-aria/roles#navigation) w następujący sposób: Kolekcja elementów nawigacyjnych (zazwyczaj odnośników) służących od poruszania się w obrębie danego dokumentu oraz dokumentów z nim powiązanych. Rekomendacja Najlepiej jest używać atrybutu role= navigation . Element nav należy uważać za szkodliwy, aż do momentu gdy liczba użytkowników korzystających z przeglądarki IE8 stanie się bardzo niewielka. (Odnosi się to do użytkowników systemu Windows XP, gdyż IE8 jest ostatnią przeglądarką instalowaną w tym systemie. Może to zająć trochę czasu). section oraz article W przypadku tych elementów sytuacja wygląda podobnie (każdy ma problemy z ich zrozumieniem), jednak ich sugerowane zastosowania różnią się od siebie. Najpierw przedstawimy każdy z tych elementów osobno, a następnie przeanalizujemy ich podobieństwa. Proszę, by podczas prób zrozumienia tych dwóch elementów powstrzymać się od rzucania przedmiotami oraz małymi zwierzątkami. section Oto fragment specyfikacji: Element section reprezentuje ogólną sekcję dokumentu lub aplikacji. W tym kontekście sekcją jest fragment tematycznie powiązanych ze sobą treści, zazwyczaj zawierający także nagłówek. Przykładami sekcji mogą być rozdziały, karty w oknach dialogowych z kartami bądź też numerowane sekcje wypracowania. Strona główna witryny może być podzielona na takie sekcje jak: wprowadzenie, nowe elementy oraz informacje kontaktowe. Uwaga: Zachęca się autorów do stosowania elementów article zamiast section wszędzie tam, gdzie może wchodzić w grę łączenie treści elementów. Uwaga: Element section nie jest elementem pojemnika o ogólnym charakterze. Wszędzie tam, gdzie potrzebny jest element do zastosowania stylów lub ułatwiający działanie skryptów, autorzy powinni używać elementu div. Ogólna zasada określa, że element section powinno się stosować tylko w tych przypadkach, gdy treść elementu będzie jawnie wyświetlona w planie dokumentu. Spróbujmy coś z tego zrozumieć. Element section ma reprezentować ogólną sekcję dokumentu. A zatem, gdyby ten rozdział książki był stroną WWW, to moglibyśmy go podzielić na fragmenty, stosując do tego celu właśnie znaczniki section . Element ten może także reprezentować różne obszary strony głównej, od najnowszych doniesień aż do informacji kontaktowych. Jednak nie należy go używać jako ogólnego pojemnika, służącego jedynie do stosowania stylów — to wymaga użycia elementu div . Oprócz tego, elementu section nie należy używać do tworzenia głównego obszaru treści strony (podobnie zresztą jak elementu article ), jednak tym zagadnieniem zajmiemy się niebawem, podczas rozważań na temat brakującego elementu content . 54 Kup książkęPoleć książkę ROZDZIA(cid:146) 4. (cid:132) WSZYSTKO, CO POWINNI(cid:165)CIE WIEDZIE(cid:109) O STRUKTURALNYCH ELEMENTACH HTML5 Sekcje == punkty planu Także w tym przypadku zrozumienie elementu section wymaga zrozumienia sposobów tworzenia planów dokumentów oraz podziału dokumentów na sekcje. Specyfikacja wspomina o tym (proszę spojrzeć na ostatnie zdanie drugiej uwagi), choć informacje te są raczej skąpe, zważywszy, że element section jest podstawą tworzenia planów dokumentu. Ogólna zasada głosi, przynajmniej jeśli chodzi o tworzenie planów dokumentów, że jeśli w danym miejscu nie można użyć elementu article , nav lub aside , to zapewne trzeba tam będzie użyć elementu section . To właśnie także z tego powodu elementu section nie należy używać jako ogólnego pojemnika ułatwiającego stosowanie stylów. Jeśli zastosujemy go byle gdzie, tylko po to, by móc określać style, bez zwracania uwagi na tworzony w ten sposób plan dokumentu, to w efekcie będzie on całkowicie nielogiczny, co z kolei przekreśla całą ideę użycia znacznika section . To powszechny błąd, pokazujący, jak słabo przeznaczenie tych nowych znaczników HTML5 jest tłumaczone w dokumentacji, propagowane przez ekspertów i rozumiane przez społeczność (nie żebym ją o to winił). Matrioszki Nie zapominajmy, że sekcje można zagnieżdżać (niezależnie od tego, czy są one tworzone przy użyciu elementu section , article , nav czy też aside ). Jak mieliśmy okazję przekonać się w rozdziale 3., w świecie czystego języka HTML5 to właśnie ten poziom zagnieżdżenia ma określać prawdziwy poziom nagłówków h1 – h6 , a nie zastosowany element nagłówka. W HTML5 przeglądarka (teoretycznie) powinna je traktować jako ogólne elementy nagłówka, o ile tylko zostaną umieszczone wewnątrz sekcji. A zatem, powinniśmy móc wszędzie używać elementu h1 , a przeglądarka powinna być w stanie określić, czy zostały one umieszczone w kodzie jako element h1 czy jako element h101 . Niemniej jednak, ze względu na czytniki ekranowe (i to zarówno te dostępne obecnie, jak i te, które będą używane w całkiem odległej przyszłości), konieczne będzie odpowiednie stosowanie nagłówków h1 – h6 , niezależnie od używanej wersji języka HTML. Rekomendacja Jeśli zależy nam na tworzeniu planów dokumentów w sposób zalecany w języku HTML5, to będziemy do tego celu używali głównie elementów section . Ponad 20 lat trwało, zanim element ten trafił do specyfikacji języka HTML (proszę sobie przypomnieć komentarz Tima Bernersa-Lee zamieszczony w poprzednim rozdziale), i zapewne drugie tyle potrwa, nim twórcy stron nauczą się go prawidłowo używać. Element ten nie ma żadnego odpowiednika w specyfikacji ARIA. article Można by sądzić, że „artykuł”2 na stronie WWW będzie odpowiadał „artykułowi w prasie”. Jednak wszyscy, którzy sądzili, że nowe elementy HTML5 mogą mieć intuicyjne zastosowanie, powinni się wstydzić. W tym przypadku jest to raczej „artykuł odzieżowy”. O tak… to kolejny „semantyczny” termin o bardzo nieintuicyjnym znaczeniu. A oto fragment specyfikacji dotyczący tego elementu: Element article reprezentuje zamknięty fragment kompozycji dokumentu, stronę, aplikację lub witrynę, które w zasadzie mogą być niezależnie rozpowszechniane lub wielokrotnie stosowane, na przykład w ramach łączenia treści. Może to być wpis na forum, artykuł w czasopiśmie lub gazecie, wpis na blogu, komentarz wpisany przez użytkownika, interaktywny widżet lub jakikolwiek inny niezależny element treści. W przypadku zagnieżdżania wewnętrzne elementy article reprezentują artykuły, które w zasadzie są powiązane z treścią zewnętrznego elementu article. Na przykład wpis na blogu, do którego można 2 ang. article — przyp. tłum. 55 Kup książkęPoleć książkę HTML5. WSZYSTKO, CO POWINNI(cid:165)CIE WIEDZIE(cid:109) O PROGRAMOWANIU. PRZEWODNIK PROFESJONALISTY dodawać komentarze, może je przedstawiać przy użyciu elementów article zagnieżdżonych wewnątrz elementu article reprezentującego sam wpis. A oto, co na początku 2012 roku Hickson napisał na temat tego elementu na liście dyskusyjnej WHATWG (http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2012-January/034506.html): Element article obejmuje szeroki zakres znaczeń: - wpisy na forum, - artykuły w gazetach, - artykuły w czasopismach, - książki, - wpisy na blogach, - komentarze do wpisów na forum, - komentarze do artykułów w gazetach, - komentarze do artykułów w czasopismach, - komentarze do wpisów na blogach, - osadzane na stronach interaktywne widżety, - wpisy z fotografiami na witrynach społecznościowych, - komentarze do fotografii na witrynach społecznościowych, - specyfikacje, - wiadomości poczty elektronicznej, - odpowiedzi na wiadomości poczty elektronicznej. W języku HTML 4 akapit to akapit i tylko akapit. W HTML5 „artykuł” jest wpisem na forum, który jest komentarzem do wpisu na blogu, który jest widżetem, który jest właściwym artykułem. Jeśli element ma tak szerokie znaczenie, w jaki sposób może być bardziej „semantyczny”? Chciałbym, żeby ustalono, że noże, łyżki, widelce i telewizory będą nazywane „widelcami”. To nie jest utrwalanie stosowanych wcześniej rozwiązań. Także ten element najlepiej jest rozumieć w kontekście planów dokumentów. Służy on do tworzenia sekcji dokumentu w tych wszystkich przypadkach, kiedy nie chcemy używać elementu section , czyli zazwyczaj wtedy, gdy chcemy w nim umieścić jakiś fragment treści (bądź też „interaktywny widżet”). Specyfikacja wspomina, że element article może być używany w przypadkach łączenia treści, gdyż reprezentuje pewną niezależną całość, jednak kiedy i jak należałoby z tej możliwości korzystać, pozostaje niejasne (chyba lepiej będzie używać RSS!). To rozwiązanie, które aż prosi się o problemy. Specyfikacje powinny precyzowa(cid:202) Podstawowy problem związany z elementem article polega na tym, że pozostawia on szerokie pole do interpretacji („Co oznacza »w zasadzie«? Nadający się do wielokrotnego użycia?”). Specyfikacje zawodzą, jeśli pozostawiają nam możliwość interpretacji. Ich celem jest precyzyjne określenie, co należy robić. Jednak w tym przypadku specyfikacja jest otwarta na interpretacje, nie daje żadnych jasnych korzyści i powtarza istniejące już możliwości funkcjonalne (element article to w sumie element section ze zmienioną nazwą). Zagnie(cid:285)d(cid:285)anie elementów article w celu tworzenia artyku(cid:239)ów i komentarzy Elementy article można także zagnieżdżać wewnątrz innych elementów article , o ile tylko ich treść jest ze sobą powiązana. Specyfikacja sugeruje, że komentarze do wpisów na blogu mogą być zapisywane jako elementy article , a następnie umieszczone wewnątrz jednego zbiorczego elementu article reprezentującego 56 Kup książkęPoleć książkę ROZDZIA(cid:146) 4. (cid:132) WSZYSTKO, CO POWINNI(cid:165)CIE WIEDZIE(cid:109) O STRUKTURALNYCH ELEMENTACH HTML5 cały wpis. To problem przypominający nieco twierdzenie, że „wszystkie łyżki i widelce są widelcami”. Jeśli dochodzi do zastosowania elementów article class= post oraz article class= comment , to article staje się jedynie nieco bardziej rozbudowaną formą elementu div. Dlaczego nie można by po prostu dodać elementu comment i mieć w ten sposób możliwość odtworzenia standardowego wzorca artykułu z umieszczonymi poniżej komentarzami, który jest stosowany niemal na wszystkich istniejących w internecie blogach i witrynach zawierających jakieś publikacje? Czy właśnie to nie byłoby przykładem utrwalania stosowanych wcześniej rozwiązań? Przeciwnie do tego, co uważa Ian Hickson, który próbuje narzucić swój ekscentryczny pogląd na tę sprawę, twierdząc, że nie ma żadnej różnicy pomiędzy artykułem i komentarzem (http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2012-January/034506.html): Sądzę, że opinia uznająca, że wypowiedzi autora witryny w jakiś sposób odróżniają się od wypowiedzi jej czytelników, jest anachronizmem. Na czym miałaby polegać taka różnica? Wprost przeciwnie, na WWW taka różnica _nie_ istnieje. Artykuł jest jedynie komentarzem podniesionym na nieco bardziej wyróżniającą się pozycję. Hickson najwyraźniej nie zauważył, jak ironiczne jest wymienienie co najmniej jednej różnicy przy jednoczesnym stwierdzeniu, że żadna różnica nie istnieje. Oczywiście, stoi to także w jawnej sprzeczności z często wskazywanym przeznaczeniem tych elementów, którym ma być pomoc autorom w utrzymaniu ich dokumentów. Gdyby kiedyś mógł powstać wzorzec zastosowania kodu reprezentujący artykuł z komentarzami — to by było to! Jednak Hickson, działając jako oskarżony i sędzia, nie ustąpi, potwierdzając jedynie swoją dziwną, filozoficzną opinię, że wszystkie „komentarze” są sobie równe i kropka. Zostaniemy zatem z zagnieżdżanymi elementami article i można sądzić, że za jakiś czas cała zawartość WWW znajdzie się w tych elementach. Wyszukiwarki nie potrzebuj(cid:200) elementów article Niektórzy mogą sądzić, że element article pomaga wyszukiwarkom, jednak one wcale go nie potrzebują, by wiedzieć, gdzie jest treść strony. Całe ich istnienie sprowadza się do tego, że są w stanie odnajdywać treści bez pomocy tego rodzaju. Nawet gdyby element article był powszechnie używany, to w jaki sposób na podstawie samego kodu przeglądarki miałyby się zorientować, czy dany element article reprezentuje wpis na blogu, wpis na forum, interaktywny widżet, komentarz czy też cokolwiek innego? Element ten ma zbyt ogólne znaczenie, by mógł być przydatny do celów SEO, i to nawet gdyby wyszukiwarki zwracały uwagę na to, jakich znaczników używamy w naszych dokumentach (a w przeważającej większości przypadków tego nie robią). (Zagadnieniami związanym z językiem HTML5 i technikami SEO zajmiemy się bardziej szczegółowo w rozdziale 6.). Element article nie ma tak(cid:285)e zawiera(cid:202) g(cid:239)ównej tre(cid:258)ci strony Element article nie powinien być także używany do reprezentacji głównego obszaru treści strony. Warto zauważyć, że gdy Hickson go wymyślał, nie istniał jeszcze żaden element mający takie przeznaczenie, a Hickson gwałtownie się sprzeciwiał jego powstaniu. Element main jeszcze nie istniał, a article bez wątpienia nie miał się nim stać. Rekomendacja Czy należy używać tego znacznika? Ja bym tego nie robił. Zamiast tego zaliczyłbym go do kategorii: winny-dopóki-nie-udowodni-swojej-niewinności. Jednak jeśli tylko pojawią się jakieś pragmatyczne korzyści wynikające z jego stosowania, to czemu nie! Jednak póki to nie nastąpi, to lepiej sobie odpuścić. Podobnie jak section , także element article nie ma swojego odpowiednika w specyfikacji ARIA. 57 Kup książkęPoleć książkę HTML5. WSZYSTKO, CO POWINNI(cid:165)CIE WIEDZIE(cid:109) O PROGRAMOWANIU. PRZEWODNIK PROFESJONALISTY A zatem, jaka jest ró(cid:285)nica pomi(cid:218)dzy elementami article i section ? Oto kilka rzeczy, które należy wiedzieć: (cid:120) Artykuły można zagnieżdżać w innych artykułach. (cid:120) Artykuły mogą być dzielone przy użyciu sekcji. (cid:120) Sekcja może być podzielona na artykuły, które z kolei mogą być podzielone na sekcje. (cid:120) Ludzie zupełnie nie potrafią spójnie używać znaczników. Wiecie co? Za wyjątkiem garstki HTML-owych superbystrzaków, każdy, kto spróbuje używać tych znaczników (choć zdziwiłbym się, gdyby ktokolwiek to robił), utworzy tylko jeden wielki bałagan. Ale co tam, w końcu mogę się mylić. Osobiście wolałbym raczej zarabiać na ż
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

HTML5. Wszystko, co powinniście wiedzieć o programowaniu. Przewodnik profesjonalisty
Autor:
,

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: