19 häufig verwendete HTML-Tags, die Anfänger kennen sollten

Wenn 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 eingeschlossen <>
Jedes HTML-Tag erfüllt eine andere Funktion
Die meisten HTML-Tags öffnen sich <tag> und schließen </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>

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 semantische Tags wie z , , und 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>

<!doctype html>

Hinweis: Die Deklaration hat kein schließendes Tag und unterscheidet nicht zwischen Groß- und Kleinschreibung.

<html> </html>

Das ….. -Tag kommt nach dem DOCTYPE-Tag. 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 Tag wird dargestellt als;

<html>Content</html>

<head></head>

Der Head-Abschnitt eines HTML-Dokuments wird durch ein dargestellt Schild. Dieses Tag ist in der eingeschlossen Tag und gibt allgemeine Informationen über die Webseite.

Das -Tag enthält andere Tags, die Einzelheiten der Webseite angeben, z. B. Titel und Autor der Seite. Der Inhalt dieses Tags wird nicht auf der Webseite angezeigt

Dies ist die Syntax von a Schild;

<head> …….. </head>

<title></title>

Das tag deklariert den Titel der Webseite. 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 Tag ist;

<title>HTML Tags for Beginners</title>

Wenn in a tag, es erscheint als;

<head>

<title>HTML Tags for Beginners</title>

</head>

<body> </body>

Das -Tag zeigt den gesamten sichtbaren Inhalt einer Webseite an. Bilder, Links, Klartext, Videos und mehr finden Sie in den Tags und.

Einige der anderen Tags, die Sie innerhalb des Körpers finden, umfassen Tag für Absatz, Tag für Bilder, Tag für fetten Text und Tag für eine geordnete Liste, um nur einige zu nennen.

Die Syntax für Tag ist;

<body> Content </body>

<h1> to <h6> Tags

Ein HTML-Dokument kann bis zu 6 Überschriften-Tags enthalten. Jeder der Tags wird durch eine Zahl dargestellt, die von 1 bis 6 beginnt , , , , , und .

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>

zu Tags sind in eingeschlossen Schild.

Zum Beispiel ein , Tag wird eingeschlossen als;

<body>

<h1> This is heading 1 >/h1>

</body>

<p> </p>

Das 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 verwenden Tags in Ihrem Dokument. Die Absatz-Tags sollten in eingeschlossen werden Schild.

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 oder einfach fett -Tag formatiert jeden Inhalt zwischen dem Öffnen und dem Schließen 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>

Fünfte Ausgabe wird fett gedruckt.

<i> </i>

Das Kursiv-Tag, gekennzeichnet durch

Zum Beispiel, wenn wir haben

<i> These are italics </i>

Die Wörter 'diese sind kursiv' erscheint kursiv.

<u> </u>

Das Tag underline oder 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, , wird verwendet, um Inhalte in einem HTML-Dokument zu zentrieren.

Wenn wir zum Beispiel ein h2-Tag haben, das geschrieben ist als <h2> Centering Content in HTML </h2>, können wir es wie folgt zentrieren;

<center>

<h2> Centering Content in HTML </h2>

</center>

<span></span>

Span-Tag, , 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>

Die Hervorhebung oder das Tag wird verwendet, um bestimmte Wörter in einem HTML-Dokument hervorzuheben.

Inhalte zwischen 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 oder das hochgestellte Tag ermöglicht es, dass der eingeschlossene Text über dem Rest steht. Ein perfektes Beispiel ist, wenn Sie wollen quadratisch eine Zahl X und stelle sie mathematisch dar, um dir X zu geben²

Die Syntax für innerhalb eines Absatz-Tags lautet:

<H1> Harveys <sup>TM </sup> Company Limited </H1>

<sub></sub>

Das tiefgestellte oder Tag ist das Gegenteil des hochgestellten Tags. Der im Tag eingeschlossene Inhalt wird unterhalb der normalen Textzeile angezeigt. Ein perfektes Beispiel ist das Schreiben der chemischen Formel von Wasser als H₂0.

Die Syntax für das tiefgestellte Tag lautet:

Remember that H <sub> 2 </sub> 0 is the chemical formula for water

<br>

ist ein selbstschließendes Tag, das für eine Pause steht. Alle Inhalte danach beginnt in einer neuen Zeile.

Die Syntax für innerhalb eines Absatzes wird;

<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> and <li> </li>

Das geordnete Listen-Tag oder die muss mit einem anderen Tag wie dem 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, , 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.

Fazit

Es gibt über 100 HTML-Tags, aber die oben genannten sollten Sie als Anfänger kennen. HTML wird in den meisten unterstützt Code-Editoren, und Sie können so sicher sein, dass Sie beim Lernen nichts falsch machen.