Struktur einer Webseite in HTML 5

The head element is a container for metadata (data about data) and is placed between the html tag and the body tag. Metadata is data about the HTML document. Metadata is not displayed. Metadata typically define the document title, character set, styles, scripts, and other meta information. footer header main The main tag specifies the main content of a document. The content inside the main element should be unique to the document. It should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms. Note: There must not be more than one main element in a document. The main element must NOT be a descendant of an article, aside, footer, header, or nav element.

Technical structure

<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
The body element contains all the contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc. There can only be one body element in an HTML document.
</body>
</html>

Mandatory except for style.

Semantic structure (within <body></body>)

<header>
</header>
<nav>
</nav>
<main>
Represents the central content of the page – the stuff that’s unique and essential. Only one element per page.
<article>
Represents a self-contained piece of content, such as blog post, news story, or forum entry.
<section>
Helps organise content into meaningful parts, each ideally with its own heading.
<h1></h1>Only one h1 per page
<div>
No semantic meaning, purely a structural container
</div>
</section>
</article>
</main>
<footer>
</footer>

<p>

Test

Endnote 37
Endnote 38
38a. Endnote 38a
Endnote 39

Es gibt in CSS einen Standard für jede CSS-Eigenschaft (zum Beispiel: für die CSS-Eigenschaft „font-weight“ ist der Standardwert „normal“). Für manche HTML-Elemente gibt es eigene Standards, die davon abweichen (zum Beispiel: für das HTML-Element „h1“ ist die CSS-Eigenschaft „font-weight“ auf „bold“ gesetzt). Davon abweichend können in der CSS-Formatvorlage eigene Standardwerte gesetzt werden.

CSS-Standardwerte für Bilder

figure
display: block	display: block
–	width: 100%
margin: 1em 40px 1em 40px	margin: 1.5em auto 1.75em auto
–	border: none
–	padding: 0 0 0 0
–	text-indent: 0
figcaption
display: block	–
–	margin: 0.5em 0 1em 0
–	text-align: center
–	text-indent: 0
–	font-size: small
img
display: inline-block	–
–	width: 100%
–	height: auto

div display: block;

figure { /* ‚margin' links und rechts auf ‚auto‘ bei zentriert die Abbildung. */ } Block-level Elements A block-level element always starts on a new line, and the browsers automatically add some space (a margin) before and after the element. A block-level element always takes up the full width available (stretches out to the left and right as far as it can). Like p and

Inline Elements An inline element does not start on a new line. An inline element only takes up as much width as necessary. Like span inline-block Compared to display: inline, the major difference is that display: inline-block allows to set a width and height on the element. Also, with display: inline-block, the top and bottom margins/paddings are respected, but with display: inline they are not. Compared to display: block, the major difference is that display: inline-block does not add a line-break after the element, so the element can sit next to other elements. Displays an element as a block-level flex container

Einbindung von Bildern auf Webseiten in HTML 5

Einzelbilder mit Bildbeschriftung unten

Zentriertes Bild ohne seitlichen Textfluss


		<figure style="width: 100%; max-width: 35em; margin: 1em auto 1em auto">

                <img src="bilder/Bilddateiname.Dateiendung" alt="Bildbeschreibung Platzhalter">

                <figcaption>Bildunterschrift, wenn vorhanden</figcaption>

    	</figure>

Bildausrichtung: zentriert
Textfluss: nur oben und unten (Blockelement)
Abstände oben und unten: 1 Geviert (entspricht dem Standardabstand eines Absatzes <p> in HTML 5).
Abstände links und rechts: automatisch (durch diese Einstellung wird das Bildelement zentriert)
Bildbreite: bis zu 100 % der Seitenbreite, aber höchstens 35 Geviert
Bildhöhe: wird durch Bildformat festgelegt

Bei 100 % der Seitenbreite schließt das Bild bündig mit dem Satzspiegel ab. 95 % kann eleganter sein, da das Bild etwas Freiraum als Rahmen erhält. Für Bilder im Hochformat kann ein kleinerer Anteil der Seitenbreite geegnet sein. (Bei 16:9 100 % → 56,3 %; 95 % → 53.4 %; bei 3:2 (traditionelles Kleinbildfotoformat 36 mm × 24 mm) 66,7 % bzw. 63,3 %; bei 4:3 (traditionelles Fernsehformat) 75,0 % bzw. 71,3 %)
30 Geviert entspricht etwa 65 Buchstaben, also einer optimal lesbaren Zeilenlänge.

Bei langen Bildbeschriftungen kann Blocksatz <figcaption style="text-align: justify"> optisch ansprechend sein, sonst zentriert <text-align: center">, linksbündig <text-align: left"> oder sogar rechtsbündig <text-align: right">.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Testbild — Von der hochstehenden Tragfläche hielt Hartmut Umschau. Zeichnung von Willy Planck aus dem Buch „Der Flieger-Robinson“ (1934).

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Bild links ohne seitlichen Textfluss


		<figure style="width: 80%; max-width: 25em; margin: 1em auto 1em 0">

                <img src="bilder/Bilddateiname.Dateiendung" alt="Bildbeschreibung Platzhalter">

                <figcaption>Bildunterschrift, wenn vorhanden</figcaption>

    	</figure>

Bildausrichtung: links
Textfluss: nur oben und unten (Blockelement)
Abstände oben und unten: 1 Geviert (entspricht dem Standardabstand eines Absatzes <p> in HTML 5).
Abstand rechts: automatisch (durch diese Einstellung wird das Bildelement links platziert)
Abstand links: keiner, daher schließt der Rand des Bildelementes bündig mit dem linken Satzspiegelrand ab
Bildbreite: Bis zu 80 % der Seitenbreite, aber höchstens 25 Geviert. Die maximale Seitenbreite von 80 % stellt sicher, dass auch bei kleiner Fensterbreiten rechts ein Freiraum bleibt. Wird die maximale Seitenbreit auf 100 % gesetzt, wirkt das Bild bei kleinen Fensterbreiten wie zentriert.
Bildhöhe: Wird durch Bildformat festgelegt

Bei langen Bildbeschriftungen kann Blocksatz <figcaption style="text-align: justify"> optisch ansprechend sein, sonst zentriert <text-align: center"> oder linksbündig <text-align: left"> wie das Bild in diesem Beispiel.

Bild links mit Textfluss rechts (inline)


		<figure style="width: 80%; max-width: 20em; margin: 0 1em 0 0; float: left">

                <img src="bilder/Bilddateiname.Dateiendung" alt="Bildbeschreibung Platzhalter">

                <figcaption>Bildunterschrift, wenn vorhanden</figcaption>

    	</figure>

Bildausrichtung: links
Textfluss: rechts
Abstände oben und unten: keine, daher schließt das Bildelement <figure> mit den Standardabständen des Textabsatzes <p> ab
Abstand rechts: 1 Geviert (zwischen Text und Bildelement)
Abstand links: keiner, daher schließt der Rand des Bildelementes bündig mit dem linken Satzspiegelrand ab
Bildbreite: Hier bis zu 80 % der Seitenbreite, aber höchstens 20 Geviert. Es ist durch eine geeignete Kombination dieser Parameter drauf zu achten, dass rechts genügend Platz für wenigstens minimalen Textfluss bleibt.
Bildhöhe: Wird durch Bildformat festgelegt

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus.

Einzelbilder mit Bildbeschriftung seitlich

Einzelnes Bild mit Bildbeschriftung rechts daneben, beide zentriert, ohne Textfluss (mit Flexbox)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac maximus magna, pharetra efficitur urna. Quisque pellentesque dolor in lorem porta elementum. In hac habitasse platea dictumst. Nam rutrum risus erat, accumsan tincidunt erat egestas vel. Curabitur nibh libero, dapibus at libero at, vestibulum viverra lorem. In vehicula ornare metus, non commodo felis efficitur rutrum. Ut varius ipsum ipsum, et accumsan ligula semper vel. Nunc elementum vel dui a imperdiet. Integer rhoncus dignissim urna, vitae gravida mauris. Pellentesque laoreet eget dui nec eleifend. Donec ac mattis sapien. Vestibulum quis diam hendrerit, faucibus neque ut, vehicula mauris.


    <figure style="display: flex; justify-content: center; align-items: center; gap: 1em">

            <img src="bilder/Bilddateiname.Dateiendung" alt="Bildbeschreibung Platzhalter" style="width: 50%; max-width: 40em; margin: 0">

            <figcaption style="width: 50%; max-width: 30em; margin: 0; text-align: justify">Bildunterschrift, wenn vorhanden</figcaption>

    </figure>

Die beiden Flexelemente Bild und Bildbeschriftung sind hier innerhalb des Flexcontainers vertikal zentriert, mit align-items: flex-end können sie an den unteren Rand gesetzt werden. Im Beispiel ist die Bildbeschriftung im Blocksatz gesetzt, mit text-align: left kann sie linksbündig gesetzt werden. Die Breite des Flexcontainers von 100 % kann zwischen den beiden Elementen Bild und Bildbeschreibung beliebig aufgeteilt werden. Werden insgesamt weniger als 100 % angegeben, bildet der Rest Freiraum am linken und rechten Rand. Das Bild hat die Maximalbreite von 40 Geviert, um es bei breiten Fenstern nicht zu riesig erscheinen zu lassen, die Bildbeschriftung ist auf eine Maximalbreite von 30 Geviert gesetzt. Der Abstand zwischen Bild und Bildbeschriftung beträgt 1 Geviert. Die horizontale Zentrierung des Flexcontainers erfolgt über justify-content: center.

Einzelnes Bild links mit Bildbeschriftung rechts daneben, ohne Textfluss (mit Flexbox)


    <figure style="display: flex; justify-content: flex-start; align-items: flex-end; gap: 1em">

            <img src="bilder/Bilddateiname.Dateiendung" alt="Bildbeschreibung Platzhalter" style="width: 40%; max-width: 40em; margin: 0">

            <figcaption style="width: 40%; max-width: 30em; margin: 0; text-align: justify">Bildunterschrift, wenn vorhanden</figcaption>

    </figure>

Die beiden Flexelemente Bild und Bildbeschriftung sind hier innerhalb des Flexcontainers an den unteren Rand gesetzt, mit align-items: center können sie vertikal zentriert gesetzt werden. Im Beispiel ist die Bildbeschriftung im Blocksatz gesetzt, mit text-align: left kann sie linksbündig gesetzt werden. Die Breite des Flexcontainers von 100 % kann zwischen den beiden Elementen Bild und Bildbeschreibung beliebig aufgeteilt werden. Werden insgesamt weniger als 100 % angegeben, bildet der Rest Freiraum am rechten Rand. Das Bild hat die Maximalbreite von 40 Geviert, um es bei breiten Fenstern nicht zu riesig erscheinen zu lassen, die Bildbeschriftung ist auf eine Maximalbreite von 30 Geviert gesetzt. Der Abstand zwischen Bild und Bildbeschriftung beträgt 1 Geviert. Die Platzierung des Flexcontainers am linken Rand erfolgt über justify-content: flex-start.

Einzelnes Bild rechts mit Bildbeschriftung links daneben, ohne Textfluss (mit Flexbox)


    <figure style="display: flex; justify-content: flex-end; align-items: flex-end; gap: 1em">

        <figcaption style="width: 40%; max-width: 30em; margin: 0; text-align: justify">Bildunterschrift, wenn vorhanden</figcaption>
    
        <img src="bilder/Bilddateiname.Dateiendung" alt="Bildbeschreibung Platzhalter" style="width: 40%; max-width: 40em; margin: 0">

    </figure>

Die beiden Flexelemente Bild und Bildbeschriftung sind hier innerhalb des Flexcontainers an den unteren Rand gesetzt, mit align-items: center können sie vertikal zentriert gesetzt werden. Im Beispiel ist die Bildbeschriftung im Blocksatz gesetzt, mit text-align: right kann sie rechtssbündig gesetzt werden. Die Breite des Flexcontainers von 100 % kann zwischen den beiden Elementen Bild und Bildbeschreibung beliebig aufgeteilt werden. Werden insgesamt weniger als 100 % angegeben, bildet der Rest Freiraum am rechten Rand. Das Bild hat die Maximalbreite von 40 Geviert, um es bei breiten Fenstern nicht zu riesig erscheinen zu lassen, die Bildbeschriftung ist auf eine Maximalbreite von 30 Geviert gesetzt. Der Abstand zwischen Bild und Bildbeschriftung beträgt 1 Geviert. Die Platzierung des Flexcontainers am rechten Rand erfolgt über justify-content: flex-end.

Mehrere Bilder

