{"id":111,"date":"2022-04-30T20:38:31","date_gmt":"2022-04-30T20:38:31","guid":{"rendered":"https:\/\/gyanipandit.com\/programming\/?p=111"},"modified":"2023-02-27T11:59:36","modified_gmt":"2023-02-27T11:59:36","slug":"html-pre-tag","status":"publish","type":"post","link":"https:\/\/gyanipandit.com\/programming\/html-pre-tag\/","title":{"rendered":"HTML Pre Tag"},"content":{"rendered":"\n<p class=\"has-text-align-center\"><strong>HTML Pre Tag<\/strong><\/p>\n\n\n\n<p>Many a time, we might require to retain the spaces and newlines that occur in the text, like if we are putting some python code into our web page, the spaces (indents) have totally different importance, and they need to be retained. If we are in such a situation, the pre-tag is there for our escape.<\/p>\n\n\n\n<p>Well, the pre-tag is used to define the preformatted text. By this, we mean that the text will be shown in a fixed-width font, preserving the line breaks and the spaces. We can say that the text will be shown as it is written into the source code.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Pre Tag in HTML | Lecture 15 | HTML tutorial for beginners\" width=\"696\" height=\"392\" src=\"https:\/\/www.youtube.com\/embed\/alQrbrCZ40s?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>If you try to put some spaces, or press enters into some other elements like div, span or p, etc, you will find that the spaces and the new line things are ignored. Refer to the below example, which demonstrates the same thing &#8211;<\/p>\n\n\n\n<p><strong>&lt;!DOCTYPE html&gt;<br>&lt;html lang=&#8221;en&#8221;&gt;<br>&lt;head&gt;<br>&lt;meta charset=&#8221;UTF-8&#8243;&gt;<br>&lt;meta http-equiv=&#8221;X-UA-Compatible&#8221; content=&#8221;IE=edge&#8221;&gt;<br>&lt;meta name=&#8221;viewport&#8221; content=&#8221;width=device-width, initial-scale=1.0&#8243;&gt;<br>&lt;title&gt;Some heading&#8230;&lt;\/title&gt;<br>&lt;\/head&gt;<br>&lt;body&gt;<br>&lt;div&gt;<\/strong><br>We are inside a div right now&#8230;<br>this is supposed to be on the next line&#8230;<\/p>\n\n\n\n<p>This is far away&#8230;<br><strong>&nbsp; &nbsp; &lt;\/div&gt;<br>&lt;\/body&gt;<br>&lt;\/html&gt;<\/strong><\/p>\n\n\n\n<p>You know what output we are expecting, but, this is what we get &#8211;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"105\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/html-pre-tag.jpg\" alt=\"\" class=\"wp-image-112\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/html-pre-tag.jpg 1024w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/html-pre-tag-300x31.jpg 300w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/html-pre-tag-768x79.jpg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p>Strange right? But this is what I was talking about&#8230; the new lines, and the spaces were ignored. If the spaces and the new lines are important to us, we can put the text in the pre-tag instead. With the pre-tag, the text will be displayed in the fixed-width font, and the spaces and the line breaks will be retained. In short, the text will be displayed as it is written in the source code. Have a look at the below example, where we are using the pre-tag &#8211;<\/p>\n\n\n\n<p><strong>&lt;!DOCTYPE html&gt;<br>&lt;html lang=&#8221;en&#8221;&gt;<br>&lt;head&gt;<br>&lt;meta charset=&#8221;UTF-8&#8243;&gt;<br>&lt;meta http-equiv=&#8221;X-UA-Compatible&#8221; content=&#8221;IE=edge&#8221;&gt;<br>&lt;meta name=&#8221;viewport&#8221; content=&#8221;width=device-width, initial-scale=1.0&#8243;&gt;<br>&lt;title&gt;Some heading&#8230;&lt;\/title&gt;<br>&lt;\/head&gt;<br>&lt;body&gt;<br>&lt;pre&gt;<\/strong><br>We are inside a pre right now&#8230;<br>this is supposed to be on the next line&#8230;<\/p>\n\n\n\n<p>This is far away&#8230;<br><strong>&nbsp; &nbsp; &lt;\/pre&gt;<br>&lt;\/body&gt;<br>&lt;\/html&gt;<\/strong><\/p>\n\n\n\n<p>So, now, if we try to open the file in the browser, the output is something like this-<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"276\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/html-pre-tag-1-1.jpg\" alt=\"\" class=\"wp-image-115\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/html-pre-tag-1-1.jpg 1024w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/html-pre-tag-1-1-300x81.jpg 300w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/html-pre-tag-1-1-768x207.jpg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p>Notice that the spaces and the new lines are retained. In fact, the font is also different this time. But where would we need this tag? Well, let&#8217;s discuss one use case. Let&#8217;s say that you have a website, where you need to add some code snippets, related to<\/p>\n\n\n\n<p>python(don&#8217;t worry if you are not familiar with python, we are not going to get into it here anyways, but if you are familiar with python, it is good). The thing is, the indentations(tabs) are very important in python. So, you will want your code to be displayed just as it is right? So, by putting the code into the pre-tag, the tabs and new lines will be retained as it is.<\/p>\n\n\n\n<p>By the way, there is another element called code, which is going to be discussed further, but it is used to define the code, or something computer understandable.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>HTML Pre Tag Many a time, we might require to retain the spaces and newlines that occur in the text, like if we are putting some python code into our web page, the spaces (indents) have totally different importance, and they need to be retained. If we are in such a situation, the pre-tag is [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[122,116],"class_list":{"0":"post-111","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-html-tutorial","7":"tag-html-pre-tag","8":"tag-html-tutorial"},"_links":{"self":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/111","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/comments?post=111"}],"version-history":[{"count":5,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/111\/revisions"}],"predecessor-version":[{"id":4983,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/111\/revisions\/4983"}],"wp:attachment":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/media?parent=111"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/categories?post=111"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/tags?post=111"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}