Doctypes, Metatags und HTML-Fragmente im täglichen Einsatz
Bei jedem Projekt gibt es das gleiche Problem zu Beginn der Implementierung: Das immer gleiche und doch immer ein klein wenig abgewandelte Grundgerüst einer HTML-Seite und einige dazugehörige Überlegungen. Ich muss definitiv jedesmal nachsehen und überlegen bzw. das Gerüst von einem vorhergehenden Projekt kopieren und abwandeln. Daher fasst dieser Artikel alle Möglichkeiten zusammen.
Vorüberlegungen
- Der Doctype bestimmt das spätere Aussehen der Seite stärker, als man denkt. Vor Allem im Internet Explorer, da man mit dessen Hilfe auch den modernen und halbwegs handzahmen IE 8 in seinen alten Großvater IE 6 verwandeln kann – mitsamt seinem Box-Model- und Positionierungs-Alzheimer.
- Framesets sind out und tauchen daher in diesem Artikel gar nicht mehr auf.
- XHTML und HTML unterscheiden sich im Doctype und in der Startdeklaration. Doch die Browser unterscheiden hie kaum. Ggf. wird bei XHTML etwas strenger mit der korrekten Tag-Schachtelung reagieren. Doch das sollten Sie in jedem Fall korrekt handhaben. Der W3C-Validator hilft Ihnen dabei
Doctypes
Kein Doctype: Im allgemein Kein Problem in “guten” Browsern wie Firefox oder Safari. Führt aber unter IE in den Quirks-Modus und damit zum falschen Box-Model-Modus und teilweise völlig anderer Darstellung einer Seite.
Transitional: Transitional bedeutet, dass einige deprecated HTML-Tags (wie &font&) und mehr Tag-Schachtelungen erlaubt sind. Beispielsweise darf man nur im transitionalen Modus Text direkt im Body Tag platzieren.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Strict: Strict rendert einige Elemente schulmäßiger und ist damit mein bevorzugtes Format. Doch manchmal kann man es einfach aufgrund des verwendeten Frameworks nicht einsetzen.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML 5: Neu und für moderne Browser interessant. Lässt alle aktuelle Browser in den Standard-Mode wechseln und kann daher schon jetzt ohne Bedenken eingesetzt werden.
<!DOCTYPE html>
Header-Daten und Grundgerüst
Und nun das komplette Grundgerüst für aktuelle Projekte:
<!doctype html>
<html>
<head>
<title>##Dokumenttitel##</title>
<meta http-equiv="content-type"
content="text/html; charset=UTF-8" />
<meta name="description" content="##Beschreibung##" />
<link rel="stylesheet" type="text/css" href="css.css" />
<script type="text/javascript" src="js.js"></script>
</head>
<body>
</body>
</html>
html, body, div, form, fieldset, legend, label
{
margin: 0;
padding: 0;
}
table
{
border-collapse: collapse;
border-spacing: 0;
}
th, td
{
text-align: left;
vertical-align: top;
}
h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; }
img { border: 0; }