Zwei Bilder zentriert ohne Textfluss (Flexbox ohne Umbruch)


        <div style="display: flex; justify-content: center; align-items: flex-end; margin: 1em auto 1em auto; gap: 1em">

                <figure style="flex-basis: 10em; flex-grow: 1; max-width: 35em; margin: 0">

                        <img src="bilder/Bilddateiname" alt="Bildbeschreibung Platzhalter">

                        <figcaption>Bildunterschrift, wenn vorhanden</figcaption>

                </figure>

                <figure style="flex-basis: 10em; flex-grow: 1; max-width: 35em; margin: 0">

                        <img src="bilder/Bilddateiname" alt="Bildbeschreibung Platzhalter">

                        <figcaption>Bildunterschrift, wenn vorhanden</figcaption>

                </figure>

        </div>

Bildausrichtung: links

Textfluss: keiner

Abstände oben und unten: keine

Abstände links und rechts: rechts automatisch, links keiner

Bildbreite: Bis zu 100 % der Seitenbreite, aber höchstens 25 Geviert

Bildhöhe: Wird durch Bildformat festgelegt

Da links kein Abstand angegeben wird, schließt der Bildrand mit dem linken Textrand ab.

Nach oben ist kein Abstand gesetzt, das Bildelement <figure> hat in HTML 5 aber einen Standardabstand von 1 Geviert nach oben und unten.

Drei Bilder zentriert ohne Textfluss (Flexbox mit Umbruch)


        <div style="display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; margin: 1em auto 1em auto; gap: 1em">

                <figure style="flex-basis: 10em; flex-grow: 1; max-width: 35em; margin: 0">

                        <img src="bilder/Bilddateiname" alt="Bildbeschreibung Platzhalter">

                        <figcaption>Bildunterschrift, wenn vorhanden</figcaption>

                </figure>

                <figure style="flex-basis: 10em; flex-grow: 1; max-width: 35em; margin: 0">

                        <img src="bilder/Bilddateiname" alt="Bildbeschreibung Platzhalter">

                        <figcaption>Bildunterschrift, wenn vorhanden</figcaption>

                </figure>

                <figure style="flex-basis: 10em; flex-grow: 1; max-width: 35em; margin: 0">

                        <img src="bilder/Bilddateiname" alt="Bildbeschreibung Platzhalter">

                        <figcaption>Bildunterschrift, wenn vorhanden</figcaption>

                </figure>

        </div>

Gap: Gibt den Abstand der einzelnen Flex-Elemente zueinander an (nur zwischen den Elementen, hat auf die Außenabstände keine Wirkung). Flex-Basis: Muss angegeben werden, als Minimum und Start-Größe, sonst können die einzelen Flex-Elemente stark unterschiedliche Größen haben. Flex-Grow: Damit die einzelnen Flex-Elemente mit der Fensterbreite wachsen können. max-width: Aus ästhetischen Gründen, damit einzelne Bilder nicht zu groß werden. Hier 30 em, also eine optimale Zeilenbreite von etwa 65 Zeichen. Bei unterschiedlichen Seitenverhältnissen der Bilder (beispielsweise wegen Hoch- und Querformat) sollten unterschiedliche Werte gesetzt werden.

Test-Gesamtbeschriftung

flex-direction: row: Objeekte werden in einer Zeile angeziegt row/column flex-wrap. Wenn es nicht genug Platz gibt, wird die Zile umgebrochen wrap/nowrwap justify-content center flex-start flex-end space-around space-between space-evenly align-itemscenter (middle of the container) flex-start (top of the container) flex-end (bnottom of the container) stretch (Objekt wird auf Conateinergröße gestreckt) baseline normal

Favicon-Test

Kaese-Logo im SVG-Format

Kaese-Logo im PNG-Format mit 512 Pixeln

Kaese-Logo im PNG-Format mit 270 Pixeln

Kaese-Logo im PNG-Format mit 180 Pixeln

Kaese-Logo im PNG-Format mit 128 Pixeln

Kaese-Logo im PNG-Format mit 96 Pixeln

Kaese-Logo im PNG-Format mit 32 Pixeln

Float

SASSINLENKE
BürgermeisterStadtdirektor

Flexbox mit p

SASSIN
Bürgermeister

LENKE
Stadtdirektor

Flexbox mit p

SASSIN
Bürgermeister

LENKE
Stadtdirektor

Flexbox mit div

Back
Top of page | Contents

Zurück
Seitenanfang | Inhalt

Vier Bilder zentriert ohne Textfluss (ohne Flexbox)

Zwei Bilder zentriert ohne Textfluss (ohne Flexbox)

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Marktplatz, in der Mitte das älteste Haus (1580), rechts die ehemalige Diakonatpfarre (1709)

Überschriften

Überschrift erster Ordnung `<h1>`

Überschrift zweiter Ordnung `<h2>`

Überschrift dritter Ordnung `<h3>`

Überschrift vierter Ordnung `<h4>`

Überschrift fünfter Ordnung `<h5>`

Überschrift sechster Ordnung `<h6>`

Überschrift in der normalen Absatzformatierung <p>

In in rutrum odio, quis condimentum mauris. Ut nibh ante, imperdiet non fringilla vel, dictum sit amet diam. Nullam non volutpat mi, id consequat massa. Phasellus in purus ante. Sed blandit tortor eu pharetra volutpat. Fusce cursus, velit ut tristique imperdiet, ex libero egestas eros, sit amet euismod ligula elit vel dolor. Nam aliquet orci sit amet urna ultricies, a commodo velit bibendum. In justo ex, euismod non urna sit amet, suscipit feugiat nulla. Quisque ac nunc mauris. Vivamus sit amet hendrerit leo. Sed lobortis quam nec nulla porta, ac elementum arcu luctus. Donec tristique sem mi, auctor lobortis justo interdum in. Nullam metus nisl, tempus hendrerit imperdiet sed, maximus et risus. Mauris mattis rutrum turpis ac venenatis. Phasellus tortor arcu, tincidunt sit amet laoreet a, bibendum vitae neque. Praesent vitae massa non justo accumsan efficitur a sit amet mi.

Dies ist eine Überschrift erster Stufe (H1), also üblicherwiese der Seitentitel.

Dies ist eine Überschrift zweiter Stufe (H2), also üblicherwiese die Hauptüberschrift.

Etiam pellentesque interdum lacinia. Phasellus at justo id libero eleifend congue et vel sapien. In diam metus, congue eu ex ut, vulputate eleifend enim. Sed nec orci auctor nisl gravida scelerisque. Pellentesque ipsum risus, porta vitae venenatis a, sodales id dui. Integer ac dignissim dolor. Fusce molestie feugiat enim a aliquam. Donec sollicitudin nulla vel urna posuere, et faucibus ipsum semper. Sed ultrices, ante nec finibus varius, mi dui rhoncus libero, sed malesuada justo felis a elit. Aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in pellentesque arcu, tempus placerat odio. Duis id pharetra tortor. Phasellus pharetra justo justo, vitae volutpat est sagittis ut.

Aenean tincidunt lacus quis porttitor auctor. Nunc sapien sapien, laoreet sit amet magna sit amet, accumsan tincidunt odio. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent vitae semper velit. Nam condimentum volutpat mattis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum et felis eget leo lacinia cursus. Donec vitae sem lacus.

Dies ist eine Überschrift dritter Stufe (H3).

Donec et egestas ipsum. Fusce nec nisi non velit lacinia bibendum interdum sit amet est. Curabitur enim mi, aliquet vel nulla eu, condimentum semper nisl. In id nunc et ante pharetra laoreet. Phasellus et nibh id enim tempor consequat id et libero. Ut eros tellus, dignissim et enim at, imperdiet porta eros. Integer a luctus nibh, non porttitor eros. Pellentesque at congue est, eu ornare orci. Suspendisse nec sapien vel dui venenatis feugiat sit amet non sem. Maecenas auctor augue ac dui tincidunt, vel accumsan libero ultrices. Nulla id aliquet ligula. Aliquam sodales, velit id commodo convallis, risus erat luctus ligula, id dignissim libero libero vitae arcu. Nullam sed nisl nec ipsum fermentum dictum sed id enim.

Aliquam nibh est, consequat quis ipsum a, efficitur tempor mauris. Maecenas pulvinar consequat sem ac porta. Fusce suscipit libero eget mi tincidunt mollis. Fusce scelerisque maximus nulla, vitae tincidunt lorem iaculis et. Fusce non gravida elit, eu vehicula nibh. Cras cursus sapien quis laoreet euismod. Phasellus eget varius quam. Vivamus ac metus tortor. Etiam mollis tortor quis dolor semper, vitae viverra metus viverra. Nam sodales, urna nec egestas tincidunt, diam justo consequat arcu, sed posuere libero neque eget lorem. Suspendisse scelerisque ultrices sem non tempor.

Dies ist eine Überschrift vierter Stufe (H4).

Nam posuere arcu est, ac ullamcorper turpis dictum id. Proin ligula nisl, hendrerit eleifend lectus sit amet, ultrices fringilla felis. Fusce ac aliquam risus. Fusce id semper sem. Pellentesque semper interdum feugiat. Duis rhoncus molestie dui, eget sagittis justo lacinia laoreet. Donec quis aliquet neque, ac efficitur velit. Integer semper sapien in velit tempus venenatis.

Morbi convallis elit vel posuere aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam lacinia cursus sodales. Curabitur pellentesque efficitur nibh id aliquam. Morbi faucibus sagittis cursus. Maecenas ac dolor non nunc commodo bibendum. Pellentesque porttitor elit id leo pharetra, sit amet pharetra turpis venenatis. Morbi ut fermentum elit, sit amet faucibus ipsum. Nulla dui dui, suscipit nec odio et, varius egestas metus. Nullam convallis porttitor enim vitae finibus. Cras mattis efficitur elit, nec maximus turpis tincidunt vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum leo vel augue mattis vehicula.

Dies ist eine Überschrift erster Stufe (H1), also üblicherwiese der Seitentitel.

Dies ist eine Überschrift zweiter Stufe (H2), also üblicherwiese die Hauptüberschrift.

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam mattis felis leo, vitae aliquet tortor tempus eu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer placerat cursus ipsum in commodo. Sed gravida consequat nulla, et mollis urna eleifend feugiat. Suspendisse laoreet aliquet nulla et vulputate. Aenean egestas at justo et volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam pharetra, enim quis vulputate ultrices, ipsum ipsum iaculis urna, nec porta dui felis eu nibh. Duis iaculis risus nec urna iaculis, suscipit cursus dolor aliquam.

Morbi in fermentum lacus. Nullam bibendum ex vitae ullamcorper egestas. In sit amet arcu in magna aliquet malesuada vel a libero. Cras vitae elementum ligula, quis cursus est. Pellentesque vel dui tristique, pellentesque libero sed, tristique elit. Vivamus congue, mi sit amet malesuada facilisis, urna augue ultrices urna, vitae varius ligula augue non nulla. Suspendisse rhoncus purus nunc, a tincidunt nisi mattis eget. Aenean sit amet diam odio. Morbi eu lectus tortor.

Dies ist eine Überschrift zweiter Stufe (H2), also üblicherwiese die Hauptüberschrift.

Dies ist eine Überschrift dritter Stufe (H3).

Quisque vel augue vel turpis egestas venenatis. In et maximus erat, eu euismod sapien. Suspendisse eu aliquet massa. Cras placerat commodo lorem, vitae dictum velit condimentum nec. Nullam viverra magna nisl, nec vehicula dui euismod efficitur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut ac mi eu turpis scelerisque interdum. Phasellus eget enim dignissim felis vestibulum tempor. Morbi sit amet nulla sed ex dictum auctor. Vestibulum nec dapibus lectus, sed congue dui. Duis eget ipsum ac mi ultrices laoreet sit amet id tortor. Vivamus posuere sapien eget augue suscipit, id laoreet quam lobortis. Etiam scelerisque tincidunt leo vel condimentum. Nulla varius magna maximus libero congue tempus.

Sed ut sagittis dui, eget pretium orci. Praesent porttitor ullamcorper sem vel commodo. Nam congue, sem at lobortis laoreet, mi libero mollis nisl, eu congue neque mauris ac ante. Aenean volutpat viverra justo, a sodales massa. Curabitur maximus, ipsum sed suscipit auctor, sem lectus ullamcorper nulla, non imperdiet nibh lectus ultricies ante. Sed pharetra laoreet mauris, et hendrerit tellus ullamcorper quis. Fusce luctus lobortis nulla, non condimentum nibh. Nam iaculis pretium nisi, quis accumsan quam. Suspendisse fermentum semper ex, in tristique elit luctus nec. Mauris consequat erat in risus luctus porttitor. Nunc leo lacus, commodo ut efficitur sed, tempus in nisi. Maecenas dignissim fermentum mi, id euismod ipsum bibendum et.

Dies ist eine Überschrift dritter Stufe (H3).

Dies ist eine Überschrift vierter Stufe (H4).

