From: Kai Moritz Date: Thu, 18 Dec 2025 21:36:33 +0000 (+0100) Subject: WIP:Pfade von juplo.de... -- MOVE X-Git-Tag: hugo--rebase--2025-12-18--23-55~5 X-Git-Url: https://juplo.de/gitweb/?a=commitdiff_plain;h=e82595e738a99e0e6e3665c9b8213096595748bc;p=website WIP:Pfade von juplo.de... -- MOVE --- diff --git a/content/blog/_index.md b/content/blog/_index.md new file mode 100644 index 00000000..cdc04609 --- /dev/null +++ b/content/blog/_index.md @@ -0,0 +1,5 @@ +--- +title: Blog +url: /blog/ +--- +Hallo Welt! diff --git a/content/blog/a-perfect-outline.md b/content/blog/a-perfect-outline.md new file mode 100644 index 00000000..eda4b71a --- /dev/null +++ b/content/blog/a-perfect-outline.md @@ -0,0 +1,720 @@ +--- +_edit_last: "2" +author: kai +categories: + - html(5) +date: "2020-04-10T11:53:39+00:00" +guid: http://juplo.de/?p=357 +parent_post_id: null +post_id: "357" +title: A Perfect Outline +url: /a-perfect-outline/ + +--- +## Point Out Your Content: Utilize the HTML5 Outline-Algorithm + +HTML5 introduces new semantic elements accompained by the definition of [a new algorithm to calculate the document-outline](https://developer.mozilla.org/de/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document "Read all about the new possibilities to mark up the outline of your document") from the mark up. +There are plenty of [good explanations](http://www.smashingmagazine.com/2011/08/16/html5-and-the-document-outlining-algorithm/ "This is a very good overview, because it also pointes out, what to watch out for") of these new possibilities, to point out your content in a more controlled way. +But the most of these explanations fall short, if it comes to how to put these new markup into use, so that it results in a sensible outline of the document, that was marked up. + +In this article I will try to explain, how to use the new semantic markup, to produce an outline, that is usable as a real content table of the document - not just as an partially orderd overview of all headings. +I will do so, by showing simple examples, that will illuminate the principles behind the new markup. + +## All Messed Up! + +Although, the ideas behind the new markup seems to be simple and clear, nearly nobody accomplishes to produce a sensible outline. +Even the big players, who [guide us through the jungle of the new specifications](http://www.html5rocks.com/de/ "Great guidance - but bad outline") and are giving [great explanations about the subject](http://www.smashingmagazine.com/2013/01/18/the-importance-of-sections/ "Great explanation - but bad outline"), either fail on there sites (see by yourself with the help of the help of [the h5o HTML5 Outline Bookmarklet](https://h5o.github.io/ "Just drag and drop the bookmarklet to your favorites.")), or produce the outline in the old way by the usage of `h1`- `h6` only, like the fabulous HTML5-bible [Dive Into HTML5](http://diveintohtml5.info/semantics.html#footer-element "A wounderful introduction to the new possibilities of HTML5 - but the tid outline is produced the old way"). + +This is, because there is a lot to mix up in a wrong way, when trying to adopt the new features. +Here is, what I ended up with, on my first try to combine what I have learned about [semantic elements](http://www.w3schools.com/html/html5_semantic_elements.asp "Overview of the new semantic elements, available in HTML5") and the [document outline](http://html5doctor.com/outlines/ "An explanation, of what the specs told you about the document outline"): + +#### Example 01: Markup + +```html + + +Example 01 +
+

Header

+ +
+
+

Main

+
+

Section I

+
+
+

Section II

+
+

Subsection a

+
+
+

Subsection b

+
+
+
+

Section III

+
+

Subsection a

+
+
+
+ + + +``` + +#### Example 01: Outline + +1. Header +1. _Untitled section_ +1. Main +1. Section I +1. Section II + 1. Subsection a + 1. Subsection b +1. Section III + 1. Subsection a +1. Aside +1. Footer + +[View example 01](/wp-uploads/2015/06/example-01.html) + +That quiet was not the outline, that I had expected. +I planed, that _Header_, _Main_, _Aside_ and _Footer_ are ending up at the same level. +Instead of that, _Aside_ and _Footer_ had become sections of my _Main_-content. +And where the hell comes that _Untitled section_ from?!? +My first thought on that was: No problem, I just forgot the `header`-tags. +But after adding them, the only thing that cleared out, was where the _Untitled section_ was coming from: + +#### Example 02: Markup + +```html + + +Example 02 +
+

Header

+ +
+
+

Main

+
+

Section I

+
+
+

Section II

+
+

Subsection a

+
+
+

Subsection b

+
+
+
+

Section III

+
+

Subsection a

+
+
+
+