Semantically / Best Practice for formatting data in HTML5

user_2267720 0
Viewed 41

I've been trying to find the most correct way to format random sets of data using HTML.

In my particular case, I have something like:

John Johnson
20K Service Due
2000 Honda Civic

It's not a paragraph, so wrapping each line in <p> tags doesn't seem correct.

It's not a list, so using <ul> and wrapping each line in <li> tags doesn't seem correct.

Placing the content inside a <div> and then using <br>s after each line works but still doesn't seem like it's the best.

The data is similar to an address, which if it was, I could do something like:

<address>
  John Johnson<br>
  20K Service Due<br>
  2000 Honda Civic
</address>
semantics html
1 Answers

If you are simply pushing data to the screen and want to "know" what format the data is then maybe you can tag each element with the "data" attribute and set a value to it before you push it to the dom. Once you set the data attribute (e.g. data-format) to any value you like, you can than use CSS to format it and you can use JavaScript to manipulate it as well based on the value you set.

let data_format = document.querySelectorAll('[data-format]')
data_format.forEach((element) => {
    console.log(`Data Format = ${element.dataset.format}`)
})
<div>
    <li data-format="name">John Johnson</li>
    <li data-format="service-date">20K Service Due</li>
    <li data-format="model">2000 Honda Civic</li>
</div>

user_82291540
Related