SHARE
TWEET

HTML5 - Rendering of Headings

a guest Dec 18th, 2011 303 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!doctype html>
  2. <html lang=en>
  3.         <head>
  4.                 <meta charset=utf-8>
  5.                 <title>HTML5 - Rendering of Headings</title>
  6.                 <style>
  7.                         /* Move away from viewport rims */
  8.                         body {
  9.                                 padding: 10px;
  10.                                 margin: 0;
  11.                         }
  12.                        
  13.                         /* Show some hierachy */
  14.                         article, section, detail, aside {
  15.                                 padding: .2em 2em;
  16.                                 margin: 1em 0;
  17.                                 border-radius: 5px;
  18.                                 box-shadow: 0px 0px 5px rgba(0,0,0,.5);
  19.                         }
  20.                        
  21.                         /* And now make it even more visible */
  22.                         article { background-color: #58aed6;}
  23.                         section { background-color: #ba4194;}
  24.                         section section { background-color: pink;}
  25.                         detail { display: block; background-color: #e4a85a;}
  26.                         aside { background-color: grey;}
  27.                 </style>
  28.         </head>
  29.         <body>
  30.                 <h1>Some text in a H1 as a direct decendant of BODY</h1>
  31.                 <h2>H2 put to the test</h2>
  32.                 <section>
  33.                         <h1>Some text in a H1 in a SECTION</h1>
  34.                 </section>
  35.                 <article>
  36.                         <h1>H1 in an ARTICLE</h1>
  37.                         <h2>H2 put to the test</h2>
  38.                         <section>
  39.                                 <h1>Some text in a H1 in a SECTION</h1>
  40.                                 <h2>H2 put to the test</h2>
  41.                         </section>
  42.                         <section>
  43.                                 <h1>Another H1 in a SECTION</h1>
  44.                                 <h2>H2 put to the test</h2>
  45.                                 <section>
  46.                                         <h1>A H1 in a nested SECTION inside of a SECTION</h1>
  47.                                         <h2>H2 put to the test</h2>
  48.                                         <p>You see the outline algorythm does very well displaying the contextual hierachy of the contents, but...</p>
  49.                                 </section>
  50.                         </section>
  51.                 </article>
  52.  
  53.                
  54.                 <article>
  55.                         <h1>Ohh, something kinky about sections, headings and typo!</h1>
  56.                         <h2>Lets see if the browser is counting in H2s as well...</h2>
  57.                         <p>Here we show some obscurity with the automated font-sizes of different headings in an HGROUP:</p>
  58.                         <section>
  59.                                 <hgroup>
  60.                                   <h1>H1: As we learned, a H1 is the most important heading</h1>
  61.                                   <h2>H2: But why is this H2 even bigger then?</h2>
  62.                                   <h3>H3: Can you think of an explanation why this H3 is just as big as the H1?</h3>
  63.                                 </hgroup>
  64.                                 <p>Text: This is the size of regular text in a paragraph following above HGROUP in a SECTION. Isnt it funny that the text in the following DETAIL is just as big? Wasnt it supposed to be smaller?</p>
  65.                                 <detail>
  66.                                         <p>DETAIL: Donst ask for support on this!</p>
  67.                                 </detail>
  68.                                 <aside>
  69.                                         <p>All this is now packed into an ASIDE-element:</p>
  70.                                         <hgroup>
  71.                                                 <h1>H1: Headings in an HGROUP-ELement in an ASIDE-element</h1>
  72.                                                 <h2>H2: Again H2 is bigger than the H1</h2>
  73.                                                 <h3>H3: Getting worse - Even the H3 is bigger than the H1 now!</h3>
  74.                                         </hgroup>
  75.                                         <p>Text: Again this is regular text in a paragraph.</p>
  76.                                 </aside>
  77.                         </section>
  78.                 </article>
  79.         </body>
  80. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top