Semantyka, a składnia

pytanie zadane 2 września 2017 w HTML i CSS przez niezalogowany

Szanowni Forumowicze, przeczytawszy kilka definicji semantyki i składni w programowaniu i próbie zrozumienia tych słów - jestem zmuszony prosić Was specjalistów w tej dziedzinie o wytłumaczenie mi tych dwóch zagadnień, ponieważ nie jestem w stanie tego ogarnąć. Na początku myślałem, że składnia to te wszystkie znaczniki, tagi, komendy w danym języku programowania (np. w html <div> <head>), a semantyka określa nam jak kod został napisany czy poprawnie czy niepoprawnie, czy ma on sens, jest wydajny dla np botów z Google (np <header>).

1 odpowiedź

odpowiedź 2 września 2017 przez Alex.Ironside Stary wyjadacz (14,920 p.)
wybrane 2 września 2017

Najlepsza

Semantyka - Opisanie strony w odpowiedni sposob, np naglowki ida do h1,h2 itd.

Skladnia (ang. syntax) - kazdy div, h1 itd nalezy zamknac. W HTML jest to nieco powiazane wiec podam przyklad z javaScriptu

console.log ("Ziemniak");

jest poprawne skladniowo.Natomiast:

console-log [ /Ziemniak/ ] '

Absolutnie nie jest.

Bledy semantyczne sprawia ze Twoja strona bedzie slabo indexowana.

Bledy skladniowe sprawiaja ze program sie nie skompiluje/wyrzuci bledy lub/i ostrzezenia/strona sie rozpadnie wizualnie.

HTML ma tendencje do wybaczania bledow skladniowych i robi co moze, aby i tak wygenerowac strone, ale widok bedzie to potworny, ze o pracy z CSS nie wspomne.

Porada ode mnie. Semantyka i skladnia brzmia podobnie ale zacznij sb mowic np syntax i od razu sie wyklaruje roznica. O ile wiem (nie ufaj tylko mi, sprawdz gdzie indziej, jezeli sie myle prosze mnie poprawic) semantyka tyczy sie jedynie html i xml i jezykow opisowych.

Edit:

Po zastanowieniu sie wymyslilem przyklad dobrej i zlej semantyki i skladni tez w HTML

Dobra semantyka:

<section>
    <h1>Ziemniak</h1>
    <article>
         <h2>Ziemniak vol2</h2>
         <p>Ziemniaklipsum</p>
     </article>
</section>

==============================

Zla semantyka:

<section>
    <div>
         Ziemniaklipsum
     </div>
</section>

(unikaj divow, nie maja znaczenia semantycznego)

Jak widac, brak znacznika <p>, brak naglowkow, no koszmar

======================

Dobra skladnia (syntax) w HTML

<section>
    <h1>Ziemniak</h1>
    <article>
         <h2>Ziemniak vol2</h2>
         <p>Ziemniaklipsum</p>
     </article>
</section>

======================

Zla skladnia (syntax) w HTML:

<section> 
    Ziemniak</h1>
    <article>
         <h2>Ziemniak vol2
         Ziemniaklipsum</p>
    </section>
</article>

Jak widzisz section i article sa wymieszane, h2 nie zamkniete, h1 i p nie otwarte, ponownie koszmar.

Mam nadzieje ze ta mini Biblia pomogla ;)

komentarz 2 września 2017 przez niezalogowany

Section, article, h2 są dla botów Googla, żeby był dla nich czytelny? Bo równie dobrze mogę napisać bez tych article, section a strona wyglądu nie zmieni, tylko że wtedy strona będzie miała złą semantykę cn? A po co jest semantyka? Tak czy siak dzięki za odpowiedź bo wiele się dowiedziałem :).

komentarz 2 września 2017 przez Alex.Ironside Stary wyjadacz (14,920 p.)

Wszystkie (chyba) znaczniki poza <div> i <span> sa opisowe i maja swoje znaczenie. Tak jak po Polsku inaczej zaakcentujesz to co w zdaniu najwazniejsze, tak z naglowkow h1 bedzie najwazniejszy. Poczytaj co idzie gdzie, ja o SEO wiem osobiscie prawie nic.

Jezeli zamienisz <section> na <div id="section"> i w CSS i JS zlapiesz wlasnie div#section wygladowo sie nie zmieni, syntax/skladnia bedzie w porzadku, validatory bledow nie wyrzuca. Jednak pamietaj ze div i span nie ma wartosci semantycznej, czyli nie pomagaja googlowi/duckduckgo/bing czytac. Cos jak pisanie powiesci bez interpunkcji. Informacja jest. Ale jezeli chcesz zeby ktos to przeczytal musisz mu pomoc to zrozumiec poprzez interpunkcje/semantyke.

Semantyka jest dla WYSZUKIWAREK. Google to tylko jedna z nich. Pamietaj o tym, bo moze Cie to kiedys uderzyc.

Semantyka mowi im jak cos jest wazne i daje im kontekst, pomaga w poprawnym przetrawienu informacji, i odpowiednim zaindeksowaniu.

W skrocie: Jezeli semantyka jest dobra to Twoja strona bedzie wysoko w wynikach wyszukiwarek, jezeli semantyka jest tragiczna, badz jej brak, moze byc na stronie milionowej/nie bedzie jej wcale.

Section, article, p, h1, h2 to tylko jedne z wieeeeelu znacznikow HTML ktore maja swoje znaczenie. Jest ich o niebo wiecej. Np <em>, <strong>, <small>.

<header> <main> <footer> i <nav> sa bardzo wazne dla poprawnego indexowania. Podobnie naglowki i <p>. Ale o tym juz poczytaj gdzie indziej bo na ten temat sa ksiazki pisane, a ja takiej wiedzy nie posiadam