Tagi HTML, których początkujący nie używają (a powinni!)

Wróćmy na chwilę  do podstaw HTML. Wieżę, że każdy kto to czyta, wie czym jest HTML. Dużo mówi się o HTML 5 i dobrze byłoby przypomnieć sobie tagi, których niektórzy nigdy, niektórzy rzadko, a niektórzy często używają. Wszystkie wymienione są obsługiwane zarówno przez HTML 4.01 jak i HTML 5. Do dzieła więc!

1. <!– ->

Jeśli mieliście w ręku kiedykolwiek jakąkolwiek książkę o programowaniu, przeczytacie tam sto tysięcy razy jak ważne jest dokumentowanie i opisywanie własnego kodu. Nie są to czcze słowa! Z całą pewnością pozwala to na szybkie zorientowanie się co dzieje się w tym a nie innym miejscu.

Komentowanie HTML może wydawać się nieco na wyrost, jednakże i tu można znaleźć dobre zastosowanie – wydzielane bloków, części kodu, które są w jakiś sposób powiązane. Oznaczanie początku  i końca sekcji istotnie ułatwia późniejszą pracę. Śpieszę z przykładem:

<!-- Nav Start -->
<ul>
	<li>menu opcja1</li>
	<li>menu opcja2</li>
</ul>
<!-- Nav End -->

<!-- Content Start -->
<p>Zawartość blablabla...</p>

2. Style tabeli: <thead>, <tbody> oraz <tfoot>

W zamierzchłych czasach (całkiem zresztą niedawno) tworzenie layoutu strony polegało na zagnieżdżaniu milionów tabel w sobie. Na szczęście ten trend minął i teraz tag <table> służy do prezentowania danych tabelarycznych, do czego bądź co bądź jest stworzony. Nie każdy wie, że tabele mają możność być ostylowane – dotyczy to kolumn, wierszy, nagłówków, stopki i zawartości.

Zobaczmy jak możemy to wykorzystać:

Na uwagę zasługuje fakt, że element <tfoot> powinien znajdować się powyżej elementu <tbody>

Oto użyty w powyższym przykładzie kod:

<table>
<thead>
  <tr>
	<td>Przedmiot</td>
	<td>Ilość</td>
  </tr>
</thead>
<tfoot>
  <tr>
	<td>Suma</td>
	<td>19</td>
  </tr>
</tfoot>
<tbody>
  <tr>
	<td>Flaczki</td>
	<td>13</td>
  </tr>
  <tr>
	<td>Ziemniaczki</td>
	<td>6</td>
  </tr>
</tbody>
</table>

3. <optgroup>

Menu rozwijalne jest doskonałym sposobem na przedstawianie danych ‘do wyboru’ użytkownikowi.
Przedstawienie danych za pomocą <optgroup> sprawia, że są one czytelnie pogrupowane nawet, jeśli opcji jest mnóstwo.

<select>
	<optgroup label="Drużyny piłkarskie">
		<option value="Orły z wioski">Orły z wioski</option>
		<option value="Ptaszyny nadmorskie">Ptaszyny nadmorskie</option>
	</optgroup>
	<optgroup label="Drużyny koszykarskie">
		<option value="Orły z miasta">Orły z miasta</option>
		<option value="Ptaszyny rzeczne">Ptaszyny rzeczne</option>
	</optgroup>
</select>

4. Nagłówki – <h1>,<h2>,<h3>,<h4>,<h5>, oraz <h6>

Wszyscy używamy nagłówków, ale szczerze mówiąc w niewielu miejscach można spotkać <h3> a tym bardziej niższe. Apelujemy: używajmy nagłówków zamiast niesemantycznych np. tagów <div> dla nagłówków!

5. <fieldset> and <legend>

Miło jest wypełniać formularz, który jest dobrze opisany, podzielony na logiczne sekcje. Aż chce się taki wysłać :)
Za pomocą <fieldset> wyrysujesz prostokąt wokół sekcji, a <legend> doda podpis do danej sekcji. Zobacz jakie to proste!

<form>
	<fieldset>
		<legend>Informacje główne: </legend>
		<label>Imie: <input type="text" size="30" /></label>
		<label>Email: <input type="text" size="30" /></label>
		<label>Data urodzenia: <input type="text" size="10" /></label>
	</fieldset>
</form>

6. <label>

Jest to niezwykle funkcjonalny tag – nie wpływa na wygląd, natomiast ułatwia wypełnianie formularzy – kliknięcie na etykietę (np. tekst) powoduje wybranie pola typu input – radio, text czy checkbox.

<form>
	<label>Imie:<br />
		<input type="text" size="30" /></label><br />
		<label>Mężczyzna:<br />
		<input type="radio" name="sex" /></label><br />
	<label>Kobieta:<br />
		<input type="radio" name="sex" /></label><br />
</form>

7. <blockquote>

Jeśli pragniesz wyróżnić fragment tekstu w specjalny sposób, użyj tagu <blockquote>.
Domyślnie zostanie dodana przestrzeń przed i po wyróżnionej zawartości oraz margines lewy i prawy.

Jest to doskonały sposób, na wstawienie bloku cytatu. Jeśli pobierasz zawartość z innej strony, blackquote nadaje się do tego znakomicie!

Tak właśnie wstawiamy cytaty!

8. <cite>

Jest to odwołanie do innego źródła. Najczęściej używany w <blockquote>

"Kłapouchy zbliżył się do Puchatka i rzekł głośnym szeptem: – Czy nie mógłbyś poprosić twego przyjaciela, żeby gimnastykował się gdzie indziej ? Za chwile będę jadł śniadanie i nie chce, żeby mi ktokolwiek skakał po nim. To taki drobiazg, po prostu mój kaprys, ale każdy z nas ma swoje małe przyzwyczajenia. " - poema.art.pl

<blockquote>
	Kłapouchy zbliżył się do Puchatka<cite>...</cite>
</blockquote>

9. <dl>

Korzystanie z list to doskonały sposób organizowania informacji. Każdy zna <ul>, ale jak często są używane <ol> i <dl>? Być może odniesienie do „listy definicji” myli niektórych, że mogą być używane tylko przy pojęciach i definicjach – jednak nie jest to przypadek.

Jakie istnieją typy list?

• Nieuporządkowana ul – wypunktowana
• Uporządkowana ol – numerowana
• Definicje dl – terminy i definicje

<dl>
	<dt>Opis1</dt>
		<dd>definicja1</dd>
	<dt>Opis2</dt>
		<dd>definicja2</dd>

W tym artykule to wszystko, miały być jeszcze znaki ASCII, ale być może to będzie następny artykuł :)