KPC
Kevin Powell - Community•3mo 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•3mo ago
Anchor links! also consider wrapping it in an address element.
MarkBoots
MarkBoots•3mo 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
ArctomachineOP•3mo 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•3mo 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