Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Creating word definitions using HTML

Tags:

html

css

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

enter image description here

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:

  • http://www.w3.org/TR/html5/grouping-content.html#the-blockquote-element
  • http://www.w3.org/TR/html5/grouping-content.html#the-ul-element
  • http://www.w3.org/TR/html5/grouping-content.html#the-dl-element
like image 456
Atadj Avatar asked Apr 15 '26 06:04

Atadj


1 Answers

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>
like image 61
ralph.m Avatar answered Apr 16 '26 21:04

ralph.m