Każdy, kto zajmuje się projektowaniem lub tworzeniem stron internetowych, natknie się na termin "semantyczny" w odniesieniu do HTML5 i ogólnie Internetu. Ten często problematyczny termin jest zrozumiale mylący dla wielu z nas, szczególnie, że istnieje wyraźny brak konsensusu co do jego definicji w pewnych kontekstach.

W tym artykule omówimy, co czyni HTML5 bardziej semantycznym niż jego poprzednicy, określając, co to oznacza dla rozwoju sieci teraz i w przyszłości.

Semantyka dotyczy znaczenia

Pojęcie semantyki pochodzi z dziedziny językoznawstwa poświęconego badaniu znaczenia. W językach naturalnych, takich jak angielski, rozróżniamy składnię (lub gramatykę) i znaczenie. Jeśli myślisz o zdaniu, znaczenie ma związek z tym, jak ludzie je interpretują:

"Mężczyzna rzucił komputer przez okno."

Semantyka odnosi się do aspektu zdania, które pozwala ludziom czytającym go zrozumieć przekaz zawarty w nim. Wraz ze składnią semantyka stanowi dużą część tego, co ułatwia komunikację za pośrednictwem języka. Kiedy mówimy o semantyki w odniesieniu do HTML, mówimy o komunikacji między programami komputerowymi, a nie ludźmi. Semantyczny HTML ma na celu przede wszystkim zwiększenie zakresu, w jakim aplikacje mogą przetwarzać lub interpretować treści internetowe. Weźmy na przykład następujący fragment strony sieci Web zawierający niektóre z dłuższych struktur HTML:

The man threw the computer through the window.

Elementy (i atrybuty) podają przeglądarce informacje o tym, jak zaprezentować zawartość użytkownikowi. Elementy akapitu będą domyślnie wyświetlane z białymi spacjami powyżej i poniżej, elementy obrazu są wyświetlane przy użyciu pliku obrazu zawartego w atrybucie src i tak dalej. Kiedy przeglądarka napotyka każdy z tych elementów, renderuje zawartość w określony sposób, który jest ostatecznie określony przez użyte znaczniki.

Struktury HTML już mają znaczenie

Ważne jest, aby zrozumieć, że HTML5 po raz pierwszy nie wprowadza semantyki do HTML. HTML ma już wbudowany poziom semantyki. Istniejące struktury HTML mają znaczenie w różnym stopniu. Jeśli spojrzysz na ten znajomy element HTML, o którym mowa w powyższym fragmencie, zobaczysz, co mam na myśli:

Chociaż jest to skrót, nazwa elementu img wskazuje coś znaczącego na treść tagu, tj. Że jest obrazem. W ten sposób można myśleć o semantycznym aspekcie HTML jako podobnym do metadanych, ponieważ znacznik elementu i nazwy atrybutów opisują dane (dane na stronie internetowej są elementami treści i atrybutów).

Pamiętasz, kiedy zaczęliśmy oddzielać treść od stylu?

Niektóre struktury, których użyliśmy w HTML, informują przeglądarkę, jak stylizować elementy treści na stronie. W miarę upływu czasu byliśmy zachęcani do oddzielania formatowania strony od jej treści.

Na przykład zamieniliśmy tag i na em, co jest bardziej znaczące i nie informuje przeglądarki w jaki sposób wyświetlić tekst wewnątrz elementu. Celem używania em zamiast "i" jest przekazywanie informacji o naturze elementu treści, a nie informacji o stylizacji. Im oczywiście wpływa na styl, który jest głównym powodem, dla którego go używamy, jednak pozostawia szczegóły stylu do przeglądarki i / lub kodu CSS idealnie oddzielone od znaczników strony.

Semantyczny HTML5 to większy krok w tym procesie. Ostatecznym celem jest stworzenie systemu, w którym aplikacje mają dostęp do większego poziomu znaczenia - to jednak nie jest SI, chodzi tylko o dołączanie opisowych informacji o elementach danych w strukturach kodu je modelujących.

Czy to nie jest podobne do XML?

Jeśli używasz XML w przeszłości, będziesz miał trochę znajomości pojęć w semantycznych znacznikach. Na przykład, podczas projektowania dokumentu XML (lub schematu) dla zestawu danych, wybierasz elementy i atrybuty do modelowania elementów w danych. Idealnie nazwy elementów i atrybutów definiują elementy danych w znaczący sposób:

