How Do You Write A Element In Paragraph Form?

Currently, I am working on the Technical Document Page project to get the responsive web design certification. I have a rough outline of what I want to go over in the page, and need to give example code for my reader to use as referance. However, I need to use the <div> element in my example code. The problem is that I cannot figure out how to get the <div> element into a paragraph form, and not a actual element. I have looked it up, but there doesn’t seem to be much on the topic.

So, the question is how do I add a <div> element into my paragraph so it is seen on the user interface? In advance, all help is greatly appreciated.

HTML (Note: I haven’t added CSS yet):

<!DOCTYPE html>
<html lang="en">

<head>
    <title>DevTips.com</title>
    <link rel="stylesheet" href="TDP.css">
</head>

<body>
    <main id="main-doc">
        <!--To Be Removed Later-->
            <h1 id="h1-header">How to Animate an Object in CSS (An Introduction)</h1>
        <!---->
        <section id="Introduction" class="main-section">
        <header id="header1">
            <h2>Introduction</h2>
        </header>
        <p>Animation can make a web page user interface much more interesting. It can also bring attension to <br>
           certain places that you want the user to see. This document is going to give a basic, and simple overview of animation. <br>
           We will focus on the three most important animation properties, which are:
        </p>
            <ul>
                <li>animation-name</li>
                <li>animation-duration</li>
                <li>@keyframes</li>
            </ul>
        </section>

        <section id="What_you_should_already_know" class="main-section">
            <header id="header2">
                <h2>What you should already know</h2>
            </header>
            <p>
                To learn from this page, you will need the following:
            </p>
                <ul>
                    <li>A general understanding of the World Wide Web (WWW) and Internet</li>
                    <li>Experiance with HyperText Markup Language (HTML)</li>
                    <li>Experiance with Cascading Style Sheets (CSS)</li>
                </ul>
        </section>

        <section id="Getting_set_up" class="main-section">
            <!--This section will be about setting the stages for animation-->
            <header id="header3">
                <h2>Getting Set Up</h2>
            </header>
            <p>Before anything, you will need to set up the object to animate it. <br>
                You can do this with something like this: <br><br>
            </p>
        </section>

        <section id="animation_name" class="main-section">
            <header id="header4">
                <h2>animation-name</h2>
            </header>
        </section>

        <section id="animation_duration" class="main-section">
            <header id="header5">
                <h2>animation-duration</h2>
            </header>
        </section>

        <section id="@keyframes" class="main-section">
            <header id="header6">
                <h2>@keyframes</h2>
            </header>
        </section>
    </main>
    <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</body>
</html>

Please let me know if any other information is needed. Thank you!

Hi @Josh641 !

You should read up on the code element.

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

Thank you @jwilkins.oboe for the reply! I will keep readability in mind for further posts. Anyway, the code element seems to work with most things. However, I want to put in something like this:

<section id="Getting_set_up" class="main-section">
            <!--This section will be about setting the stages for animation-->
            <header id="header3">
                <h2>Getting Set Up</h2>
            </header>
            <p>Before anything, you will need to set up the object to animate it. <br>
                You can do this with something like this: <br><br>HTML:<hr><br><br>
                <code>
                    <div id="animated-object"></div>
                </code>
            </p>
        </section>

The problem now is that since the code I want to show is HTML, the computer thinks it is meant to be actual code instead of just for show. So now the question is, how do I fix this issue so it just shows the code?

I thought the docs covered HTML entites but it looks like they didn’t.

You have to use the HTML entities for the < and > signs

<code>
  &lt;div id="animated-object"&gt;&lt;/div&gt;
</code>

Screen Shot 2021-11-17 at 7.25.02 PM

https://dev.w3.org/html5/html-author/charref