<p>The &lt;pre&gt; tag serves as an indispensable tool in HTML for displaying preformatted text, such as code snippets in various programming languages.</p>
<h3>What Does the &lt;pre&gt; Tag Do?</h3>
<p>The &lt;pre&gt; tag preserves the original formatting of text, making it an excellent choice for displaying code where spacing and indentation are key.</p>
<h3>Syntax for Using the &lt;pre&gt; Tag</h3>
<pre class="language-markup"><code>&lt;pre&gt;
    &lt;!-- code snippet in any programming language --&gt;
&lt;/pre&gt;</code></pre>
<h3>Key Features</h3>
<ul>
<li>The &lt;pre&gt; tag maintains both spaces and line breaks, ensuring that text appears exactly as it was originally formatted.</li>
<li>The &lt;pre&gt; tag has both an opening tag &lt;pre&gt; and a closing tag &lt;/pre&gt;.</li>
<li>Additional attributes can also be added for further customization.</li>
</ul>
<h3>When to Use the &lt;pre&gt; Tag?</h3>
<p>The &lt;pre&gt; tag is most effective when you want the text to display on your HTML page exactly as it was typed, without any formatting changes. It is especially useful for displaying code snippets or preformatted text from data files.</p>
<h2>Displaying a Simple Python Program and Its Output</h2>
<p>In this section, we will use HTML to display a simple Python program that prints 'Hello, World!' to the console. Don't worry, you don't need to know Python; we're just showing how to display the program using the HTML <code>&lt;pre&gt;</code> tag.</p>
<h3>Python Program</h3>
<pre class="language-markup"><code>&lt;pre&gt;
  # A simple Python program to print "Hello, World!"
def main():
    print("Hello, World!")

if __name__ == "__main__":
    main()
&lt;/pre&gt;</code></pre>

<h3>Program Output</h3>
<p>This HTML code will display the program exactly as it is, preserving spaces and new lines. We'll use the <code>&lt;pre&gt;</code> tag to achieve this 'preformatted' display, as shown below.</p>
<pre class="language-markup"><code> # A simple Python program to print "Hello, World!"
  def main():
      print("Hello, World!")

  if __name__ == "__main__":
      main()</code></pre>

<div class="output-block">&nbsp;</div>
<p>For a more comprehensive understanding, you can watch the following video tutorial:</p>

<p><video style="width: 570px; height: 299px;" autoplay="autoplay" loop="loop" muted="" controls="controls" width="570" height="299"> <source src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/tutorial/html-pre-tag/pre-tag.mp4" type="video/mp4">Your browser does not support the video tag.</video></p>

<h3>Conclusion</h3>
<p>In summary, the &lt;pre&gt; tag is a versatile tool for preserving the original formatting of text in HTML. Whether you are displaying code snippets or preformatted text, this tag ensures that your content appears exactly as intended.</p>

Pre Tag

<p>You already know about HTML inline elements. All HTML tags have specific display behavior: they are either block-level elements or inline elements.</p>
<h2>What are Block-level Elements?</h2>
<p>Block-level elements are those that start on a new line and take up the entire width of their container by default. They essentially claim all the horizontal space for themselves, pushing any content that comes after them to a new line.</p>
<h3><strong>Characteristics of Block-level Elements:</strong></h3>
<ul>
<li>Always start on a new line.</li>
<li>Take up the full width available.</li>
<li>Width and height can be controlled via CSS.</li>
<li>Can contain other block-level as well as inline elements.</li>
</ul>
<h3><strong>Common Block-level Elements:</strong></h3>
<ul>
<li><code>&lt;h1&gt;,&lt;h2&gt;,&lt;h3&gt;,&lt;h4&gt;,&lt;h5&gt;,&lt;h6&gt;</code> - Headings</li>
<li><code>&lt;p&gt;</code> - Paragraphs</li>
<li><code>&lt;hr&gt;</code> - Horizontal rule</li>
<li><code>&lt;address&gt;</code> - Address information</li>
<li><code>&lt;article&gt;</code> - Article content</li>
<li><code>&lt;aside&gt;</code> - Sidebar content</li>
<li><code>&lt;blockquote&gt;</code> - Block quotations</li>
<li><code>&lt;canvas&gt;</code> - Drawing area</li>
<li><code>&lt;dd&gt;</code> - Description in a description list</li>
<li><code>&lt;div&gt;</code> - Generic container</li>
<li><code>&lt;dl&gt;</code> - Description list</li>
<li><code>&lt;dt&gt;</code> - Term in a description list</li>
<li><code>&lt;fieldset&gt;</code> - Group of related form elements</li>
<li><code>&lt;figcaption&gt;</code> - Caption for a figure</li>
<li><code>&lt;figure&gt;</code> - Image or media with a caption</li>
<li><code>&lt;footer&gt;</code> - Footer of a section or page</li>
<li><code>&lt;form&gt;</code> - HTML form</li>
<li><code>&lt;header&gt;</code> - Header of a section or page</li>
<li><code>&lt;li&gt;</code> - List item</li>
<li><code>&lt;main&gt;</code> - Main content of a document</li>
<li><code>&lt;nav&gt;</code> - Navigation links</li>
<li><code>&lt;noscript&gt;</code> - Alternate content when JavaScript is not enabled</li>
<li><code>&lt;ol&gt;</code> - Ordered list</li>
<li><code>&lt;ul&gt;</code> - Unordered list</li>
<li><code>&lt;pre&gt;</code> - Preformatted text</li>
<li><code>&lt;section&gt;</code> - Standalone section in a document</li>
<li><code>&lt;table&gt;</code> - Table</li>
<li><code>&lt;video&gt;</code> - Video content</li>
</ul>

HTML Block Elements

<p>Inline Elements don't start on a new line. It only takes the width required to cover the content.</p>
<p>HTML elements are generally divided into two categories: <strong>Block-level</strong> and <strong>Inline</strong> elements.</p>
<p><img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/tutorial/html-inline-elements/inline-block-image.jpg" alt="cwh tutorial image" width="630"></p>
<p>No matter what the width is, block elements will always start on a new line and take up the full available width of their container by default. This means they essentially claim all the horizontal space for themselves, pushing any content that comes after them to a new line. But the inline elements will fit snugly within the flow of other elements, taking up only as much width as their content requires.</p>
<h2>What are Inline Elements?</h2>
<p>Inline elements do not start on a new line and only take up as much width as necessary. They are part of the flow within other elements.</p>
<p>Inline elements can contain other inline elements, but they generally should not contain block-level elements. For example, you could nest a <code>&lt;strong&gt;</code> (strong emphasis) element within a <code>&lt;span&gt;</code> (a generic inline container) element, like so:</p>
<pre class="language-markup"><code>&lt;span&gt;This is &lt;strong&gt;important&lt;/strong&gt; text.&lt;/span&gt;</code></pre>
<p>However, placing a block-level element like a <code>&lt;div&gt;</code> or <code>&lt;p&gt;</code> inside an inline element like <code>&lt;span&gt;</code> or <code>&lt;a&gt;</code> is typically considered incorrect HTML and could lead to unexpected behavior in terms of layout and styling.</p>
<pre class="language-markup"><code>&lt;!-- This is generally considered incorrect --&gt;
&lt;span&gt;This is &lt;div&gt;not recommended&lt;/div&gt; text.&lt;/span&gt;
</code></pre>
<h2>Common Inline Elements</h2>
<ul>
<li><code>&lt;span&gt;</code>: A generic inline container for text</li>
<li><code>&lt;a&gt;</code>: Defines a hyperlink</li>
<li><code>&lt;strong&gt;</code>: Defines important text</li>
<li><code>&lt;em&gt;</code>: Defines emphasized text</li>
<li><code>&lt;img&gt;</code>: Embeds an image</li>
<li><code>&lt;input&gt;</code>: Defines an input control</li>
</ul>
<h2>Examples</h2>
<p>Here is an example of using <span style="color: blue;">inline elements</span> within a paragraph.</p>
<p>This text contains <a href="#">a link</a>, an <strong>important text</strong>, and an <em>emphasized text</em>.</p>
<h2>Styling Inline Elements</h2>
<p>You can use CSS to style inline elements. However, some properties like <code>width</code> and <code>height</code> may not apply.</p>
<p>Here is an exhaustive list of the most used <strong>Inline Elements:</strong></p>
<ul>
<li><code>&lt;a&gt;</code></li>
<li><code>&lt;abbr&gt;</code></li>
<li><code>&lt;acronym&gt;</code></li>
<li><code>&lt;button&gt;</code></li>
<li><code>&lt;br&gt;</code></li>
<li><code>&lt;big&gt;</code></li>
<li><code>&lt;bdo&gt;</code></li>
<li><code>&lt;b&gt;</code></li>
<li><code>&lt;cite&gt;</code></li>
<li><code>&lt;code&gt;</code></li>
<li><code>&lt;dfn&gt;</code></li>
<li><code>&lt;i&gt;</code></li>
<li><code>&lt;em&gt;</code></li>
<li><code>&lt;img&gt;</code></li>
<li><code>&lt;input&gt;</code></li>
<li><code>&lt;kbd&gt;</code></li>
<li><code>&lt;label&gt;</code></li>
<li><code>&lt;map&gt;</code></li>
<li><code>&lt;object&gt;</code></li>
<li><code>&lt;output&gt;</code></li>
<li><code>&lt;tt&gt;</code></li>
<li><code>&lt;time&gt;</code></li>
<li><code>&lt;samp&gt;</code></li>
<li><code>&lt;script&gt;</code></li>
<li><code>&lt;select&gt;</code></li>
<li><code>&lt;small&gt;</code></li>
<li><code>&lt;span&gt;</code></li>
<li><code>&lt;strong&gt;</code></li>
<li><code>&lt;sub&gt;</code></li>
<li><code>&lt;sup&gt;</code></li>
<li><code>&lt;textarea&gt;</code></li>
</ul>

HTML Inline Elements