Table of Contents

Snippets: HTML

← Zurück zu :snippets:start

Grundgerüst

Features:

html5-grundgeruest.html
<!DOCTYPE html>
<html lang="de">
<!-- SPDX-License-Identifier: Unlicense -->
	<head>
		<meta charset="UTF-8">
		<title>HTML-Grundgerüst</title>
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<meta name="author" content="Max Mustermann">
		<link rel="stylesheet" href="/css/style.css">
		<link rel="stylesheet" media="print" href="/css/print.css">
		<link rel="icon" type="image/png" sizes="192x192" href="/favicon.png">
	</head>
	<body id="top">
		<header>
			<h1>
				<a href="/">Seitentitel</a>
			</h1>
			<h2>HTML5-Grundgerüst</h2>
		</header>
 
		<aside>
			<ul role="navigation">
				<li><a href="/">Startseite</a></li>
				<li><a href="html5-grundgerüst.html" aria-current="page">HTML5 Grundgerst</a></li>
			</ul>
		</aside>
 
		<main>
			<article id="inhalt">
				<h3>Lorem ipsum</h3>
				<p>Lorem ipsum dolor sit amet. […]</p>
			</article>
		</main>
 
		<footer>
			<p>
				<a href="#top">&uarr; Nach oben</a>
			</p>
			<p>
				&copy; 2025 Max Mustermann
				&bull; <a href="#">Impressum</a>
			</p>
		</footer>
	</body>
</html>

Kleine Helfer-Dateien: robots.txt, sitemap.xml, humans.txt usw.

robots.txt: Suchmaschinen-Indexierung steuern

Ermöglicht es für Suchmaschinen-Crawler den Zugriff auf Teile der Webseite zu verbieten.

Die meisten großen Suchmaschinen halten sich daran, auch wenn sie es technisch nicht müssen (die Crawler der großen KIs interessiert das hingegen leider herzlich wenig …)

Siehe auch die Format-Spezifikation von robotstxt.org.

Als Beispiel folgt die robots.txt von malte70.de, die das indexieren einige Unterordner verbietet, und auf eine sitemap.xml-Datei verweist:

robots.txt
# robots.txt for malte70.de
 
User-agent: *
Disallow: /kontakt/
Disallow: /impressum/
 
Sitemap: https://malte70.de/sitemap.xml

sitemap.xml: Maschinenlesbare Sitemap

Früher waren auf vielen Webseiten Sitemaps zu finden: Eine Seite mit einer oft verschachtelten Liste aller vorhandenen Unterseiten.

Die von Google eingeführte Sitemap.xml-Datei bietet eine standardisierte Sitemap im XML-Format, die Web-Crawler auf alle zur Indexierung zur Verfügung stehenden URLs hinweist, und sie so beim Crawling der Seite unterstützt.

Alle Verweise in der sitemap.xml sind absolute, idealerweise kanonische URLs, also keine relativen Links!

Zu jeder Unterseite/URL kann optional eine Priorität mit einem Wert von 0.0 bis 1.0 angegeben werden (Standard ist 0.5), um den Fokus des Crawlers auf Teilbereiche der Seite zu lenken. Zusätzlich kann das Datum der letzten Änderung und die Aktualisierungs-Frequenz angegeben werden.

Hier ein kleines Beispiel:

sitemap.xml
<?xml version='1.0' encoding='UTF-8'?>
<urlset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd"
    xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
	<url>
		<loc>https://example.com/</loc>
		<lastmod>2025-06-23</lastmod>
		<changefreq>weekly</changefreq>
		<priority>1.0</priority>
	</url>
	<url>
		<loc>https://example.com/page2/</loc>
		<lastmod>2025-06-25</lastmod>
		<changefreq>daily</changefreq>
		<priority>0.7</priority>
	</url>
	<url>
		<loc>https://example.com/page3/</loc>
		<changefreq>always</changefreq>
	</url>
	<url>
		<loc>https://example.com/archived-page/</loc>
		<lastmod>2023-05-25</lastmod>
		<changefreq>never</changefreq>
		<priority>0.1</priority>
	</url>
</urlset>

humans.txt: Infos zu den Personen hinter der Webseite

Als Gegenstück zur robots.txt schlägt die humans.txt-Initiative eine Text-Datei vor, die Informationen über die an der Seite beteiligten Personen liefert.

Idealerweise sollte diese in HTML-Dateien über einen <link rel=“author”>-Tag verlinkt werden:

<link rel="author" type="text/plain" href="/humans.txt">

Auch wenn es keinen Standard für den Inhalt der Datei gibt, nutzen viele Seiten (so auch meine eigenen) die Struktur, die auch die Initiative selbst unter humanstxt.org/humans.txt benutzt.

Snippet

Als einfaches Beispiel für eine private Seite hier die humans.txt von malte70.de.

Der Banner-Text wurde mithilfe figlet mit folgendem Befehl erstellt:

# Font "standard" mit aktiviertem Kerning (Buchstaben berühren sich gerade eben, aber ohne ineinander zu rutschen, was das normale Verhalten von figlet wäre)
figlet -f standard -k "malte70.de"
humans.txt
# humanstxt.org/
# The humans responsible & technology colophon
 
                   _  _        _____  ___        _       
 _ __ ___    __ _ | || |_  ___|___  |/ _ \    __| |  ___ 
| '_ ` _ \  / _` || || __|/ _ \  / /| | | |  / _` | / _ \
| | | | | || (_| || || |_|  __/ / / | |_| |_| (_| ||  __/
|_| |_| |_| \__,_||_| \__|\___|/_/   \___/(_)\__,_| \___|
 
 
/* AUTHOR */
 
	Name:      Malte Bublitz
	Nickname:  malte70
	Location:  Bergkamen, NRW, Germany
	Contact:   https://malte70.de/kontakt/
 
/* SOCIAL */
 
	Mastodon:   https://ruhr.social/@malte70
	Instagram:  http://instagram.com/malte_bublitz/
	Keybase:    https://keybase.io/malte70
	Github:     https://github.com/malte70
	Gitea:      https://git.un-hack-bar.de/malte70
	Facebook:   https://www.facebook.com/malte.bublitz/
 
/* SITE */
 
	Last update:   2025-06-12
	Language:      de_DE
	Software:      Hugo Static Site Generator
	Technologies:  HTML5, CSS3
	IDE:           Visual Studio Code
	Server:        Apache HTTPd

Weitere Beispiele für humans.txt-Dateien

.well-known/*: Well-Known-URIs

Im Verzeichnis .well-known/ können zahlreiche bei der IANA registrierte Dateien abgelegt werden, durch die z.B. unabhängig von der zur Erstellung der Seite verwendeten Software (z.B. das CMS) bestimmte Funktionen unter einer festgelegten URL bereit gestellt werden können.

Ein paar Beispiele: