Przede wszystkim zdefiniujmy, jak wygląda strona internetowa od środka, że tak powiem. Bez wchodzenia w szczegóły możemy to powiedzieć strona internetowa to zestaw plików, które znajdują się na serwerze (hosting) w Internecie i współdziałają ze sobą według określonych scenariuszy. Wynikiem tej interakcji są te same strony, które przeglądasz codziennie.
Dlatego wszystkie te pliki, które tworzą witrynę, muszą być czymś wypełnione. Zgadza się, jest! I są wypełnione kodem. Więc oto jest? każdy z zagadkowych skrótów to język, na którym napisane są strony i skrypty składające się na witrynę.
Co to jest HTML?
HTML (hipertekst Język znaczników) to hipertekstowy język znaczników. Nie jest to do końca jasne, prawda? Upraszczając definicję, możemy powiedzieć, że HTML jest „szkieletem” każdej strony.
Przykładem jest następująca sekcja strony, którą wymyśliliśmy:
Tytuł strony
widoczna część ogniwa (kotwica)
Tytuł strony
To jest tekst, akapit, ujęty w znaczniki. Z reguły HTML składa się z tagów, które otwierają się i zamykają, obramowując pewne elementy. A teraz akapit tekstu się skończy i dostarczymy.
widoczna część ogniwa (kotwica)Dlaczego „szkielet”? Jeśli przyjrzysz się uważnie, interpretowany kod nie jest w ogóle sformatowany. Bez kolorów, bez rozmiarów, bez pozycjonowania.
Możemy stwierdzić, że HTML to zestaw tagów, które stanowią podstawę każdej strony w Internecie. Z ich pomocą deklarujemy nagłówki, akapity, linki, obrazki i inne elementy.
Co to jest CSS?
CSS (English Cascading Style Sheets - kaskadowe arkusze stylów) - to jest ta "magiczna magia", co sprawia, że znaczniki HTML wyglądają ładnie. Na Pomoc CSS mamy możliwość dowolnego stylu dowolnego elementu określonego w znaczniku.
Myślę, że najlepiej pokazać przykład:
Zebry
Kolorowanie
Dowiedz się więcej o zebrach!
- Bez Wykorzystanie CSS
- Korzystanie z CSS
Zebry
Zebry (łac. Hippotigris) - podrodzaj rodzaju konia, obejmujący gatunki zebry Burchella (Equus quagga), zebry Grevy'ego (Equus grevyi) i zebry górskiej (Equus zebra). Formy hybrydowe między zebrami a końmi domowymi nazywane są zebroidami, między zebrami a osłami - zebrulami. Zebry żyją w małych grupach składających się z samic z młodymi i jednego ogiera.
Kolorowanie
Jeśli chodzi o ubarwienie tła zebry, często spotyka się dwie wzajemnie wykluczające się pozycje: białą lub czarną. Lisa Smith, kuratorka dużych ssaków w Atlanta Zoo, mówi, że eksperci najczęściej opisują zebry jako czarne konie z białymi paskami.
Zebry
Zebry (łac. Hippotigris) - podrodzaj rodzaju konia, obejmujący gatunki zebry Burchella (Equus quagga), zebry Grevy'ego (Equus grevyi) i zebry górskiej (Equus zebra). Formy hybrydowe między zebrami a końmi domowymi nazywane są zebroidami, między zebrami a osłami - zebrulami. Zebry żyją w małych grupach składających się z samic z młodymi i jednego ogiera.
Kolorowanie
Jeśli chodzi o ubarwienie tła zebry, często spotyka się dwie wzajemnie wykluczające się pozycje: białą lub czarną. Lisa Smith, kuratorka dużych ssaków w Atlanta Zoo, mówi, że eksperci najczęściej opisują zebry jako czarne konie z białymi paskami.
Nietrudno zauważyć, że zastosowanie CSS jest integralną i ważną częścią procesu tworzenia strony., ponieważ to arkusze stylów pozwalają programowo zrealizować całe piękno, które wcześniej narysował projektant.
Kod CSS jest zwykle przechowywany w oddzielnym pliku od znaczników strony i dołączany do wszystkich dokumentów, które go potrzebują. Nie będziemy mówić o składni i zasadach użytkowania, ponieważ wykracza to poza zakres naszego artykułu, zastrzegam jednak, że pomimo wszystkich możliwości, jakie otwiera CSS, dość łatwo jest poznać jego właściwości.
Co to jest PHP?
PHP (rekurencyjny akronim PHP: Hypertext Preprocessor) to popularny język programowania open source ogólnego przeznaczenia. PHP został zaprojektowany specjalnie do tworzenia stron internetowych, a jego kod może być osadzony bezpośrednio w HTML.
Co to dla nas oznacza? Zobaczmy przykład przy użyciu PHP:
echo "Witaj świecie! Jestem skryptem PHP.";
?>
Witaj świecie! Jestem skryptem PHP.
Charakterystyczna cecha wyróżniająca podany język jest to, że wynikiem jego przetwarzania może być zwykłe tagi html(Kod HTML). Dlatego jest aktywnie wykorzystywany w środowisku programowania internetowego. Warto również zauważyć, że w przeciwieństwie do HTML, PHP może komunikować się z serwerem, a także przeglądać bazy danych, „ciągnąć” niezbędne informacje i wyświetlić na stronie.
Kod PHP jest oddzielony specjalnymi znacznikami początkowymi i końcowymi, które umożliwiają „przełączanie” w „tryb PHP” i wyłączanie go w znacznikach HTML. Skrypty PHP mogą również znajdować się w oddzielnych plikach niż znaczniki, jeśli ich zadanie jest ogromne i wymaga dużej ilości kodu.
Dzięki językom programowania, jak PHP(i samo PHP) stało się możliwe tworzenie CMS(system zarządzania treścią, CMS) lub systemy zarządzania treścią.
Co musimy teraz wiedzieć? Skrypty PHP są rodzajem „konstruktora kleju”, który umożliwia zaprogramowanie wyświetlania różnych informacji na ekranie użytkownika. Aby stworzyć zwykłą statyczną stronę w Internecie, wystarczy używając HTML w połączeniu z CSS. Ale jeśli ta strona (na przykład wiadomości) jest częścią jakiejś dynamicznej witryny, to najprawdopodobniej jej wygląd jest wynikiem wykonania skryptu PHP.
Co to jest JS?
JavaScript — język skryptowy oparty na prototypach. Jak zawsze definicja nie daje zrozumienia dla nie-programisty, dlatego postaramy się zrozumieć za pomocą prostych tez.
Na początek proponuję rozważyć mały przykład tego, co można zrobić za pomocą JS:
Witam drodzy czytelnicy serwisu blogowego. Dzisiaj chcę zacząć mówić szczegółowo o CSS (materiały będą gromadzone w odpowiednim).
Czas przejść do tego po nauczeniu się Html. Język znaczników stylu odpowiada za zewnętrzny projekt stron witryny i bez jego zrozumienia bardzo trudno będzie coś poprawić, przenieść lub wyrównać.
Oczywiście Css wygląda o wiele bardziej skomplikowanie niż Html, ale tak jest, jeśli chodzi o układ w różnych przeglądarkach, ale jeśli chodzi o naprawienie drobiazgów w projekcie własnej witryny, nie potrzebujesz wiele uwagi. Ogólnie postaramy się szczegółowo przeanalizować jego podstawy, a niuanse ich filigranowego wykorzystania pozostaną do fakultatywnego opracowania (opcjonalnego). Ale wszyscy webmasterzy muszą znać podstawowe pojęcia.
Co to jest język CSS i do czego służy?
Skrót CSS oznacza kaskadowe arkusze stylów lub, w tłumaczeniu na język rosyjski, kaskadowe arkusze stylów. Co to jest i dlaczego kiedyś wynaleziono ten język?
Tak więc na podstawie tego, co zbadaliśmy nieco wcześniej, możemy powiedzieć, że znaczniki dokumentu internetowego są wykonywane przy użyciu znaczników tego języka. Tych. Za pomocą HTML tworzymy strukturę naszych dokumentów (stron internetowych). Na przykład w czystym HTML możemy ustawić inne elementy struktury dokumentu, a nawet nadać im wygląd, którego potrzebujemy w przeglądarce.
Ale czas podyktował potrzebę używania coraz większej liczby atrybutów projektowania wizualnego w HTML, które mocno zaśmiecały źródło. W związku z tym zaproponowano inną, bardziej obiecującą opcję rozwoju - tworzenie osobnego języka znaczników stylu CSS. Ta opcja miała wiele zalet w porównaniu ze zwykłym zwiększeniem liczby atrybutów projektu.
Czemu? Czy pamiętasz, jak ustawić kolor fragmentu tekstu w czystym HTML? Zgadza się, z . A jeśli chcesz pokolorować w żądanym kolorze kilka akapitów w tekście naraz?
Następnie będziesz musiał wstawić znaczniki Font z żądaną wartością koloru w atrybucie Color wewnątrz każdego z nich (znacznik akapitu P jest znacznikiem bloku, co oznacza, że nie można go umieścić wewnątrz wbudowanego elementu Font).
Wszystko to będzie strasznie zaśmiecać kod źródłowy, co jest bardzo, bardzo niepożądane, ponieważ ucierpi na tym prędkość ładowania strony, a sprzęt do komunikacji internetowej zostanie niepotrzebnie obciążony. Deweloperzy nie mogli na to „pójść”.
Dlatego wymyślili następujące wyjście z tej sytuacji. Deweloperzy z W3C postanowili ostylować wszystkie wizualne reprezentacje dokumentu internetowego w formie specjalnego języka znaczników stylów, który nazwali Cascading Style Sheets lub po prostu CSS (czytaj CES). Jaka jest istota technologii?
Najważniejsze jest to, że łącząc język znaczników stylu z dowolnymi dokumentami (stronami), możemy ustawić wizualną reprezentację wszystkich tych elementów (tworzonych przez tagi HTML), które znajdą się w tym dokumencie.
W Internecie istnieje źródło, które pomaga bardzo wyraźnie zobaczyć, jak strona internetowa może zmienić swój wygląd tylko dlatego, że dołączony jest do niej inny plik kaskadowego arkusza stylów. Moim zdaniem byłaby to najlepsza odpowiedź na pytanie: co to jest CSS i dlaczego jest potrzebny.
Możesz zobaczyć podstawowy widok dokumentu (strony internetowej), klikając ten link:
Nic specjalnego, ale jeśli klikniesz link „Wyświetl wszystkie projekty” z lewego menu, możesz zobaczyć dziesiątki, a nawet setki opcji projektu dla tej samej strony internetowej, dołączając inny projekt stylu (inny plik arkusza stylów).
Należy pamiętać, że oryginalny kod HTML pozostaje dokładnie taki sam i tylko zmiany Stylizacja CSS . Uderzające, prawda?!
CSS nie jest językiem znaczników w tym samym sensie, co np. Html. Jest to język znaczników stylu - ma własną składnię, własną zawartość wewnętrzną i pod wieloma względami będzie bardzo różnił się od poprzednio badanego.
Ponadto w porównaniu do HTML język znaczników stylu jest znacznie bardziej złożony. Zawiera wiele niuansów, które będziesz musiał znać oprócz podstawowych pojęć. W HTML nie było specjalnych niuansów - przestudiowałeś wszystkie elementy i możesz bezpiecznie pracować z kodem. Wydaje mi się, że CSS można porównać do szachów – nie wystarczy wiedzieć, jak poruszają się wszystkie figury, trzeba też umieć grać.
Czym więc jest i z czego się składa? Ten rzekomy język może podzielić na dwie części:
- Reguły, które informują przeglądarkę, jak element powinien wyglądać na ekranie.
- Selektory to etykiety, które pozwalają przeglądarce dokładnie zrozumieć, do których elementów kodu HTML będzie musiała zastosować te reguły.
Przyjrzyjmy się teraz, jak stylizacja zdefiniowana w stylach jest połączona z kodem źródłowym strony internetowej. Istnieją trzy główne sposoby używanie css z html:
- Zagnieżdżanie — kod CSS jest zapisywany bezpośrednio w żądanym znaczniku elementu za pomocą atrybutu Style
- Osadzanie - cały kod stylu dla dokumentu internetowego jest zapisywany w jego nagłówku (wewnątrz tagów Head) za pomocą elementu Style
- Oprawa - wszystkie CSS kod jest umieszczany (renderowany) w osobnym pliku zewnętrznym, który łączy się z dokumentem za pomocą elementu Link w jego nagłówku
Cóż, widzisz, jak wiele się już nauczyliśmy o języku znaczników stylu. Nadszedł czas, aby o tym porozmawiać składnia. Ogólnie rzecz biorąc, jest to dość proste:
Jedna reguła w kodzie CSS składa się z dwóch elementów - właściwości (w naszym przykładzie jest to ) i jej wartości (w naszym przykładzie jest to red i #CCCCCC). Warunkiem wstępnym jest oddzielenie nieruchomości od jej wartości za pomocą dwukropka.
Dalej. Jedna reguła jest bezbłędnie oddzielona od drugiej średnik. Po ostatniej regule nie będzie już można wstawiać średnika, ale aby uniknąć ekscesów, najlepiej jest, aby reguła była zawsze umieszczana. w kodzie CSS nie mają znaczenia i możesz je ustawić według własnego uznania.
Używanie stylu do łączenia CSS z kodem HTML
Cóż, teraz spójrzmy na przykłady wszystkich tych sposobów zastosowania reguł stylów do naszego dokumentu, które istnieją i które zostały opisane w ogólnych terminach tuż powyżej.
Pierwsza metoda nazywa się metodą osadzanie css w html za pomocą atrybutu Styl:
Zobaczmy, jak możemy użyć Ta metoda aby ustawić kolor i tło akapitu:
Co to jest metoda zagnieżdżania
Jak widać, jednym prostym ruchem pokolorowaliśmy tekst akapitu na czerwono (kolor:czerwony) i jednocześnie umieściliśmy go pod szare tło(tło:#cccccc). Styl jest jednym z tych sześciu, których można użyć z absolutnie dowolnym tagiem (są one wymienione na dole zrzutu ekranu):
W Css będziemy również aktywnie wykorzystywać te uniwersalne, o czym będzie mowa w kolejnych artykułach, ale na razie rozważaliśmy możliwość wykorzystania Style do łączenia reguł stylu z pewnymi elementami. Kod HTML. Pozwala na użycie jako wartości zestawu tych samych reguł (w nieograniczonej liczbie).
Metoda nestingu z wykorzystaniem atrybutu Style jest bardzo prosta do wdrożenia w praktyce, ale mimo to jest w prawdziwym układzie używany bardzo rzadko. Ale z drugiej strony za jego pomocą możesz po prostu coś wypróbować i poeksperymentować, a dopiero potem przenieść wszystkie te reguły do osobnego pliku z tabelami Style CSS.
Następnym sposobem połączenia języka znaczników stylu jest metoda osadzanie css w html. Ta metoda zasadniczo różni się od wcześniej rozważanej metody zagnieżdżania.
Zamiast umieszczać atrybut Style zawierający reguły języka stylu w każdym tagu na stronie, napiszemy teraz wszystkie reguły CSS potrzebne dla tego dokumentu internetowego w jednym pojedynczym Znacznik stylu, który z kolei zostanie umieszczony w nagłówku tego dokumentu (pomiędzy elementami Head).
Pamiętasz, czym jest Head i gdzie jest wpisane w strukturę dokumentu internetowego? Jeśli nie pamiętasz, spójrz na ten schemat blokowy:
Tych. w kodzie może to wyglądać tak:
... ...
Mętnawy? Cóż, teraz postaram się to zilustrować:
Aby przeglądarka nie akceptowała reguł stylów jako hipertekstowego języka znaczników, wymagany atrybut będzie musiał zostać zapisany w elemencie Style Wpisz z wartością „text/css”(nagłówek treści multimedialnych dla kaskadowych arkuszy stylów). To. kod zawarty w tym elemencie zostanie zinterpretowany przez przeglądarkę jako CSS.
Spójrzmy na powyższy przykład. Jak widać, styl rządzi zamknięty w aparat ortodontyczny , a przed nimi znajduje się tak zwany selektor w postaci łacińskiej litery „P”. Dlaczego ten selektor jest potrzebny?
Jak inaczej możemy powiedzieć przeglądarce, że te reguły CSS będą musiały być zastosowane tylko do tagów akapitów (selektor P) ta sieć dokument i nic więcej.
Tutaj ponownie poruszyliśmy kwestię składni. Podczas korzystania z metod osadzania i zagnieżdżania wszystkie reguły języka znaczników stylu muszą być ujęte w nawiasy klamrowe i poprzedzone koniecznie wstań lub wiele selektorów:
Selektor CSS (Właściwość: Wartość; Właściwość: Wartość)
W przypadku metody zagnieżdżania nie korzystaliśmy z selektora i nawiasów klamrowych, ponieważ dla przeglądarki było już jasne, że te reguły CSS powinny być stosowane dokładnie do tagu, w którym zarejestrowany jest atrybut Style.
Przy stosowaniu metody osadzania lub zagnieżdżania sytuacja z określeniem, do kogo adresowane są te reguły stylu, stała się bardziej skomplikowana i wymagała użycia nawiasów klamrowych i selektorów. To. wskazujemy przeglądarce, że ten zestaw reguł CSS (zawartych w nawiasach klamrowych) uprzejmie stosujesz do wszystkich akapitów, a ten zestaw służy do czegoś innego.
W najprostszym przypadku możesz użyć nazwy tagu jako selektora, do którego muszą być zastosowane reguły języka CSS, ujętego w nawiasy klamrowe, które otwierają się zaraz po nazwie selektora. W naszym przykładzie nazwa znacznika akapitu „P” jest używana jako selektor. Bardziej szczegółowo o selektorach w języku znaczników stylu omówimy w następnym artykule (patrz link powyżej).
Podsumowując sposób osadzania kodu CSS w dokumencie Html - wszystkie reguły stylów potrzebne do tego dokumentu zostaną opisane w jednym tagu Style, a nie w wielu różnych elementach, jak miałoby to miejsce przy użyciu opisanej metody zagnieżdżania tuż powyżej.
Przenoszenie arkuszy stylów CSS do osobnego pliku za pomocą Link
Ostatnim sposobem na zintegrowanie kodu stylu z dokumentem internetowym jest metoda wiązania. Najprostszym sposobem zilustrowania tej metody jest:
Jego główna różnica w stosunku do metod omówionych powyżej (zagnieżdżenia i osadzania) polega na tym, że podczas korzystania z metody linkowania wszystkie zasady języka CSS umieszczone w osobnym pliku zewnętrznym. Znowu będzie to tekst (jak każdy dokument HTML) i zwykle ma rozszerzenie .css, aby go otworzyć lokalny komputer pod Kontrola systemu Windows można przypisać program specjalny ().
W przypadku korzystania z zewnętrznego pliku CSS, specjalne Tag linku, który jest ponownie zapisywany między otwierającym i zamykającym elementem Head w nagłówku strony internetowej. Link należy do kategorii niewidocznej w przeglądarce.
W tym przypadku przeglądarka znajdzie określony plik arkusza stylów (zanim zostanie określony w atrybucie Href znacznika Link), załaduje go i zastosuje określone w nim reguły języka CSS do projekt zewnętrzny aktualny dokument html.
Ogólnie rzecz biorąc, linkowanie jest bardzo podobne do opisanego nieco wcześniej użycia tagu Style, ale pozwala znacznie przyspieszyć ładowanie stron witryny i zmniejszyć obciążenie sprzętu do komunikacji internetowej.
W przypadku korzystania z elementu Style (metoda osadzania) przeglądarka będzie musiała każdorazowo wczytać, wraz z kodem HTML dokumentu, reguły CSS i selektory do niego podłączone, a w przypadku korzystania z zewnętrznego pliku arkusza stylów, przeglądarka musi załadować Style.css tylko raz i dopiero wtedy pobrać go z własnej pamięci podręcznej (obszar na dysku twardym komputera użytkownika) podczas projektowania innych stron w witrynie.
Atrybut type=”text/css” tagu Link oznacza, że ta treść multimedialna będzie niczym więcej jak językiem znaczników stylu. Ale także przy łączeniu pliku CSS i dokumentu HTML jest on używany atrybut Rel z wartością Stylesheet. Rzecz w tym, że Link (hiperłącze usługi) można wykorzystać do zupełnie innych celów.
Jeśli spojrzysz na kod źródłowy tej strony w przeglądarce, zobaczysz, że obszar Head zawiera kilka różnych tagów Link:
A cel każdego z tych hiperłączy usług jest określony przez wartość Atrybut relacyjny. Na przykład, rel="shortcut icon" służy do określenia ścieżki do pliku, a rel="alternate" może służyć do wskazania alternatywnej wersji strony (przykładem alternatywnej reprezentacji dokumentu HTML będzie ) .
Cóż, w przypadku użycia atrybutu rel="stylesheet" w Linku, prosimy przeglądarkę ścieżka do pliku arkusza stylów(w atrybucie Href ścieżka ta może być określona w formie bezwzględnej lub względnej). Tych. za pomocą atrybutu Rel mówimy przeglądarce, jak będzie wyglądał plik, do którego ścieżka jest określona w Href (arkusz stylów - z CSS).
W witrynach metoda wiązania jest prawie zawsze używana CSS i Html (zewnętrzny plik arkusza stylów). Atrybuty stylu i znaczniki są zwykle używane tylko do testowania, chociaż mogą wystąpić takie specyficzne zadania, gdy ich użycie jest uzasadnione (na przykład przy dekorowaniu). Ale w prawdziwej pracy na stronach używane są pliki zewnętrzne, tj. metoda łączenia.
W tym celu pozwolę sobie odejść i przysięgam, że obiecuję, że kontynuacja nastąpi w najbliższej przyszłości. Po raz kolejny nauka CSS jest zwykle dużo trudniejsza niż nauka HTML, więc postaram się być jak najbardziej szczegółowy i opisowy.
Powodzenia! Do zobaczenia wkrótce na stronie bloga
Możesz być zainteresowany
Styl listy (typ, obraz, pozycja) - reguły CSS do dostosowywania wyglądu list w kodzie HTML 
Wyświetlanie (block, none, inline) w CSS - ustaw sposób wyświetlania elementów HTML na stronie internetowej 
Do czego służy CSS, jak połączyć kaskadowe arkusze stylów z dokumentem HTML oraz podstawy składni tego języka 
Tło w CSS (kolor, pozycja, obraz, powtórzenie, załącznik) - wszystko do ustawienia koloru tła lub obraz tła Elementy HTML 
Priorytety w Css i ich wzrost ze względu na Ważne, łączenie i grupowanie selektorów, stylów użytkownika i autora 
Wysokość, szerokość i przepełnienie - reguły CSS opisujące obszar treści w układzie blokowym 
Jednostki rozmiaru (piksele, Em i Ex) oraz dziedziczenie reguł w CSS Inny projekt do wnętrz i Zewnętrzne linki przez CSS 
Selektory pseudoklas i pseudoelementów w CSS (hover, first-child, first-line i inne), relacje między znacznikami kodu HTML 
Płynne i przejrzyste w CSS - narzędzia do układania bloków
Być może słyszałeś wcześniej o CSS, ale nie wiesz, co to jest? W tym samouczku dowiesz się, czym jest CSS i co może dla Ciebie zrobić.
CSS to skrót od C rosnąco S styl S kapelusze/Kaskadowe arkusze stylów.
Co możesz zrobić z CSS?
CSS to język stylów, który definiuje renderowanie dokumentów HTML. Na przykład CSS zajmuje się czcionkami, kolorem, marginesami, liniami, wysokością, szerokością, obrazami tła, pozycjonowaniem elementów i wieloma innymi rzeczami. Bądź cierpliwy i zobacz!
HTML może być (błędnie) używany do projektowania stron internetowych. Ale CSS daje więcej mocy, jest bardziej precyzyjny i rozbudowany. CSS jest obecnie obsługiwany przez wszystkie przeglądarki (przeglądarki).
Wystarczy kilka lekcji z tego samouczka, aby stworzyć własne arkusze stylów i użyć CSS, aby Twoja witryna wyglądała świetnie.
Jaka jest różnica między CSS a HTML?
HTML służy do strukturyzowania zawartości strony. CSS służy do formatowania tej uporządkowanej treści.
Zgadzam się, to brzmi trochę szalenie. Ale proszę czytaj dalej. Wkrótce wszystko stanie się jasne.
Dawno temu, kiedy Madonna była dziewicą, a facet o imieniu Tim Berners Lee wynalazł sieć WWW, HTML był używany tylko do wyświetlania tekstu strukturalnego. Autor mógł jedynie oznaczyć tekst: „to jest nagłówek” lub „to jest akapit” za pomocą znaczników HTML, takich jak
oraz
Jako projektanci stron internetowych zaczął szukać sposobów formatowania dokumentów online. Aby sprostać rosnącym wymaganiom konsumentów, twórcy przeglądarek (wtedy Netscape i Microsoft) wymyślili nowe tagi HTML, takie jak , które różniły się od oryginalnych tagów HTML tym, że zostały zdefiniowane wygląd zewnętrzny, a nie struktura.
Zaowocowało to również oryginalnymi znacznikami strukturalnymi, takimi jak