Duis dolor tortor, bibendum convallis magna vitae, ornare luctus urna. Suspendisse id suscipit libero, vitae fringilla dui. In hac habitasse platea dictumst. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque at augue congue, vulputate mauris quis, vestibulum felis. Phasellus convallis blandit velit a condimentum. Morbi a metus nisl. Proin a consectetur diam. Nulla scelerisque ligula non aliquet iaculis. Aenean non gravida neque, vitae faucibus diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer at ullamcorper quam. Nulla lacinia volutpat libero, ut placerat magna viverra sed.

Quisque facilisis tincidunt felis ac dignissim. Integer quis quam risus. Nam consequat mattis lectus, ac suscipit elit sagittis et. Proin consectetur erat nec efficitur euismod. Nunc metus ex, lacinia nec velit eget, suscipit porttitor massa. Curabitur posuere augue metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse urna mi, maximus a ipsum sit amet, finibus dapibus orci. Mauris at ultricies orci, sed ultricies augue. Morbi vitae turpis vel quam sagittis porta. Maecenas sed arcu pulvinar, vehicula massa pretium, vehicula felis. Pellentesque et dui lacus. Nulla pulvinar sollicitudin quam sed maximus. Suspendisse potenti. Nullam eleifend commodo arcu, ut dapibus ipsum sodales at. Nulla nec efficitur nulla, quis aliquet urna.

Dies ist eine Überschrift erster Stufe (H1), also üblicherwiese der Seitentitel.

Dies ist eine Überschrift zweiter Stufe (H2), also üblicherwiese die Hauptüberschrift.

Dies ist eine Überschrift dritter Stufe (H3).

Dies ist eine Überschrift zweiter Stufe (H2), also üblicherwiese die Hauptüberschrift.

Dies ist eine Überschrift dritter Stufe (H3).

Dies ist eine Überschrift vierter Stufe (H4).

Listen

Unsortierte Liste	<ul>	</ul>
Aufzählungspunkt (CSS-Standardwert)	<ul style="list-style-type: disc">	</ul>
Aufzählungsquadrat	<ul style="list-style-type: square">	</ul>
Ohne Aufzählungszeichen	<ul style="list-style-type: none">	</ul>
Listeneintrag	<li>	</li>

Sortierte Liste	<ol>	</ol>
Nummerierung (CSS-Standardwert)	<ol style="list-style-type: decimal">	</ol>
Nummerierung mit führender Null	<ol style="list-style-type: decimal-leading-zero">	</ol>
Großbuchstaben-Aufzählung	<ol style="list-style-type: upper-alpha">	</ol>
Kleinbuchstaben-Aufzählung	<ol style="list-style-type: lower-alpha">	</ol>
Aufzählung mit römischen Zahlen in Großbuchstaben	<ol style="list-style-type: upper-roman">	</ol>
Aufzählung mit römischen Zahlen in Kleinbuchstaben	<ol style="list-style-type: lower-roman">	</ol>
Ohne Aufzählung	<ol style="list-style-type: none">	</ol>
Anfangszähler für sortierte Liste setzen (immer numerisch)	<ol start="17">	</ol>
Listeneintrag	<li>	</li>
Zähler für Eintrag in sortierten Listen setzen (immer numerisch)	<li value="17">	</li>

Definitionsliste	<dl>	</dl>
Listeneintrag (Begriff)	<dt>	</dt>
Listeneintrag (Beschreibung des Begriffs)	<dd>	</dd>

CSS-Standardwerte

Unsortierte Listen ul: display: block; margin: 1em 0 1em 0; border: 0 0 0 0; padding: 0 0 0 40px; list-style-type: disc
Sortierte Listen ol: display: block; margin: 1em 0 1em 0; border: 0 0 0 0; padding: 0 0 0 40px; list-style-type: decimal
Listeneinträge li: display: list-item; margin: 0 0 0 0; border: 0 0 0 0; padding: 0 0 0 0
Standardabsätze (zum Vergleich) p: display: block; margin: 1em 0 1em 0; border: 0 0 0 0; padding: 0 0 0 0

Eigene Formatvorlagen-Standardwerte

Unsortierte Listen ul: margin: 1em 0 0 0; border: 0 0 0 0; padding: 0 0 0 1.5em; text-indent: 0; list-style-type: square
Sortierte Listen ol: margin: 1em 0 0 0; border: 0 0 0 0; padding: 0 0 0 1.5em; text-indent: 0
Verschachtelte Listen ul ul, ul ol, ol ul, ol ol: margin: 0 0 0 0
Listeneinträge li: margin: 0 0 0.25em 0; border: 0 0 0 0; padding: 0 0 0 0; text-indent: 0
Absätze innerhalb von unsortierten und sortierten Listen ul p, ol p: margin: 0.25em 0 0.25em 0
Definitionslisten dl: margin: 1em 0 0.75em 0; border: 0 0 0 0; padding: 0 0 0 0; text-indent: 0
Absätze innerhalb von Definitionslisten dl p: margin: 0.25em 0 0.25em 0
Definitionslisteneintrag (Begriff) dt: margin: 0.5em 0 0.25em 0; border: 0 0 0 0; padding: 0 0 0 1.25em; text-indent: 0; font-weight: bold
Definitionslisteneintrag (Beschreibung) dd:
Standardabsätze (zum Vergleich) p: margin: 1em 0 1em 0; border: 0 0 0 0; padding: 0 0 0 0

Einen Aufzählungsstrich für Listen (–) gibt es in HTML 5 nicht. Daher am besten statt des Standard-Aufzählungspunktes (•) das modernere Aufzählungsquadrat (▪) für unsortiere Listen ul in der CSS-Formatvorlage definieren.

Listen brauchen Platz am linken Rand für Nummerierung oder Aufzählungszeichen. Daher müssen sie mit einem passenden Einzug eingerückt werden, um linksbündig zu sein. Geschieht dies nicht oder mit einem zu kleinen Einzug, werden Nummerierung oder Aufzählungszeichen abgeschnitten. Ein größer gewählter Einzug lässt die Liste nach rechts einrücken.

Unsortierte Listen:

Aufzählungszeichen: 1,5 em <ul style="padding-left: 1.5em">
Ohne Aufzählungszeichen und mit Einzug: 1,5 em <ul style="padding-left: 1.5em">
Ohne Aufzählungszeichen und ohne Einzug: 0 em <ul style="padding-left: 0em">

Sortierte Listen mit Ziffern-Nummerierung (Ziffernbreite 0,5 Geviert):

Eine Ziffer: 1,5 em <ol style="padding-left: 1.5em">
Zwei Ziffern: 2 em <ol style="padding-left: 2em">
Drei Ziffern: 2,5 em <ol style="padding-left: 2.5em">
Vier Ziffern (zum Beispiel Jahreszahl): 3 em <ol style="padding-left: 3em">

Sortierte Listen mit alphabetischer Aufzählung (Breite Buchstabe „M“ 1 Geviert):

Ein Buchstabe: 1,75 em <ol style="padding-left: 1.75em">
Zwei Buchstaben: 2,75 em <ol style="padding-left: 2.75em">
Drei Buchstaben: 3,75 em <ol style="padding-left: 3.75em">

Die eigene Formatvorlage ist daher nur für bestimmte Listen gut. Die Einträge in rot müssen jeweils individuell gemacht, um Listen sauber zu formatieren.
Exakt wird man es nicht hinbekommen, denn die Buchstabenbreite und die Zeichenabstände können je nach Schriftart unterschiedlich sein. Daher sollte ein kleiner Abstand links gelassen werden, damit die Liste bei breiteren Schriftarten nicht nach links über den Satzspiegel hinaussteht.

Wird bei Listeneinträgen kein Abstand unten gesetzt, gibt es zwischen Listeneinträgen nur den Standard-Zeilenabstand. Typografisch sollte der Zeilenabstand zwischen Listeneinträgen größer sein als der Zeilenabstand, aber geringer als der Absatzabstand. Daher li in der CSS-Formatvorlage definieren.
Eine verschachtelte Liste (Liste unterer Ebene) sollte oben und unten keinen größeren Zeilenabstand zur Liste der höheren Ebene haben. Daher ol ol, ol ul, ul ol, ul ul in der CSS-Formatvorlage definieren.
Der Abstand für Absätze innerhalb von Listen sollte nicht größer sein als der Abstand zwischen den Listeneinträgen. Daher ol p und ul p in der CSS-Formatvorlage definieren.

Beispiel einer sortierten Liste (Formatvorlage)

Hier ist ein normaler Textabsatz (<p>). Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac maximus magna, pharetra efficitur urna. Quisque pellentesque dolor in lorem porta elementum. In hac habitasse platea dictumst. Nam rutrum risus erat, accumsan tincidunt erat egestas vel. Curabitur nibh libero, dapibus at libero at, vestibulum viverra lorem. In vehicula ornare metus, non commodo felis efficitur rutrum.

Dies ist ein Beispiel einer langen sortierten Liste (<ol>) nach einem normalen Textabsatz (<p>). Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac maximus magna, pharetra efficitur urna. Quisque pellentesque dolor in lorem porta elementum. In hac habitasse platea dictumst. Nam rutrum risus erat, accumsan tincidunt erat egestas vel. Curabitur nibh libero, dapibus at libero at, vestibulum viverra lorem. In vehicula ornare metus, non commodo felis efficitur rutrum.

Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac maximus magna, pharetra efficitur urna. Quisque pellentesque dolor in lorem porta elementum. In hac habitasse platea dictumst. Nam rutrum risus erat, accumsan tincidunt erat egestas vel. Curabitur nibh libero, dapibus at libero at, vestibulum viverra lorem. In vehicula ornare metus, non commodo felis efficitur rutrum.
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac maximus magna, pharetra efficitur urna. Quisque pellentesque dolor in lorem porta elementum. In hac habitasse platea dictumst. Nam rutrum risus erat, accumsan tincidunt erat egestas vel. Curabitur nibh libero, dapibus at libero at, vestibulum viverra lorem. In vehicula ornare metus, non commodo felis efficitur rutrum.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac maximus magna, pharetra efficitur urna. Quisque pellentesque dolor in lorem porta elementum. In hac habitasse platea dictumst. Nam rutrum risus erat, accumsan tincidunt erat egestas vel. Curabitur nibh libero, dapibus at libero at, vestibulum viverra lorem. In vehicula ornare metus, non commodo felis efficitur rutrum.
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac maximus magna, pharetra efficitur urna. Quisque pellentesque dolor in lorem porta elementum. In hac habitasse platea dictumst. Nam rutrum risus erat, accumsan tincidunt erat egestas vel. Curabitur nibh libero, dapibus at libero at, vestibulum viverra lorem. In vehicula ornare metus, non commodo felis efficitur rutrum.
Ut varius ipsum ipsum, et accumsan ligula semper vel. Nunc elementum vel dui a imperdiet. Integer rhoncus dignissim urna, vitae gravida mauris. Pellentesque laoreet eget dui nec eleifend. Donec ac mattis sapien. Vestibulum quis diam hendrerit, faucibus neque ut, vehicula mauris.
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac maximus magna, pharetra efficitur urna. Quisque pellentesque dolor in lorem porta elementum. In hac habitasse platea dictumst. Nam rutrum risus erat, accumsan tincidunt erat egestas vel. Curabitur nibh libero, dapibus at libero at, vestibulum viverra lorem. In vehicula ornare metus, non commodo felis efficitur rutrum.
Ut varius ipsum ipsum, et accumsan ligula semper vel. Nunc elementum vel dui a imperdiet. Integer rhoncus dignissim urna, vitae gravida mauris. Pellentesque laoreet eget dui nec eleifend. Donec ac mattis sapien. Vestibulum quis diam hendrerit, faucibus neque ut, vehicula mauris.
In in rutrum odio, quis condimentum mauris. Ut nibh ante, imperdiet non fringilla vel, dictum sit amet diam. Nullam non volutpat mi, id consequat massa. Phasellus in purus ante. Sed blandit tortor eu pharetra volutpat. Fusce cursus, velit ut tristique imperdiet, ex libero egestas eros, sit amet euismod ligula elit vel dolor.
Nam aliquet orci sit amet urna ultricies, a commodo velit bibendum. In justo ex, euismod non urna sit amet, suscipit feugiat nulla. Quisque ac nunc mauris. Vivamus sit amet hendrerit leo. Sed lobortis quam nec nulla porta, ac elementum arcu luctus. Donec tristique sem mi, auctor lobortis justo interdum in.
Nullam metus nisl, tempus hendrerit imperdiet sed, maximus et risus. Mauris mattis rutrum turpis ac venenatis. Phasellus tortor arcu, tincidunt sit amet laoreet a, bibendum vitae neque. Praesent vitae massa non justo accumsan efficitur a sit amet mi.
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Dieser Listeneintrag besteht aus zwei normalen Textabsätzen (<li><p>Text</p><p>Text</p><li>). Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac maximus magna, pharetra efficitur urna. Quisque pellentesque dolor in lorem porta elementum. In hac habitasse platea dictumst. Nam rutrum risus erat, accumsan tincidunt erat egestas vel. Curabitur nibh libero, dapibus at libero at, vestibulum viverra lorem. In vehicula ornare metus, non commodo felis efficitur rutrum.

Und nun der zweite normaler Textabsatz (<p>) in einem Listeneintrag. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac maximus magna, pharetra efficitur urna. Quisque pellentesque dolor in lorem porta elementum. In hac habitasse platea dictumst. Nam rutrum risus erat, accumsan tincidunt erat egestas vel. Curabitur nibh libero, dapibus at libero at, vestibulum viverra lorem. In vehicula ornare metus, non commodo felis efficitur rutrum.
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor

Hier sind die Listeneinträge durch zwei normale Textabsätze (<li>Listeneintrag</li><p>Text</p><p>Text</p><li>Listeneintrag</li>) unterbrochen. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac maximus magna, pharetra efficitur urna. Quisque pellentesque dolor in lorem porta elementum. In hac habitasse platea dictumst. Nam rutrum risus erat, accumsan tincidunt erat egestas vel. Curabitur nibh libero, dapibus at libero at, vestibulum viverra lorem. In vehicula ornare metus, non commodo felis efficitur rutrum.

Und nun der zweite normaler Textabsatz (<p>) in einem Listeneintrag. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac maximus magna, pharetra efficitur urna. Quisque pellentesque dolor in lorem porta elementum. In hac habitasse platea dictumst. Nam rutrum risus erat, accumsan tincidunt erat egestas vel. Curabitur nibh libero, dapibus at libero at, vestibulum viverra lorem. In vehicula ornare metus, non commodo felis efficitur rutrum.

Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor

Hier beginnt eine sortierte Liste zweiter Ebene (verschachtelte Liste)
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor

Hier beginnt eine sortierte Liste dritter Ebene (verschachtelte Liste)
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor

Hier beginnt eine sortierte Liste vierte Ebene (verschachtelte Liste)
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor

Hier beginnt eine sortierte Liste fünfter Ebene (verschachtelte Liste)
Lorem ipsum dolor
Lorem ipsum dolor

Dieser Listeneintrag besteht aus zwei normalen Textabsätzen (<li><p>Text</p><p>Text</p><li>) in einer Liste. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac maximus magna, pharetra efficitur urna. Quisque pellentesque dolor in lorem porta elementum. In hac habitasse platea dictumst. Nam rutrum risus erat, accumsan tincidunt erat egestas vel. Curabitur nibh libero, dapibus at libero at, vestibulum viverra lorem. In vehicula ornare metus, non commodo felis efficitur rutrum.

Lorem ipsum dolor
Zähler auf 99

Lorem ipsum dolor
Zähler auf 99

Lorem ipsum dolor
Zähler auf 99

Lorem ipsum dolor
Zähler auf 99

Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Zähler auf 99
Zähler auf 100
Zähler auf 999
Zähler auf 9999

So geht es dann weiter mit einem normalen Textabsatz (<p>). Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac maximus magna, pharetra efficitur urna. Quisque pellentesque dolor in lorem porta elementum. In hac habitasse platea dictumst. Nam rutrum risus erat, accumsan tincidunt erat egestas vel. Curabitur nibh libero, dapibus at libero at, vestibulum viverra lorem. In vehicula ornare metus, non commodo felis efficitur rutrum.

Einrücken bei einstelliger Nummerierung (`<ol style="list-style-type: decimal">`, sonst Formatvorlage)

Dies ist ein Beispiel einer sortierten Liste (<ol>) nach einem normalen Textabsatz (<p>). Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac maximus magna, pharetra efficitur urna. Quisque pellentesque dolor in lorem porta elementum. In hac habitasse platea dictumst. Nam rutrum risus erat, accumsan tincidunt erat egestas vel. Curabitur nibh libero, dapibus at libero at, vestibulum viverra lorem. In vehicula ornare metus, non commodo felis efficitur rutrum.

Lorem ipsum dolor
Lorem ipsum dolor

Lorem ipsum dolor
Lorem ipsum dolor

Einrücken bei einstelliger Nummerierung mit empfohlenen 1,5 em Rand links (`<ol style="margin-left: 0; border-left: 0; padding-Left: 1.5em; list-style-type: decimal">`, sonst Formatvorlage)

Lorem ipsum dolor
Lorem ipsum dolor

Einrücken bei zweistelliger Nummerierung (`<ol style="list-style-type: decimal">`, sonst Formatvorlage)

Lorem ipsum dolor
Zähler auf 99

Einrücken bei zweistelliger Nummerierung mit empfohlenen 2 em Rand links (`<ol style="margin-left: 0; border-left: 0; padding-Left: 2em; list-style-type: decimal">`, sonst Formatvorlage)

Lorem ipsum dolor
Zähler auf 99

Einrücken bei dreistelliger Nummerierung (`<ol style="list-style-type: decimal">`, sonst Formatvorlage)

Lorem ipsum dolor
Zähler auf 999

Einrücken bei dreistelliger Nummerierung mit empfohlenen 2.5 em Rand links (`<ol style="margin-left: 0; border-left: 0; padding-Left: 2.5em; list-style-type: decimal">`, sonst Formatvorlage)

Lorem ipsum dolor
Zähler auf 999

Einrücken bei vierstelliger Nummerierung (`<ol style="list-style-type: decimal">`, sonst Formatvorlage)

Lorem ipsum dolor
Zähler auf 9999

Einrücken bei vierstelliger Nummerierung mit empfohlenen 3 em Rand links (`<ol style="margin-left: 0; border-left: 0; padding-Left: 3em; list-style-type: decimal">`, sonst Formatvorlage)

Lorem ipsum dolor
Zähler auf 9999

Einrücken bei einstelliger Großbuchstaben-Aufzählung (`<ul style="list-style-type: upper-alpha">`, sonst Formatvorlage)

Lorem ipsum dolor
Zähler auf 13 (M)

Einrücken bei einstelliger Großbuchstaben-Aufzählung mit empfohlenen 1,75 em Rand links (`<ul style="margin-left: 0; border-left: 0; padding-Left: 1.75em; list-style-type: upper-alpha">`, sonst Formatvorlage)

Lorem ipsum dolor
Zähler auf 13 (M)

Einrücken bei zweistelliger Großbuchstaben-Aufzählung (`<ul style="list-style-type: upper-alpha">`, sonst Formatvorlage)

Lorem ipsum dolor
Zähler auf 351 (MM)

Einrücken bei zweistelliger Großbuchstaben-Aufzählung mit empfohlenen 2.75 em Rand links (`<ul style="margin-left: 0; border-left: 0; padding-Left: 2.75em; list-style-type: upper-alpha">`, sonst Formatvorlage)

Lorem ipsum dolor
Zähler auf 351 (MM)

Einrücken bei dreistelliger Großbuchstaben-Aufzählung (`<ul style="list-style-type: upper-alpha">`, sonst Formatvorlage)

Lorem ipsum dolor
Zähler auf 9139 (MMM)

Einrücken bei dreistelliger Großbuchstaben-Aufzählung mit empfohlenen 3.75 em Rand links (`<ul style="margin-left: 0; border-left: 0; padding-Left: 3.75em; list-style-type: upper-alpha">`, sonst Formatvorlage)

Lorem ipsum dolor
Zähler auf 9139 (MMM)

Beispiel einer unsortierten Liste (Formatvorlage)

Dies ist ein Beispiel einer langen unsortierten Liste (<ul>) nach einem normalen Textabsatz (<p>). Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac maximus magna, pharetra efficitur urna. Quisque pellentesque dolor in lorem porta elementum. In hac habitasse platea dictumst. Nam rutrum risus erat, accumsan tincidunt erat egestas vel. Curabitur nibh libero, dapibus at libero at, vestibulum viverra lorem. In vehicula ornare metus, non commodo felis efficitur rutrum.

Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac maximus magna, pharetra efficitur urna. Quisque pellentesque dolor in lorem porta elementum. In hac habitasse platea dictumst. Nam rutrum risus erat, accumsan tincidunt erat egestas vel. Curabitur nibh libero, dapibus at libero at, vestibulum viverra lorem. In vehicula ornare metus, non commodo felis efficitur rutrum.
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac maximus magna, pharetra efficitur urna. Quisque pellentesque dolor in lorem porta elementum. In hac habitasse platea dictumst. Nam rutrum risus erat, accumsan tincidunt erat egestas vel. Curabitur nibh libero, dapibus at libero at, vestibulum viverra lorem. In vehicula ornare metus, non commodo felis efficitur rutrum.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac maximus magna, pharetra efficitur urna. Quisque pellentesque dolor in lorem porta elementum. In hac habitasse platea dictumst. Nam rutrum risus erat, accumsan tincidunt erat egestas vel. Curabitur nibh libero, dapibus at libero at, vestibulum viverra lorem. In vehicula ornare metus, non commodo felis efficitur rutrum.
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac maximus magna, pharetra efficitur urna. Quisque pellentesque dolor in lorem porta elementum. In hac habitasse platea dictumst. Nam rutrum risus erat, accumsan tincidunt erat egestas vel. Curabitur nibh libero, dapibus at libero at, vestibulum viverra lorem. In vehicula ornare metus, non commodo felis efficitur rutrum.
Ut varius ipsum ipsum, et accumsan ligula semper vel. Nunc elementum vel dui a imperdiet. Integer rhoncus dignissim urna, vitae gravida mauris. Pellentesque laoreet eget dui nec eleifend. Donec ac mattis sapien. Vestibulum quis diam hendrerit, faucibus neque ut, vehicula mauris.
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac maximus magna, pharetra efficitur urna. Quisque pellentesque dolor in lorem porta elementum. In hac habitasse platea dictumst. Nam rutrum risus erat, accumsan tincidunt erat egestas vel. Curabitur nibh libero, dapibus at libero at, vestibulum viverra lorem. In vehicula ornare metus, non commodo felis efficitur rutrum.
Ut varius ipsum ipsum, et accumsan ligula semper vel. Nunc elementum vel dui a imperdiet. Integer rhoncus dignissim urna, vitae gravida mauris. Pellentesque laoreet eget dui nec eleifend. Donec ac mattis sapien. Vestibulum quis diam hendrerit, faucibus neque ut, vehicula mauris.
In in rutrum odio, quis condimentum mauris. Ut nibh ante, imperdiet non fringilla vel, dictum sit amet diam. Nullam non volutpat mi, id consequat massa. Phasellus in purus ante. Sed blandit tortor eu pharetra volutpat. Fusce cursus, velit ut tristique imperdiet, ex libero egestas eros, sit amet euismod ligula elit vel dolor.
Nam aliquet orci sit amet urna ultricies, a commodo velit bibendum. In justo ex, euismod non urna sit amet, suscipit feugiat nulla. Quisque ac nunc mauris. Vivamus sit amet hendrerit leo. Sed lobortis quam nec nulla porta, ac elementum arcu luctus. Donec tristique sem mi, auctor lobortis justo interdum in.
Nullam metus nisl, tempus hendrerit imperdiet sed, maximus et risus. Mauris mattis rutrum turpis ac venenatis. Phasellus tortor arcu, tincidunt sit amet laoreet a, bibendum vitae neque. Praesent vitae massa non justo accumsan efficitur a sit amet mi.
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Dieser Listeneintrag besteht aus zwei normalen Textabsätzen (<li><p>Text</p><p>Text</p><li>) in einer Liste. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac maximus magna, pharetra efficitur urna. Quisque pellentesque dolor in lorem porta elementum. In hac habitasse platea dictumst. Nam rutrum risus erat, accumsan tincidunt erat egestas vel. Curabitur nibh libero, dapibus at libero at, vestibulum viverra lorem. In vehicula ornare metus, non commodo felis efficitur rutrum.

Und nun der zweite normaler Textabsatz (<p>) in einem Listeneintrag. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac maximus magna, pharetra efficitur urna. Quisque pellentesque dolor in lorem porta elementum. In hac habitasse platea dictumst. Nam rutrum risus erat, accumsan tincidunt erat egestas vel. Curabitur nibh libero, dapibus at libero at, vestibulum viverra lorem. In vehicula ornare metus, non commodo felis efficitur rutrum.
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor

Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor

Hier beginnt eine sortierte Liste zweiter Ebene (verschachtelte Liste)
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor

Hier beginnt eine sortierte Liste dritter Ebene (verschachtelte Liste)
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor

Hier beginnt eine sortierte Liste vierte Ebene (verschachtelte Liste)
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor

Hier beginnt eine sortierte Liste fünfter Ebene (verschachtelte Liste)
Lorem ipsum dolor
Lorem ipsum dolor

Lorem ipsum dolor
Zähler auf 99

Lorem ipsum dolor
Zähler auf 99

Lorem ipsum dolor
Zähler auf 99

Lorem ipsum dolor
Zähler auf 99

Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Zähler auf 99
Zähler auf 100
Zähler auf 999
Zähler auf 9999

