I'm wondering if any HTML tag exists to create lists from example 1 instead of example 2:

Is this ul/ol element with b tag inside? Or maybe dl, dt and dd? I'm sorry if this is too easy question but I really have no idea. Technically, according to W3 specification, it can also be figure element but none of these will produce this nice indentation. Does this require CSS? If so, what kind of CSS?
References:
What you've posted there is a classic use for a definition list (<dl>). Here is another way you could do it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
dl, dt, dd {margin:0; padding: 0;}
dl {width: 300px;}
dt {float: left;}
dd {overflow: hidden; padding-left: 14px; position: relative;}
dd:before {content: "-"; position: absolute; top: 0; left: 4px;}
</style>
</head>
<body>
<dl>
<dt>code</dt>
<dd>a system for communication by telegraph, heliograph etc., in which long and short sounds, light flashes etc. are used to symbolize the content of a message ...</dd>
</dl>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With