Wykryto działanie AdBlocka!

Prawdopodobnie masz właczonego Adblocka. Korzystanie z bloga jest całkowicie darmowe. Jeśli jednak chcesz docenić prace autora, wyłacz blokowanie reklam dla tej witryny, aby jeszcze bardziej zmotywowac autora do dalszej pracy oraz częstszej publikacji artykułów.

Dziękuje :)

Treść główna bloga

Artykuły

Dobre praktyki webmasterskie – przykazania webmastera


Przykazania webmastera - dobre praktyki webmasterskiePodczas tworzenia strony internetowej również obowiązują pewne reguły. Kod tworzony według określonych reguł pomyślnie przejdzie walidację oraz będzie cieszył oko webmastera. Jednak niestosowanie takich praktyk świadczy o braku profesjonalizmu oraz niewiedzy webmastera, a ponad to taki kod nie przejdzie walidacji. Postaram się w tym wpisie zgromadzić jak najwięcej dobrych praktyk webmasterskich..

Przykładowy kod strony internetowej: Kod na Githubie

Na co powinieneś zwracać uwagę podczas tworzenia stron WWW.
Dobre praktyki będę przedstawiał zgodnie z poniższym schematem:

  1. Nagłówek strony.( header )
  2. Ciało strony ( body )
  3. Stopka strony ( footer )
  4. Formularz kontaktowy
  5. Dane adresowe.
  6. Znaczniki, mające znaczenie dla SEO.
  7. Inne.

1. Nagłówek strony ( header )

Widzimy tu deklarację kodowania.
Ten typ deklaracji mówi przeglądarce, że dokument jest tworzony za pomocą HTML5.

Następnie mamy znacznik

Dzięki niemu pojawi się miniaturowe obrazek (16×16).

2. Ciało dokumentu

Stronę w HTML5 budujemy za pomocą znaczników <section>, <aside>, <footer>, <header>.
Obrazki umieszczamy w znaczniku <figure>.

Znacznik rozpoczyna właściwa treść dokumentu, czyli to co chcemy pokazać użytkownikowi.
W znaczniku <header> umieszczamy przykładowo KLIKANY link do strony głównej. Obowiązkowo logo lub tekst pełniący rolę loga musi być opatrzony w link do strony głównej. Opcjonalnie do linków można dodać atrybut title=”” opisujący zawartość strony, do której prowadzi link. Nie ma on wpływu na SEO.

Potem mamy znacznik <section>, który „wydziela” fragment strony na daną treść. W nim przykładowo zamieszczamy znacznik <h2></h2>, który pełni rolę tytułu tekstu oraz ma znaczenie pod względem SEO.

Każdy tekst zamieszczamy w znacznikach <p></p>, które pełnią rolę jednego akapitu tekstu. Poza tym tekst można opatrzyć w znaczniki <span></span>, gdy chcemy na przykład zmienić jego kolor lub go pogrubić.

Potem mamy znacznik <figure></figure>,w którym można umieścić obrazek. Obrazek koniecznie musi mieć uzupełniony atrybut alt=””.

3. Stopka

Kod stopki jest dość łatwy. Treść stopki umieszczamy w znacznikach
<footer>. Pomiędzy tymi znacznikami można umieści, np. czas generowania strony, informacje o prawach autorskich lub dane adresowe firmy.

Formularz kontaktowy

Pomiędzy <form></form> zamieszczamy treść formularza.
<fieldset></fieldset> odpowiedzialny jest za grupowanie pól formularza.
<legend></legend> pokazuje tytuł danego formularza, np. Formularz kontaktowy.
Dzięki liście <dl><dt><dd> kontrolujemy wygląd formularza ( z pomocą przychodzi CSS ).
Konieczne trzeba dodać znaczniki

Placeholder jest o wiele lepszym rozwiązaniem niż bawienie się w JavaScript’cie z onClick itp. Ale nie zastępuje on znacznika label!

Dane adresowe

Dane adresowe koniecznie trzeba zamieścić w znacznikach <address></address>. Poprawia to semantykę kodu oraz informuje przeglądarkę, że na stronie www znajdują się dane adresowe/kontaktowe .

Znaczniki, mające znaczenie dla SEO

1. Nagłówki od <h1></h1> do <h3></h3>. Nagłówki <h4> <h5> i <h6> nie mają zbyt dużego znaczenia dla SEO.
2. Zamieszczanie danych adresowych w znacznikach <address></address>.
3. Używanie

Inne