Einrücken bei Aufzählungsquadrat (`<ul style="list-style-type: square">`, sonst Formatvorlage)

Dies ist ein Beispiel unsortierten Liste (<ol>) nach einem normalen Textabsatz (<p>). Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac maximus magna, pharetra efficitur urna. Quisque pellentesque dolor in lorem porta elementum. In hac habitasse platea dictumst. Nam rutrum risus erat, accumsan tincidunt erat egestas vel. Curabitur nibh libero, dapibus at libero at, vestibulum viverra lorem. In vehicula ornare metus, non commodo felis efficitur rutrum.

Lorem ipsum dolor
Lorem ipsum dolor

Einrücken bei Aufzählungsquadrat mit empfohlenen 1,5 em Rand links (`<ul style="margin-left: 0; border-left: 0; padding-Left: 1.5em; list-style-type: square">`, sonst Formatvorlage)

Dies ist ein Beispiel einer unsortierten Liste (<ol>) nach einem normalen Textabsatz (<p>). Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac maximus magna, pharetra efficitur urna. Quisque pellentesque dolor in lorem porta elementum. In hac habitasse platea dictumst. Nam rutrum risus erat, accumsan tincidunt erat egestas vel. Curabitur nibh libero, dapibus at libero at, vestibulum viverra lorem. In vehicula ornare metus, non commodo felis efficitur rutrum.

Lorem ipsum dolor
Lorem ipsum dolor

Einrücken ohne Aufzählungszeichen (`<ul style="list-style-type: none">`, sonst Formatvorlage)

Lorem ipsum dolor
Lorem ipsum dolor

Einrücken ohne Aufzählungszeichen mit 1,5 em Rand links (`<ul style="margin-left: 0; border-left: 0; padding-Left: 1.5em; list-style-type: none">`, sonst Formatvorlage)

Lorem ipsum dolor
Lorem ipsum dolor

Einrücken ohne Aufzählungszeichen ohne Rand links (`<ul style="margin-left: 0; border-left: 0; padding-Left: 0; list-style-type: none">`, sonst Formatvorlage)

Lorem ipsum dolor
Lorem ipsum dolor

Beispiel einer Definitionsliste (Formatvorlage)

Dies ist ein Beispiel einer Definitionsliste (<dl>) nach einem normalen Textabsatz (<p>). Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac maximus magna, pharetra efficitur urna. Quisque pellentesque dolor in lorem porta elementum. In hac habitasse platea dictumst. Nam rutrum risus erat, accumsan tincidunt erat egestas vel. Curabitur nibh libero, dapibus at libero at, vestibulum viverra lorem. In vehicula ornare metus, non commodo felis efficitur rutrum.

Zu beschreibender Begriff

Und hier die Erläuterung dazu

Zu beschreibender Begriff

Und hier die Erläuterung dazu

Zu beschreibender Begriff

Und hier die Erläuterung mit Überlänge dazu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac maximus magna, pharetra efficitur urna. Quisque pellentesque dolor in lorem porta elementum. In hac habitasse platea dictumst. Nam rutrum risus erat, accumsan tincidunt erat egestas vel. Curabitur nibh libero, dapibus at libero at, vestibulum viverra lorem. In vehicula ornare metus, non commodo felis efficitur rutrum.

Zu beschreibender Begriff mit Überlänge. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac maximus magna, pharetra efficitur urna. Quisque pellentesque dolor in lorem porta elementum. In hac habitasse platea dictumst. Nam rutrum risus erat, accumsan tincidunt erat egestas vel. Curabitur nibh libero, dapibus at libero at, vestibulum viverra lorem. In vehicula ornare metus, non commodo felis efficitur rutrum.

Und hier die Erläuterung dazu

Zu beschreibender Begriff

Und hier die Erläuterung dazu

Zu beschreibender Begriff

Und hier die Erläuterung dazu

Zu beschreibender Begriff.

Diese Begriffsbeschreibung besteht aus zwei normalen Textabsätzen in einer Definitionsliste (<dd><p>Text</p><p>Text</p><dd>). Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac maximus magna, pharetra efficitur urna. Quisque pellentesque dolor in lorem porta elementum. In hac habitasse platea dictumst. Nam rutrum risus erat, accumsan tincidunt erat egestas vel. Curabitur nibh libero, dapibus at libero at, vestibulum viverra lorem. In vehicula ornare metus, non commodo felis efficitur rutrum.

Und nun der zweite normaler Textabsatz in einem Listeneintrag. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac maximus magna, pharetra efficitur urna. Quisque pellentesque dolor in lorem porta elementum. In hac habitasse platea dictumst. Nam rutrum risus erat, accumsan tincidunt erat egestas vel. Curabitur nibh libero, dapibus at libero at, vestibulum viverra lorem. In vehicula ornare metus, non commodo felis efficitur rutrum.

Zu beschreibender Begriff

Und hier die Erläuterung dazu

Zu beschreibender Begriff

Und hier die Erläuterung dazu

Tabellen

Einfache Tabelle

Pferd	Esel	Huhn
Kuh	Schwein	Ochse
Hund	Reh	Giraffe

Tabelle mit Überschriftszellen

Hof 1	Hof 3	Hof 4
Pferd	Esel	Huhn
Kuh	Schwein	Ochse
Hund	Reh	Giraffe

Tabelle mit Tabellenüberschrift

Tabellenüberschrift
Pferd	Esel	Huhn
Kuh	Schwein	Ochse
Hund	Reh	Giraffe

Tabelle mit Tabellenüberschrift und Überschriftszellen

Tabellenüberschrift
Hof 1	Hof 3	Hof 4
Pferd	Esel	Huhn
Kuh	Schwein	Ochse
Hund	Reh	Giraffe

Nochmal mit tbody

Einfache Tabelle

Pferd	Esel	Huhn
Kuh	Schwein	Ochse
Hund	Reh	Giraffe

Tabelle mit Überschriftszellen

Hof 1	Hof 3	Hof 4
Pferd	Esel	Huhn
Kuh	Schwein	Ochse
Hund	Reh	Giraffe

Tabelle mit Tabellenüberschrift

Tabellenüberschrift
Pferd	Esel	Huhn
Kuh	Schwein	Ochse
Hund	Reh	Giraffe

Tabelle mit Tabellenüberschrift und Überschriftszellen

Tabellenüberschrift
Hof 1	Hof 3	Hof 4
Pferd	Esel	Huhn
Kuh	Schwein	Ochse
Hund	Reh	Giraffe

Nochmal mit thead und tbody

Einfache Tabelle

Pferd	Esel	Huhn
Kuh	Schwein	Ochse
Hund	Reh	Giraffe

Tabelle mit Überschriftszellen

Hof 1	Hof 3	Hof 4
Pferd	Esel	Huhn
Kuh	Schwein	Ochse
Hund	Reh	Giraffe

Tabelle mit Tabellenüberschrift

Tabellenüberschrift
Pferd	Esel	Huhn
Kuh	Schwein	Ochse
Hund	Reh	Giraffe

Tabelle mit Tabellenüberschrift und Überschriftszellen

Tabellenüberschrift
Hof 1	Hof 3	Hof 4
Pferd	Esel	Huhn
Kuh	Schwein	Ochse
Hund	Reh	Giraffe

Nochmal mit thead, tbody und tfoot

Einfache Tabelle

Pferd	Esel	Huhn
Kuh	Schwein	Ochse
Hund	Reh	Giraffe
57 Tiere	11 Tiere	37 Tiere

Tabelle mit Überschriftszellen

Hof 1	Hof 3	Hof 4
Pferd	Esel	Huhn
Kuh	Schwein	Ochse
Hund	Reh	Giraffe
57 Tiere	11 Tiere	37 Tiere

Tabelle mit Tabellenüberschrift

Tabellenüberschrift
Pferd	Esel	Huhn
Kuh	Schwein	Ochse
Hund	Reh	Giraffe
57 Tiere	11 Tiere	37 Tiere

Tabelle mit Tabellenüberschrift und Überschriftszellen

Tabellenüberschrift
Hof 1	Hof 3	Hof 4
Pferd	Esel	Huhn
Kuh	Schwein	Ochse
Hund	Reh	Giraffe
57 Tiere	11 Tiere	37 Tiere

Tabelle mit Tabellenüberschrift und Überschriftszellen

Tabellenüberschrift
Abschnittsüberschrift
Hof 1	Hof 3	Hof 4
Pferd	Esel	Huhn
Kuh	Schwein	Ochse
Hund	Reh	Giraffe
Abschnittsüberschrift
Hof 1	Hof 3	Hof 4
Pferd	Esel	Huhn
Kuh	Schwein	Ochse
Hund	Reh	Giraffe
57 Tiere	11 Tiere	37 Tiere

Dies ist ein Beispiel einer Tabelle.

Tabellenüberschrift
Lorem ipsum dolor sit amet, consectetur adipiscing elit.	Ut varius ipsum ipsum, et accumsan ligula semper vel.	In in rutrum odio, quis condimentum mauris. Ut nibh ante, imperdiet non fringilla vel, dictum sit amet diam.	Nam aliquet orci sit.	Nullam metus nisl, tempus hendrerit imperdiet sed, maximus et risus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac maximus magna, pharetra efficitur urna. Quisque pellentesque dolor in lorem porta elementum. In hac habitasse platea dictumst. Nam rutrum risus erat, accumsan tincidunt erat egestas vel. Curabitur nibh libero, dapibus at libero at, vestibulum viverra lorem. In vehicula ornare metus, non commodo felis efficitur rutrum.	Ut varius ipsum ipsum, et accumsan ligula semper vel. Nunc elementum vel dui a imperdiet. Integer rhoncus dignissim urna, vitae gravida mauris. Pellentesque laoreet eget dui nec eleifend. Donec ac mattis sapien. Vestibulum quis diam hendrerit, faucibus neque ut, vehicula mauris.	In in rutrum odio, quis condimentum mauris. Ut nibh ante, imperdiet non fringilla vel, dictum sit amet diam. Nullam non volutpat mi, id consequat massa. Phasellus in purus ante. Sed blandit tortor eu pharetra volutpat. Fusce cursus, velit ut tristique imperdiet, ex libero egestas eros, sit amet euismod ligula elit vel dolor.	Nam aliquet orci sit amet urna ultricies, a commodo velit bibendum. In justo ex, euismod non urna sit amet, suscipit feugiat nulla. Quisque ac nunc mauris. Vivamus sit amet hendrerit leo. Sed lobortis quam nec nulla porta, ac elementum arcu luctus. Donec tristique sem mi, auctor lobortis justo interdum in.	Nullam metus nisl, tempus hendrerit imperdiet sed, maximus et risus. Mauris mattis rutrum turpis ac venenatis. Phasellus tortor arcu, tincidunt sit amet laoreet a, bibendum vitae neque. Praesent vitae massa non justo accumsan efficitur a sit amet mi.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac maximus magna, pharetra efficitur urna. Quisque pellentesque dolor in lorem porta elementum. In hac habitasse platea dictumst. Nam rutrum risus erat, accumsan tincidunt erat egestas vel. Curabitur nibh libero, dapibus at libero at, vestibulum viverra lorem. In vehicula ornare metus, non commodo felis efficitur rutrum.	Ut varius ipsum ipsum, et accumsan ligula semper vel. Nunc elementum vel dui a imperdiet. Integer rhoncus dignissim urna, vitae gravida mauris. Pellentesque laoreet eget dui nec eleifend. Donec ac mattis sapien. Vestibulum quis diam hendrerit, faucibus neque ut, vehicula mauris.	In in rutrum odio, quis condimentum mauris. Ut nibh ante, imperdiet non fringilla vel, dictum sit amet diam. Nullam non volutpat mi, id consequat massa. Phasellus in purus ante. Sed blandit tortor eu pharetra volutpat. Fusce cursus, velit ut tristique imperdiet, ex libero egestas eros, sit amet euismod ligula elit vel dolor.	Nam aliquet orci sit amet urna ultricies, a commodo velit bibendum. In justo ex, euismod non urna sit amet, suscipit feugiat nulla. Quisque ac nunc mauris. Vivamus sit amet hendrerit leo. Sed lobortis quam nec nulla porta, ac elementum arcu luctus. Donec tristique sem mi, auctor lobortis justo interdum in.	Nullam metus nisl, tempus hendrerit imperdiet sed, maximus et risus. Mauris mattis rutrum turpis ac venenatis. Phasellus tortor arcu, tincidunt sit amet laoreet a, bibendum vitae neque. Praesent vitae massa non justo accumsan efficitur a sit amet mi.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac maximus magna, pharetra efficitur urna. Quisque pellentesque dolor in lorem porta elementum. In hac habitasse platea dictumst. Nam rutrum risus erat, accumsan tincidunt erat egestas vel. Curabitur nibh libero, dapibus at libero at, vestibulum viverra lorem. In vehicula ornare metus, non commodo felis efficitur rutrum.	Ut varius ipsum ipsum, et accumsan ligula semper vel. Nunc elementum vel dui a imperdiet. Integer rhoncus dignissim urna, vitae gravida mauris. Pellentesque laoreet eget dui nec eleifend. Donec ac mattis sapien. Vestibulum quis diam hendrerit, faucibus neque ut, vehicula mauris.	In in rutrum odio, quis condimentum mauris. Ut nibh ante, imperdiet non fringilla vel, dictum sit amet diam. Nullam non volutpat mi, id consequat massa. Phasellus in purus ante. Sed blandit tortor eu pharetra volutpat. Fusce cursus, velit ut tristique imperdiet, ex libero egestas eros, sit amet euismod ligula elit vel dolor.	Nam aliquet orci sit amet urna ultricies, a commodo velit bibendum. In justo ex, euismod non urna sit amet, suscipit feugiat nulla. Quisque ac nunc mauris. Vivamus sit amet hendrerit leo. Sed lobortis quam nec nulla porta, ac elementum arcu luctus. Donec tristique sem mi, auctor lobortis justo interdum in.	Nullam metus nisl, tempus hendrerit imperdiet sed, maximus et risus. Mauris mattis rutrum turpis ac venenatis. Phasellus tortor arcu, tincidunt sit amet laoreet a, bibendum vitae neque. Praesent vitae massa non justo accumsan efficitur a sit amet mi.

