More for myself. It will save work time when i’m starting new HTML5 projects!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <meta name="robots" content="noindex, nofollow"> -->
<title>Title</title>
<!-- Favicon should be in root folder/first public accessible folder of app -->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<link rel="icon" type="image/png" href="favicon.png">
<link rel="stylesheet" href="css/style.css">
<script src="js/script.js"></script>
</head>
<body>
<header role="banner">
<h1>Page title</h1>
<h2>Slogan</h2>
</header>
<nav role="navigation">
<ul>
<li><a href="" title="" target="">Nav Link</a></li>
<li><a href="" title="" target="">Nav Link</a></li>
<li><a href="" title="" target="">Nav Link</a></li>
</ul>
</nav>
<form id="search" role="search">
<label for="search-input">Search this site</label>
<input type="search" id="search-input" name="search" spellcheck="false">
<input value="Submit" type="submit">
</form>
<section>
<h1>Articles</h1>
<main role="main"></main>
<article role="article">
<header role="heading" aria-level="1">
<h1>Title</h1>
<h2>Subheading</h2>
</header>
<figure role="figure" aria-labelledby="caption">
<img src="https://via.placeholder.com/1024x768/ff9000/828282/?text=weB3DynamIT" alt="Orange colored Placeholder Image and Text weB3DynamIT">
<figcaption id="caption">Figure 1: The caption</figcaption>
</figure>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<aside role="note">
<h3>Lorem Ipsum</h3>
<p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content.</p>
</aside>
<footer>
<p>Posted by: Christian Mürner at <time datetime="2023-12-20 10:00">December 20, 2023 10:00 am</time></p>
<p>Contact information: <a href="mailto:hallo@web3dynamit.com">hallo@web3dynamit.com</a>.</p>
</footer>
</article>
</main>
</section>
<section>
<h1>Other</h1>
<aside role="complementary">
<h2><a href="" title="" target="">Title</a></h2>
<h2><a href="" title="" target="">Title</a></h2>
</aside>
</section>
<footer role="contentinfo">
<p>© HTML Presenters</p>
</footer>
</body>
</html>