1. Dodawaj target do linków tylko zgodnie z założeniami tego atrybutu(Więcej)
2. Nie używaj elementów zdeprecjonowanych, np. align. Od tego jest CSS
3. Unikaj stosowania elementów Flash oraz ramek.
4. Strona musi być w pełni funkcjonalna bez JavaScript’u.
5. Zamiast używać div’ów stosuj znaczniki HTML5. Oczywiście nie wszędzie można użyć znaczników HTML5 dlatego stosowanie div’ów jest dozwolone.
6. Nie rób tak:

Pusty div = zbędny div. Oczywiście pusty divy czasami są nieuniknione. Pamiętajmy aby z ich ilością nie przesadzać i nie stosować ich do kilka linijek w kodzie.
7. Nie używaj znacznika <br> do robienia odstępów. Do tego jest znacznik akapitu <p>.
8. Rób spacje w kodzie źródłowym aby potem można go było łatwo czytać a co za tym idzie modyfikować.
9. Nie używaj wewnętrznego arkusza stylów: style=”” od tego jest zewnętrzny arkusz stylów.
10. Ewentualne skrypty JavaScript umieszczaj pod koniec body
11. Rób menu strony na liście
12. Sprawdzaj poprawność strony validatorem
13. Nie przesadzaj z ilością dołączanych zewnętrznych arkuszy stylów oraz z plikami JavaScript.
14. Sprawdzaj outline za pomocą tego narzędzia.
15. Nigdy ale to nigdy nie rób stron na tabelkach. Dowiedz się dlaczego.
16. Nie stosuj elementów JavaScript typu: onClick, onMouseOver, itp.
17. Jeśli chcesz powiadomić o czymś użytkownika nie stosuj alert(). Alternatywnym sposobem jest użycie pluginu jQuery – noty lub za pomocą wyróżnionego kolorem boxu na stronie.
18. W HTML5 nie musisz używać atrybutów type=””.
19. Zdecyduj się jaki jest twój styl kodowania: XHTML’owy czy HTML’owy
20. Dobrze jest zrobić zewnętrzny arkusz stylów dla IE > 8. (instrukcje warunkowe)
21. Aby poinformować, że strona używa cookies najlepiej jest dać link do podstrony informującej o tym fakcie w stopce.

Trochę się tego nazbierało ale warto stosować powyższe rady.

  • Jaason

    Brakuje wsparcia merytorycznego. Bo samo „należy tak robić” niezbyt do mnie przemawia 😛

    • mixset

      W dalszych artykułach na pewno postaram się pisać bardziej wymownie 🙂

  • Standardy HTML5 są trochę inne niż Twoje porady. Validator by się czepiał.

    • Co masz dokładnie ma myśli?

  • Polemizujmy !

    ad.1. Nigdy nie dodawaj atrybutu target dla linków.

    Nie zawsze użytkownik klikając w url powinien przejść pod wskazany adres w tej samej zakładce/oknie.
    Niczym bardziej go nie wkurzysz, karząc mu ponownie wypełniać dane formularza gdy chciał podglądnąć pomoc dot. formularza.
    Target jest po to, aby był używany, zgodnie z założeniami.

    5. Zamiast używać div’ów stosuj znaczniki HTML5. Oczywiście nie wszędzie można użyć znaczników HTML5 dlatego stosowanie div’ów jest dozwolone.

    Ależ kontener DIV jest pełnoprawnym elementem HTML5, a składni html5 można (czyt. należy) używać jak najczęściej i jak najgęściej.
    Jeśli oczywiście chcemy by wyszukiwarki polubiły zawartość naszych stron 🙂

    ps. pomysł na listę porad jak najbardziej ok, ale z wykonaniem kiepsko. Jak Jaason wspomniał, za mało merytoryki i dywagacji.
    Bo np. menu na oparte na listach nie jest pierwszym przykazaniem webmastera.

    • Dzięki za konstruktywną krytykę. W najbliższym czasie postaram się zaktualizować/poprawić listę.

  • Artur

    Idąc dalej:

    ad.6. Pusty div = zbędny div.

    Nie do końca jest to prawda – powinieneś to dokładniej opisać. Puste div’y jak najbardziej stosuje się, z tym, że są one ostylowane w css. A to ważna informacja, którą należy ująć.

    Przykładowo zrobienie ozdobnego separatora treści, czy musi być content? Tak samo w sytuacji użycia atrybutu clear przy elementach floatowanych. W obu przypadkach nie ma potrzeby dodawania treści, choć dla clear obecnie stosuje się inne metody, ale znowu nieobsługiwane przez starsze przeglądarki (czytaj IE).

    Dodatkowo dobrą praktyką jest dodawanie komentarzy, czy to w kodzie html, czy css. Wyobraź sobie stronę typu One Page, gdzie wszystko jest w jednym pliku, tutaj robi się miszmasz.