So geht’s dann weiter im Text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac maximus magna, pharetra efficitur urna. Quisque pellentesque dolor in lorem porta elementum. In hac habitasse platea dictumst. Nam rutrum risus erat, accumsan tincidunt erat egestas vel. Curabitur nibh libero, dapibus at libero at, vestibulum viverra lorem. In vehicula ornare metus, non commodo felis efficitur rutrum.

Dies ist ein Beispiel einer Tabelle.

Tabellenüberschrift
Lorem ipsum dolor sit amet, consectetur adipiscing elit.	Ut varius ipsum ipsum, et accumsan ligula semper vel.	In in rutrum odio, quis condimentum mauris. Ut nibh ante, imperdiet non fringilla vel, dictum sit amet diam.	Nam aliquet orci sit.	Nullam metus nisl, tempus hendrerit imperdiet sed, maximus et risus.
56	12	18	22	27
41	57	68	19	11
56	12	18	22	27

Dies ist ein Beispiel einer Tabelle.

Tabellenüberschrift
Anzahl	Stück	Preis	Gurkensalat	Pferde
56	12	18	22	27
41	57	68	19	11
56	12	18	22	27

Dies ist ein Beispiel einer Tabelle.

Tabellenüberschrift
Anzahl	Stück	Preis	Gurkensalat	Pferde
56	12	18	22	27
41	57	68	19	11
56	12	18	22	27
Anzahl
56	12	18	22	27
41	57	68	19	11
56	12	18	22	27

Übersicht Tabellen in HTML 5 und CSS 2.1

Tabellenstruktur
<table>	Tabelle
<caption>	Titelbeschriftung einer Tabelle Optional, als erstes nach <table>.
<colgroup>	Gruppe aus Tabellenspalten Optional, nach <caption> und vor <thead>, <tbody>, <tfoot>, <tr>. Nur ein Element pro Tabelle erlaubt. Wird genutzt, um Formate für Tabellenspalten festzulegen. Blöderweise erlaubt der CSS-Standard 2.1 nur das Setzen von border, background, width, and visibility, also nicht die wichtige Schriftformatierung oder -ausrichtung.
<thead>	Überschrift der Tabellenspalten Optional, nach <caption>, <colgroup> und vor <tbody>, <tfoot>, <tr>. Nur ein Element pro Tabelle erlaubt.
<tbody>	Tabellendaten Optional, nach <caption>, <colgroup>, <thead> und vor <tfoot>. Mehrere Elemente pro Tabelle erlaubt. Für Spaltenüberschriften innerhalb dieses Elements <th> nutzen, da <thead> nur einmal am Tabellenanfang vor <tbody> erlaubt ist. <th> kann auch für Zeilenüberschriften genutzt werden. Dieses Element ist zwar optional, aber auch wenn es nicht in einer Tabelle enthalten ist, werden alle Tabellenzeilen <tr> und Tabellenzellen <th> und <td> behandelt, als wenn sie innerhalb dieses Elementes stünden. Das heißt, für die Formatvorlage ist eine separate Formatfestlegung von <tr>, <th>, <td> einzeln und noch einmal speziell für <tbody> nicht sinnvoll.
<tfoot>	Zusammenfassung der Tabellenspalten Optional, nach <caption>, <colgroup>, <thead>, <tbody>. Nur ein Element pro Tabelle erlaubt.
Tabelleninhalt
<tr>	Tabellenzeile Innerhalb der Elemente <table>, <thead>, <tbody>, <tfoot>. Aus irgendwelchen Gründen erlaubt der CSS-Standard 2.1 das Setzen des Außenabstands (margin) und des Innenabstands (padding) nicht für dieses Element. Abstände in Tabellen daher immer mit Innenabstand (padding) in den einzelnen Tabellenzellen <th> und <td> setzen.
<th>	Einzelne Tabellenüberschriftszelle Innerhalb des Elements <tr>. Sowohl für Spalten- als auch für Zeilenüberschriften. Mit dem Attribut colspan="x" erstreckt sich eine Zelle über mehrere Spalten, mit rowspan="x" über mehrere Zeilen. Da der CSS-Standard 2.1 das Setzen des Außenabstands (margin) und des Innenabstands (padding) nicht für die Tabellenzeilen <tr> erlaubt, Abstände immer mit Innenabstand (padding) in diesem Element und in <td> setzen.
<td>	Einzelne Tabellenzelle Innerhalb des Elements <tr>. Mit dem Attribut colspan="x" erstreckt sich eine Zelle über mehrere Spalten, mit rowspan="x" über mehrere Zeilen. Da der CSS-Standard 2.1 das Setzen des Außenabstands (margin) und des Innenabstands (padding) nicht für die Tabellenzeilen <tr> erlaubt, Abstände immer mit Innenabstand (padding) in diesem Element und in <th> setzen.

Element inside a colgroup element: <col>. It has no end tag. span.
‚margin' links und rechts auf ‚auto‘ bei ‚table‘ zentriert die Tabelle.
border-collapse: collapse and separate.
border-spacing: setzte den Abstand zwischen den Rahmen der Tabelle. Funktioniert nur, when border-collapse auf separate gesetzt ist.
Bei einigen Internetbrowsern kommt es bei punktierten Linien manchmal zu Darstellungsfehlern, sie werden als durchgezogene Linien dargestellt (vielleicht weil mehrere punktierte Linien übereinander dargstellt werden?).
Zeilenabstände können nur über die einzelnen Zellen th und td gesetzt werden. Daher ist eine Formatierung über nth-child usw. nutzlos. Also hat jede Zeile jeweils innerhalb einem der drei Tabellenabschnitte thead, tbody und tfoot den gleichen Abstand.

Diese Beispieltabelle zeigt nur die Grundstruktur mit Spaltenüberschriften

Titelbeschriftung <caption> mit einer Zeile
Eine Tabellenzeile mit Spaltenüberschrift
Drei Tabellenzeilen
Eine Tabellenzeile mit Spaltenüberschrift
Drei Tabellenzeilen
Zwei Tabellenzeilen mit Spaltenüberschriften
Drei Tabellenzeilen

Tabellenüberschrift
Hof 1	Hof 3	Hof 4
Ringelschwanzaffe	Esel	Huhn
Kuh
Hund	Steinadler	Giraffe
Hof 1	Hof 3	Hof 4
Ringelschwanzaffe
Kuh	Schwein	Vampirtintenfisch
Hund	Steinadler	Giraffe
Eine weitere Überschrift
Hof 1	Hof 3	Hof 4
Ringelschwanzaffe	Esel	Huhn
Kuh	Schwein	Vampirtintenfisch
Hund	Steinadler	Giraffe

Diese Beispieltabelle zeigt nur die Grundstruktur mit Spaltenüberschriften (doppelt am Anfang)

Titelbeschriftung <caption> mit einer Zeile
Zwei Tabellenzeile mit Spaltenüberschrift
Drei Tabellenzeilen
Eine Tabellenzeile mit Spaltenüberschrift
Drei Tabellenzeilen
Zwei Tabellenzeilen mit Spaltenüberschriften
Drei Tabellenzeilen

Tabellenüberschrift
Eine weitere Überschrift
Hof 1	Hof 3	Hof 4
Ringelschwanzaffe	Esel	Huhn
Kuh	Schwein	Vampirtintenfisch
Hund	Steinadler	Giraffe
Hof 1	Hof 3	Hof 4
Ringelschwanzaffe	Esel	Huhn
Kuh
Hund	Steinadler	Giraffe
Eine weitere Überschrift
Hof 1	Hof 3	Hof 4
Ringelschwanzaffe	Esel	Huhn
Kuh	Schwein	Vampirtintenfisch
Hund	Steinadler	Giraffe

Diese Beispieltabelle zeigt die volle Struktur

Titelbeschriftung <caption> mit einer Zeile
Spaltenüberschriftselement <thead> mit einer Zeile
Datenelement <tbody> mit drei Zeilen
Datenelement <tbody> mit drei Zeilen
Datenelement <tbody> mit einer Überschriftszeile und drei Zeilen
Datenelement <tbody> mit zwei Überschriftszeilen und drei Zeilen
Fußelement <tfoot> mit einer Zeile

Tabellenüberschrift
Hof 1	Hof 3	Hof 4
Ringelschwanzaffe	Esel	Huhn
Kuh	Schwein	Vampirtintenfisch
Hund	Steinadler	Giraffe
Ringelschwanzaffe	Esel	Huhn
Kuh	Schwein	Vampirtintenfisch
Hund	Steinadler	Giraffe
Hof 1	Hof 3	Hof 4
Ringelschwanzaffe	Esel	Huhn
Kuh	Schwein	Vampirtintenfisch
Hund	Steinadler	Giraffe
Eine weitere Überschrift
Hof 1	Hof 3	Hof 4
Ringelschwanzaffe	Esel	Huhn
Kuh	Schwein	Vampirtintenfisch
Hund	Steinadler	Giraffe
57 Tiere	11 Tiere	37 Tiere

Diese Beispieltabelle zeigt die volle Stuktur mit doppelten Kopf- und Fußzeilen

Titelbeschriftung <caption> mit einer Zeile
Spaltenüberschriftselement <thead> mit zwei Zeilen
Datenelement <tbody> mit drei Zeilen
Datenelement <tbody> mit drei Zeilen
Datenelement <tbody> mit einer Überschriftszeile und drei Zeilen
Datenelement <tbody> mit zwei Überschriftszeilen und drei Zeilen
Fußelement <tfoot> mit zwei Zeilen

Tabellenüberschrift
Eine weitere Überschrift
Hof 1	Hof 3	Hof 4
Ringelschwanzaffe	Esel	Huhn
Kuh	Schwein	Vampirtintenfisch
Hund	Steinadler	Giraffe
Ringelschwanzaffe	Esel	Huhn
Kuh	Schwein	Vampirtintenfisch
Hund	Steinadler	Giraffe
Hof 1	Hof 3	Hof 4
Ringelschwanzaffe	Esel	Huhn
Kuh	Schwein	Vampirtintenfisch
Hund	Steinadler	Giraffe
Eine weitere Überschrift
Hof 1	Hof 3	Hof 4
Ringelschwanzaffe	Esel	Huhn
Kuh	Schwein	Vampirtintenfisch
Hund	Steinadler	Giraffe
57 Tiere	11 Tiere	37 Tiere
57 Tiere	11 Tiere	37 Tiere

gez. Anthon Ulrich
(LS)

So geht’s dann weiter im Text.

–––––x

Ein Textteil einer Zeile links, der andere rechts.

Hier links. Hier rechts.

So geht’s dann weiter im Text.

Ein Textteil einer Zeile links, der andere ungefähr mittig.

Hier links.Hier mittig.

So geht’s dann weiter im Text.

Ein Textteil einer Zeile ungefähr mittig, der andere rechts.

Hier mittig.Hier rechts.

So geht’s dann weiter im Text.

Regeln

xxx

Internet-Domain-Namen

Ein Internet-Domain-Name besteht normalerweise aus der Top-Level-Domain (TLD), der Hauptdomain und eventuell einer oder mehrerer Subdomains. Beispiel: „www.beispiel.com“ mit der Top-Level-Domain „.com“, der Hauptdomain „beispiel“ und der Subdomain „www“.

Domain-Namen-Bestandteile dürfen maximal 63 Zeichen lang sein, der Gesamt-Domain-Name darf 253 Zeichen nicht überschreiten.

Für Domain-Namen sind folgende Zeichen erlaubt:

