Die wichtigsten HTML-Formatierungstags

In der Webentwicklung und besonders in HTML sind Formatierungstags essenziell, um Texte hervorzuheben und das Layout von Webseiten zu verbessern. Diese Tags bieten vielfältige Möglichkeiten, um Inhalte strukturiert und ansprechend darzustellen. Im Folgenden werden die wichtigsten HTML-Formatierungstags erklärt und mit praktischen Beispielen ergänzt.

1. Fett - <b> und <strong>

Das <b>-Tag macht den Text fett, ohne eine besondere Bedeutung zu verleihen. Das <strong>-Tag hat die gleiche visuelle Wirkung, kennzeichnet den Text jedoch auch als wichtig, was von Suchmaschinen und Screenreadern interpretiert wird.

Dies ist fett gedruckter Text
Dies ist wichtiger Text

2. Kursiv - <i> und <em>

Das <i>-Tag stellt den Text kursiv dar, ohne zusätzliche Betonung. Das <em>-Tag hingegen betont den Text und wird von Screenreadern hervorgehoben.

Dies ist kursiver Text
Dies ist hervorgehobener Text

3. Unterstrichen - <u>

Das <u>-Tag unterstreicht Text und wird oft verwendet, um wichtige Informationen hervorzuheben.

Dies ist unterstrichener Text

4. Durchgestrichen - <s>

Das <s>-Tag stellt den Text als durchgestrichen dar und wird verwendet, um veraltete oder nicht mehr relevante Inhalte zu markieren.

Dies ist durchgestrichener Text

5. Hochgestellt - <sup>

Mit dem <sup>-Tag wird Text hochgestellt, wie es bei mathematischen Potenzen oder bei Fußnoten üblich ist.

E=mc²

6. Tiefgestellt - <sub>

Das <sub>-Tag macht den Text tiefgestellt und wird oft in chemischen oder mathematischen Ausdrücken genutzt.

H₂O

7. Links - <a>

Das <a>-Tag wird für Links verwendet. Der href-Attributwert gibt die URL an, zu der der Link führt.

Hier klicken

8. Listen - <ul>, <ol>, <li>

Listen sind hilfreich, um Inhalte geordnet darzustellen. Ungeordnete Listen (<ul>) zeigen Aufzählungen mit Punkten, während geordnete Listen (<ol>) nummerierte Einträge enthalten.

• Erster Punkt
• Zweiter Punkt

1. Erster Schritt
2. Zweiter Schritt

9. Absätze und Zeilenumbrüche - <p> und <br>

Absätze werden durch das <p>-Tag definiert, das automatisch einen Abstand vor und nach dem Absatz einfügt. Zeilenumbrüche werden mit dem <br>-Tag erstellt.

Dies ist ein Absatz.

Dies ist ein weiterer Absatz.

Zeilenumbruch hier.
Und hier geht es weiter.

 

10. Bilder einfügen - <img>

Das <img>-Tag wird verwendet, um Bilder einzubinden. Die src- und alt-Attribute geben die Bildquelle und eine Beschreibung an.

 

11. Tabellen - <table>, <tr>, <th>, <td>

Tabellen sind besonders nützlich, um Daten strukturiert darzustellen. Das <table>-Tag erstellt die Tabelle, <tr> definiert eine Zeile, <th> eine Tabellenüberschrift und <td> eine Tabellenzelle.

Name	Alter
Anna	28
Max	34

12. Blockzitate - <blockquote>

Das <blockquote>-Tag ist für Zitate aus anderen Quellen und hebt den Text oft durch Einrückung hervor.

"Bildung ist das mächtigste Werkzeug, das wir nutzen können, um die Welt zu verändern." - Nelson Mandela

13. Code - <code>

Das <code>-Tag hebt Code-Snippets hervor und stellt sie in einer Monospace-Schriftart dar.

print("Hello, World!")



14. Horizontaler Strich - <hr>

Das <hr>-Tag fügt eine horizontale Linie ein und eignet sich gut als optischer Trenner zwischen Abschnitten.

Absatz eins

---

Absatz zwei

Fazit 1

Die hier vorgestellten HTML-Formatierungstags sind unverzichtbare Werkzeuge für das Layout und die Formatierung von Webseiten. Mit ihrer Hilfe können Sie Texte strukturieren, visuell ansprechend gestalten und Inhalte klarer darstellen. Durch den gezielten Einsatz dieser Tags schaffen Sie eine übersichtliche und benutzerfreundliche Webseite, die sowohl informativ als auch optisch ansprechend ist.

---

