{"id":417,"date":"2021-04-21T20:17:12","date_gmt":"2021-04-21T18:17:12","guid":{"rendered":"http:\/\/dziewczynanafroncie.pl\/?p=417"},"modified":"2021-04-28T18:24:58","modified_gmt":"2021-04-28T16:24:58","slug":"semantyczny-html-jako-znaczacy-aspekt-stron-internetowych","status":"publish","type":"post","link":"https:\/\/dziewczynanafroncie.pl\/semantyczny-html-jako-znaczacy-aspekt-stron-internetowych\/","title":{"rendered":"Semantyczny HTML jako znacz\u0105cy aspekt stron internetowych"},"content":{"rendered":"\n

Dlaczego u\u017cywanie znacznik\u00f3w semantycznych jest wa\u017cne przy projektowaniu stron internetowych. Na wst\u0119pie co to w og\u00f3le jest? Semantyka w j\u0119zyku programowania definiuje precyzyjnie znaczenie poszczeg\u00f3lnych symboli oraz ich funkcj\u0119 w programie innymi s\u0142owy semantyka <\/strong>definiuje precyzyjnie znaczenie poszczeg\u00f3lnych symboli oraz ich funkcj\u0119.<\/p>\n\n\n\n\n\n\n\n

1. Dlaczego semantyczne znaczniki s\u0105 wa\u017cne podczas projektowaniu stron ?<\/h5>\n\n\n\n

Znaczniki semantyczne to spos\u00f3b pisania i konstruowania kodu HTML (Hypertext Markup Language) w taki spos\u00f3b, aby wzmacnia\u0142 semantyk\u0119 lub znaczenie tre\u015bci, a nie jej wygl\u0105d. W szerszym znaczeniu oznacza to, \u017ce architektura witryny oddziela form\u0119 prezentacj\u0119 od jej tre\u015bci. Oznacza to nic innego jak to, \u017ce HTML jest u\u017cywany do tworzenia struktury, a CSS jest u\u017cywany do tworzenia wygl\u0105du strony internetowej.<\/p>\n\n\n\n

Semantyka i dost\u0119pno\u015b\u0107 s\u0105 z za\u0142o\u017cenia cz\u0119\u015bci\u0105 HTML, poprzez to jak zosta\u0142 zaprojektowany. Lecz nie s\u0105 przydatne, chyba \u017ce zosta\u0142y poprawnie zaimplementowane. Wykorzystywanie znacznik\u00f3w semantycznych oznacza zrozumienie hierarchii tre\u015bci szablonu strony i sposobu, w jaki b\u0119dzie ona odczytywana zar\u00f3wno przez u\u017cytkownik\u00f3w, jak i przegl\u0105darki. Patrz\u0105c na wiele z nich, ich u\u017cycie mo\u017ce wydawa\u0107 sensowne. Dla przyk\u0142adu, kiedy w tre\u015bci chcesz zawrze\u0107 nag\u0142\u00f3wek, u\u017cyjesz znacznika nag\u0142\u00f3wka ( <h1>, <h2> ... <h6> <\/code> itp.). Lub inny przyk\u0142ad, kiedy piszesz akapit, u\u017cyjesz z kolei znacznika akapitu <p><\/code>. Znaczniki semantyczne oznaczaj\u0105, \u017ce tagi HTML nigdy nie s\u0105 dobierane na podstawie sposobu, w jaki maj\u0105 tworzy\u0107 wygl\u0105d w przegl\u0105darce internetowej lecz na podstawie ich wagi oraz z uwzgl\u0119dnieniem struktury tre\u015bci, kt\u00f3r\u0105 maj\u0105 w sobie zawiera\u0107.<\/p>\n\n\n\n

Chocia\u017c HTML zawiera\u0142 znaczniki semantyczne od samego pocz\u0105tku, pojawienie si\u0119 HTML5 przynios\u0142o ze sob\u0105 jeszcze wi\u0119ksz\u0105 ich ilo\u015b\u0107, dla przyk\u0142adu wprowadzono nowe tagi takie jak <section><\/code>, <article><\/code>, <footer> <\/code>, <nav><\/code> oraz <aside><\/code> . Ich celem jest u\u0142atwienie przegl\u0105darkom, developerom i robotom indeksuj\u0105cym rozr\u00f3\u017cniania r\u00f3\u017cnych typ\u00f3w danych kt\u00f3re zawieraj\u0105. Wszystkie te znaczniki wyja\u015bniaj\u0105 przegl\u0105darce, kt\u00f3ra je interpretuje, jakie informacje si\u0119 w nich znajduj\u0105, a tak\u017ce swoje znaczenie. Wcze\u015bniej struktura strony mog\u0142a zawiera\u0107 tylko elementy <div><\/code>, kt\u00f3re nie dostarczaj\u0105 \u017cadnych wymienionych powy\u017cej informacji wyszukiwarkom, programistom b\u0105d\u017a te\u017c robotom indeksuj\u0105cym, znaczenia sekcji strony dla kt\u00f3rej zosta\u0142y u\u017cyte. Stosuj\u0105c znaczniki semantyczne, mo\u017cemy bardziej precyzyjnie okre\u015bli\u0107 og\u00f3ln\u0105 zawarto\u015b\u0107 i napisa\u0107 j\u0105 w spos\u00f3b zrozumia\u0142y dla przegl\u0105darki w celu odczytania.<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n
2. Zapytasz po co si\u0119 przejmowa\u0107? <\/h5>\n\n\n\n

Mo\u017ce my\u015blisz sobie: \u201eDlaczego powinno mnie obchodzi\u0107, jak przegl\u0105darki odczytuj\u0105 moj\u0105 stron\u0119 internetow\u0105? Czy nie jest to co\u015b, o co tylko programi\u015bci musz\u0105 si\u0119 martwi\u0107? <\/strong>\u201d. Zaskocz\u0119 Was kr\u00f3tka odpowiedzi\u0105, kt\u00f3ra brzmi: nie<\/strong>. Ka\u017cdy, kto tworzy tre\u015bci dla Twojej witryny powinien zrozumie\u0107, jak powinna wygl\u0105da\u0107 prawid\u0142owa struktura strony internetowej oraz jakie korzy\u015bci p\u0142yn\u0105 z pisania tre\u015bci do niej dopasowanych dopasowanych. Istniej\u0105 trzy g\u0142\u00f3wne powody, dla kt\u00f3rych wa\u017cne jest, aby witryna by\u0142a czytelna zar\u00f3wno dla ludzi, jak i przegl\u0105darek: SEO<\/strong>, dost\u0119pno\u015b\u0107<\/strong> i utrzymanie<\/strong>.<\/p>\n\n\n\n

SEO<\/h6>\n\n\n\n

Termin \u201eSEO\u201d jest obecnie cz\u0119sto u\u017cywany w projektowaniu stron internetowych i istnieje wiele b\u0142\u0119dnych przekona\u0144 na temat jego rzeczywistego znaczenia. Najwa\u017cniejszym aspektem naturalnego SEO jest pisanie warto\u015bciowych i unikatowych tre\u015bci. Zrozumienie i wykorzystanie znacznik\u00f3w semantycznych pomaga w zapewnieniu, i\u017c warto\u015bciowe tre\u015bci dotr\u0105 do docelowych odbiorc\u00f3w. Wyszukiwarki bior\u0105 szacuj\u0105 s\u0142owa kluczowe, pod wzgl\u0119dem ich umiejscowienia w szablonie HTML. Na przyk\u0142ad s\u0142owa kluczowe zawarte w znaczniku <h1><\/code> maj\u0105 wi\u0119ksze znaczenie ni\u017c te zawarte w <H6><\/code>. Dlatego dobr\u0105 praktyk\u0105 jest u\u017cycie semantycznego kodu HTML, aby pom\u00f3c wyszukiwarkom w ustalaniu pozycji Twojej strony na li\u015bcie wyszukiwania, dzi\u0119ki u\u017cyciu najbardziej odpowiednich i znacz\u0105cych tre\u015bci na stronie. U\u017cywaj\u0105c tego wpisu blogu jako przyk\u0142adu:<\/p>\n\n\n\n

Znacznik <H1><\/code> to \u201eSemantyczny HTML jako znacz\u0105cy aspekt stron internetowych\u201d. Staramy si\u0119 u\u017cywa\u0107 s\u0142\u00f3w kluczowych zawartych w znacznikach semantycznych przy projektowanie stron internetowych, dzi\u0119ki temu wyr\u00f3\u017cnimy nasz\u0105 tre\u015b\u0107, poniewa\u017c jest to w\u0142a\u015bnie to czego szukaj\u0105 u\u017cytkownicy (bardziej ni\u017c \u201enie znacz\u0105ce strony\u201d). Zauwa\u017cysz, tak\u017ce, \u017ce ten nag\u0142\u00f3wek ma mniejszy nacisk wizualny, poniewa\u017c chocia\u017c ma to wi\u0119kszy sens dla wyszukiwarek, nie ma tak du\u017cego znaczenia dla ludzi, kt\u00f3rzy go czytaj\u0105.<\/p>\n\n\n\n

\u201eDlaczego u\u017cywanie znacznik\u00f3w semantycznych jest wa\u017cne przy projektowaniu stron internetowych.\u201d to <H2><\/code>. Jest mniej wa\u017cny w hierarchii tre\u015bci, ale ma wi\u0119ksze znaczenie wizualne. W tym wypadku ma to wi\u0119kszy sens dla u\u017cytkownika, a z kolei nie ma wi\u0119kszego znaczenia dla wyszukiwarek.<\/p>\n\n\n\n

Umieszczaj\u0105c najwa\u017cniejsze s\u0142owa kluczowe wy\u017cej w hierarchii, skutecznie informujemy wyszukiwarki, o czym jest Twoja strona i dlaczego osoby wyszukuj\u0105ce interesuj\u0105ce je s\u0142owa kluczowe by\u0142yby zainteresowane w\u0142a\u015bnie Twoj\u0105 tre\u015bci\u0105.<\/p>\n\n\n\n

3. Dost\u0119pno\u015b\u0107<\/h5>\n\n\n\n

Dost\u0119pno\u015b\u0107 jest cz\u0119sto dodatkiem przy projektowaniu stron internetowych. W miar\u0119 jak aplikacje internetowe sta\u0142y si\u0119 bogate w tre\u015bci oraz kreatywne pod wzgl\u0119dem interfejsu u\u017cytkownika, sta\u0142y si\u0119 mniej dost\u0119pne dla oko\u0142o 1 miliarda os\u00f3b niepe\u0142nosprawnych na \u015bwiecie. Tutaj z pomoc\u0105 przychodzi nam semantyczny HTML, kt\u00f3ry u\u017cywa element\u00f3w do okre\u015blonego celu, zar\u00f3wno ludziom, jak i przegl\u0105dark\u0105 \u0142atwiej jest go odczyta\u0107 i zrozumie\u0107.<\/p>\n\n\n\n

Dost\u0119pno\u015b\u0107 aplikacji nie tylko zapewnia r\u00f3wny dost\u0119p dla os\u00f3b niepe\u0142nosprawnych, ale tak\u017ce przynosi korzy\u015bci osobom pe\u0142nosprawnym, umo\u017cliwiaj\u0105c im dostosowywanie swoich do\u015bwiadcze\u0144 poprzez interakcje u\u017cytkownika. Korzystanie z semantycznego HTML przynosi korzy\u015bci szerokiemu gronu u\u017cytkownik\u00f3w, ale tak\u017ce klientom u\u017cytkownika, takich jak przegl\u0105darki bez arkuszy styl\u00f3w, przegl\u0105darki tekstowe, urz\u0105dzenia PDA i klienty poczty e-mail. Podsumowuj\u0105c stworzenie jasnej hierarchii dla strony pozwala innym narz\u0119dziom i urz\u0105dzeniom na prawid\u0142owe wy\u015bwietlanie Twoich tre\u015bci.<\/p>\n\n\n\n

4. Utrzymanie<\/h5>\n\n\n\n

U\u017cywanie znacznik\u00f3w semantycznych skutkuje bardzo przejrzystym, ustandaryzowanym kodem, a to oznacza, \u017ce na d\u0142u\u017csz\u0105 met\u0119 zaoszcz\u0119dzimy czas, a jak wiadomo czas to pieni\u0105dz. Czysty kod jest \u0142atwiejszy w utrzymaniu. Oznacza to r\u00f3wnie\u017c, \u017ce inny programista mo\u017ce spojrze\u0107 w projekt i pracowa\u0107 z kodem bez zamieszania, poniewa\u017c kod jest zorganizowany w spos\u00f3b logiczny. Inn\u0105 korzy\u015bci\u0105 zapewniaj\u0105c\u0105 oszcz\u0119dno\u015b\u0107 czasu wynikaj\u0105c\u0105 z pisania semantycznego jest zmiana zawarto\u015bci wygl\u0105du, kt\u00f3ry mo\u017cna \u0142atwiej aktualizowa\u0107. Poniewa\u017c zawarto\u015b\u0107 jest ca\u0142kowicie oddzielona od formy prezentacji wizualnej, mo\u017cesz zmienia\u0107 style bez zmian w strukturze lub stosowa\u0107 style do wielu typ\u00f3w element\u00f3w.<\/p>\n\n\n\n

Poniewa\u017c semantyczny HTML u\u017cywa element\u00f3w do okre\u015blonego celu, zar\u00f3wno ludziom, jak i przegl\u0105dark\u0105 \u0142atwiej jest go odczyta\u0107 i zrozumie\u0107<i><\/i><\/p><\/blockquote><\/figure>\n\n\n\n

5. P\u00f3jd\u017amy o krok dalej <\/h5>\n\n\n\n

Opr\u00f3cz pisania semantycznego HTML istnieje kilka bogatych, ustrukturyzowanych standard\u00f3w projektowych, kt\u00f3re u\u0142atwiaj\u0105 maszynom zrozumienie hierarchii tre\u015bci i wy\u015bwietlanie u\u017cytkownikom odpowiednich informacji. <\/p>\n\n\n\n

Kolejnym logicznym krokiem jest w\u0142\u0105czenie specyfikacji WAI-ARIA, znanej r\u00f3wnie\u017c jako Web Accessibility Initiative \u2014 Accessible Rich Internet Applications<\/strong>, dla Twojej witryny. WAI-ARIA pomaga uczyni\u0107 strony internetowe i aplikacje bardziej dost\u0119pnymi dla os\u00f3b niepe\u0142nosprawnych. Opiera si\u0119 na semantycznych podstawach HTML, kt\u00f3re tworzysz, dzi\u0119ki czemu narz\u0119dziom i urz\u0105dzeniom jest jeszcze \u0142atwiej tworzy\u0107 tre\u015bci zrozumia\u0142e dla ludzi dla ludzi.<\/p>\n\n\n\n

5. Buduj bardziej przejrzyste strony internetowe<\/h5>\n\n\n\n

Ostatecznie, najlepsz\u0105 strategi\u0105 zapewniaj\u0105c\u0105, \u017ce nasza tre\u015b\u0107 WWW b\u0119dzie u\u017cyteczna i widoczna w wyszukiwarkach w przysz\u0142o\u015bci, jest przede wszystkim przestrzeganie semantycznych praktyk znacznik\u00f3w internetowych oraz u\u017cywanie starannie ustrukturyzowanego i zweryfikowanego kodu.<\/p>\n\n\n\n

Komunikacja pomi\u0119dzy przegl\u0105dark\u0105 odczytuj\u0105c\u0105 kod a u\u017cytkownikiem jest g\u0142\u00f3wnym zadaniem projektant\u00f3w stron internetowych. Przez wi\u0119kszo\u015b\u0107 czasu projektuj\u0105c nasze strony my\u015blimy o komunikacji w kategoriach u\u017cywanych przez nas s\u0142\u00f3w, dobieranie tre\u015bci oraz element\u00f3w wizualnych, ale pami\u0119tajmy o tym i\u017c wa\u017cnym aspektem jest r\u00f3wnie\u017c sam kod, kt\u00f3ry tworzymy w\u0142a\u015bnie my sami. Semantyka dotyczy znaczenia, a pisanie kodu semantycznego oznacza tworzenie bardziej znacz\u0105cych stron internetowych…<\/p>\n","protected":false},"excerpt":{"rendered":"

Dlaczego u\u017cywanie znacznik\u00f3w semantycznych jest wa\u017cne przy projektowaniu stron internetowych. Na wst\u0119pie co to w og\u00f3le jest? Semantyka w j\u0119zyku programowania definiuje precyzyjnie znaczenie poszczeg\u00f3lnych symboli oraz ich funkcj\u0119 w programie innymi s\u0142owy semantyka definiuje precyzyjnie znaczenie poszczeg\u00f3lnych symboli oraz ich funkcj\u0119.<\/p>\n","protected":false},"author":1,"featured_media":427,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[19,29,27,28],"class_list":["post-417","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html-css","tag-html","tag-semantyka","tag-tagi","tag-znaczniki"],"_links":{"self":[{"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/posts\/417","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/comments?post=417"}],"version-history":[{"count":1,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/posts\/417\/revisions"}],"predecessor-version":[{"id":522,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/posts\/417\/revisions\/522"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/media\/427"}],"wp:attachment":[{"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/media?parent=417"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/categories?post=417"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/tags?post=417"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}