abcdefghijklmnopqrstuvwxyz
0123456789
- U+002D Bindestrich-Minus-Zeichen (nicht am Anfang oder Ende eines Domain-Namen-Bestandteils und nicht direkt hintereinander)
. U+002E Punkt (nur als Trenner zwischen den Bestandteilen des Domain-Namens)

Großbuchstaben sind erlaubt, werden allerdings nicht von Kleinbuchstaben unterschieden, und sollten daher nicht verwendet werden.

Weitere nationale Sonderzeichen (beispielsweise äöüß) können erlaubt sein, müssen aber speziell kodiert werden.

Vollständige Internetadressen (URLs)

Vollständige Internetadressen enthalten das Webprotokoll, den Domain-Namen sowie eventuell noch Dateipfade und Parameter, wie beispielsweise „https://www.beispiel.com/ordner/datei.html#kapitel1“.

Für vollständige Internetadressen sind folgende Zeichen erlaubt:

abcdefghijklmnopqrstuvwxyz
0123456789
- U+002D Bindestrich-Minus-Zeichen
_ U+005F Unterstrich
~ U+007E Tilde
. U+002E Punkt (sollte auf die Dateinamenserweiterung beschränkt werden)

Großbuchstaben sind erlaubt, und werden im Pfad nach dem Domain-Namen von Kleinbuchstaben unterschieden, können also auf verschiedene Dateien verweisen. Wegen der Verwechslungsgefahr sollten sie allerdings vermieden werden.

Weitere Sonderzeichen, einschließlich Leerzeichen, können erlaubt sein, müssen aber speziell kodiert werden.

Reserved characters

,;:?!
()[]
+=
/#@$&'*

Reservierte Zeichen in HTML

Die folgenden Sonderzeichen haben eine besondere Bedeutung in HTML, und werden nicht als Text dargestellt. Für die Textdarstellung müssen sie mit einem HTML-Sonderzeichen-Code umschrieben werden.

< U+003C Kleiner-als-Zeichen
> U+003E Größer-als-Zeichen
& U+0026 Und-Zeichen
" U+0022 Schreibmaschinen-Anführungszeichen
' U+0027 Schreibmaschinen-Apostroph

HTML-Sonderzeichen-Code zur Darstellung von beliebigen Zeichen: 
0000 wird dabei ersetzt durch den hexadezimalen Unicode-Codepunkt des jeweiligen Zeichens.

HTML ID-Attribut

ID-Attribut in HTML 5 (<div id="Kapitel1"></div>) zur Identifizierung von Ankerstellen.

Muss im Dokument eindeutig sein, darf keine Leerzeichen enthalten, darf nicht mit einer Ziffer beginnen, muss mindestens ein Zeichen enthalten.

Folgende Zeichen sind problemlos verwendbar:

abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789
- U+002D Bindestrich-Minus-Zeichen
_ U+005F Unterstrich
. U+002E Punkt

Großbuchstaben sind erlaubt, und werden von Kleinbuchstaben unterschieden, verweisen also auf verschiedene IDs.

Weitere Sonderzeichen (beispielsweise äöüß) sind erlaubt, es wird aber von der Verwendung abgeraten, um die Kompatibilität (z. B. für Altsysteme, Javascript, CSS) zu erhöhen.

Links in HTML

href URL Specifies the URL of the page the link goes to

Das HTML-Attribut href gibt einen Link auf ein Dokument an, welches beim einem Klick des Nutzers aufgerufen wird. Das verlinkte Dokument kann im aktuellen Fenster oder in einem neuem Fenster dargestellt werden.

target="_self" Standard; target="_blank" Neues Fenster Mit dem Nummernzeichen als Sprungmarke kann eine bestimmte Stelle im aktuellen Dokumente angezeigt werden.
<a href="https://kaese.name">Besuche kaese.name!</a>
<a href="#Kapitel1">Springe zum Kapitel 1!</a>

Das HTML-Attribut scr gibt einen Link für die Quelle (source) einer Ressource an, die automatisch in das aktuelle Dokument geladen und damit eingebettet wird.

Relative Links

href="datei.html" Die Datei liegt im aktuellen Verzeichnis.
href="ordner/datei.html" Die Datei liegt im Verzeichnis „ordner“, welcher sich im aktuellen Verzeichnis befindet.
href="../datei.html" Die Datei liegt eine Verzeichnisebene über dem aktuellen Verzeichnis.
href="../ordner/datei.html" Die Datei liegt im Verzeichnis „ordner“, welcher sich eine Verzeichnisebene über dem aktuellen Verzeichnis befindet.

Absolute Links

href="/datei.html" Die Datei liegt im Stammverzeichnis der Internetadresse (z. B. „beispiel.com/datei.html“).
href="/ordner/datei.html" Die Datei liegt im Verzeichnis „ordner“, welcher sich im Stammverzeichnis der Internetadresse befindet (z. B. „beispiel.com/ordner/datei.html“).
href="https://beispiel.com" Es wird die Index-Datei (Hauptdatei) der angegebenen Internetadresse aufgerufen.
href="https://beispiel.com/datei.html" Die Datei „datei.html“ der angegebenen Internetadresse wird aufgerufen.

Wird keine Datei angegeben, werden standardmäßig die Dateien „index.html“, „index.htm“ oder „index.php“ aufgerufen. Viele Internetserver sind darauf eingestellt, auch „home.html“ oder „home.htm“ aufzurufen.

