{"id":5656,"date":"2024-01-04T19:18:59","date_gmt":"2024-01-04T18:18:59","guid":{"rendered":"https:\/\/ekiwi.de\/?p=5656"},"modified":"2024-02-17T18:26:41","modified_gmt":"2024-02-17T17:26:41","slug":"html-hochgestellt-und-tiefgestellt-formatieren","status":"publish","type":"post","link":"https:\/\/ekiwi.de\/index.php\/5656\/html-hochgestellt-und-tiefgestellt-formatieren\/","title":{"rendered":"HTML hochgestellt und tiefgestellt formatieren"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Inhalt<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/ekiwi.de\/index.php\/5656\/html-hochgestellt-und-tiefgestellt-formatieren\/#Anwendungsfaelle\" >Anwendungsf\u00e4lle<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/ekiwi.de\/index.php\/5656\/html-hochgestellt-und-tiefgestellt-formatieren\/#Text_hochstellen_mit_HTML-Tag\" >Text hochstellen mit HTML-Tag &lt;sup&gt;<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/ekiwi.de\/index.php\/5656\/html-hochgestellt-und-tiefgestellt-formatieren\/#Text_tiefstellen_mit_HTML-Tag\" >Text tiefstellen mit HTML-Tag &lt;sub&gt;<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/ekiwi.de\/index.php\/5656\/html-hochgestellt-und-tiefgestellt-formatieren\/#Text_tief-_und_hochstellen_gleichzeitig\" >Text tief- und hochstellen gleichzeitig<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/ekiwi.de\/index.php\/5656\/html-hochgestellt-und-tiefgestellt-formatieren\/#Verwechslungsgefahr\" >Verwechslungsgefahr<\/a><\/li><\/ul><\/nav><\/div>\n<p>Erstellt man Webseiten bzw. Webseiteninhalte mit zum Beispiel Content Management Systemen (CMS, z.B. WordPress), kann es vorkommen, dass Texte bzw. Textteile tiefgestellt oder hochgestellt formatieren muss bzw. f\u00fcr die bessere Lesbarkeit m\u00f6chte.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Anwendungsfaelle\"><\/span>Anwendungsf\u00e4lle<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Zu den h\u00e4ufigsten Anwendungsf\u00e4llen d\u00fcrften hierbei Indizes, mathematische Formeln, chemische Formelzeichen oder Einheiten sein<\/p>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li>Indizes: V<sub>kritisch<\/sub><\/li>\n<li>Formel: f(x) = x<sup>5<\/sup> &#8211; x<sup>4<\/sup> = x<sup>4<\/sup>(x-1)<\/li>\n<li>chemische Symbole: C<sub>4<\/sub>H<sub>6<\/sub>O<sub>2<\/sub> (Polyvinylacetat)<\/li>\n<li>Einheiten: m<sup>4<\/sup> (Fl\u00e4chentr\u00e4gheitsmoment)<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><strong>Hinweis:<\/strong> F\u00fcr Quadratmeter (m\u00b2) und Kubikmeter (m\u00b3) also &#8222;<em>hoch 2&#8243;<\/em> oder &#8222;<em>hoch 3&#8243;<\/em> im Allgemeinen, braucht man keine speziellen HTML-Tags. Daf\u00fcr gibt es entsprechende Unicode-Zeichen oder man verwendet einfach die <a title=\"NumLock auf der Tastatur immer aktivieren\" href=\"https:\/\/ekiwi-blog.de\/62738\/num-taste-numlock-dauerhaft-aktivieren\/\" target=\"_blank\" rel=\"noopener\">Tastatur<\/a> &#8222;<em>Alt Gr + 2<\/em>&#8220; f\u00fcr \u00b2 und &#8222;<em>Alt Gr + 3<\/em>&#8220; f\u00fcr \u00b3.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Text_hochstellen_mit_HTML-Tag\"><\/span>Text hochstellen mit HTML-Tag &lt;sup&gt;<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Wie kann man nun einen hochgestellten <a title=\"PDF-Datei zu Text-Datei wandeln mittels Kommandozeilen-Tool\" href=\"https:\/\/ekiwi-blog.de\/24873\/pdf-zu-text-mittels-kommandozeile\/\">Text mittels<\/a> HTML-Tags darstellen, wie zum Beispiel unsere Formel <em>f(x) = x<sup>5<\/sup> &#8211; x<sup>4<\/sup><\/em> ? Dies macht man, indem man das HTML-Tag <strong>&lt;sup&gt;<\/strong> verwendet und darin alle Zeichen einbettet, die hochgestellt erscheinen sollen. Die beispielhafte Formel w\u00fcrde man dann wie folgt im HTML-Code schreiben:<\/p>\n<pre><code>f(x) = x&lt;sup&gt;5&lt;\/sup&gt; - x&lt;sup&gt;4&lt;\/sup&gt;<\/code><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Text_tiefstellen_mit_HTML-Tag\"><\/span>Text tiefstellen mit HTML-Tag &lt;sub&gt;<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Will man tiefgestellten Text, z.B. einen Index, darstellen, dann verwendet man das HTML-Tag <strong>&lt;sub&gt;<\/strong>. Am Beispiel unserer oben genannten chemischen Formel f\u00fcr Polyvinylacetat (<em>C<sub>4<\/sub>H<sub>6<\/sub>O<sub>2<\/sub><\/em>) sieht der zugeh\u00f6rige HTML-Code dann wie folgt aus:<\/p>\n<pre><code>C&lt;sub&gt;4&lt;\/sub&gt;H&lt;sub&gt;6&lt;\/sub&gt;O&lt;sub&gt;2&lt;\/sub&gt;<\/code><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Text_tief-_und_hochstellen_gleichzeitig\"><\/span>Text tief- und hochstellen gleichzeitig<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Oft kommt es bei Formeln auch vor, dass die einzelnen Formelzeichen und Variablen sowohl Indizes als auch hochgestellte Symbole haben, wie zum Beispiel ein w\u00f6rtlich geschriebenes <em>&#8222;x eins zum Quadrat&#8220;<\/em>.<\/p>\n<ul>\n<li>x<sub>1<\/sub><sup>2<\/sup><\/li>\n<\/ul>\n<p>Das kann man ebenfalls \u00fcber die oben genannten Tags entsprechend darstellen:<\/p>\n<pre><code>x&lt;sub&gt;1&lt;\/sub&gt;&lt;sup&gt;2&lt;\/sup&gt;ddd<\/code><\/pre>\n<p>F\u00fcr einfache kurze Darstellungen geht das, sieht aber nicht so toll wie aus einem Formeleditor aus. Sobald es etwas komplizierter oder komplexer wird mit der Formelwelt, empfiehlt es sich MathML, eine <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/MathML\" target=\"_blank\" rel=\"noopener\">Markup Language zur Darstellung von Formeln<\/a>, zu befassen.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Verwechslungsgefahr\"><\/span>Verwechslungsgefahr<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Die beiden zu verwendenden HTML-Tags f\u00fcr <a title=\"Text in Visio hochgestellt oder tiefgestellt darstellen\" href=\"https:\/\/iwer.info\/article\/Sonstiges\/Viso\/Visio_Text_und_Schrift_hochgestellt_oder_tiefgestellt_formatieren\/index.html\" target=\"_blank\" rel=\"noopener\">hochgestellten und tiefgestellten Text<\/a> sind sich zum Verwechseln \u00e4hnlich, da sie sich nur im letzten Buchstaben unterscheiden. Etwas leichter kann man es sich merken, wenn man die HTML-Tags als Abk\u00fcrzung f\u00fcr die entsprechenden englischen Begriffe versteht bzw. sich merkt:<\/p>\n<ul>\n<li><strong>sup<\/strong>erscript =&gt; sup =&gt; hochgestellt<\/li>\n<li><strong>sub<\/strong>script =&gt; sub =&gt; tiefgestellt<\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>Erstellt man Webseiten bzw. Webseiteninhalte mit zum Beispiel Content Management Systemen (CMS, z.B. WordPress), kann es vorkommen, dass Texte bzw.<\/p>\n","protected":false},"author":2,"featured_media":3045,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[5],"tags":[636,4,361,344],"class_list":["post-5656","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-hmtl","tag-hompepage","tag-html","tag-webdesign","tag-webseite"],"_links":{"self":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/5656","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/comments?post=5656"}],"version-history":[{"count":0,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/5656\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media\/3045"}],"wp:attachment":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media?parent=5656"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/categories?post=5656"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/tags?post=5656"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}