When I reviewed HTML for my current job, I was concerned about using elements that not only contain style but also meaning, semantics. This is something I saw frequently while studying iOS on my free time and and only later I found out the web also had it, but I never paid attention to it as I was too busy thinking about layout, styles and data. However, using elements with semantics help us convey our intent better and the browser can also help us with common implementations for the element we used.
There are several elements with meaning and an interesting example is the
<address>.
It is used to show contact information and that can be an e-mail, address,
geo-location… and even a combination of all of those and more. The
<a> also
contains semantic meaning. Using those elements allow the browser to provide
accessibility out of the box, as it now knows what kind of stuff the nodes
represent. Most of the HTML elements have some meaning, so the best way of
learning them is going through docs like the previous MDN links and learn what
each of them is for.
I was thinking about using the anchor element for things like phones and e-mails, which I notice we forget oftentimes. Using an anchor for phones allows the operating system to do something about it and in the case of macOS we have FaceTime that can handle such links.
You can see an example of it in action in the video below.
In the video, I babble a little bit about how I don’t see indications in the design for usage of semantic elements. That’s a comment that is valid for my current project and previous ones too. Information about semantics is usually missing and maybe that’s just something that’s assumed the programmers will care about, but I think having some pointers right in the mock ups for a project can be pretty helpful.
That was all for this post. Any thoughts? Please share.