Struktura kodu HTML

Podstawowy kod HTML strony internetowej przedstawia się nastepująco:

<!doctype html>
   <head>
      <meta charset="utf-8">
      <title>Tytuł strony internetowej</title>
   </head>
   <body>
      Treść strony internetowej.
   </body>
</html>

W poprzednich wersjach języka musiał on być nieco bardziej skomplikowany, ale w HTML 5 wystarczy tyle, ale do rzeczy…

  1. Całość dokumentu html jest zamknięta pomiędzy tagami <!doctype html> i </html> które oznaczają, że jest to właśnie dokument typu html.
  2. Następnie są dwie główne sekcje headbody, zamknięte w tagach <head></head> i <body></body>
  3. head to sekcja w której są różne informacje dla przeglądarki, np. tytuł strony, kodowanie znaków, style, skrypty itp.
  4. body zawiera w sobie wszystko to co będzie wyświetlone w przeglądarce jako nasza strona.
  5. <meta charset="utf-8"> określa sposób kodowania znaków i powinien on być zgodny ze sposobem kodowania znaków w naszym pliku tekstowym. W notepad++ użyte kodowanie jest wyświetlone na dolnym pasku programu z prawej strony. Przeważnie na początku jest tam kodowanie „ANSI”, proponuję Ci zmienić kodowanie  na „UTF-8 bez BOM” w notepad++ by uniknąć problemów z wyświetlaniem polskich znaków. Kodowanie zmienia się wybierając „format” z górnego menu programu. UTF-8 jest obecnie najpowszechniejszym standardem kodowania znaków dla stron internetowych.
  6. title to po prostu tytuł strony internetowej. Nie jest on wyświetlany na samej stronie tylko na górnym pasku przeglądarki, na zakładce itp, jest też wyświetlany w wynikach wyszukiwania Google.

Ten kod będzie dla nas podstawą przy kolejnych lekcjach. Większość tego czego się będziesz uczyć znajdzie się w sekcji body, ale i sekcję head uzupełnimy o kilka przydatnych znaczników.

Ps. Kodu HTML nie trzeba pisać, tak jak w powyższym przykładzie, z rozbiciem na linie i z wcięciami. Kod HTML może być równie dobrze pisany w jednej linii, tag po tagu, bez żadnych wcięć, ale będzie on mało przejrzysty. Dobrą praktyka jest pisanie w taki sposób jak w powyższym przykładzie, gdzie element otwierający i zamykający są z takim samym wcięciem, a zawartość między nimi z większym wcięciem. Oczywiście nie wszystko trzeba tak rozbijać, są tagi (np. formatujące tekst) które bez sensu było by rozbijać na kilka linii. Wszystko zależy od skomplikowania kodu i poczucia estetyki piszącego 😉