1.

What are the phantom nodes? How can it be resolved?

Answer»

While grouping headings resulted in problems with the outline of a document; this problem is called phantom nodes.  To avoid the phantom nodes, use <hgroup> to group two or more headings (h1, h2, h3 ,h4, h5, and h6).

<hgroup></hgroup> is a CONTAINER for two or more headings (h1, h2, h3 ,h4, h5, and h6). It INDICATES that the headings are closely related, so it will be used to group together headings with subheadings, titles, and subtitles.  Using <hgroup> avoids phantom nodes problem because it combines the two headings into one node. The <hgroup> tags can only contain headings.

The following is an example:

Example

<!DOCTYPE html> <html>     <head>           <meta CHARSET ="UTF-8">           <title>Images</title>     <style type="text/css">        h1 { font-size:160%; font-weight:bold; margin-top:5px; margin-bottom:0; }        h2 { font-size:130%; font-weight:bold; margin-top:0; margin-bottom:5px; }        article { width:445px; text-align:left;  }     </head>     <body>          <article> <hgroup> <h1>I PUT our holiday DATES and address on a social network</h1>                <h2>An idiot's tale</h2>  </hgroup> <p>We returned to a ransacked house, even the furniture was taken.<br> Your friend, <br>Sreekanth</p>           </article>     <body> </html>

Output



Discussion

No Comment Found