HTML5 Semantical Presentation Test 1

*section*
*header* header of first section. */header*
This is some more flow content of the first section (after the header). To indicate some new element, the first content is the star included name of the element. The last content is a star included / followed by the name of the element. This can help to indicate begin and end of the new element in this test page, just in case, the user-agent fails to present this in a meaningful way.

*p* This is a paragraph within the first section. Ok, this is no nice structure, but allowed in HTML5. */p*

There should be at least some minimalistic styling to separate the header from other section content and the section from following content as the following a aside element. */section*
*article* This is an article element.
*section* The article element represents a section of content that forms an independent part of a document or site; for example, a magazine or newspaper article, or a blog entry. */section*
*section* To be useful for visual presentation, all new elements in HTML5 should have some user-agent default styling, that indicates the semantic meaning of the elements. The problem is, that this is only possible for new user-agents. Old user agents will not know these elements and will typically present them as arbitrary inline elements like the element span without distinguishable styling. This means there is no backwards compatibility in HTML5 visual presentation. It does not really help, that authors can provide an own styling with CSS, because this can be switched off and elements of semantically meaning should be presented in such a way, that the semantic function can be identified. This means at least some margin and padding as separation of sections, articles and asides and separation of header from other content of the same section. */section*
*summary* as first child of details */summary* *details* (starting as parent of summary, because summary has to be before any other content, here the star element indication is set after the first child)
This is an element details, that is not open - it should be possible to open and close it again interactively. */details*
*summary* as first child of details */summary* *details* (starting as parent of summary, because summary has to be before any other content, here the star element indication is set after the first child)
This is an element details - it is open and it should be possible to close it and to open again interactively. It indicates as well the end of the article. */details*
*/article*
*section*
*hgroup*

Example for the

element hgroup

within the element section

*/hgroup*
No more relevant text for this section, everything to be tested is within the top hgroup. */section*
*section* Now something to test, whether the element new phrase element time is somehow accessible. Times in this section always use this element, but there is no indication with the stars for beginning and end. If such an element does not contain a date in the international standard for dates, it has an attribute datetime to contain this detailed information. A short story as an example:
*article* Tina invited Peter in her flat to have some fun together. But when Peter arrived at her flat , he did not meet Tina. He was very disappointed. Later he met her at the refectory and asked, what might had gone wrong . Tina laughed out loud, of course she expected him to have some fun until .
*summary* Published */summary* *details* */details*
*/article*
*/section*
*section* We want to check how to use figure to connect a caption to an image. Let's try it (without stars):
Public art in Hannover: Dicke Hannoveranerin by Friedrich Werthmann, 1973, at Celler Straße, near Karolinenstraße, place of the Postbank. View inside with a fish-eye-lens.
Well, that is all - can you distinguish between content around figure and the figure? The figure starts before the image, the figcaption is directly behind the image, finishing the figure followed by this text. */section*
*section*

*p* Some more markup, for example one can mark something: *mark* marked content */mark*, this is similar to emphasise something or to pronounce it, but it focuses more on the current activity, not to emphasise something permanently, therefore typically something to be used if something was (lost and) found (again) in the document. */p*

*p* And as XHTML 1.1 and later HTML5 has some ruby markup, but not as advanced as the XHTML, it is only some subset. Typically intended more for asian writing traditions, sometimes it is useful as well in our languages to indicate meaning or pronunciation. We can try:
Some text'here' for ruby'here'. */p*

List with reversed numbering. Large number on top, small number below, without start:

  1. XXL
  2. XL
  3. L
  4. M
  5. S
  6. XS
  7. XXS

List with reversed numbering. Large number on top, small number below, starts with 7:

  1. XXL
  2. XL
  3. L
  4. M
  5. S
  6. XS
  7. XXS

With 3 as start:

  1. XXL
  2. XL
  3. L
  4. M
  5. S
  6. XS
  7. XXS

The same, but with type a:

  1. XXL
  2. XL
  3. L
  4. M
  5. S
  6. XS
  7. XXS

The same, but with type A:

  1. XXL
  2. XL
  3. L
  4. M
  5. S
  6. XS
  7. XXS

The same, but with type i:

  1. XXL
  2. XL
  3. L
  4. M
  5. S
  6. XS
  7. XXS

The same, but with type I:

  1. XXL
  2. XL
  3. L
  4. M
  5. S
  6. XS
  7. XXS

Normal order with type A, starting at 1000:

  1. XXL
  2. XL
  3. L
  4. M
  5. S
  6. XS
  7. XXS

Normal order with type I, starting at 1000:

  1. XXL
  2. XL
  3. L
  4. M
  5. S
  6. XS
  7. XXS

Obviously additionally to forms, now one can indicate any element to be editable. Is this possible with the following element mark?
Can you change this text?
Can you edit or add more lines?
To enable this, the author only has to set the attribute contenteditable to 'true'. But you cannot send it to a server declaratively, therefore only of limited use as the corresponding older feature of SVG tiny 1.2

Another thing is to hide content from presentation, as if it does not exist, except of course for people using old browsers or looking into the source code. So you may use it for a warning for users of old browsers like this: ""
But of course, this method is not very selective, because it depends only on one feature, the attribute hidden.

And one can addd an atttribute to indicate, that the help of a spellchecker is desired. Obviously, if you want to schow, that yuo do not belief into the capabillitys of your usres, add this to e form to force them to get it reide. Got all bugs in this paragraf? ;o)

*/section*

This is a section containing a paragraph, both are scoped styled with a thin solid border and a padding. Note that one needs to activate the interpretation of CSS to see the styling.

For comparison for this paragraph and the following section the scoped style does not apply - therefore no border.

There is a new element called wbr to force line breaks or a suggested wrapping within words in case there is not enough place available in the line. Therefore we use again a scoped style to restrict the width of this paragraph. Usually german composita are good for testing here, for example: Feenzauberstabspezialreinigungsmittelspendevorrichtung

Typically it will be better to use the optional line break ­ (only with DTD!) or ­, because one gets an additional hyphen: Feen­zauber­stab­spezial­reinigungs­mittel­spende­vorrichtung.

Another new element is dialog. But there is nothing to provide something like stage directions, indicating the current speaker and what this speaker says. A dialog without an attribute open is not displayed - a surprising feature. To show something, one has to provide the attribute open:

Me: How does the dialog element work?
Ian: I will not reveal this information!
Me (astonished): Why?
Ian (rattled): Because, because ... I don't know.
Me: You don't know why not to reveal or don't know how it works?
Ian (amused): I don't know.
Me: Maybe better one uses another more advanced format like LML?

And now without the attribute open:

Me: How does the dialog element work?
Ian: I will not reveal this information!
Me (astonished): Why?
Ian (rattled): Because, because ... I don't know.
Me: You don't know why not to reveal or don't know how it works?
Ian (amused): I don't know.
Me: Maybe better one uses another more advanced format like LML?
Testing the element meter:

Percentage of something for different persons:
40% Petra
30% Peter
20% Paul
10% Pamela

Testing with attributes min="-1", max="1", optimum="0" low="-0.5" high="0.5":
0.7 Petra
-0.6 Peter
-0.2 Paul
0.9 Pamela

Testing the element progress:

Percentage of work done by different persons:
80% Petra
50% Peter
20% Paul
10% Pamela
unknown Pumilla

Navigation with menu lists - are the values of type and label somehow accessible?