Beispiel:HTML-Kategorien.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<html> <head> 

 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0;" />
 <link rel="stylesheet" type="text/css" media="screen" href="./Beispiel:Grundlayout.css" />
 <link rel="stylesheet" type="text/css" media="screen" href="CSS/Grundlayout.css" />  
 <title>HTML5-Kategorien von Elementen</title>

</head>

<body>

HTML5-Kategorien von Elementen

<svg viewBox="-250 -150 924 288" width="900" height="288"> 

<title>HTML5-Kategorien von Elementen</title>
<style type="text/css">
 svg     { font: bold 18px sans-serif; text-anchor: middle;}
 text    { fill: #000; pointer-events: none; }
 .original {font: normal 14px italics;}
 ellipse { fill: #fffbf0; stroke: #dfac20; opacity: 0.67; }
 ellipse:hover { fill:#e7c157; stroke:#866a00; stroke-width: 5px; }
 ellipse:not(:hover) + foreignObject { display: none; }
 div { font: 14px sans-serif; }
 h2 { margin: 0 0 0.25em 0; padding: 0; font: 900 27px sans-serif; text-shadow: 0.15em 0.15em 0.2em gray; }
 ul { margin: 0; padding: 0 0 0 1em; }
 li { display: inline; margin: 0; padding: 0; line-height: 1.5; }
 li:not(:last-child):after { content: ', '; }
 span { font: italic 14px sans-serif; }
 code { font: 1em monospace; color: orangered; }
 p { margin: 0.75em 0 0 0; padding: 0 0 0 1em; font: italic 14px sans-serif; }
</style>
<g class="a" transform="translate(2, -3)">
 <ellipse rx="244" ry="132"/>
 <foreignObject x="250" y="-150" width="400" height="288" transform="translate(-2, 3)">

Flow content

  • a
  • abbr
  • address
  • area*
  • article
  • aside
  • audio
  • b
  • bdi
  • bdo
  • blockquote
  • br
  • button
  • canvas
  • cite
  • code
  • data
  • datalist
  • del
  • dfn
  • div
  • dl
  • em
  • embed
  • fieldset
  • figure
  • footer
  • form
  • h2
  • h2
  • h3
  • h4
  • h5
  • h6
  • header
  • hr
  • i
  • iframe
  • img
  • input
  • ins
  • kbd
  • keygen
  • label
  • main
  • map
  • mark
  • math
  • meter
  • nav
  • noscript
  • object
  • ol
  • output
  • p
  • pre
  • progress
  • q
  • ruby
  • s
  • samp
  • script
  • section
  • select
  • small
  • span
  • strong
  • style*
  • sub
  • sup
  • svg
  • table
  • textarea
  • time
  • u
  • ul
  • var
  • video
  • wbr
  • Text*

* Unter bestimmten Umständen.

 </foreignObject>
 <text x="0" y="-98">Fluß-Elemente</text>
 <text x="10" y="-84" class="original">(Flow)</text>  
</g>
<g class="b" transform="translate(127, -48.5)">
 <ellipse rx="75" ry="42.5"/>
 <foreignObject x="250" y="-150" width="400" height="288" transform="translate(-127, 48.5)">

Heading content

  • h2
  • h2
  • h3
  • h4
  • h5
  • h6
 </foreignObject>
 <text x="2" y="0">Überschriften</text>
 <text x="2" y="15" class="original">(Heading)</text>
</g>
<g class="c" transform="translate(125, 42)">
 <ellipse rx="75" ry="42.5"/>
 <foreignObject x="250" y="-150" width="400" height="288" transform="translate(-125, -42)">

Sectioning content

  • article
  • aside
  • nav
  • section
 </foreignObject>
 <text x="1" y="0">Aufteilung</text>
 <text x="1" y="15" class="original">(Sectioning)</text>
</g>
<g class="d" transform="translate(-113, 86)">
 <ellipse rx="117" ry="47" transform="rotate(-15)"/>
 <foreignObject x="250" y="-150" width="400" height="288" transform="translate(113, -78)">

Metadata content

  • base
  • link
  • meta
  • noscript
  • script
  • style
  • title
 </foreignObject>
 <text x="-4" y="0">Metadaten</text>
 <text x="-4" y="15" class="original">(Metadata)</text>
</g>
<g class="e" transform="translate(-128, -34)">
 <ellipse rx="94" ry="51"/>
 <foreignObject x="250" y="-150" width="400" height="288" transform="translate(128, 34)">

Interactive content

  • a
  • audio*
  • button
  • embed
  • iframe
  • img*
  • input*
  • keygen
  • label
  • object*
  • select
  • textarea
  • video*

* Unter bestimmten Umständen.

 </foreignObject>
 <text x="-36" y="-5">Interaktive</text>
  <text x="-36" y="10">Elemente</text> 
 <text x="-36" y="20" class="original">(Interactive)</text>
</g>
<g class="f" transform="translate(-40.5, -5)">
 <ellipse rx="76.5" ry="80"/>
 <foreignObject x="250" y="-150" width="400" height="288" transform="translate(40.5, 5)">

Phrasing content

  • a*
  • abbr
  • area*
  • audio
  • b
  • bdi
  • bdo
  • br
  • button
  • canvas
  • cite
  • code
  • data
  • date
  • datalist
  • del*
  • dfn
  • em
  • embed
  • i
  • iframe
  • img
  • input
  • ins*
  • kbd
  • keygen
  • label
  • map*
  • mark
  • math
  • meter
  • noscript
  • object
  • output
  • progress
  • q
  • ruby
  • s
  • samp
  • script
  • select
  • small
  • span
  • strong
  • sub
  • sup
  • svg
  • textarea
  • time
  • u
  • var
  • video
  • wbr
  • Text*

* Unter bestimmten Umständen.

 </foreignObject>
 <text x="0" y="-42">Phrasing Content</text>
 <text x="0" y="-30" class="original">(Stil-Elemente)</text>
</g>
<g class="g" transform="translate(-42, 0)">
 <ellipse rx="68" ry="30"/>
 <foreignObject x="250" y="-150" width="400" height="288" transform="translate(42, 7)">

Embedded content

  • audio
  • canvas
  • embed
  • iframe
  • img
  • math
  • object
  • svg
  • video
 </foreignObject>
 <text x="0" y="0">zum Einbinden</text>
 <text x="0" y="15" class="original">(Embedded)</text>
</g>

</svg>

Fahre mit der Maus über die einzelnen Bereiche.


</body> </html>

Abgerufen am 19.08.2026
von "http://wiki.selfhtml.org/wiki/Beispiel:HTML-Kategorien.html"