Hypertext Markup Language (HTML) jest podstawową technologią sieci Web od wczesnych lat 90-tych. Tim Berners-Lee stworzył HTML w 1989 roku jako prosty, ale skuteczny sposób kodowania dokumentów elektronicznych. W rzeczywistości pierwotnym celem przeglądarki internetowej było służenie jako czytnik takich dokumentów. Dwie dekady później sama przeglądarka stała się portalem do świata mediów online. Dlatego HTML5 to nie tylko kolejna wersja HTML, ale kompleksowy standard działania stron internetowych .
Aby lepiej zrozumieć, co sprawia, że HTML5 jest wyjątkowy, cofnijmy nieco zegar. W 1994 roku HTML wciąż był w swojej pierwszej wersji, Mosaic i Netscape zdominowały rynek przeglądarek, a większość ludzi jeszcze nie doświadczyła tej nowej rzeczy zwanej World Wide Web. W tym samym roku twórca HTML, Berners-Lee, stanął na czele nowo utworzonej grupy standardów internetowych znanej jako World Wide Web Consortium (W3C).
Chociaż W3C jest dziś szanowanym autorytetem normalizacyjnym, gracze komercyjni na rynku przeglądarek w latach 90. w dużej mierze zignorowali te standardy i przetarli własne ścieżki. Do 1995 roku W3C opublikowało drugą wersję standardu HTML, a nowicjusz sieciowy Microsoft zdobywał popularność dzięki swojej przeglądarce Internet Explorer (IE). Microsoft w dużej mierze ignorował standardy, a Netscape walczył o utrzymanie odpowiedniego udziału w rynku, podczas gdy IE zaczął dominować [źródło: Harris].
Podczas tych wczesnych wojen przeglądarkowych, twórcy stron internetowych musieli utrzymywać zgodność swoich witryn z każdą nową wersją głównych przeglądarek, a także z rzadziej używanymi przeglądarkami Opera i Apple Safari. . Mimo że W3C opublikowało HTML 3.2 w 1997, a następnie HTML 4 w 1998, przestrzeganie standardów wydawało się mniej ważne niż nadążanie za funkcjami specyficznymi dla przeglądarki. Trwało to do 2003 roku, kiedy to kierowana przez społeczność Fundacja Mozilla przełamała ten trend. Po wydaniu oryginalnej wersji przeglądarki Mozilla, a następnie przeglądarki Firefox w 2004 roku, Mozilla szybko zhakowała dominację IE. Ponadto, te nowe przeglądarki faktycznie przestrzegały istniejących standardów W3C, robiąc to.
Podczas gdy Firefox Mozilli nadal rósł, korzystając ze starzejącego się standardu HTML 4, Mozilla dołączyła do Apple i Opery w 2004 roku, tworząc grupę o nazwie Web Hypertext Application Technology Working Group (WHATWG). Celem WHATWG jest utrzymanie rozwoju HTML przy życiu. Choć początkowo się wahało, W3C dołączyło do odrodzenia HTML w 2006 roku. Razem WHATWG i W3C połączyły istniejące specyfikacje HTML i XHTML i dalej je rozwijały, aby stworzyć nową specyfikację HTML5. Ta specyfikacja jest obecnie utrzymywana i publikowana przez W3C [źródło: W3C , WHATWG ].
W tym artykule omówiono tę nową technologię HTML5. Przyjrzymy się XHTML i innym technologiom, które weszły do HTML5, i omówimy podstawowe punkty, jak używać HTML5 do tworzenia atrakcyjnych, zgodnych ze standardami treści internetowych. Przyjrzymy się również ekscytującym sposobom korzystania z HTML5 w sieci. Zacznijmy od przyjrzenia się celom HTML5 i wyjaśnieniu, dlaczego jest czymś więcej niż tylko HTML.
- HTML5 wykracza poza HTML
- Podstawy technologii HTML5
- Podstawowa zawartość HTML
- Formularze
- Elementy semantyczne
- Elementy medialne i rywalizacja Flash
- Płótno
- Tworzenie wyglądu za pomocą CSS3
- JavaScript jako centralny komponent
- Technologie aplikacji internetowych
- Przełomowe dowody koncepcji
HTML5 wykracza poza HTML
Sam HTML skupia się na prezentowaniu statycznych dokumentów, czyli tekstu, linków i niewiele więcej. Dzięki HTML 4 standard HTML był identyczny ze składnią HTML użytą do osiągnięcia tego celu. Standard HTML5 ma znacznie szerszy cel, aby opisać zawartość, styl i interfejsy aplikacji znajdujące się za stroną internetową, gdy jest ona ładowana w Twojej przeglądarce. Mówiąc dokładniej, HTML5 ustanawia pojedynczą składnię do interakcji ze wszystkimi elementami, które strona internetowa załadowała do pamięci komputera.
Istnieje potencjalny punkt zamieszania, który powinniśmy wyjaśnić na temat terminu „HTML5”, zanim przejdziemy dalej. Istnieje nowa wersja samego języka znaczników o nazwie HTML5. Jednak ten język jest tylko częścią szerszego standardu, który dzieli nazwę HTML5. W tym artykule omówiono wszystkie składniki standardu HTML5, którego centralnym elementem jest język HTML5.
Mając to na uwadze, w jaki sposób przeglądarka ładuje stronę napisaną zgodnie z nowszym standardem HTML5, a nie starym językiem HTML 4? W końcu zwykle polegamy na naszych przeglądarkach, aby ładować strony internetowe, nie martwiąc się o kod HTML za nimi. Odpowiedź jest prosta: tak długo, jak sama przeglądarka obsługuje HTML5, może obsłużyć wszystko, co w nią wrzucisz, bez konieczności rozróżniania między wersjami HTML.
Aby ta magia mogła się wydarzyć, standard HTML5 integruje nowe wersje wielu technologii współpracujących ze sobą, aby osiągnąć wspólne cele. Cele te obejmują:
- Prosty i intuicyjny język
- Zapewnienie, że kod jest łatwy do odczytania i utrzymania and
- Adresowanie stron jako aplikacji interaktywnych, a nie statycznych dokumentów
- Poleganie na kaskadowych arkuszach stylów (CSS) do stylizowania treści
- Rozpoznawanie JavaScript jako centralnego komponentu skryptowego dla stron internetowych
- Obejmowanie dynamicznej zawartości z technologii serwerowych, takich jak PHP i ASP
Teraz, gdy wiesz, że HTML5 to coś więcej niż sam znacznik HTML, przyjrzyjmy się podstawowym technologiom w standardzie.
Podstawy technologii HTML5
Język znaczników używa serii znaczników do oznaczania elementów w pliku. Znaczniki opierają się na jakimś modelu, który definiuje, czym są te elementy i jak ich używać. Ponieważ HTML zawsze służył do kodowania dokumentów, opiera się na czymś, co nazywa się modelem obiektowym dokumentu (DOM). DOM jest wbudowany w samą aplikację przeglądarki internetowej. Tak więc język znaczników jest tylko sposobem na przekazanie instrukcji przeglądarce w oparciu o model, który już rozumie.
Aby lepiej zrozumieć związek między DOM a HTML, pomyśl o DOM jako pudle pieczątek. Każdy znaczek to inny element w DOM. Każda strona napisana w HTML to po prostu seria nadruków wykonanych ze znaczków, które są wypełnione Twoją własną, niestandardową treścią. Przeglądarka internetowa może wyświetlić wszystko, co zostało utworzone ze znaczków w tym polu.
Technicznie rzecz biorąc, DOM to interfejs programowania aplikacji (API) zapewniający neutralny dla platformy sposób przetwarzania dokumentów HTML lub XML. (Extensible Markup Language lub XML wygląda podobnie do HTML, ale pozwala programiście dodać niestandardowy zestaw elementów, których można użyć w dokumencie). Standard HTML5 wymaga DOM znanego jako DOM5 HTML. Przygotowane na rozwój HTML5, najnowsze wersje przeglądarek Chrome , Firefox , IE, Safari i Opera mogą przetwarzać wszystkie strony w DOM5 HTML.
Innym ważnym fundamentem HTML5 są powiązane z nim typy MIME (Multipurpose Internet Mail Extensions ). MIME to standard Internet Engineering Task Force (IETF) służący do ostrzegania oprogramowania obsługującego Internet, jakiego rodzaju treści próbuje ono przetworzyć. Zwykle odpowiada to określonemu typowi pliku, takiemu jak dokument HTML lub plik audio MP3.
Programiści sieci Web określają typy MIME podczas kodowania strony sieci Web. To skłania przeglądarkę do załadowania odpowiednich plików zgodnie z ich typami. Istnieją dwa typy MIME, które łączą HTML DOM5, tworząc podstawę nowego standardu HTML5: typ MIME HTML (text/html) i typ MIME XML (application/xhtml+xml). HTML5 zawiera aktualizacje składni dla obu tych typów MIME.
Krótko mówiąc, podstawowymi technologiami w standardzie HTML5 są DOM5 HTML i typy MIME zgodne z HTML5 dla HTML i XML. Przejdźmy teraz do tworzenia strony internetowej za pomocą HTML5.
Podstawowa zawartość HTML
HTML5 zawiera co najmniej wersję 5 podstawowej składni HTML. Przykładowy kod na pasku bocznym na tej stronie pokazuje, jak ten kod HTML może wyglądać dla podstawowej strony sieci Web. Podczas przeglądania sieci użyj opcji „Wyświetl źródło” lub podobnej opcji w przeglądarce, aby zobaczyć załadowany kod HTML (i inny kod) w celu utworzenia aktualnie przeglądanej strony. Cały kod pokazany w naszym przykładzie jest również wstecznie zgodny z HTML 4, co oznacza, że nie ma żadnych nowych dodatków dostępnych w HTML5.
Chociaż nie jest on obecny na wszystkich stronach sieci Web, dobrą praktyką jest rozpoczęcie pliku HTML z deklaracją typu dokumentu (doctype), jak pokazano w przykładzie. Potwierdza to, że przeglądarka powinna oczekiwać standardowego kodu HTML podczas interpretacji dokumentu. Niektórzy programiści polegają na rozszerzeniach standardu HTML, które wykorzystują pliki definicji typu dokumentu (DTD). W takim przypadku deweloper określa lokalizację DTD jako część tego typu doctype.
Oprócz doctype, pozostały kod w przykładzie to standardowa składnia HTML. Jeśli nie znasz tej składni, zapoznaj się z naszym artykułem Jak działają strony internetowe .
Co nowego w tych podstawowych elementach w HTML5? Oto lista, której przyjrzymy się bliżej na kolejnych stronach.
- Nowe i zaktualizowane elementy formularza – układanie struktury formularza i przetwarzanie danych wejściowych formularza od użytkownika
- Elementy semantyczne — identyfikacja treści na podstawie jej roli na stronie internetowej
- Elementy multimedialne — osadzanie audio, wideo i innych interaktywnych mediów bez konieczności korzystania z rozszerzeń przeglądarki innych firmparty
- Elementy Ruby - wspierające internacjonalizację stron internetowych w języku azjatyckim
Formularze
Chociaż formularze (sekcje witryny sieci Web, w których użytkownicy mogą wprowadzać określone dane, takie jak nazwiska, adresy itp.) były częścią najwcześniejszych elementów dostępnych w HTML, brakowało im wielu przydatnych funkcji przed HTML5. Aby to zrekompensować, twórcy stron trzecich stworzyli oprogramowanie formularzy internetowych, które sprawia, że podstawowe formularze HTML wydają się prawie przestarzałe. HTML5 tchnął jednak nowe życie w formularze dzięki nowym elementom formularzy, typom wejściowym i atrybutom istniejących elementów.
Nie rozróżniając starej i nowej składni, przyjrzyjmy się ogólnemu podejściu do tworzenia formularza dla Twojej strony internetowej przy użyciu HTML5. Oto kilka zalecanych kroków, aby rozpocząć:
- Utwórz blok formularza za pomocą
- Wyznacz blok pól w formularzu za pomocą
- Ułóż każde pole w zestawie pól za pomocą
- W każdym tagu etykiety dodaj nazwę pola, tak jak chcesz, aby była wyświetlana, plus znak tag dla samego pola.
- Użyj atrybutu type w znaczniku wejściowym (), który monituje przeglądarkę o zweryfikowanie danych wprowadzonych przez użytkownika na podstawie tego typu. Eliminuje to potrzebę dodatkowego kodu do obsługi sprawdzania poprawności i monitowania o ponowne wprowadzenie. HTML5 obejmuje następujące typy danych wejściowych: data, godzina, data/godzina, data/godzina-lokalna, miesiąc, tydzień, numer, e-mail, tel, adres URL, zakres, kolor i wyszukiwanie. Możesz również użyć atrybutu wzorca z wyrażeniem regularnym, aby utworzyć niestandardowy wzorzec walidacji.
- Wskaż wymagane pola, dodając wymagany atrybut dla elementu wejściowego.
- Użyj atrybutu autofokusa, aby ustawić określony element wejściowy jako pierwszy element formularza. W tym miejscu przeglądarka internetowa automatycznie umieści kursor użytkownika po załadowaniu formularza.
- W razie potrzeby użyj atrybutu placeholder, aby dodać wskazówki tekstowe dotyczące tego, co należy wpisać w danym polu.
- Ustaw style CSS dla „:required” i „:invalid”, aby użytkownik miał wizualną wskazówkę dotyczącą brakujących informacji lub danych wejściowych, które nie zostaną zweryfikowane dla danego typu danych wejściowych.
Sprawdź aktualny przewodnik dotyczący HTML5, aby uzyskać pełną listę elementów formularza i ich atrybutów. Należy również zauważyć, że obsługa niektórych pól formularza różni się w zależności od przeglądarek internetowych. Pamiętaj, aby przetestować formularz w każdym typie przeglądarki, którą ma obsługiwać Twoja witryna sieci Web.
Podczas gdy elementy formularzy HTML mają więcej funkcji w wersji 5, kolejny typ elementu jest całkowicie nowy w HTML5.
Elementy semantyczne
Elementy semantyczne w HTML5 to, jak sama nazwa wskazuje, te, które odnoszą się do znaczenia określonej treści. Samo używanie znaczników nie wystarczy, ponieważ większość dzisiejszych witryn internetowych zawiera kilka różnych typów treści na jednej stronie. Twórcy stron internetowych muszą stosować oddzielne zasady dotyczące wyglądu lub zachowania każdego rodzaju treści.
Bez elementów semantycznych twórcy stron internetowych używali
Z biegiem czasu niektóre typy zawartości stały się bardzo popularne w witrynach sieci Web, takie jak nagłówki, stopki, menu i punkty nawigacyjne. HTML5 zawiera je, dodając standardowe elementy semantyczne. Oznacza to, że możesz podzielić swój blok na pomocne elementy semantyczne, a nie na serię
Poniżej znajduje się lista semantycznych elementów strony z krótką definicją każdego z nich. Pamiętaj, aby znaleźć odwołanie HTML5, któremu możesz zaufać, aby uzyskać pełną listę prawidłowych atrybutów i elementów podrzędnych dla każdego elementu semantycznego.
Elementy blokowe:
- sekcja – ogólny podział strony używany do podziału większego bloku treści
- artykuł -- treść oryginalnie pochodząca z zewnętrznego źródła, czasami dodawana dynamicznie podczas ładowania strony za pomocą skryptu agregatora
- nagłówek i stopka – bloki, które pojawiają się na górze i na dole każdej strony
- hgroup -- grupa wielu powiązanych nagłówków, takich jak tytuł i podtytuł
- menu -- lista poleceń (zobacz element command) i atrybutów, które określają zachowanie menu
- nav – identyfikuje blok, który służy wyłącznie do nawigacji w witrynie, zazwyczaj nieuporządkowana lista łączy do innych stron w witrynie
- adres – zawiera informacje kontaktowe autora treści w bloku, takie jak artykuł, sekcja lub cała treść strony
- na bok -- wskazuje, że treść powinna być traktowana jako pasek boczny
Elementy wbudowane:
- podsumowanie i szczegóły – przełączaj między zwiastunem/podsumowaniem a pełnymi szczegółami dla tej samej treści
- figure i figcaption — elementy używane do stosowania typowego zachowania do obrazów, bez względu na to, jakie elementy multimedialne (img, svg lub canvas) są używane do ich uwzględnienia
- czas — tekst reprezentujący datę kalendarza, godzinę lub oba te elementy, sformatowany tak, aby przeglądarka mogła w razie potrzeby dostosować się do różnic w strefach czasowych
- polecenie -- etykieta i zachowanie związane z tą etykietą, gdy używasz klawiatury lub myszy do interakcji z nią, zwykle używane wewnątrz bloku menu
- dfn -- termin, który jest definiowany w treści
- wbr -- znacznik wskazujący dopuszczalne miejsce do łamania tekstu w słowie, gdy zawija się w wielu wierszach
Elementy semantyczne zostały stworzone jako ulepszenie w stosunku do bardziej ogólnych elementów HTML. Jednak kolejny nowy typ elementu ma na celu całkowite zastąpienie rozszerzeń multimedialnych innych firm w przeglądarkach internetowych.
Przestrzeń czy brak przestrzeni?
Być może zauważyłeś, że kiedy odwołujemy się do innych wersji HTML, takich jak HTML 4, przed liczbą jest spacja, podczas gdy w odwołaniach do HTML5 nie ma spacji. Odbyło się wiele dyskusji i debat na ten temat w społeczności HTML, ale ostatecznie zarówno WHATWG , jak i W3C przyjęły HTML5 jako oficjalną pisownię, aby zachować spójność dokumentacji.
Elementy medialne i rywalizacja Flash
Jedną z najczęściej omawianych funkcji HTML5 jest nowe podejście do osadzania multimediów na stronie internetowej . W dalszej części tego artykułu przyjrzymy się niesamowitym aplikacjom tej funkcji HTML5. HTML5 wykonuje to osadzanie bez konieczności korzystania z zewnętrznej wtyczki przeglądarki. Oto elementy multimedialne dostępne w HTML5:
- audio -- osadza dźwięk na stronie i zawiera atrybuty określające sposób jego odtwarzania; obsługiwane formaty plików będą się różnić w zależności od przeglądarek internetowych
- video -- umieszcza wideo na stronie i zawiera atrybuty określające sposób jego odtwarzania; obsługiwane formaty plików będą się różnić w zależności od przeglądarek internetowych
- źródło — używane z elementami audio lub wideo do identyfikacji źródła; dla jednego elementu można określić wiele źródeł
- embed - osadza i określa typ mediów dla treści, które mogą nie być obsługiwane w innych elementach mediów
- canvas -- odkłada część strony lub ekran komputera, gdzie JavaScript może rysować obrazy; wkrótce dowiemy się więcej o tym, jak działa ta ważna nowa funkcja
- svg — osadza grafikę wektorową zakodowaną za pomocą języka znaczników SVG, umożliwiając jej dynamiczne skalowanie do obszaru strony, na której są załadowane, bez utraty jakości grafiki
W miarę rozwoju HTML5 eksperci rynkowi kwestionowali, czy zastąpi on Flasha, który jest obecnie kontrolowany przez Adobe. Flash to odtwarzacz multimedialny, który można dodać jako wtyczkę do przeglądarki internetowej. Ponieważ Flash ma wszystkie funkcje niezbędne do umieszczania w witrynie różnych typów multimediów, witryny takie jak YouTube są od niego zależne od lat. Istnieją nawet aplikacje internetowe, które w pełni wykorzystują technologię Flash do obsługi swoich interaktywnych interfejsów. Przyjęcie Flasha było tak powszechne w 2007 roku, że po wydaniu długo oczekiwanego Apple iPhone, wielu konsumentów było zdenerwowanych, słysząc, że jego system operacyjny , Apple iOS, nie obsługuje Flasha.
Kiedy Google , prawdopodobnie największa marka w internecie, zabrała się za tworzenie swoich aplikacji w HTML5, zwrócili na to uwagę zwolennicy Flasha. Przed HTML5 jedynym zagrożeniem dla dominacji Flasha byli twórcy aplikacji internetowych, którzy chcieli tworzyć i utrzymywać niestandardowe alternatywy HTML/JavaScript. Dzięki HTML5 takie uciążliwe dostosowania nie są już potrzebne podczas tworzenia interaktywnego środowiska multimedialnego, które może konkurować z technologią Flash.
Kto więc wygra: Flash czy HTML5? Krótka odpowiedź brzmi: „Ani”. Każda technologia ma swoje cechy, zalety i wady. Ponadto Adobe i Google pracowały nad narzędziami do konwersji Flash na HTML5. W chwili pisania tego tekstu wydaje się, że chociaż HTML5 zyskuje status, Flash prawdopodobnie przez jakiś czas zachowa swoją popularność.
Przejdź do następnej strony, na której podzielimy element canvas i jak go używać na stronach internetowych HTML5.
Płótno
Jedną z najważniejszych nowych funkcji HTML5 jest płótno. Funkcja płótna umożliwia identyfikację sekcji strony internetowej , rysowanie w niej treści i dodawanie interaktywnych funkcji. Wszystko to jest możliwe dzięki połączeniu kodu HTML i JavaScript . Przyjrzyjmy się trzem częściom, które będą potrzebne do skonfigurowania kanwy w HTML5:
Część 1: Użyj
szerokość = "400"
wysokość="300>
Jeśli widzisz ten tekst, Twoja przeglądarka
nie obsługuje kanwy HTML5.
Część 2: Utwórz kod JavaScript, który rysuje zawartość na kanwie. Później dowiemy się, jak dodawać i zarządzać kodem JavaScript powiązanym ze stroną internetową HTML5. Tutaj spójrzmy tylko na przykładowy kod JavaScript, którego możesz użyć dla obiektów canvas. Poniższy kod rysuje prostokąt na powyższym płótnie:
funkcja rysujProstokąt() {
var targetCanvas = document.getElementById("sampleCanvas");
var rectContext = sampleCanvas.getContext("2d");
rectContext.fillStyle = "niebieski";
rectContext.fillRect(50, 25, 150, 100);
}
Ta funkcja rysuje na płótnie jednolity niebieski prostokąt. Dwie linie „var” tworzą zmienne, których możesz użyć. Pierwszy (targetCanvas) identyfikuje element canvas, na który kierujesz reklamy, używając jego identyfikatora z kodu HTML. Drugi (rectContext) ustawia dwuwymiarowy kontekst rysowania. Pomyśl o kontekście jako przezroczystej warstwie szkła ułożonej na wierzchu płótna, a wywołasz funkcje do rysowania na tym szkle.
Wiersz „fillStyle” identyfikuje kolor niebieski według nazwy, który HTML rozpoznaje i kojarzy z jednym z jego nazwanych kolorów. Możesz także użyć dowolnego koloru, wzoru lub gradientu, tak jak podczas pisania kodu stylu w HTML lub CSS. Linia „fillRect” rysuje prostokąt zaczynając od przesunięcia od lewego górnego rogu, przy czym pierwsze dwie liczby to przesunięcia xiy, tak jakby lewy górny róg kanwy znajdował się we współrzędnych (0,0). Drugie dwie liczby oznaczają odpowiednio szerokość i wysokość prostokąta.
Część 3: Wywołaj funkcję JavaScript z kodu HTML. To łączy ze sobą te dwa kawałki. Możesz wywołać funkcję zaraz po załadowaniu strony sieci Web, co ma sens, jeśli używasz kanwy do rysowania interaktywnej zawartości strony, która musi pojawić się zaraz po załadowaniu strony. Inną opcją jest utworzenie przycisku, menu lub innego elementu w kodzie HTML, który wyzwala zdarzenie rysowania. Poniżej znajduje się przykład przycisku, którego można użyć do uruchomienia powyższego przykładowego skryptu:
Dive Into HTML5 zawiera łatwy do naśladowania przewodnik po tworzeniu elementów płótna dla stron internetowych. Ponadto niezawodne odniesienie HTML5 powinno zapewniać obszerne zasoby do rysowania wyrafinowanej grafiki, zarówno nieruchomej, jak i ruchomej. Jeśli chcesz szeroko wykorzystać płótno w HTML5, musisz znać się na programowaniu w JavaScript. Następnie przyjrzyjmy się, jak CSS3 tworzy wygląd i działanie strony internetowej HTML5.
Tworzenie wyglądu za pomocą CSS3
Każdy element HTML ma pewną liczbę atrybutów, których używasz w kodzie do modyfikowania wyglądu lub funkcji tego elementu. Styl i powiązane atrybuty dostosowują rozmiar, kolor, rozmieszczenie, granice i inne fizyczne aspekty elementu. Przez lata istnienia sieci twórcy witryn szeroko przyjęli praktykę oddzielania stylu od treści. Dokonując tej separacji, deweloperzy mają następujące zalety:
- Mniej kodu do utrzymania: wiele elementów na wielu stronach internetowych może współdzielić te same style bez powtarzania kodu stylizacji dla każdej z nich.
- Łatwiejsza konserwacja z biegiem czasu: aktualizacja do nowego stylu lub naprawa istniejącego oznacza zmianę tylko jednego fragmentu kodu stylizacji zamiast aktualizowania każdego elementu za pomocą tego kodu.
Dlatego też, chociaż stylizacja może być zgodna z kodem HTML, bardziej popularnym wyborem dla twórców stron internetowych jest użycie kaskadowych arkuszy stylów (CSS) do zarządzania całym kodem stylizacji powiązanym z witryną internetową. Kod HTML każdej strony może odwoływać się do jednego lub większej liczby arkuszy stylów, które przeglądarka powinna wczytać podczas wczytywania strony. Te arkusze stylów, w postaci plików CSS, mają naśladować to, co możesz wprowadzić za pomocą
