Dokumenty HTML są zwykłymi plikami tekstowymi z rozszerzeniem html lub htm. Do tworzenia plików tekstowych można więc użyć dowolnego edytora, który umożliwia utworzenie pliku tekstowego ASCII. Oczywiście istnieje szereg wyspecjalizowanych programów ułatwiających tworzenie tego typu dokumentów. Do najważniejszych ich cech należy kolorowanie składni, automatyczne zamykanie znaczników, wyświetlanie podpowiedzi oraz inne funkcje ułatwiające wydajne wprowadzanie kodu.
Niezależnie od wybranego edytora, dokument powinien posiadać odpowiednią strukturę, na którą składa się nagłówek oraz cześć główna dokumentu. W najprostszej formie szkielet dokumentu HTML może wyglądać następująco:
<html> <head> </head> <body> </body> </html>
Jest to bardzo uproszczona struktura składająca się z trzech znaczników <html>, <head> i <body>. Znacznik <html> obejmuje wszystkie znaczniki i wyznacza ramy dokumentu html. Wewnątrz elementu <head> znajduje się nagłówek dokumentu, w którym powinny się znaleźć znaczniki opisujące dokument. Para znaczników <body> wyznacza z kolei cześć główną dokumentu tzw ciało (ang. body – ciało).
Przedstawiona strukturę należy rozbudować o dodatkowe elementy, wymagane przez obowiązujące obecnie standardy. Pierwszym z takich elementów jest definicja typu dokumentu DTD.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Tytuł strony</title> </head> <body> </body> </html>
Drugim jest atrybut xmlns elementu <html> informujący, że jest to dokument XHTML.
Deklaracja typu dokumentu informuje przeglądarkę internetową wg. jakich reguł był tworzony dany dokument HTML. Na stronie organizacji W3C, zajmującej się opracowywaniem standardów sieciowych, znajduje się lista rekomendowanych typów dokumentów. Element <title> odpowiada za tytuł dokumentu. W przypadku strony internetowej tytuł zostanie wyświetlony na na pasku tytułu okna przeglądarki internetowej.
Wewnątrz sekcji nagłówka umieszcza się elementy meta, które definiują właściwości dokumentu HTML m.in. sposób kodowania dokumentu, opis zawartości, określić autora lub zamieścić inne dodatkowe informacje.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> <meta http-equiv="Content-Language" content="pl" /> <meta http-equiv="Reply-To" content="adres_email[malpa]serwer.pl" /> <meta http-equiv="Creation-Date" content="Thu, 25 Dec 2008 10:36:53 GMT" /> <meta name="Description" content="opis zawartości" /> <meta name="Keywords" content="słowa, kluczowe" /> <meta name="Author" content="q3d" /> <meta name="Robots" content="all" /> <title>Tytuł strony</title> </head> <body>
Prosta pierwotnie struktura została rozbudowana o kilka dodatkowych elementów . Do kluczowych należy:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
określający użyte kodowanie znaków w edytorze tekstu, który posłużył do przygotowania dokumentu.
Fragment nagłówka:
<meta http-equiv="Content-Language" content="pl" /> <meta http-equiv="Reply-To" content="adres_email[malpa]serwer.pl" /> <meta http-equiv="Creation-Date" content="Thu, 25 Dec 2008 10:36:53 GMT" />
informuje odpowiednio o: języku dokumentu, adresie e-mail autora i dacie utworzenia. Elementy:
<meta name="Description" content="opis zawartości" /> <meta name="Keywords" content="słowa, kluczowe" />
dawniej były wykorzystywane przez wyszukiwarki internetowe do zindeksowania strony www, obecnie jednak mają mniejsze znaczenie. Dodatkowo element:
<meta name="Robots" content="all" />
zezwala robotom sieciowym na indeksowanie dokumentu.
Dokumenty HTML często korzystają z zewnętrznych plików m.in. przechowujących informacje o formatowaniu wyglądu dokumentu oraz ikonę symbolizującą dokument. Pliki te są załączane poprzez użycie elementu <title> z odpowiednią wartością argumentu rel.
Poniższy przykład, dokonując wymaganych modyfikacji, można wykorzystać przy tworzeniu kolejnych dokumentów HTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> <meta name="Description" content="opis zawartości" /> <meta name="Keywords" content="słowa, kluczowe" /> <meta http-equiv="Content-Language" content="pl" /> <meta name="Author" content="q3d" /> <meta http-equiv="Reply-To" content="adres_email[malpa]serwer.pl" /> <meta http-equiv="Creation-Date" content="Thu, 25 Dec 2008 10:36:53 GMT" /> <meta name="Robots" content="all" /> <title>Tytuł strony</title> <link rel="Shortcut icon" href="ikona_strony.ico" /> <link rel="Stylesheet" type="text/css" href="style.css" /> </head> <body>