KPC
Kevin Powell - Community•3w ago
Arctomachine

Semantic html for contact block

From semantic perspective which tags should be used for blocks like phone: xxxxxxx ? 
<li>
  <h2>phone:</h2>
  </span>xxxxxxx</span>
</li>

<li>
  <b>phone:</b> xxxxxxx
</li>
<li>
  <h2>phone:</h2>
  </span>xxxxxxx</span>
</li>

<li>
  <b>phone:</b> xxxxxxx
</li>
One of these? Something else? This happens in context of contacts page if it makes any difference.
4 Replies
13eck
13eck•3w ago
Anchor links! also consider wrapping it in an address element.
MarkBoots
MarkBoots•3w ago
also consider an aria-label attribute with the phone number and spaces between the single digits. That would make it easier for screenreaders 
<a href="tel:01234567890" aria-label="0 1 2 3 4 5 6 7 8 9 0">01234 567890</a>
<a href="tel:01234567890" aria-label="0 1 2 3 4 5 6 7 8 9 0">01234 567890</a>
Arctomachine
Arctomachine•3w ago
Right, I forgot about anchor. And nice to know about address. What about title for this field? Which tag is better for this?
13eck
13eck•3w ago
Anchor elements are inline so you don’t need a title element. If you want one then just use bold phone number: before the anchor element
Want results from more Discord servers?
Add your server