<li> is not a list. It is a list item. By default, the list item is rendered as a block element and hence the following text will be shown below that block.

However, you can achieve your target like this:

<div class="history">
    <h1>History</h1>
    <p>It was established in 1879....</p>
    <h1>Areas and attractions</h1>
    <ul>
        <li><b>Elephant house</b> is the most famous exhibit in the zoo.</li>
        <li><b>Ape house</b> be carefull! Some inhabitants might throw smelly stuff at you</li>
    </ul>

</div>

Here, <ul> (which is for unordered list) is used to markup a list. The list has 2 list items. A portion of the text content of the list items is emphasized as bold text (<b>).

You can achieve by :before content: '2022'; property like below snippet.

.bullet {
  position: relative;
  padding-left: 10px;
}
.bullet:before {
  content: '2022';
  color: blue;
  position: absolute;
  left: 0;
}

<div class="history">
  <h1 class="h-history">History</h1>
  <p class="p">It was established in 1879.</p>
  <h1 class="h-history">Areas and attractions</h1>
  <p class="p bullet"><strong>Elephant House</strong>is the most famous exhibit in the zoo. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

I am working on website where i have to put information so I am using a list inside a paragraph but after the list name the text moves to another line. I want to start a paragraph after the list.I have attached the output and my target.The output Output The target Target

    <div class="history">
        <h1 class="h-history">History</h1>
        <p class="p">It was established in 1879....</p>
        <h1 class="h-history">Areas and attractions</h1>
        <p class="p"><li>Elephant House</li>is the first....</p>

    </div>