Das HTML <span> Tag
Verfasst: Di 26. Okt 2021, 08:17
Das HTML <span> Tag </span> dient also z.B. dazu, einen Spannbereich innerhalb eines Textes, wie z.B. innerhalb eines <p> Tags </p>, eine andere Erscheinung zu geben. Das kann z.B. eine andere Farbe mittels einer Class oder auch einer direkte Style-Anweisung sein:
https://www.w3schools.com/tags/tag_span.asp
Das kann, gerade mit Mobirise, sehr wichtig sein, denn Mobirise ändert nur immer ganze Text-Bereiche von Anfang bis Ende eines HTML-Tags in z.B. der Farbe.
Da das <span> Tag ein inline Block Element ist, kommt es zu keinem Umbruch, wie z.B. bei einem <div> oder <p> Tag.
Weiterhin kann man z.B. Mobirise-Icons so einfügen, wie z.B. dieses "Link Icon":
Jedes der Tausenden von Icons hat seine eigene CSS-Class, wie dieses z.B. die class="fa-external-link".
Da man diese vielen Klassen-Namen ja nicht auswendig wissen kann, erstelle ich so ein Icon über den Icon-Editor von Mobirise an einer dafür vorgesehen Stelle, wie z.B. einem Button, und kopiere mir dann das Span-Tag aus dem "Code Editor" für den Gebrauch an z.B. meinen Link, wie in diesem Beispiel oben dargestellt.
https://www.w3schools.com/tags/tag_span.asp
Das kann, gerade mit Mobirise, sehr wichtig sein, denn Mobirise ändert nur immer ganze Text-Bereiche von Anfang bis Ende eines HTML-Tags in z.B. der Farbe.
Man kann also über den "Code Editor", an beliebiger Stelle, so bestimmten Texten ein anderes Format oder auch eine eigene ID geben.<p>Meine Mutter hat <span style="color: blue;">blaue</span> Augen.</p>
Da das <span> Tag ein inline Block Element ist, kommt es zu keinem Umbruch, wie z.B. bei einem <div> oder <p> Tag.
Weiterhin kann man z.B. Mobirise-Icons so einfügen, wie z.B. dieses "Link Icon":
Code: Alles auswählen
<a href="https://www.mobirise-tutorials.com/" class="text-primary" target="_blank">Zu meiner Mobirise Seite <span class="fa fa-external-link mbr-iconfont mbr-iconfont-btn"></span></a>
Da man diese vielen Klassen-Namen ja nicht auswendig wissen kann, erstelle ich so ein Icon über den Icon-Editor von Mobirise an einer dafür vorgesehen Stelle, wie z.B. einem Button, und kopiere mir dann das Span-Tag aus dem "Code Editor" für den Gebrauch an z.B. meinen Link, wie in diesem Beispiel oben dargestellt.