Semantyka dla programisty

post_img

czyli minimum co powinien wiedzieć programista o Kodowaniu HTML

Krótko o tagach

Notka ta ma za zadanie ułatwić wspólną pracę Programistów i Webmasterów.
Jako były programista a aktualny Webmaster chciałbym omówić kilka podstawowych tagów, gdzie najlepiej je użyć aby zminimalizować przyszłe poprawki w kodzie HTML oraz poruszyć kilka dobrych praktyk kodowania, które zaoszczędzą nam wiele czasu i nerwów.
Postaram się wybrać tylko najistotniejsze tagi i kwestie dotyczące Web, które to zapewne wszyscy znają a niektórzy nawet się do nich stosują. 🙂

Tagi i zastosowanie

<div> – Box 🙂

Używamy go do definiowania struktury strony, podstawowych bloków, niezależnych powtarzalnych części kodu a także obszarów przeznaczonych na dane pobierane przez ajax-a.

przykład struktury opartej na blokach
div

<ul> , <li> – Listy

Używamy go do wszelakiego rodzaju menu (podobnie poziome jak i pionowe), wypunktowywanie cech lub właściwości

przykłady użycia list
zakładki
źródło: http://www.wp.pl
linki
źródło: http://www.pino.pl/
wypunktowanie/menu

<p> – Paragrafy

Używamy go do przechowywania tekstu, oddzielania bloków tekstu. Kilka bloków p możemy spiąć div-em.

przykład użycia paragrafów i wyróżnienia span
paragrafy i wyróżnienia
źródło: http://www.wp.pl/

<h1> , <h2> , <h3> … – Nagłówki

Jeśli struktura nagłówków nie jest z góry ustalona w projekcie (np.pozycjonowanie) to lepiej ich nie używać tylko stosować <div> a resztę pozostawić WM on to pozmienia.

<span> – Box dla tekstu

Używamy go do wyróżniania części tekstu.

<table> , <tr> , <th> , <td> – Tabelki

Umieszczamy tu dane wyłącznie tabelaryczne.
Istnieje tutaj istotna sprawa, należy wpisywać w html w każdej tabeli atrybut cellspacing="0".
<table cellspacing="0"> – Cellspacing jest to odległość komórek tabeli od siebie, różne przeglądarki mają różną domyślną wartość i tej wartości nieda się zmienić prze css w IE6

poprawne miejsce użycia tabeli
użycie tabeli
źródło: http://tabelekaloryczne.w.interia.pl/

<form> , <fieldset>, <input>, <label> … – Formularze

Trzymając się poniższej struktury nie powinno być problemów:

<form>
 <fieldset>
  <p> <label for="cosid1">cos1 </label><input id="cosid1" /> </p>
  <p> <label for="cosid2">cos2 </label><input id="cosid2" /></p>
 <fieldset>
</form>

stosując powyższy szkielet przy drobnej modyfikacji jesteśmy w stanie uzyskać taki wygląd formularza.
ostylowany formularz

Dobre praktyki ułatwiające pracę

  • Niech każda strona ma unikalną klasę w „container” całej strony bądz chociaż ostatecznie w „content”
    Pozwala to przy tych samych klasach na powtarzających się elementach zmodyfikować wygląd na jednej stronie. Nie martwimy się co z wyglądem na pozostałych stronach, nie prosimy PR o zmianę koncepcji kodowania.
  • Gdy nazywamy class,id niech będzie ona w standardzie „firstLowerRestUpper”.
    Niech class,id niesie treść ułatwiającą jej funkcję i położenie. Nie tworzymy zbyt długich wieloczłonowych nazw.
    <div class="nazwaMojejKlasy"> Ułatwia znalezienie i rozeznanie w funkcji elementu dla PR i WM.
  • Nie używamy atrybutu style w tagach.
    <div style="margin:10px 0 0 0;">
    Koszmar dla WM. Uniemożliwia często ostylowanie elementu.
    Trzeba znaleźć blok i wyrzucić style inline zanim zacznie się zmianę stylu elementu.
    Rozdzielenie warstwy kodu od prezentacji.
  • Nie używamy tagów formatujących wygląd tekstu. <font> , <b> , <i>
    <font color="red"><b>mój formatowany tekst</b></font>
    Koszmar dla WM. Uniemożliwia często ostylowanie elementu.
    Trzeba znaleźć blok i wyrzucić style inline zanim zacznie się zmianę stylu elementu.
    Powinniśmy zastosować <span class="nazwaMojejKlasy">. Rozdzielenie warstwy kodu od prezentacji.

    Staramy się zastąpić praktykę stosowania tagu <strong> , <em> tagiem <span>
    WM będzie musiał ostylować ten element tak czy inaczej czyli lepiej zastosować <span>.

Podsumowanie

Stosując te kilka zasad powinniśmy zaoszczędzić sobie sporo czasu.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *