<pre>

if you look at my website and most of the elements on it, you can see that i put a lot of HTML (and some CSS) code directly in the document body and even fill up the entire page with it. but how do you achieve that if simply writing code inside <p> will create an HTML element? and how about the whitespace that our browsers usually collapse?

HTML has a tag dedicated to "raw" text, rendered exactly in the way you write it in the code editor: <pre>. "pre" stands for preformatted, it defines preformatted text, and displays it as written in the source code. this also includes whitespace (your spaces and tabs), so there's no need to add margin-left to every paragraph!

putting text in <pre>, you might notice that it comes in a different style, unlike the rest of the document. this tag has its own default style, which is:

    pre {
        font-family: monospace;
        display: block;
        white-space: pre
    }
    

it's also important to note that this tag comes with HTML global attributes, such as class, id, and style, so you can easily change the style of the text inside

still, putting HTML opening tags like <p> and <a> creates real paragraph and hyperlink elements inside the text, so how do we deal with that? first, write your code in the code editor, copy it, then open any text editor, preferably one that has a "find & replace (all)" tool. find and target all "<", then in the replace field put "&lt;" and replace all. next, do the same thing with ">", but instead replace them with "&gt;"

your code might now look a little messy. copy the entire text and go back to the code editor where you have your <pre> element. now just paste it, save, and view the page — your HTML code is now visible as a text element! you don't have to do this step with any other languages, like CSS or JS, because they don't use opening/closing tags the way HTML does

an example from my index page source code:

    <div>
        <p>
            <a href=""> </a>
        </p>
        <section>
            <button></button>
        </section>
    </div>
    

and this is how it renders:

    <div>
        <p>
            <a href=""> </a>
        </p>
        <section>
            <button></button>
        </section>
    </div>
    

<pre> tag can be used whenever you want a shortcut to {white-space: pre} (render whitespace), so it doesn't always have to be HTML code!

...at least that's the way i do it