{"id":254464,"date":"2023-02-17T13:48:03","date_gmt":"2023-02-17T12:48:03","guid":{"rendered":"https:\/\/basic-tutorials.de\/?p=254464"},"modified":"2023-02-17T13:48:03","modified_gmt":"2023-02-17T12:48:03","slug":"html-leerzeichen","status":"publish","type":"post","link":"https:\/\/basic-tutorials.de\/ratgeber\/software\/html-leerzeichen\/","title":{"rendered":"HTML-Leerzeichen setzen \u2013 so geht\u2019s"},"content":{"rendered":"<p>Wer einmal mit HTML gearbeitet hat, wird wissen, dass Leerzeichen Probleme bereiten k\u00f6nnen. Ein im Code eingegebenes Leerzeichen wird nicht zwangsl\u00e4ufig als solches umgesetzt. Insbesondere mehrere Leerzeichen hintereinander werden in der Ausgabe nicht als solche angezeigt. Gl\u00fccklicherweise lassen sich hierf\u00fcr HTML-Codes verwenden. Welche Optionen f\u00fcr HTML-Leerzeichen dir zur Verf\u00fcgung stehen, verraten wir dir nachfolgend.<\/p><div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-box-title\">Inhalt<\/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:\/\/basic-tutorials.de\/ratgeber\/software\/html-leerzeichen\/#einfaches-leerzeichen-und-mehrere-leerzeichen\" >Einfaches Leerzeichen und mehrere Leerzeichen<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/basic-tutorials.de\/ratgeber\/software\/html-leerzeichen\/#geschuetztes-leerzeichen-in-html\" >Gesch\u00fctztes Leerzeichen in HTML<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/basic-tutorials.de\/ratgeber\/software\/html-leerzeichen\/#leerzeichenlaenge-variieren\" >Leerzeichenl\u00e4nge variieren<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/basic-tutorials.de\/ratgeber\/software\/html-leerzeichen\/#html-leerzeichen-im-ueberblick\" >HTML-Leerzeichen im \u00dcberblick<\/a><\/li><\/ul><\/nav><\/div>\n\n<h2><span class=\"ez-toc-section\" id=\"einfaches-leerzeichen-und-mehrere-leerzeichen\"><\/span>Einfaches Leerzeichen und mehrere Leerzeichen<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Der HTML-Code f\u00fcr Leerzeichen lautet <strong>&amp;nbsp<\/strong>;. Die Abk\u00fcrzung steht f\u00fcr <strong>non-breaking space<\/strong>. Es handelt sich hierbei also um einen Bereich, innerhalb dessen keine Umbr\u00fcche vorgenommen werden. Werden mehrere non-breaking spaces aneinandergereiht, erscheinen in der Ausgabe letztlich mehrere Leerzeichen nebeneinander. Wird mehr Raum zwischen zwei Elementen ben\u00f6tigt, bietet es sich an, auf diese Option zur\u00fcckzugreifen.<\/p>\n<figure id=\"attachment_254473\" aria-describedby=\"caption-attachment-254473\" style=\"width: 779px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/basic-tutorials.de\/wp-content\/uploads\/2023\/02\/Leerzeichen-HTML-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-254473 size-full\" src=\"https:\/\/basic-tutorials.de\/wp-content\/uploads\/2023\/02\/Leerzeichen-HTML-1.png\" alt=\"HTML-Leerzeichen\" width=\"789\" height=\"237\" srcset=\"https:\/\/basic-tutorials.de\/wp-content\/uploads\/2023\/02\/Leerzeichen-HTML-1.png 789w, https:\/\/basic-tutorials.de\/wp-content\/uploads\/2023\/02\/Leerzeichen-HTML-1-390x117.png 390w, https:\/\/basic-tutorials.de\/wp-content\/uploads\/2023\/02\/Leerzeichen-HTML-1-780x234.png 780w, https:\/\/basic-tutorials.de\/wp-content\/uploads\/2023\/02\/Leerzeichen-HTML-1-220x66.png 220w\" sizes=\"auto, (max-width: 789px) 100vw, 789px\" \/><\/a><figcaption id=\"caption-attachment-254473\" class=\"wp-caption-text\">HTML-Codes f\u00fcr Leerzeichen f\u00fchren zu den gew\u00fcnschten Ausgaben im Browser.<\/figcaption><\/figure>\n<h2><span class=\"ez-toc-section\" id=\"geschuetztes-leerzeichen-in-html\"><\/span>Gesch\u00fctztes Leerzeichen in HTML<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Der <strong>non-breaking space<\/strong> wird auch als gesch\u00fctztes Leerzeichen bezeichnet. Der Grund dieser Bezeichnung wird bei einem Blick auf typische Anwendungsbereiche des <strong>&amp;nbsp;<\/strong> schnell ersichtlich: Es kommt auch dann zum Einsatz, wenn ein Zeilenumbruch zwischen zwei W\u00f6rtern verhindert werden soll. So ist es etwa sehr \u00e4rgerlich, wenn Zahl und Ma\u00dfeinheit in einem Text in unterschiedlichen Zeilen zu finden sind. Der Satz \u201eDie Beute betrug 25 Goldbarren\u201c etwa sollte in digitalen Publikationen nicht getrennt werden, um Verwirrung zu verhindern. Im Code w\u00fcrde daf\u00fcr ein gesch\u00fctztes HTML-Leerzeichen zwischen den beiden Elementen zum Einsatz kommen: <strong>25&amp;nbsp;Goldbarren<\/strong>. So entsteht nicht nur ein einfaches Leerzeichen, sondern auch ein Produkt, in welchem die beiden Satzelemente zwingend in einer Zeile stehen.<\/p>\n<p>Theoretisch l\u00e4sst sich der gleiche Effekt durch den Einsatz des NOBR-Tags erzielen. Der entsprechende Code s\u00e4he wie folgt aus: <strong>&lt;nobr&gt;25 Goldbarren&lt;\/nobr&gt;<\/strong>. Davon ist jedoch dringend abzuraten, da dieser Code nach W3C als veraltet gilt und seine Verwendung entsprechend ungern gesehen wird.<\/p><div class=\"losgehts-inhalt losgehts-entity-placement\" style=\"text-align: center;\" id=\"losgehts-3951100320\"><div class=\"losgehts-adlabel\">Anzeige<\/div><script type=\"text\/plain\" data-tcf=\"waiting-for-consent\" data-id=\"405718\" data-bid=\"1\">PGRpdiBpZD0ibG9zZ2VodHMtMzQwMDc0MTcwNiIgY2xhc3M9Imdhc19mYWxsYmFjay1hZF80MDU3MTgtLXBsYWNlbWVudF8zNDgzODMiPjxzY3JpcHQgYXN5bmMgc3JjPSIvL3BhZ2VhZDIuZ29vZ2xlc3luZGljYXRpb24uY29tL3BhZ2VhZC9qcy9hZHNieWdvb2dsZS5qcz9jbGllbnQ9Y2EtcHViLTgxNDg3Njg4MjM4MDczMzAiIGNyb3Nzb3JpZ2luPSJhbm9ueW1vdXMiPjwvc2NyaXB0PjxpbnMgY2xhc3M9ImFkc2J5Z29vZ2xlIiBzdHlsZT0iZGlzcGxheTpibG9jazsiIGRhdGEtYWQtY2xpZW50PSJjYS1wdWItODE0ODc2ODgyMzgwNzMzMCIgCmRhdGEtYWQtc2xvdD0iODY0MTc4NTI2NSIgCmRhdGEtYWQtZm9ybWF0PSJhdXRvIj48L2lucz4KPHNjcmlwdD4gCihhZHNieWdvb2dsZSA9IHdpbmRvdy5hZHNieWdvb2dsZSB8fCBbXSkucHVzaCh7fSk7IAo8L3NjcmlwdD4KPC9kaXY+<\/script><\/div>\n<h2><span class=\"ez-toc-section\" id=\"leerzeichenlaenge-variieren\"><\/span>Leerzeichenl\u00e4nge variieren<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Leerzeichen sind grunds\u00e4tzlich genormt. Bei HTML-Leerzeichen besteht jedoch die M\u00f6glichkeit, die L\u00e4nge des Leerzeichens zu variieren. Hierf\u00fcr sind spezielle Codes n\u00f6tig. M\u00f6chtest du ein Leerzeichen erzeugen, das doppelt so lang ist wie ein herk\u00f6mmliches, steht dir der Leerzeichen-Code <strong>&amp;ensp;<\/strong> zur Verf\u00fcgung. Mit dem HTML-Leerzeichen-Code <strong>&amp;emsp;<\/strong> erzeugst du ein Leerzeichen, das viermal so breit ist wie ein gew\u00f6hnliches.<\/p>\n<figure id=\"attachment_254476\" aria-describedby=\"caption-attachment-254476\" style=\"width: 779px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/basic-tutorials.de\/wp-content\/uploads\/2023\/02\/Leerzeichen-HTML-2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-254476 size-full\" src=\"https:\/\/basic-tutorials.de\/wp-content\/uploads\/2023\/02\/Leerzeichen-HTML-2.png\" alt=\"Leerzeichen in HTML\" width=\"789\" height=\"235\" srcset=\"https:\/\/basic-tutorials.de\/wp-content\/uploads\/2023\/02\/Leerzeichen-HTML-2.png 789w, https:\/\/basic-tutorials.de\/wp-content\/uploads\/2023\/02\/Leerzeichen-HTML-2-390x116.png 390w, https:\/\/basic-tutorials.de\/wp-content\/uploads\/2023\/02\/Leerzeichen-HTML-2-780x232.png 780w, https:\/\/basic-tutorials.de\/wp-content\/uploads\/2023\/02\/Leerzeichen-HTML-2-220x66.png 220w\" sizes=\"auto, (max-width: 789px) 100vw, 789px\" \/><\/a><figcaption id=\"caption-attachment-254476\" class=\"wp-caption-text\">Die Leerzeichenl\u00e4nge l\u00e4sst sich mit HTML-Codes variieren.<\/figcaption><\/figure>\n<h2><span class=\"ez-toc-section\" id=\"html-leerzeichen-im-ueberblick\"><\/span>HTML-Leerzeichen im \u00dcberblick<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li><strong>&amp;nbsp; <\/strong>= Leerzeichen<\/li>\n<li><strong>&amp;nbsp; &amp;nbsp;<\/strong> = zwei Leerzeichen nebeneinander<\/li>\n<li><strong>Wort&amp;nbsp;Wort<\/strong> = gesch\u00fctztes Leerzeichen ohne Umbruch<\/li>\n<li><strong>&amp;ensp;<\/strong> = Leerzeichen mit doppelter L\u00e4nge<\/li>\n<li><strong>&amp;emsp;<\/strong> = Leerzeichen mit vierfacher L\u00e4nge<\/li>\n<\/ul>\n<p>Mit HTML-Codes l\u00e4sst sich selbstverst\u00e4ndlich noch wesentlich mehr erreichen. <a href=\"https:\/\/basic-tutorials.de\/ratgeber\/software\/bildunterschrift-mit-html\/\">M\u00f6chtest du etwa Bildunterschriften erzeugen<\/a>, gelingt dir das im Handumdrehen.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Wer einmal mit HTML gearbeitet hat, wird wissen, dass Leerzeichen Probleme bereiten k\u00f6nnen. Ein im Code eingegebenes Leerzeichen wird nicht zwangsl\u00e4ufig als solches umgesetzt. Insbesondere mehrere Leerzeichen hintereinander werden in der Ausgabe nicht als solche angezeigt. Gl\u00fccklicherweise lassen sich hierf\u00fcr HTML-Codes verwenden. Welche Optionen f\u00fcr HTML-Leerzeichen dir zur Verf\u00fcgung stehen, verraten wir dir nachfolgend. Einfaches &#8230; <a title=\"HTML-Leerzeichen setzen \u2013 so geht\u2019s\" class=\"read-more\" href=\"https:\/\/basic-tutorials.de\/ratgeber\/software\/html-leerzeichen\/\" aria-label=\"Mehr Informationen \u00fcber HTML-Leerzeichen setzen \u2013 so geht\u2019s\">Weiterlesen &#8230;<\/a><\/p>\n","protected":false},"author":198,"featured_media":254480,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[85444],"tags":[120],"class_list":["post-254464","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software","tag-html","infinite-scroll-item"],"acf":[],"lang":"de","translations":{"de":254464},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/basic-tutorials.de\/wp-json\/wp\/v2\/posts\/254464","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/basic-tutorials.de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/basic-tutorials.de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/basic-tutorials.de\/wp-json\/wp\/v2\/users\/198"}],"replies":[{"embeddable":true,"href":"https:\/\/basic-tutorials.de\/wp-json\/wp\/v2\/comments?post=254464"}],"version-history":[{"count":0,"href":"https:\/\/basic-tutorials.de\/wp-json\/wp\/v2\/posts\/254464\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/basic-tutorials.de\/wp-json\/wp\/v2\/media\/254480"}],"wp:attachment":[{"href":"https:\/\/basic-tutorials.de\/wp-json\/wp\/v2\/media?parent=254464"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/basic-tutorials.de\/wp-json\/wp\/v2\/categories?post=254464"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/basic-tutorials.de\/wp-json\/wp\/v2\/tags?post=254464"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}