19 häufig verwendete HTML-Tags für Anfänger
Veröffentlicht: 2022-12-08Wenn Sie ein Front-End-Entwickler werden möchten, ist einer der häufigsten Ratschläge, HTML zu lernen. Hypertext Markup Language, abgekürzt als HTML, ist die Grundlage der meisten Webseiten.
HTML besteht aus verschiedenen Dingen wie Tags, Attributen und Elementen. Unser Fokus liegt auf HTML-Tags. Wir verwenden HTML-Tags, um Browsern mitzuteilen, wie Inhalte in Überschriften, Titel, Absätze, Bilder und vieles mehr strukturiert werden sollen. HTML-Tags sind also wie Schlüsselwörter, die definieren, wie der Browser den Inhalt anzeigt oder formatiert.
Server lesen HTML-Tags von oben nach unten. Es gibt keine Beschränkung für die Anzahl der HTML-Tags, die eine Webseite haben sollte.
- Alle HTML-Tags sind in
<>eingeschlossen - Jedes HTML-Tag erfüllt eine andere Funktion
- Die meisten HTML-Tags haben ein öffnendes
<tag>und ein schließendes</tag>
HTML-Tags vs. HTML-Elemente vs. HTML-Attribute
Die meisten Leute verwenden die Begriffe HTML-Tags und -Elemente synonym. Aber sind sie gleich? Technisch gesehen sind HTML-Elemente und HTML-Tags unterschiedlich.
HTML-Tags definieren HTML-Elemente. Um dies zu erreichen, wird der Inhalt mit einem öffnenden und schließenden Tag-Namen umschlossen, der mit dem Inhalt des Tags übereinstimmt, mit dem wir arbeiten.
Dies ist ein Beispiel für ein HTML-Element:
<p> This is a paragraph </p><p> ist ein Beispiel für ein HTML-Tag
HTML-Attribute geben zusätzliche Informationen über HTML-Elemente in einem Dokument. Attribute befinden sich innerhalb von HTML-Elementen.
Dies ist ein Beispiel für ein HTML-Attribut
<button id=" SubmitOrder" class="btn">Order</button>HTML-Tags, die jeder kennen sollte
HTML als Auszeichnungssprache hat sich im Laufe der Jahre weiterentwickelt, seit Tim Berners-Lee es 1993 eingeführt hat. Die erste HTML-Version hatte 18 Tags. Mit jeder HTML-Version werden neue Tags hinzugefügt; Das letzte Upgrade war HTML5 im Jahr 2014.
Ein genauer Vergleich von HTML und HTML5 zeigt, dass letzteres über semantische Tags wie <article>, <header> und <footer> verfügt, die den Inhalt eindeutig beschreiben. Wir haben jetzt über 100 HTML-Tags. Im Folgenden sind einige der beliebtesten Tags aufgeführt, die Sie kennen sollten:
<!DOCTYPE>
Der DOCTYPE ist technisch gesehen kein Tag, sondern eine Deklaration, die dem Browser mitteilt, welche Art von Datei geladen wird. Dieses Tag teilt dem Browser mit, welcher HTML-Typ geladen wird.
In HTML5 können Sie Ihre Datei als deklarieren
<!DOCTYPE html>Oder
<!doctype html>Hinweis: Die Deklaration hat kein schließendes Tag und unterscheidet nicht zwischen Groß- und Kleinschreibung.
<html> </html>
Das Tag <html> ….. </html> kommt nach dem Tag DOCTYPE. Dieses Tag definiert das Dokument als Webseite; jedes andere Element wird darin verschachtelt. Das HTML-Tag gibt den Anfang und das Ende eines HTML-Dokuments an.
Ein <html>-Tag wird dargestellt als;
<html>Content</html><head></head>
Der Head-Abschnitt eines HTML-Dokuments wird durch ein <head>-Tag dargestellt. Dieses Tag ist in das <html>-Tag eingeschlossen und gibt allgemeine Informationen über die Webseite.
Das <head>-Tag enthält andere Tags, die Einzelheiten der Webseite angeben, wie z. B. den Titel und den Autor der Seite. Der Inhalt dieses Tags wird nicht auf der Webseite angezeigt
Dies ist die Syntax eines <head>-Tags;
<head> …….. </head><Titel></Titel>
Das <title>-Tag gibt den Titel der Webseite an. Dieses Tag ist in das <head>-Tag eingeschlossen. Das <title>-Tag erscheint in der Titelleiste oder auf der Registerkarte im Browserfenster, aber nicht auf der eigentlichen Webseite.
Syntax für <title>-Tag ist;
<title>HTML Tags for Beginners</title>Innerhalb eines <head>-Tags erscheint es als;
<head> <title>HTML Tags for Beginners</title> </head><Körper> </Körper>
Das Tag <body> zeigt den gesamten sichtbaren Inhalt einer Webseite an. Bilder, Links, Klartext, Videos und mehr finden Sie in den Tags <body> und </body>.
Einige der anderen Tags, die Sie innerhalb des Hauptteils finden, sind <p>-Tag für Absatz, <a>-Tag für Bilder, <strong>-Tag für fetten Text und <ol>-Tag für eine geordnete Liste, um nur einige zu nennen.
Die Syntax für das <body>-Tag lautet:
<body> Content </body><h1> bis <h6>-Tags
Ein HTML-Dokument kann bis zu 6 Überschriften-Tags enthalten. Jedes der Tags wird durch eine Zahl dargestellt, die von 1 bis 6 als <h1>, <h2>, <h3>, <h4>, <h5> und <h6> beginnt.
H1 ist das größte Überschriften-Tag, während H6 das kleinste ist.
In einem HTML-Dokument können Überschriften-Tags wie folgt dargestellt werden:
<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>Die Tags <h1> bis <h6> sind im Tag <body> eingeschlossen.
Beispielsweise wird ein ,<H1>-Tag eingeschlossen als;
<body> <h1> This is heading 1 >/h1> </body><p> </p>
Das <p> </p> oder einfach das Absatz-Tag wird verwendet, wenn Sie Inhalte in einem Absatz strukturieren möchten. Durch Drücken der Eingabetaste in einem HTML-Dokument in Ihrem Code-Editor wird kein neuer Absatz erstellt.
Wenn Sie mehr als einen Absatz wünschen, müssen Sie mehrere <p> </p>-Tags in Ihrem Dokument verwenden. Die Absatz-Tags sollten innerhalb des <body >-Tags eingeschlossen sein.
Die Syntax für ein Absatz-Tag lautet:
<p> ….some content here….</p>Wenn Sie vier Absätze haben möchten, wird Ihr Code wie folgt strukturiert sein:
<body> <p>Content for first paragraph.</p> <p>Content for the second paragraph.</p> <p>Content for the fourth paragraph.</p> </body><b> </b>
Das Tag <b> </b> oder einfach fett formatiert jeden Inhalt zwischen dem öffnenden <b> und dem schließenden </b> fett.
Das Fett-Tag kann zwischen einer Überschrift wie H1 oder sogar innerhalb eines Absatz-Tags stehen.
Dies sind Beispiele für ein fettes Tag;
<b> Bold Tag </b>Der Ausdruck „Fett-Tag“ wird fett dargestellt.
<h1> Keeping it cool, <b> Fifth edition </b>, the winners edition </h1>Die fünfte Ausgabe wird fett gedruckt.
<i> </i>
Das Kursiv-Tag, gekennzeichnet durch <i>, stellt den Text innerhalb der Tags kursiv dar.
Zum Beispiel, wenn wir haben
<i> These are italics </i>Die Worte „ das sind Kursivschrift “ erscheinen kursiv.
<u> </u>
Das underline-Tag oder <u> wird verwendet, wenn Sie einen bestimmten Textabschnitt in einem HTML-Dokument unterstreichen möchten.
Wenn wir zum Beispiel haben;
<u> underline these words </u>Der Satz zwischen den Tags wird unterstrichen.
<center> </center>
Das Center-Tag <center> wird verwendet, um Inhalte in einem HTML-Dokument zu zentrieren.
Wenn wir beispielsweise ein h2-Tag haben, das als <h2> Centering Content in HTML </h2> geschrieben ist, können wir es wie folgt zentrieren;
<center> <h2> Centering Content in HTML </h2> </center><span></span>
Span-Tag, <span>, ist ein generischer Inline-Container, der nicht mit einem Standardstil geliefert wird. Sie können das span-Tag verwenden, um Texte zu gruppieren, die Sie formatieren möchten.
Sie können Tags innerhalb anderer Tags wie Überschriften und Absätzen umfassen;
<h2> Learn HTML <span> from experts </span> and be ready for the market </h2> <p> Learn HTML <span> from experts </span> and be ready for the market </p><div></div>
Ein Division-Tag, abgekürzt als div, ist ein Tag, mit dem Sie verschiedene Tags in einem HTML-Dokument gruppieren können.
Einem div-Tag kann eine „Klasse“ gegeben werden, um mithilfe von CSS externe Stile hinzuzufügen.
So wird ein div dargestellt, das h1, h2 und ein Absatz-Tag umschließt.
<div > <h1> Learn HTML </h1> <h2> HTML Tags </h2> <p> HTML is a markup language……… </p> </div><em></em>
Der Hervorhebungs- oder <em>-Tag wird verwendet, um bestimmte Wörter in einem HTML-Dokument hervorzuheben.
Inhalte zwischen <em>-Tags erscheinen schräg oder kursiv.
Hervorgehobene Inhalte innerhalb eines Absatzes können in einem Code-Editor erscheinen als;
<p> The meeting will start at <em> 0800 hrs </em>, please keep time </p><sup></sup>
Das <sup> oder das hochgestellte Tag ermöglicht es, dass der eingeschlossene Text über dem Rest steht. Ein perfektes Beispiel ist, wenn Sie eine Zahl X quadrieren und mathematisch darstellen möchten, um Ihnen X 2 zu geben
Die Syntax für <sup> innerhalb eines Absatz-Tags lautet:
<H1> Harveys <sup>TM </sup> Company Limited </H1><sub></sub>
Das tiefgestellte oder <sub>-Tag ist das Gegenteil des hochgestellten Tags. Der im <sub>-Tag eingeschlossene Inhalt wird unterhalb der normalen Textzeile angezeigt. Ein perfektes Beispiel ist, wenn man die chemische Formel von Wasser als H 2 0 schreibt.
Die Syntax für das tiefgestellte Tag lautet:
Remember that H <sub> 2 </sub> 0 is the chemical formula for water<br>
<br> ist ein selbstschließendes Tag, das für eine Pause steht. Der gesamte Inhalt nach <br> beginnt in einer neuen Zeile.
Die Syntax für <br> innerhalb eines Absatzes lautet;
<p> HTML is the abbreviation of Hypertext Markup Language <br> There has been an ongoing debate as to whether it is a programming language or not <br> However, we cannot downplay its importance <br> HTML has been used in more than 95% of websites today </p><ol></ol> und <li> </li>
Das Ordered-List-Tag oder das <ol> muss mit einem anderen Tag wie dem <li> verwendet werden.
Die beiden können in einem Code-Editor erscheinen als;
<ol> <li> Asia </li> <li> Africa </li> <li> Europe </li> </ol>Bei der Wiedergabe im Browser werden die Inhalte nummeriert angezeigt.
<img src=""/>
Vielleicht möchten Sie ein Bild für die visuelle Attraktivität oder sogar ein Logo hinzufügen. Das selbstschließende Bild-Tag <img src=””/> ist in einem solchen Fall praktisch.
Die Syntax für das Image-Tag lautet:
<img src=“https://cdn.pixabay.com/photo/2015/08/19/15/44/seo-896175_960_720.png”/>Der in Anführungszeichen eingeschlossene Inhalt stellt die Quell-URL dar.
Einpacken
Es gibt über 100 HTML-Tags, aber die oben genannten sollten Sie als Anfänger kennen. HTML wird in den meisten Code-Editoren unterstützt, und Sie können daher sicher sein, dass Sie beim Lernen nichts falsch machen.