Jim Smith23 November 2012

Deweloper wybrał nazwy, które intuicyjnie opisują modelowane wartości danych. W HTML5 nie można wybrać własnych elementów, ponieważ nie można go swobodnie rozszerzać. Struktury do tego wybrane mają po prostu bardziej nieodłączne znaczenie w porównaniu z poprzednimi wersjami.

Nawiasem mówiąc, istnieją różne rodzaje znaczeń

Mówiliśmy o znaczeniu, ale w rzeczywistości istnieją różne sposoby, w których element lub inny fragment kodu może mieć znaczenie.

Znacznik img ma znaczenie, ponieważ mówi coś o treści elementu, opisując, co to jest.

Niektóre z nowych elementów HTML5, takich jak nagłówek i stopka, mają znaczenie, ponieważ wskazują coś na temat roli lub celu elementu w ogólnej strukturze strony.

Jak to wszystko ma związek z kodem HTML5?

Co zatem oznacza ten udoskonalony znaczący aspekt HTML5? Zasadniczo HTML5 ma kilka nowych elementów, dzięki którym możesz umieścić więcej informacji semantycznych w znacznikach strony. Jest w nim mnóstwo nowych elementów, z których tylko kilka spojrzymy tutaj. Tag nagłówka wskazuje informacje o zawartości elementu i jego roli w strukturze strony:

Man in Window Outburst

Element nagłówka może zawierać inne elementy i zwykle zawiera co najmniej jeden element nagłówka. Znacznik stopki jest podobny, a znacznik ponownie wyraża coś znaczącego na temat treści elementu i jego związku z resztą strony:

Znacznik nav opisuje przeznaczenie sekcji strony, tzn. Zawiera linki nawigacyjne:

Element section zwykle zawiera grupę elementów o tej samej tematyce, często razem z nagłówkiem. Element section ma dość abstrakcyjne znaczenie, ale ma sens:

What happened
Police officers apprehended the man at 3.30pm...

Element article jest podobny, używany do definiowania elementu, który jest samowystarczalny:

The Law
The law on throwing items through windows is very clear...

Tag na bok wskazuje na rolę elementu względem jego kontekstu na stronie, jak w poniższej rozszerzonej wersji kodu artykułu powyżej:

The Law
The law on throwing items through windows is very clear...

To tylko niektóre z nowych elementów HTML5 oferujących semantyczne ulepszenia, inne zawierają elementy multimedialne i dane wejściowe użytkownika, a także dodatkowe atrybuty. Włączenie danych mikro do HTML5 zapewnia także szerszy zakres uwzględniania informacji semantycznych na stronach internetowych i aplikacjach. Jak widać, niektóre z tych nowych elementów mają znaczenie zarówno pod względem treści, jak i struktury.

Pomyśl o niektórych starszych tagach (z których wiele wciąż jest w pobliżu), takich jak div. Element div jest po prostu kawałkiem strony - nazwa tagu nie mówi nam absolutnie nic o zawartości elementu lub jego roli na stronie. Innymi słowy, znacznik przekazuje bardzo małe znaczenie. Wiele z długich tagów nie ma właściwie żadnego znaczenia lub w niektórych przypadkach ogólne, luźno określone znaczenie. Każdy element na stronie internetowej był zawarty w jednym z zestawu bardzo ogólnych kategorii elementów. Kluczem do uczynienia czegoś znaczącym jest bycie konkretnym. Nowe tagi HTML5 pozwalają nam definiować treść internetową przy użyciu bardziej szczegółowych terminów.

Czy dodawałeś już znacznik do swojego znacznika?

Jeśli tworzysz strony sieci Web przez odpowiedni czas, niektóre z nowych elementów HTML5 mogą dla Ciebie zadzwonić. W rzeczywistości programiści już budowali poziom znaczenia na swoich stronach, używając atrybutów elementów, w szczególności klasy i identyfikatora. Na przykład, jeśli kiedykolwiek podałeś elementowi atrybut klasy lub ID "stopki" lub "nagłówka", z pewnością nie jesteś sam. W HTML5 znaczenie to jest przekazywane w samym znaczniku, a nie w wartościach atrybutów. Jeśli używałeś tych atrybutów do implementacji określonych właściwości stylizacji, efektywnie robiłeś coś ręcznie, wbudowanego w HTML5 po wyjęciu z pudełka - a z elementami semantycznymi są dodatkowe korzyści ...

