Semantyka języka HTML - Dlaczego jest to takie ważne?

[Writen]

 

Witajcie. Przyszedłem tu do was dzisiaj żeby zaprezentować wam krótki artykuł z mojego bloga na temat semantyki języka html.

 

http://idea-center.pl/semantyka-jezyka-html/

 

Jest on przeznaczony dla bardzo początkujących osób, czyli dla wielu z was

Sam temat semantyki html'a jest nawet obszerny, dlatego może poruszę go jeszcze w innych artykułach.

 

Serdecznie zapraszam do uważnego przeczytania i komentowania.

 

W tym krótkim artykule opiszę oraz wyjaśnię rzecz, która jest często mało zrozumiała dla początkujących twórców stron internetowych. Chodzi tutaj o poprawność semantyczną pisanego kodu, czyli o coś co jest bardzo ważne dla optymalizacji i pozycjonowania strony.
 
Semantyka, co to takiego?
W skrócie ujmując, semantyka języka html to stosowanie znaczników zgodnie z ich przeznaczeniem.Łączy się to również z aktualnie obowiązującymi standardami, które narzuca nam konsorcjum World Wide Web (W3C). Jeśli nie będziemy odpowiednio korzystać ze znaczników to w najgorszym wypadku nasza strona będzie się źle wyświetlała w przeglądarce oraz negatywnie to wpłynie na pozycjonowanie strony w wyszukiwarkach. Każdy twórca powinien za wszelką cenę unikać takich sytuacji dlatego poprawność semantyczną pisanego kodu powinien stawiać na pierwszym miejscu.
 
2 przykłady - Czyli najczęściej popełniane błędy
 

Tabelki czy kontenery?
Bywa tak, że starsze osoby (ale również początkujący) mają nawyk tworzenia struktury strony na tabelkach. Jest to błędny sposób. Wczytując się bowiem w dokumentację html'a możemy dowiedzieć się, że tabele powinny być wykorzystywane do prezentacji danych takich jak tekst, grafika, formularze i inne tabele oraz że nie powinny być stosowane do budowania layoutu strony.

The HTML table model allows authors to arrange data -- text, preformatted text, images, links, forms, form fields, other tables, etc. -- into rows and columns of cells. (...) Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media.

Jak zatem powinna być zbudowana strona? Oczywiście na elementach blokowych, którymi są kontenery (np. <div>). Jest to jak najbardziej poprawny sposób i należy się go trzymać.
 

Menu na wykazach. Czy na pewno to takie oczywiste?
Wiele razy spotkałem się z nieświadomością początkujących webmasterów, że menu powinno się robić na wykazach. Osoby takie twierdziły, a czasem wręcz upierały się, że wykazy to tylko masa zbędnego kodu i proponowały wykorzystanie znacznika nowej linii (<br>). Takie rozumowanie jest oczywiście błędne. A mimo, że takie menu będzie spełniało swoją rolę może być z nim więcej problemów niż pożytku. Poprawnie zbudowane menu powinno być listą i w uproszczeniu wyglądać tak:
 

<ul> 
<li><a href="index.html">Home</a></li> 
<li><a href="forum.html">Forum</a></li> 
<li><a href="blog.html">Blog</a></li> 
<li><a href="contact.html">Contact</a></li> 
</ul>

 
 
Sposoby te mogą się wydawać troszkę trudne, ale są takie tylko na pozór, tak na prawdę znacznie ułatwiają i przyśpieszają pracę. Tworzenie stron korzystając z kontenerów daje bardzo wiele możliwości. Dzięki nim strona może wyglądać estetyczniej i bardziej profesjonalnie niż korzystając z tabel. Tabelki więc zostawmy do prezentacji danych. Natomiast menu zbudowane jako lista jest bardzo elastyczne. Korzystając z tego samego kodu html możemy zrobić menu pionowe jak i poziome, a przy tym będzie ono bardziej przejrzyste i łatwiejsze w rozbudowie, a także w zmianie jego wyglądu. Wystarczy umiejętne zastosowanie kaskadowych arkuszy stylów (CSS).
 
Więcej przykładów?
Aby dowiedzieć się jak dany znacznik powinien być wykorzystywany warto odwiedzić stronę www.w3schools.com/html/default.asp, jest tam specjalnie przygotowany tutorial, w którym są opisane wszystkie znaczniki oraz sposoby ich używania. Jest tam też wiele przykładów na których można się wzorować tworząc własną stronę internetową. Jeśli więc chcemy, aby nasza strona była napisana poprawnie to należy stosować się do przedstawionych tam instrukcji.
A dla osób bardzo początkujących oraz zaczynających dopiero swoją przygodę z tworzeniem stron polecam kurs: www.kurshtml.edu.pl - znajdziecie tam wszystko co należy wiedzieć o HTML, CSS i JavaScript.