All geek questions in one place

HTML: semantically mark an address?

How to mark an address (for example, a list of enterprises and their addresses)? The problem is that I do not always get enough address information to complete the vCard microformat. The HTML address tag should be the contact information for the author of the page, so it’s probably not the right tag to use.

Suggestions?

+4
source share
3 answers

Well, if this is a list of enterprises and their addresses, perhaps you should use a list. There is no semantic element for all possible actions in HTML, you just need to use the one that is most appropriate. Depending on how you are going to format this information, you should use either a table if the data is in a table format, or a list for almost any other format.

You can style the list to remove side markers, but on the bottom line, you still provide a list of data and the most semantic thing you could use.

0
source

Not quite sure what exactly you are asking, but if it is from a search engine perspective, you are worried about letting Schema.org go. The local business page page has additional information and an example to help you mark out the address for search engines.

+2
source

There is currently no assigned element for marking up a physical address or mailing address. You are right: <address> should only be used to provide contact information for the author of an article or document, so you should not use it to mark up addresses in a list of enterprises, for example.

If HTML does not exist for a specific semantics, it is best to mark the element that is closest in meaning, and then use auxiliary standards such as (1) Microformat classes, (2) Microdata attributes and / or (3) ARIA roles. Personally, I prefer Microdata over Microformats because Microdata does not interfere with the [class] attribute, which is intended for styling. I do not like to mix semantics with style. ARIA roles are designed for accessibility, and I don’t know enough about them to say a lot, but they are very good in your code.

Read the Microdata Syntax (extension for HTML). Microdata is the official syntax in markup, while Schema.org is a very popular (Google likes) dictionary for use with syntax. There are other less popular dictionaries.

To mark a physical address, use the Schema.org PostalAddress itemtype with its corresponding properties. Honestly, the best element to use would be a plain old <p> .

 <p itemscope itemtype="http://schema.org/PostalAddress"> <span itemprop="name">The White House</span> <br/> <span itemprop="streetAddress">1600 Pennsylvania Avenue</span> <br/> <span itemprop="addressLocality">Washington</span>, <span itemprop="addressRegion">DC</span> <span itemprop="postalCode">20500</span> <br/> <data itemprop="addressCountry" value="US">United States of America</data> <br/> <span itemprop="url">https://www.whitehouse.gov/</span> </p>

The <br/> element is intended to provide (meaningful, meaningful) line breaks in the content, so its use is justified here in the mailing address. This is also an extremely common use case. However, it can be argued that a <pre> works just as well as it is technically pre-formatted text.

 <pre itemscope itemtype="http://schema.org/PostalAddress"> <span itemprop="name">The White House</span> <span itemprop="streetAddress">1600 Pennsylvania Avenue</span> <span itemprop="addressLocality">Washington</span>, <span itemprop="addressRegion">DC</span> <span itemprop="postalCode">20500</span> <data itemprop="addressCountry" value="US">United States of America</data> <span itemprop="url">https://www.whitehouse.gov/</span> </pre>
0
source

Source: https://habr.com/ru/post/1385631/

More articles:


All Articles