Dlaczego to robimy?

OK, wszystko jest w porządku, ale można by ci wybaczyć pytanie, dlaczego zamierzamy rozwiązać ten problem z powodu czegoś, co wydaje się w istocie pojęciowe / akademickie. Możecie być pewni, że istnieją dobre powody do poruszania się w kierunku bardziej semantycznym. Jak widzieliśmy, semantyka HTML5 pozwala nam tworzyć kod znaczników opisujący elementy treści. Ten opisowy aspekt kodu pozwala innym programom na bardziej efektywne wykorzystanie treści z różnymi aplikacjami:

• Możliwość przeszukiwania jest przekształcana przez postęp semantyki sieci. Znaczniki semantyczne umożliwiają przeszukiwanie zawartości / danych. strony internetowe nie są oczywiście przeglądane w przeglądarce internetowej, są również przetwarzane przez inne programy, takie jak roboty wyszukiwarek. Ponieważ znaczniki semantyczne mają na celu umożliwienie aplikacjom interpretowania stron internetowych w bardziej znaczący sposób, powinno to w znacznym stopniu poprawić jakość funkcji wyszukiwania / zapytania. W tekście Tim Berners-Lee często cytowanym "marzenie" o Internecie, komputery będą w stanie analizować wszystkie dane online - może to być daleko, ale semantyczna siła HTML5 jest motywowana przez ten typ długoterminowego celu .
• Dostępność jest jedną z głównych zalet semantycznych znaczników. Narzędzia ułatwień dostępu mogą w znacznym stopniu skorzystać z bardziej znaczącego dostępu do treści internetowych. Takie narzędzia obejmują dodatki do przeglądarek dla użytkowników z ograniczonym wzrokiem, słuchu, trudnościami w nauce i tak dalej. Znaczniki semantyczne umożliwiają aplikacjom przetwarzanie treści internetowych i wyników w celu przekazania pierwotnej wiadomości użytkownikowi w sposób odpowiadający ich potrzebom. Ta koncepcja wykracza poza dostęp do obszarów elastyczności urządzeń, dzięki takim technikom, jak projektowanie responsywne. Rezultatem jest bardziej całościowe podejście do dostarczania treści internetowych.
• Spójność powinna być rzeczywistym dobroczyńcą semantycznego HTML5. Znaczniki semantyczne poprawiają spójność, ponieważ elementy treści są logicznie przypisywane do poszczególnych typów elementów. Jest to sprzeczne ze starszymi modelami, w których przedmioty często mogą logicznie być zawarte w jednym z wielu różnych typów elementów - wybór nie był wskaźnikiem charakteru treści lub jej roli na stronie, było tylko odzwierciedleniem wyboru dewelopera. Dzięki semantycznemu znacznikowi, bardziej szczegółowy poziom znaczenia sprawia, że ​​te wybory są mniej darmowe, ale wyniki z natury bardziej wiarygodne, jeśli chodzi o interpretację przez przeglądarkę lub inne aplikacje.

Deweloperzy napędzają postęp technologii internetowych

Kiedy byłem na uniwersytecie (kilka lat temu), pamiętam, że wykładowca mówił nam, że pole badań akademickich zostanie zrewolucjonizowane przez postępy w poszukiwaniach. Mówił o Semantic Web - nie trzeba dodawać, że jeszcze się to nie wydarzyło. Podejmowanie jakiegokolwiek ukierunkowanego nowego kierunku z czymś równie różnorodnym i niekonsekwentnym jak World Wide Web zawsze będzie trudnym zadaniem. Jednak, przynajmniej biorąc pod uwagę koncepcję znaczników semantycznych, jako programiści możemy wpływać na ruch w kierunku przyszłej sieci, która jest bardziej dostępna, przeszukiwalna i spójna dla wszystkich użytkowników.

Czy używasz elementów semantycznych HTML5? Czy skupienie się na semantykach daje produkt wyższej jakości? Daj nam znać, co myślisz w komentarzach.

Wyróżniony obraz / miniatura, wykorzystuje obraz języka przez Shutterstock.