In der Webentwicklung spielen HTML-Formatierungstags eine zentrale Rolle, um Inhalte ansprechend und strukturiert darzustellen. Doch auch in Excel, einem Tool, das primär für Datenanalyse und -verwaltung genutzt wird, können diese Tags eine interessante Anwendung finden. Mit VBA lassen sich HTML-Inhalte aus Excel-Daten generieren, bearbeiten oder visualisieren. Dieser Artikel zeigt, wie die in der HTML-Übersicht vorgestellten Tags in Kombination mit Excel und VBA eingesetzt werden können, um datenbasierte Webinhalte effizient zu erstellen und darzustellen.

1. HTML-Inhalte aus Excel generieren

Mit VBA können Sie beispielsweise eine Tabelle in Excel formatieren und den entsprechenden HTML-Code für eine Webseite generieren. Die wichtigsten Tags wie <table>, <tr>, <td> können dafür verwendet werden.

Beispiel: VBA-Code zum Erstellen einer HTML-Tabelle aus Excel-Daten

Sub ExportTableToHTML()
 Dim ws As Worksheet
 Dim rng As Range
 Dim html As String
 Dim row As Range, cell As Range
 
 ' Arbeitsblatt und Datenbereich festlegen
 Set ws = ThisWorkbook.Sheets("Tabelle1")
 Set rng = ws.Range("A1:B10") ' Bereich mit Daten
 
 ' HTML-Grundstruktur
 html = "<html><body><table border='1'>"
 
 ' Daten in HTML-Tabelle umwandeln
 For Each row In rng.Rows
 html = html & "<tr>"
 For Each cell In row.Cells
 html = html & "<td>" & cell.Value & "</td>"
 Next cell
 html = html & "</tr>"
 Next row
 
 ' HTML schließen
 html = html & "</table></body></html>"
 
 ' HTML in Datei speichern
 Dim filePath As String
 filePath = ThisWorkbook.Path & "\Tabelle.html"
 Dim fileNum As Integer
 fileNum = FreeFile
 Open filePath For Output As #fileNum
 Print #fileNum, html
 Close #fileNum
 
 MsgBox "HTML-Datei wurde gespeichert: " & filePath
End Sub

2. HTML-Inhalte in Excel anzeigen

Sie können HTML-Inhalte direkt in eine Excel-Zelle schreiben und formatieren oder über ein Webbrowser-Objekt in einer UserForm anzeigen.

Beispiel: HTML mit einem Webbrowser-Objekt anzeigen

1. Fügen Sie eine UserForm in VBA hinzu.
2. Platzieren Sie ein Webbrowser-Steuerelement darauf (muss ggf. aktiviert werden: Extras > Verweise > Microsoft Web Browser).
3. Nutzen Sie folgenden Code, um HTML-Inhalte anzuzeigen:

Private Sub UserForm_Initialize()
 Dim htmlContent As String
 htmlContent = "<html><body><h1>Willkommen in Excel</h1><p>Dies ist ein Absatz mit <b>fett</b>, <i>kursiv</i> und <u>unterstrichen</u>.</p></body></html>"
 
 Me.WebBrowser1.Navigate "about:blank"
 Me.WebBrowser1.Document.Open
 Me.WebBrowser1.Document.Write htmlContent
 Me.WebBrowser1.Document.Close
End Sub

3. Formatierungstools in Excel simulieren

Die vorgestellten Tags können verwendet werden, um eine Formatierungsübersicht oder ein Tool in Excel zu erstellen. Zum Beispiel könnten Sie in einer Excel-Arbeitsmappe Dropdown-Listen oder Formeln verwenden, um bestimmte Tags auszuwählen, und VBA generiert dann den entsprechenden HTML-Code.

Beispiel: Formatierungscode generieren

Function GenerateHTML(tag As String, content As String) As String
 GenerateHTML = "<" & tag & ">" & content & "</" & tag & ">"
End Function

Sub BeispielGenerierung()
 Dim htmlOutput As String
 htmlOutput = GenerateHTML("b", "Fetter Text")
 MsgBox htmlOutput ' Zeigt <b>Fetter Text</b>
End Sub

Fazit 2

Die vorgestellten HTML-Tags lassen sich hervorragend in Excel-Projekte integrieren, sei es zur Generierung von HTML-Dateien, zur Anzeige von HTML-Inhalten oder zur Erstellung von benutzerdefinierten Tools. Mit VBA können diese Verbindungen effizient umgesetzt werden, was sowohl für Webentwickler als auch für Excel-Experten einen Mehrwert bietet.