Las etiquetas <dt> y <dd> se usan juntas dentro de la etiqueta <dl> (define una lista de descripción) en HTML para definir términos o dar su descripción.
Ejemplo 1: este ejemplo utiliza etiquetas <dt> y <dd> dentro de la etiqueta <dl> y muestra el contenido de <dt> y <dd> en una línea diferente.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
How to write dt and dd element
on the same line using CSS ?
</title>
<style>
dt {
font-weight: bold;
color: green;
}
dt::after {
content: ":";
}
</style>
</head>
<body>
<dl>
<dt>Name</dt>
<dd>Cristiano Ronaldo</dd>
<dt>Date of birth</dt>
<dd>5 February 1985 (age 35)</dd>
<dt>Nationality</dt>
<dd>Portugal</dd>
<dt>Profession</dt>
<dd>Footballer</dd>
</dl>
</body>
</html>
Producción:
Ejemplo 2: este ejemplo usa etiquetas <dt> y <dd> dentro de la etiqueta <dl> y muestra el contenido <dt> y <dd> en la misma línea usando CSS.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
dt {
float: left;
clear: left;
width: 110px;
font-weight: bold;
color: green;
}
dt::after {
content: ":";
}
dd {
margin: 0 0 0 80px;
padding: 0 0 0.5em 0;
}
</style>
</head>
<body>
<dl>
<dt>Name</dt>
<dd>Cristiano Ronaldo</dd>
<dt>Date of birth</dt>
<dd>5 February 1985 (age 35)</dd>
<dt>Nationality</dt>
<dd>Portugal</dd>
<dt>Profession</dt>
<dd>Footballer</dd>
</dl>
</body>
</html>
Producción:
