Custom tags and tree elements in a page

Hello all, I want to add custom nodes into my HTML document so I would get the result in the picture. I am a bit confused into how I would do something like this. Can someone explain it to me? Do I need XML for this or some other technologies aside from HTML that I haven’t heard of? I know I could do that result with tables, but I want a more clean approach to it and would prefer something like this instead of tables.


<entity type="Person">
	<image><?php //image from db ?></image>
	<first_name><?php //first name from db ?></first_name>
	<last_name><?php //last name from db ?></last_name>
	<gender><?php //gender from db ?></gender>
	<city><?php //city from db ?></city>
	<country><?php //country from db ?></country>
</entity>

Hi,

I’m a little confused as to why you would want to create custom tags especially when you mention you could use tables as there is nothing in common between the two?

Why not just use normal semantic html ?

e.g. I would do something like this:


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
dl, dt {
	margin:0;
	padding:0;
}
.person {
	width:200px;
	background:#679966;
	margin:auto;
	padding:5px 0 10px;
	border-radius:4px;
}
.person dt span {
	margin:0 5px 5px;
	padding:5px;
	background:#000;
	color:#fff;
	display:block;
	text-align:center;
	font-weright:bold;
	border-radius:2px;
}
.person dt img {
	display:block;
	background:#fff;
	margin:10px auto;
}
.person dd {
	background:#679966;
	padding:5px 5px 5px 10px;
	width:100px;
	position:relative;
	border:1px solid #000;
	color:#fff;
	font-size:76%;
	margin:5px 0 5px -50px;
	border-radius:2px;
}
</style>
</head>

<body>
<dl class="person">
		<dt><span>Fred Bloggs</span><img src="person.ing" width="80" height="80" alt="Fred Bloggs"></dt>
		<dd>First Name</dd>
		<dd>Last Name</dd>
		<dd>Male</dd>
		<dd>London</dd>
		<dd>UK</dd>
</dl>
</body>
</html>