How should I seperate this Footer from the Content? - html

Question

So I was learning to make a web page using HTML and CSS only.. lss, I can't put the footer under the content somehow. I'm supposed to separate every block from the header, content, and footer. but the footer stays inside the content or is blended with the content.
<header>
<ul class="Tabbar">
<li>Home</li>
<li>Profile</li>
<li>Contact</li>
<li>About</li>
<div class="search-bar">
<form action="/action_page.php">
<input type="text" placeholder="Search..." name="search">
</form>
</div>
</ul>
</header>
<img class="logoheader" src="image/Logo_1_white.png" alt="Logo">
<content class="konten">
<div class="workout">
<img src="image/Pushup_1.jpeg" alt="Push Up" class="gambar1">
<a href="detailpushup.html">
<div class="desc">
<div class="text">Push Up</div>
</div>
</a>
</div>
<div class="workout">
<img src="image/Cardio_beginner.jpeg" alt="Beginner Cardio" class="gambar1">
<a href="detailbeginnercardio.html">
<div class="desc">
<div class="text">Beginner Cardio</div>
</div>
</a>
</div>
<div class="workout">
<img src="image/Pullup_1.jpeg" alt="Pull up" class="gambar1">
<a href="detailpullup.html">
<div class="desc">
<div class="text">Pull Up</div>
</div>
</a>
</div>
<div class="workout">
<img src="image/Yoga_beginner.jpeg" alt="Beginner Yoga" class="gambar1">
<a href="detailyogabeginner.html">
<div class="desc">
<div class="text">Yoga for Beginners</div>
</div>
</a>
</div>
<div class="workout">
<img src="image/Cardio_intermediate.jpeg" alt="Intermediate Cardio" class="gambar1">
<a href="detailintercardio.html">
<div class="desc">
<div class="text">Intermediate Cardio</div>
</div>
</a>
</div>
<div class="workout">
<img src="image/Yoga_advance.jpeg" alt="Advanced Yoga" class="gambar1">
<a href="detailyogaadvance.html">
<div class="desc">
<div class="text">Advance Yoga</div>
</div>
</a>
</div>
</content>
<footer>
<p>This page was last edited on 3 February 2022, at 08:31 (UTC).</p>
<p>
Text is available under the Creative Commons Attribution-ShareAlike License 3.0; additional terms may apply. By using this site, you agree to the Terms of Use and Privacy Policy. Wikipedia® is a registered trademark of the Wikimedia Foundation, Inc.,
a non-profit organization.
</p>
</footer>
I tried on putting it on a different block, and tried to give margins and padding but every time I resize the page the footer moved to the side of the content.

Answer 1

Maybe change the "content" to "main" or "article" or something else. "Content" is not recommended to use. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/content