
With Wicket we can apply markup inheritance using another approach based on the tag _<wicket:child>_. This tag is used inside the parent's markup to define where the children pages/panels can “inject” their custom markup extending the markup inherited from the parent component. 
An example of a parent page using the tag _<wicket:child>_ is the following:

[source,html]
----
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
</head>
<body>
    This is parent body!
    <wicket:child/>
</body>
</html>
----

The markup of a child page/panel must be placed inside the tag _<wicket:extend>_. Only the markup inside _<wicket:extend>_ will be included in final markup. Here is an example of child page markup:

[source,html]
----
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
    <wicket:extend>
      This is child body!
    </wicket:extend>
</body>
</html>
----

Considering the two pages seen above, the final markup generated for child page will be the following:

[source,html]
----
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
    This is parent body!
    <wicket:child>
      <wicket:extend>
        This is child body!
      </wicket:extend>
    </wicket:child>
</body>
</html>
----

=== Our example revisited

Applying _<wicket:child>_ tag to our layout example, we obtain the following markup for the main template page:

[source,html]
----
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
</head>
<body>
<div id="header" wicket:id="headerPanel">header</div>
<div id="body">
	<div id="menu" wicket:id="menuPanel">menu</div>
	<wicket:child/>
</div>
<div id="footer" wicket:id="footerPanel">footer</div>
</body>
</html>
----

We have replaced the _<div>_ tag of the content area with the tag _<wicket:child>_. Going forward with our example we can build a login page creating class _SimpleLoginPage_ which extends the _JugTemplate_ page, but with a related markup file like this:

[source,html]
----
<html>
<head>
</head>
<body>
   <wicket:extend>
    <div style="margin: auto; width: 40%;">
       <form  id="loginForm" method="get">
         <fieldset id="login" class="center">
            <legend >Login</legend>               
            <span >Username: </span><input type="text" id="username"/><br/>                                                                  
            <span >Password: </span><input type="password" id="password" />
            <p>
               <input type="submit" name="login" value="login"/>
            </p>
         </fieldset>
      </form>
    </div>   
   </wicket:extend>
</body>
</html>
----

As we can see this approach doesn't require to create custom panels to use as content area and it can be useful if we don't have to handle a GUI with a high degree of complexity.
