Blog Technologiczny ATENA

<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

<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

źródło: http://www.wp.pl

źródło: http://www.pino.pl/

<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

ź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

ź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.