Überschriften
Sie werden durch <h>-Tags (z.B. <h4>Links anlegen</h4>
gekennzeichnet und erlauben die hierarchische Gliederung von Texten. Nach Überschriften wird ein Zeilenumbruch eingefügt. Es gibt einige zulässige und auch sinnvolle Attribute. Die Ausrichtung der Überschriften wird mit align=“left/center/right/justify“ direkt innerhalb der öffnenden H-Klammer angegeben. Dabei erklären sich die drei ersten Angaben von selbst. „Justify“ steht für Blocksatz. Notwendige Anmerkung: Überschriften sind von Suchmaschinen auswertbar, es empfiehlt sich, sie so kurz und treffend wie möglich zu formulieren. Die Schriftfarbe kann mit dem eingefügten <font>-Tag verändert werden. Auch alle sonstigen Schriftattribute können mit den dafür zuständigen Codewörtern verändert werden.
Gliederung
Es gibt einige wichtige Tags für die Gliederung von Texten, die in der folgenden Tabelle aufgelistet sind.
| Gliederungselement | Tag | Erläuterung |
| Dokumentenabschnitt | <span>… |
Definition eines Dokumentenbereiches, der einheitliche Formatierungsmerkmale erhält und mehrere Absätze, Grafiken, Tabellen, Listen etc. enthalten kann. Dazu können in Style-Vorlagen die erforderlichen Formatieranweisungen zentral festgelegt werden. |
| Absatz | <p> …</p> | Der Text innerhalb des <p>-Containers wird bei der Anzeige passend zum Anzeigebereich (Fenster, Tabellenzelle) jeweils neu umgebrochen. Nach diesem Text folgt automatisch eine Leerzeile. |
| Dokumentenabschnitt | <div>… |
Definition eines Dokumentenbereiches, der einheitliche Formatierungsmerkmale erhält und mehrere Absätze, Garfiken, Tabellen, Listen etc. enthalten kann. |
| erzwungener Zeilenwechsel | <br> | |
| verhinderter Umbruch | <nobr>…</nobr> | Der Text wird in voller Breite dargestellt, das Fenster wird notfalls ausgedehnt und mit einer Scroll-Leiste ausgestattet. |
| Umbruch anbieten | <wbr> | Vorschlag für eine Stelle, an der umgebrochen werden kann |
Text ausrichten
Die Ausrichtung von Texten aber auch Grafiken, Tabellen, Listen und Formularelementen ist etwas kompliziert.
Die horizontale Ausrichtung erreicht man, wenn von links nach rechts laufende Schrift eingestellt ist, wie folgt:
- links: Keine Maßnahme, die Schrift oder das eingefügte Element wird automatisch auf linken Anschlag gesetzt
- mittig: Entweder funktioniert das Attribut „align=center“ oder man nutzt das <center>…</center> Tag
- rechts: Entweder funktioniert das Attribut „align=right“ oder man nutzt das <div align=right>…</div> Tag.
Eine vertikale Ausrichtung gibt es eigentlich nicht. Alle Browser arbeiten zeilenorientiert, stellen also von oben nach unten dar (es sei denn, die altkrabylonische Schrift verlange es anders). Wer nun bei dem Attribut „align“ so etwas wie „top“ oder „bottom“ entdeckt, denkt falsch. Vertikale Ausrichtung gibt es für Text neben Bildern, die ja meist den Platz mehrerer Zeilen beanspruchen.
Textarten
HTML sieht eine ganze Reihe von Textarten vor, denen unterschiedliche Schriftmerkmale zugeordnet werden. Die ursprüngliche Absicht bei der Einführung dieser Textarten war es wohl, die maschinelle Textanalyse zu ermöglichen. Sie stehen aus gestalterischer Sicht in Konkurrenz zu den Möglichkeiten der direkten Textformatierung. Die folgende Tabelle sollte eine Sammlung von Textart-Tags mit Beispielen enthalten. Der Netscape-Composer ersetzt einige dieser Tags selbständig durch die zugehörigen Textformat-Tags. Deshalb mußten diese Tags ohne Beispiel bleiben.
| Textart | Tag | Beispiel |
| Abkürzung (veraltet) | <acronym>…</acronym> | USA |
| Adresse | <address>…</address> | TFH Wildau |
| längeres Zitat | <blockquote>… |
normaler Text
weiterer Text |
| Zitat | <cite> ..</cite> | Welch Schauspiel … |
| Programmcode | <code> … </code> | For n = 1 to 200 do |
| Definition | <dfn>…</dfn> | Wert=“Sondertext“ |
| Tastatureingabe | <kbd> … </kbd> | |
| Programmcode (veraltet) | <listing>…</listing> |
Repeat ... Until 1 = 2 |
| Text in nichtproportionaler Schriftart (veraltet) | <plaintext>…</plaintext> | hier kein Beipiel denn plaintext macht Probleme! |
| vorformatierter Text | <pre>…</pre> |
Wer hat Dich.. |
| Beispieltext | <samp> … </samp> | Textbeispiel |
| Variable | <var>…</var> | Geldwert=.. |
| Beispiel (veraltet) | <xmp>…</xmp> |
noch ein Beispiel |
Wahl der Schriftart
Im Prinzip kann heute jede verfügbare Schriftart auch bei der Seitengestaltung genutzt werden. Das geht im Entwurfsstadium reibungslos, indem dem betreffenden Text mit dem <font> Tag ein Schriftsatz zugeordnet wird. Der Befehl für meine Seitenüberschrift könnte lauten: <center> <h1> <font face=“Franklin Cond. Gothic“ > Textformatierung </font > </h1> </center>
Es gibt auch kein Problem, wennn das Produkt auf den Server geladen ist und der Entwerfer sein Werk testet, so lange er den gleichen Rechner wie beim Entwurf nutzt. Nur der Rest der Welt, der zufällig diesen Schriftsatz nicht auf seinem Rechner installiert hat „iss Pech.
Einstellung von Attributen der Schrift
| Schriftart | ||
| Schreibmaschine (Courier) | <tt> … </tt> | dies ist ein Beispiel |
| Proportionalschrift | voreingestellt | normaler Text |
| Schriftgröße | ||
| Basis-Schriftgröße | <basefont.size = n> | |
| Fontgröße(n = 1.. 7 oder n = -2…+4,m = 8..72) | <font size = n> … </font> <font point-size=“m“>…</font> | n=3, Größe=3n=-1, Größe=-1m=12, Größe=12pt |
| kleinere Schriftart | <small> … </small> | normal kleiner |
| größere Schriftart | <big> … </big> | normal größer |
| Schriftfarbe | ||
| <font color = „farbname“> | dies ist rot geschrieben (red) | |
| <font color=“#808080″> | dies ist grau geschrieben (gray) | |
| Schriftattribute | ||
| fett (bold) | <b> … </b> | fettes Beispiel |
| kursiv (italic) | <i> … </i> | kursiver Text |
| unterstrichen (underline) | <u> … </u> | unterstrichen |
| durchgestrichen | <strike> … </strike><s> .. </s> | ungültig |
| hervorgehoben | <em> … </em> | ich bin wichtig |
| stark hervorgehoben | <strong> … </strong> | ich bin besonders wichtig |
| blinkend | <blink> … </blink> | Achtung, noch wichtiger |
| hochgestellt | <sup> … </sup> | normal und höher |
| Laufschrift | <marquee>… </marquee> | |
| tiefgestellt | <sub> … </sub> | normal und tiefer |
| gelöscht | <del> … </del> |
Benannte Zeichen
Da das Internet vielsprachig ist, gibt es bei der Kodierung von nationalen Sonderzeichen Probleme. Auch die Darstellung der Steuerzeichen des Browsers wie z.B. die Tag-Klammern „<“ und „>“ , erfordern es, Zeichen umschreiben („benennen“) zu können. Für die Darstellung aller nationalen Sonderzeichen steht in HTML 4 die vollständige Uni-Code-Liste zur Verfügung, die etwa 40000 unterschiedliche Zeichen umfassen soll.
Praktisch gibt man zu seiner Seite einen Zeichensatz an, was im head-Teil mit Hilfe des <meta>-Tags erfolgt: <meta http-equiv=“Content-Type“ content=“text/html; charset=iso-8559-1″> und nutzt entweder die „Benennung“ oder den HTML-Uni-Code.
Die für deutsche Seiten wichtigsten benannten Zeichen stehen in der Tabelle.
| Zeichen | Benennung | Uni-Code |
| " | " |   |
| & | & | & |
| < | < | < |
| > | > | > |
| festes Leerzeichen | |   |
| | | ¦ | ¦ |
| © | © | © |
| Ä | Ä | Ä |
| Ö | Ö | Ö |
| Ü | Ü | Ü |
| ß | ß | ß |
| ä | ä | ä |
| ö | ö | ö |
| ü | ü | ü |