Das Nummernzeichen (#) in Links dient als Sprungmarke.

href="#Kapitel1" Der Browser springt an die Stelle „Kapitel1“ im aktuellen Dokument.
href="datei.html#kapitel1" Die Datei „datei.html“ im aktuellen Verzeichnis wird aufgerufen und der Browser springt an die Stelle „Kapitel1“.

Zitate

Beispiel q: Hier gibt es das Zitat Auch wenn man nur zum Fenster rausschaut, sieht man die Welt. von Wilhelm Raabe.

Beispiel q: Hier gibt es das Zitat mit Quellenangabe Auch wenn man nur zum Fenster rausschaut, sieht man die Welt. von Wilhelm Raabe.

Beispiel blockquote: Hier gibt es ein sogenanntes Block-Zitat.

Quisque facilisis tincidunt felis ac dignissim. Integer quis quam risus. Nam consequat mattis lectus, ac suscipit elit sagittis et. Proin consectetur erat nec efficitur euismod. Nunc metus ex, lacinia nec velit eget, suscipit porttitor massa. Curabitur posuere augue metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse urna mi, maximus a ipsum sit amet, finibus dapibus orci. Mauris at ultricies orci, sed ultricies augue. Morbi vitae turpis vel quam sagittis porta. Maecenas sed arcu pulvinar, vehicula massa pretium, vehicula felis. Pellentesque et dui lacus. Nulla pulvinar sollicitudin quam sed maximus. Suspendisse potenti. Nullam eleifend commodo arcu, ut dapibus ipsum sodales at. Nulla nec efficitur nulla, quis aliquet urna.

So geht’s dann weiter im Text.

Beispiel blockquote: Hier gibt es ein sogenanntes Block-Zitat mit Quellenangabe.

Quisque facilisis tincidunt felis ac dignissim. Integer quis quam risus. Nam consequat mattis lectus, ac suscipit elit sagittis et. Proin consectetur erat nec efficitur euismod. Nunc metus ex, lacinia nec velit eget, suscipit porttitor massa. Curabitur posuere augue metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse urna mi, maximus a ipsum sit amet, finibus dapibus orci. Mauris at ultricies orci, sed ultricies augue. Morbi vitae turpis vel quam sagittis porta. Maecenas sed arcu pulvinar, vehicula massa pretium, vehicula felis. Pellentesque et dui lacus. Nulla pulvinar sollicitudin quam sed maximus. Suspendisse potenti. Nullam eleifend commodo arcu, ut dapibus ipsum sodales at. Nulla nec efficitur nulla, quis aliquet urna.

So geht’s dann weiter im Text.

Beispiel margin-left: Hier gibt es eingerückten Text.

So geht’s dann weiter im Text.

Beispiel text-indent: Hier gibt Text mit Einzug.

So geht’s dann weiter im Text.

Fußnotenversuche

Fußnote mit „details“

Lorem ipsum dolor sit amet, consectetur

Beispiel für eine Fußnote?

adipiscing elit. In ac maximus magna, pharetra efficitur urna. Quisque pellentesque dolor in lorem porta elementum. In hac habitasse platea dictumst. Nam rutrum risus erat, accumsan tincidunt erat egestas vel. Curabitur nibh libero, dapibus at libero at, vestibulum viverra lorem. In vehicula ornare metus, non commodo felis efficitur rutrum. Ut varius ipsum ipsum, et accumsan ligula semper vel. Nunc elementum vel dui a imperdiet. Integer rhoncus dignissim urna, vitae gravida mauris. Pellentesque laoreet eget dui nec eleifend. Donec ac mattis sapien. Vestibulum quis diam hendrerit, faucibus neque ut, vehicula mauris.

Fußnote mit „details“

Lorem ipsum dolor sit amet, consectetur

Beispiel für eine Fußnote?

Fußnote mit „dfn“

Lorem ipsum dolor sit amet, consecteturBeispiel für eine Fußnote? adipiscing elit. In ac maximus magna, pharetra efficitur urna. Quisque pellentesque dolor in lorem porta elementum. In hac habitasse platea dictumst. Nam rutrum risus erat, accumsan tincidunt erat egestas vel. Curabitur nibh libero, dapibus at libero at, vestibulum viverra lorem. In vehicula ornare metus, non commodo felis efficitur rutrum. Ut varius ipsum ipsum, et accumsan ligula semper vel. Nunc elementum vel dui a imperdiet. Integer rhoncus dignissim urna, vitae gravida mauris. Pellentesque laoreet eget dui nec eleifend. Donec ac mattis sapien. Vestibulum quis diam hendrerit, faucibus neque ut, vehicula mauris.

Fußnote mit „span title“

Fußnote mit „abbr“

Hochgestellter Text

Auf Herrn Heinrich folgte Herr Werner, dann kam Hoiko, dann Eberhard, dann Gottschalk, dann Theodor, dann Arnold, dann Ratherius und so fort eine lange Reihe, deren Namen man wohl noch weiß, aber nicht mehr von ihren Gräberplatten aus Wesersandstein, die zerbröckelt und verstoben sind wie die Gebeine der alten Herren, welche unter ihnen zum Ausruhen kamen. Wir nennen von den frommen Vätern, die bis zur Reformation einander ablösten auf dem Abtstuhl, nur noch einen, nämlich Herrn Werner den Zweiten von Bodenwerder. Zehn Schuhe soll der Mann lang gewesen sein: der Freiherr von Münchhausen, der ja auch aus Bodenwerder war, erzählt seltsamerweise von ihm nichts, was das Ding freilich etwas verdächtig macht. Aber wie dem auch sei, wozu hilft alle Erdengröße, wenn in kritischen Zeiten der rechte Erdenverstand dabei mangelt?

Kritische Zeiten kamen mit dem wittenbergischen Augustiner auch für die Zisterzienser zu Amelungsborn und fanden ausnahmsweise den rechten Mann mit dem allerrichtigsten Verständnis an der Spitze der geistlichen Bruderschaft auf dem Auerberge. Andreas Steinhauer hieß er, hatte im Jahre 1512, von deutschen Eltern in London geboren, zum erstenmal aus schlauen Äuglein in die verworrene Welt hineingeblinzelt und sicherlich nicht ohne Gründe in Köln Theologie studiert. Von Bredelar aus beriefen ihn die Brüder in ihr Weserkloster als Prior, und Herzog Heinrich der Jüngere von Braunschweig hatte bis zu seinem Tode Anno 1568 keinen getreuern Anhänger seines katholischen Glaubens als seinen Abt zu Amelungsborn, Andreas Steinhauer.

Was helfen einem die schönsten kritischen Zeiten, wenn man sie nicht zu benutzen versteht? Dominus Abbas Andreas Steinhauerius verstand's; und wo andere unter plötzlich veränderten Umständen das Nest hätten räumen müssen, wußte er es noch wärmer auszufüttern und sich sogar ganz hausväterlich gemütlich drin einzurichten. Die grimmig-päpstische Faust im Eisenhandschuh des alten antischmalkaldischen Grimmbarts Herzog Heinrich löste sich vom Kragen des braunschweigischen Landes und sank, Staub zu Staub, hinunter in die Gruft der Kirche Beatae Mariae Virginis zu Wolfenbüttel. Julius hieß der Erbe und Nachfolger im Reich, der neuen Lehre zuerst sogar als Märtyrer zugetan, nun aber ihr mächtiger Gönner und Beförderer. Ich habe Gott Amor im Verdacht, daß er dem alten Herrn Andreas sein Märtyrertum des Übertritts¹⁵² zum Luthertum nach Möglichkeit erleichterte vor seinem Gewissen. Wie dem auch sei, der letzte katholische Abt von Amelungsborn legte sich sofort um auf die andere Seite und zog auch seinen ganzen Konvent mit hinüber. Und im Jahre 1572 freiete er, der Abt, nicht der Konvent, und führte heim ins Kloster Jungfrawen Margarethen Peinen, eines Bürgers zu Stadtoldendorf eheleiblich und hoffentlich auch lieblich Töchterlein. Ob Sankt Bernhard sich darob in seinem Grabe zu Clairvaux umgelegt habe, weiß keiner; eine Verleumdung aber ist es, daß Vater Andreas Steinhauer seiner Eheliebsten den Turm der Stadtkirche zu Stadtoldendorf als Heiratsgut verschrieben habe. Der Turm eignet heute noch dem Kloster Amelungsborn, und nur die daran hängende Kirche gehört löblicher Bürgerschaft. Im Jahre 1588 ist auch dieser werte Mann zu seinen Vätern versammelt und in der Klosterkirche beigesetzt worden. Sein Bild und Grabstein sind heute noch dort zu sehen, und der Magister Noah Buchius, der nicht einmal den Namen mit dem seligen Ahnherrn⁹⁷ gemein hat, hat im währenden Siebenjährigen Kriege durch vorgeschobenes Gerümpel sein möglichstes getan, beides zu schützen, sowohl vor den roten Husaren des Generals Luckner wie vor den austrasischen Freiwilligen des Marschalls von Broglio und den Bergschotten Mylord Granbys.

Wie aber kam der Magister zu diesem großen Ahnherrn? Auf die einfachste Weise. Sein Urgroßvater Veit Buchius folgte dem alten Andreas nicht nur auf dem Abtstuhl, sondern auch im Ehebett. Und die Wittib war jung und angenehm, und er hatte Nachkommenschaft. Jared zeugete Henoch. Henoch zeugete Methusalah. Methusalah zeugete Lamech; und Lamech zeugete einen Sohn und hieß ihn Noah und sprach:

»Der wird uns trösten in unserer Mühe und Arbeit auf Erden, die der Herr verflucht hat!«

Rechner

GeeksforGeeks Calculator

Zur digitalen Version

Struktur einer Webseite in HTML 5

CSS-Standardwerte für Bilder

Einbindung von Bildern auf Webseiten in HTML 5

Einzelbilder mit Bildbeschriftung unten

Zentriertes Bild ohne seitlichen Textfluss

Bild links ohne seitlichen Textfluss

Bild links mit Textfluss rechts (inline)

Einzelbilder mit Bildbeschriftung seitlich

Einzelnes Bild mit Bildbeschriftung rechts daneben, beide zentriert, ohne Textfluss (mit Flexbox)

Einzelnes Bild links mit Bildbeschriftung rechts daneben, ohne Textfluss (mit Flexbox)

Einzelnes Bild rechts mit Bildbeschriftung links daneben, ohne Textfluss (mit Flexbox)

Mehrere Bilder

Zwei Bilder zentriert ohne Textfluss (Flexbox ohne Umbruch)

Drei Bilder zentriert ohne Textfluss (Flexbox mit Umbruch)

Vier Bilder zentriert ohne Textfluss (ohne Flexbox)

Vier Bilder zentriert ohne Textfluss (ohne Flexbox)

Zwei Bilder zentriert ohne Textfluss (ohne Flexbox)

Überschriften

Überschrift erster Ordnung <h1>

Überschrift zweiter Ordnung <h2>

Überschrift dritter Ordnung <h3>

Überschrift vierter Ordnung <h4>

Überschrift fünfter Ordnung <h5>

Überschrift sechster Ordnung <h6>

Dies ist eine Überschrift erster Stufe (H1), also üblicherwiese der Seitentitel.

Dies ist eine Überschrift zweiter Stufe (H2), also üblicherwiese die Hauptüberschrift.

Dies ist eine Überschrift dritter Stufe (H3).

Dies ist eine Überschrift vierter Stufe (H4).

Dies ist eine Überschrift erster Stufe (H1), also üblicherwiese der Seitentitel.

Dies ist eine Überschrift zweiter Stufe (H2), also üblicherwiese die Hauptüberschrift.

Dies ist eine Überschrift zweiter Stufe (H2), also üblicherwiese die Hauptüberschrift.

Dies ist eine Überschrift dritter Stufe (H3).

Dies ist eine Überschrift dritter Stufe (H3).

Dies ist eine Überschrift vierter Stufe (H4).

Dies ist eine Überschrift erster Stufe (H1), also üblicherwiese der Seitentitel.

Dies ist eine Überschrift zweiter Stufe (H2), also üblicherwiese die Hauptüberschrift.

Dies ist eine Überschrift dritter Stufe (H3).

Dies ist eine Überschrift zweiter Stufe (H2), also üblicherwiese die Hauptüberschrift.

Dies ist eine Überschrift dritter Stufe (H3).

Dies ist eine Überschrift vierter Stufe (H4).

Listen

Beispiel einer sortierten Liste (Formatvorlage)

Einrücken bei einstelliger Nummerierung (<ol style="list-style-type: decimal">, sonst Formatvorlage)

Einrücken bei einstelliger Nummerierung mit empfohlenen 1,5 em Rand links (<ol style="margin-left: 0; border-left: 0; padding-Left: 1.5em; list-style-type: decimal">, sonst Formatvorlage)

Einrücken bei zweistelliger Nummerierung (<ol style="list-style-type: decimal">, sonst Formatvorlage)

Einrücken bei zweistelliger Nummerierung mit empfohlenen 2 em Rand links (<ol style="margin-left: 0; border-left: 0; padding-Left: 2em; list-style-type: decimal">, sonst Formatvorlage)

Einrücken bei dreistelliger Nummerierung (<ol style="list-style-type: decimal">, sonst Formatvorlage)

Einrücken bei dreistelliger Nummerierung mit empfohlenen 2.5 em Rand links (<ol style="margin-left: 0; border-left: 0; padding-Left: 2.5em; list-style-type: decimal">, sonst Formatvorlage)

Einrücken bei vierstelliger Nummerierung (<ol style="list-style-type: decimal">, sonst Formatvorlage)

Einrücken bei vierstelliger Nummerierung mit empfohlenen 3 em Rand links (<ol style="margin-left: 0; border-left: 0; padding-Left: 3em; list-style-type: decimal">, sonst Formatvorlage)

Einrücken bei einstelliger Großbuchstaben-Aufzählung (<ul style="list-style-type: upper-alpha">, sonst Formatvorlage)

Einrücken bei einstelliger Großbuchstaben-Aufzählung mit empfohlenen 1,75 em Rand links (<ul style="margin-left: 0; border-left: 0; padding-Left: 1.75em; list-style-type: upper-alpha">, sonst Formatvorlage)

Einrücken bei zweistelliger Großbuchstaben-Aufzählung (<ul style="list-style-type: upper-alpha">, sonst Formatvorlage)

Einrücken bei zweistelliger Großbuchstaben-Aufzählung mit empfohlenen 2.75 em Rand links (<ul style="margin-left: 0; border-left: 0; padding-Left: 2.75em; list-style-type: upper-alpha">, sonst Formatvorlage)

Einrücken bei dreistelliger Großbuchstaben-Aufzählung (<ul style="list-style-type: upper-alpha">, sonst Formatvorlage)

Einrücken bei dreistelliger Großbuchstaben-Aufzählung mit empfohlenen 3.75 em Rand links (<ul style="margin-left: 0; border-left: 0; padding-Left: 3.75em; list-style-type: upper-alpha">, sonst Formatvorlage)

Beispiel einer unsortierten Liste (Formatvorlage)

Einrücken bei Aufzählungsquadrat (<ul style="list-style-type: square">, sonst Formatvorlage)

Einrücken bei Aufzählungsquadrat mit empfohlenen 1,5 em Rand links (<ul style="margin-left: 0; border-left: 0; padding-Left: 1.5em; list-style-type: square">, sonst Formatvorlage)

Einrücken ohne Aufzählungszeichen (<ul style="list-style-type: none">, sonst Formatvorlage)

Einrücken ohne Aufzählungszeichen mit 1,5 em Rand links (<ul style="margin-left: 0; border-left: 0; padding-Left: 1.5em; list-style-type: none">, sonst Formatvorlage)

Einrücken ohne Aufzählungszeichen ohne Rand links (<ul style="margin-left: 0; border-left: 0; padding-Left: 0; list-style-type: none">, sonst Formatvorlage)

Beispiel einer Definitionsliste (Formatvorlage)

Tabellen

Übersicht Tabellen in HTML 5 und CSS 2.1

Diese Beispieltabelle zeigt nur die Grundstruktur mit Spaltenüberschriften

Diese Beispieltabelle zeigt nur die Grundstruktur mit Spaltenüberschriften (doppelt am Anfang)

Diese Beispieltabelle zeigt die volle Struktur

Diese Beispieltabelle zeigt die volle Stuktur mit doppelten Kopf- und Fußzeilen

Regeln

Internet-Domain-Namen

Vollständige Internetadressen (URLs)

Reservierte Zeichen in HTML

HTML ID-Attribut

Links in HTML

Zitate

Fußnotenversuche

Fußnote mit „details“

Fußnote mit „details“

Überschrift erster Ordnung `<h1>`

Überschrift zweiter Ordnung `<h2>`

Überschrift dritter Ordnung `<h3>`

Überschrift vierter Ordnung `<h4>`

Überschrift fünfter Ordnung `<h5>`

Überschrift sechster Ordnung `<h6>`

Einrücken bei einstelliger Nummerierung (`<ol style="list-style-type: decimal">`, sonst Formatvorlage)

Einrücken bei einstelliger Nummerierung mit empfohlenen 1,5 em Rand links (`<ol style="margin-left: 0; border-left: 0; padding-Left: 1.5em; list-style-type: decimal">`, sonst Formatvorlage)

Einrücken bei zweistelliger Nummerierung (`<ol style="list-style-type: decimal">`, sonst Formatvorlage)

Einrücken bei zweistelliger Nummerierung mit empfohlenen 2 em Rand links (`<ol style="margin-left: 0; border-left: 0; padding-Left: 2em; list-style-type: decimal">`, sonst Formatvorlage)

Einrücken bei dreistelliger Nummerierung (`<ol style="list-style-type: decimal">`, sonst Formatvorlage)

Einrücken bei dreistelliger Nummerierung mit empfohlenen 2.5 em Rand links (`<ol style="margin-left: 0; border-left: 0; padding-Left: 2.5em; list-style-type: decimal">`, sonst Formatvorlage)

Einrücken bei vierstelliger Nummerierung (`<ol style="list-style-type: decimal">`, sonst Formatvorlage)

Einrücken bei vierstelliger Nummerierung mit empfohlenen 3 em Rand links (`<ol style="margin-left: 0; border-left: 0; padding-Left: 3em; list-style-type: decimal">`, sonst Formatvorlage)

Einrücken bei einstelliger Großbuchstaben-Aufzählung (`<ul style="list-style-type: upper-alpha">`, sonst Formatvorlage)

Einrücken bei einstelliger Großbuchstaben-Aufzählung mit empfohlenen 1,75 em Rand links (`<ul style="margin-left: 0; border-left: 0; padding-Left: 1.75em; list-style-type: upper-alpha">`, sonst Formatvorlage)

Einrücken bei zweistelliger Großbuchstaben-Aufzählung (`<ul style="list-style-type: upper-alpha">`, sonst Formatvorlage)

Einrücken bei zweistelliger Großbuchstaben-Aufzählung mit empfohlenen 2.75 em Rand links (`<ul style="margin-left: 0; border-left: 0; padding-Left: 2.75em; list-style-type: upper-alpha">`, sonst Formatvorlage)

Einrücken bei dreistelliger Großbuchstaben-Aufzählung (`<ul style="list-style-type: upper-alpha">`, sonst Formatvorlage)

Einrücken bei dreistelliger Großbuchstaben-Aufzählung mit empfohlenen 3.75 em Rand links (`<ul style="margin-left: 0; border-left: 0; padding-Left: 3.75em; list-style-type: upper-alpha">`, sonst Formatvorlage)

Einrücken bei Aufzählungsquadrat (`<ul style="list-style-type: square">`, sonst Formatvorlage)

Einrücken bei Aufzählungsquadrat mit empfohlenen 1,5 em Rand links (`<ul style="margin-left: 0; border-left: 0; padding-Left: 1.5em; list-style-type: square">`, sonst Formatvorlage)

Einrücken ohne Aufzählungszeichen (`<ul style="list-style-type: none">`, sonst Formatvorlage)

Einrücken ohne Aufzählungszeichen mit 1,5 em Rand links (`<ul style="margin-left: 0; border-left: 0; padding-Left: 1.5em; list-style-type: none">`, sonst Formatvorlage)

Einrücken ohne Aufzählungszeichen ohne Rand links (`<ul style="margin-left: 0; border-left: 0; padding-Left: 0; list-style-type: none">`, sonst Formatvorlage)