{"id":5658,"date":"2024-01-04T19:18:59","date_gmt":"2024-01-04T18:18:59","guid":{"rendered":"https:\/\/ekiwi.de\/index.php\/5658\/format-html-superscript-and-subscript\/"},"modified":"2024-01-04T21:20:46","modified_gmt":"2024-01-04T20:20:46","slug":"format-html-superscript-and-subscript","status":"publish","type":"post","link":"https:\/\/ekiwi.de\/en\/index.php\/5658\/format-html-superscript-and-subscript\/","title":{"rendered":"Format HTML superscript and subscript"},"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\">Table of content<\/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\/en\/index.php\/5658\/format-html-superscript-and-subscript\/#Application_cases\" >Application cases<\/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\/en\/index.php\/5658\/format-html-superscript-and-subscript\/#Superscript_text_with_HTML_tag\" >Superscript text with 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\/en\/index.php\/5658\/format-html-superscript-and-subscript\/#Subscript_text_with_HTML_tag\" >Subscript text with 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\/en\/index.php\/5658\/format-html-superscript-and-subscript\/#Subscript_and_superscript_text_at_the_same_time\" >Subscript and superscript text at the same time<\/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\/en\/index.php\/5658\/format-html-superscript-and-subscript\/#Danger_of_confusion\" >Danger of confusion<\/a><\/li><\/ul><\/nav><\/div>\n<p>If you create websites or website content with content management systems (CMS, e.g. WordPress), for example, it may be necessary to format texts or parts of texts in subscript or superscript or for better readability.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Application_cases\"><\/span>Application cases<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The most common use cases are likely to be indices, mathematical formulas, chemical formula symbols or units<\/p>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li>Indices: V<sub>critical<\/sub><\/li>\n<li>Formula: f(x) = x<sup>5<\/sup> &#8211; x<sup>4<\/sup> = x<sup>4<\/sup>(x-1)<\/li>\n<li>chemical symbols: C<sub>4<\/sub>H<sub>6<\/sub>O<sub>2<\/sub> (polyvinyl acetate)<\/li>\n<li>Units: m<sup>4<\/sup> (moment of inertia per unit area)<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><strong>Note:<\/strong> For square metres (m\u00b2) and cubic metres (m\u00b3), i.e. <em>high 2&#8243;<\/em> or &#8220;<em>high 3&#8243;<\/em> in general, no special <a href=\"https:\/\/ekiwi-blog.de\/412\/html-5-und-der-video-tag\/\">HTML tags<\/a> are required. There are corresponding Unicode characters for this or you can simply use the keyboard &#8220;<em>Alt Gr + 2<\/em>&#8221; for \u00b2 and &#8220;<em>Alt Gr + 3<\/em>&#8221; for \u00b3.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Superscript_text_with_HTML_tag\"><\/span>Superscript text with HTML tag &lt;sup&gt;<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>How can you now display a superscript <a href=\"https:\/\/ekiwi.de\/en\/index.php\/4697\/html-indent-or-tab-text\/\" title=\"HTML: Indent or tab text\">text using HTML<\/a> tags, such as our formula <em>f(x) = x<sup>5<\/sup> &#8211; x<sup>4<\/sup><\/em> ? This is done by <a href=\"https:\/\/ekiwi.de\/en\/index.php\/5619\/integrate-html-into-a-website-using-an-embedded-iframe\/\" title=\"Integrate HTML into a website using an embedded iframe\">using the HTML<\/a> tag <strong>&lt;sup&gt;<\/strong> and embedding all characters that should appear as superscripts. The example formula would then be written in the HTML code as follows<\/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=\"Subscript_text_with_HTML_tag\"><\/span>Subscript text with HTML tag &lt;sub&gt;<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>If you want to display subscript text, e.g. an index, then use the HTML tag <strong>&lt;sub&gt;<\/strong>. Using the example of our chemical formula for polyvinyl acetate mentioned above (<em>C<sub>4<\/sub>H<sub>6<\/sub>O<sub>2<\/sub><\/em>), the corresponding HTML code looks like this:<\/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=\"Subscript_and_superscript_text_at_the_same_time\"><\/span>Subscript and superscript text at the same time<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>It often happens with formulas that the individual formula characters and variables have both indices and superscript symbols, such as a literally written <em>&#8220;x one squared&#8221;<\/em>.<\/p>\n<ul>\n<li>x<sub>1<\/sub><sup>2<\/sup><\/li>\n<\/ul>\n<p>This can also be displayed using the tags mentioned above:<\/p>\n<pre><code>x&lt;sub&gt;1&lt;\/sub&gt;&lt;sup&gt;2&lt;\/sup&gt;ddd<\/code><\/pre>\n<p>This works for simple short representations, but doesn&#8217;t look as good as from a formula editor. As soon as things get a little more complicated or complex with the world of formulae, it is advisable to use MathML, a <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/MathML\" target=\"_blank\" rel=\"noopener\">markup language for displaying formulae<\/a>.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Danger_of_confusion\"><\/span>Danger of confusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The two HTML tags to be used for superscript and subscript text are confusingly similar, as they only differ in the last letter. It is a little easier to remember if you understand or memorise the HTML tags as abbreviations for the corresponding English terms:<\/p>\n<ul>\n<li><strong>sup<\/strong>erscript =&gt; sup<\/li>\n<li><strong>sub<\/strong>script =&gt; sub<\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>If you create websites or website content with content management systems (CMS, e.g. WordPress), for example, it may be necessary<\/p>\n","protected":false},"author":2,"featured_media":4637,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[879],"tags":[904,905,907,908,909],"class_list":["post-5658","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html-and-css","tag-homepage-en","tag-html-en","tag-webdesign-en","tag-webseite-en","tag-website-en"],"_links":{"self":[{"href":"https:\/\/ekiwi.de\/en\/index.php\/wp-json\/wp\/v2\/posts\/5658","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ekiwi.de\/en\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ekiwi.de\/en\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/en\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/en\/index.php\/wp-json\/wp\/v2\/comments?post=5658"}],"version-history":[{"count":0,"href":"https:\/\/ekiwi.de\/en\/index.php\/wp-json\/wp\/v2\/posts\/5658\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/en\/index.php\/wp-json\/wp\/v2\/media\/4637"}],"wp:attachment":[{"href":"https:\/\/ekiwi.de\/en\/index.php\/wp-json\/wp\/v2\/media?parent=5658"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ekiwi.de\/en\/index.php\/wp-json\/wp\/v2\/categories?post=5658"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ekiwi.de\/en\/index.php\/wp-json\/wp\/v2\/tags?post=5658"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}