How can I display this well in HTML?

How can I intigate an input search that searches content from the posts and the input field on the overview is with all posts.

You should first seek/indicate the posts to be searched. In the best case, they are stored in a database.

If one assumes that there are more than a few hundred posts, a library like Lucene would be quite helpful or for even more complex systems search engines such as Solr or Sphinx.

You only have to place a form with input field on the website.

Example:

  Search for:
  
  Start search

The input is sent to the server application where you validate the input and forward it to the search engine. You can then prepare the results and return them to the response.

For implementation, you need not only HTML knowledge. To build the web application that implements the logic, you need a programming language and possibly a webframework (e.g. C# with ASP.NET, Java with Spring MVC or Jakarta EE, PHP, Ruby (on Rails), etc.).

If the search is to proceed more dynamically (without reloading the page), you would also need JavaScript identifiers. An event lister can be placed on the input field to send an AJAX request to the server with the search term. The server could return the result data as HTML string or in JSON format. The script would have to incorporate this result into the DOM.

Minimum example:

  Search for:
  

  

This should best be expanded with debouncing mechanisms and filter/validation mechanisms. For example, a search is generally useful only from two to three letters or with changing search queries the previously fired request with a AbortController stop prematurely.

You should also think about how many posts should be returned directly in a search and if not all, how more posts can be accessed (keywords: lazy loading, pagination).

For this, if possible, there should be a possibility to give the content a bookmark that you only see yourself if possible without login.

You can store all noted URLs (or better: the Post IDs / relative addresses that allow the respective Post URLs to be determined) as a JSON array with JavaScript in a cookie. How you can work with cookies Page explained. Basic knowledge of JavaScript is provided.

Each postbox gets a button, the post ID could be in a data-Attribute. Whether the post is already in the memory list, you should determine when creating the button and set a state accordingly.

Example:

Add

Each button also gets an event handler for click here-Event assigned. The cookie must be updated.

const button = evt.currentTarget;

if (button.dataset.bookmarked === "false") {
  let bookmarks;

  try {
    bookmarks = new Set(JSON.parse(getCookie("bookmarks")));
  }
  catch (ex) {
    bookmarks = new Set();
  }

  bookmarks.add(button.dataset.id);
  setCookie(JSON.stringify(bookmarks));
  button.dataset.bookmarked = true;
  button.textContent = "Remove";
}
else {
  let bookmarks;

  try {
    bookmarks = JSON.parse(getCookie("bookmarks"));
  }
  catch (ex) {
    bookmarks = [];
  }

  bookmarks = bookmarks.filter(bookmark => bookmark !== button.dataset.id);
  setCookie("bookmarks", JSON.stringify(bookmarks), 365);
  button.dataset.bookmarked = false;
  button.textContent = "Add";
}

In addition, a function for light/dark mode, how can I make that the current mode is stored and reset when the page is called again.

This information can also be stored in a cookie. For the Toggle component you could take a checkbox.

const root = document.querySelector("body");
const toggle = document.getElementById("toggle");
toggle.addEventListener("change", () => {
  if (toggle.checked) {
    root.classList.add("dark");
  }
  else {
    root.classList.remove("dark");
  }

  setCookie("theme", +toggle.checked, 365);
});

When the page is loaded, you read the cookie and set a class on the root, depending on the recorded value.

window.addEventListener("DOMContentLoaded", () => {
  const darkMode = parseInt(getCookie("theme") || 0);

  if (darkMode === 1) {
    root.classList.add("dark");
    toggle.checked = true;
  }
  else {
    root.classList.remove("dark");
    toggle.checked = false;
  }
});