I'm tying to markup some content semantically. The content is company information, which may have multiple addresses, multiple phone numbers, multiple email addresses.
The hCard generators that I see seems to expect a person's details (e.g. first name, last name, etc.).
Is there a way to markup just company details? If so, how?
Also, is hCard the correct format to use?
you can use multiples of most microformats' properties, as long as you heed the parental element(s), so in your case, as long as all the multiple data properties are children of .vcard and not .vcard as well, all is good. actually threw this together from two of their examples on http://microformats.org. here you go:
<div id="contact" class="vcard">
<h2>Contact Me Yo!</h2>
<h3 class="fn">Jane Doe</h3>
<p>You can contact me via email to
<a class="email" href="mailto:jane#example.com">jane#example.com</a>,
or reach me at the following address:</p>
<div class="adr">
<span class="type">home</span> address:
<div class="street-address">123 Main Street</div>
<span class="locality">Any Town</span>, <span class="region">CA</span>,
<span class="postal-code">91921-1234</span>
</div>
<div class="adr">
<span class="type">work</span> address:
<div class="street-address">789 Main Street</div>
<span class="locality">Any Town</span>, <span class="region">CA</span>,
<span class="postal-code">91921-1234</span>
</div>
</div>
references:
http://microformats.org/wiki/hcard-faq#Can_you_have_multiple_value_elements
http://microformats.org/wiki/hcard-faq#How_do_I_markup_multiple_addresses
is hcard the correct format to use?
100% absolutely...microformats are part of the html5 spec, they are the most widely used semantic web technology, they fit your exact needs, and they are (currently) indexed by the major search engines. microformats add levels to your document that most refuse to believe, but all you have do to is follow instructions, and you've got a pre-baked api in your markup.
that said, google/bing/yahoo!/yandex (? the russian search engine), have all openly endorsed schema.org, and while they support microformats (have for years), you'd be a fool to think they won't give their method(s) incentive(s) to be used. i'm not aware of any that are entirely microformats vs. schema.org yet, but i'm sure they are on the way. at the moment, imo, its more about tying everything into g+ for google right now, so everything else is taking a backseat. which only speaks to my point(s)...
clearly i am biased, but that's about as clear and dry as i can be. i actually have the same mental debate for each and every client that puts me in the position to run wild with their markup...i have yet to break down and start using schema, however, i am quite prepared for them to ping me randomly, should google magically stop harvesting microformats.
To add company informations you have to simply add an org at the same level of the fn of your hCard.
Here is example:
<div class="vcard">
<a class="url fn org" href="http://compa.ny">Company Name</a>
</div>
Or you can try it with Microdata/Schema.org which will be more supported by the great search engine providers: http://schema.org/Organization
Related
I am new to microdata, and have to try and put together an assignment.
It requires "At least one itemtype should be embedded (or nested) in another itemtype: the value for at least one itemprop should itself be another itemtype with its own set of properties."
The code I came up with is this:
<div itemscope itemtype="https://schema.org/Person">
<div style="white-space: pre-wrap;">
<span itemprop="description">
Since I am still in my <span itemprop="knowsAbout">library and information science program</span>, I do not have as many finished projects as I wish to showcase here.
</span>
I have been performing coursework on reference and information services, information organization (including metadata), and an introduction to technologies that are used in the library sciences field, such as database management.
<div itemscope itemtype="https://schema.org/Action">
I have done a few <span itemprop="result">library science projects</span> over the last year that have been recently completed. Actually, this<span itemprop="result"> early version of my website</span> you are on is one of them! I programmed this
myself over the course of several days using a combination of HTML and CSS to create this website experience.</div>
<div itemscope itemtype="https://schema.org/CreativeWork">
Another project I have worked on is a <a itemprop="exampleOfWork" href="link_insert_here" target="_blank">LibGuide</a> (a library research guide) for LGBTQ+ characters in Comic Books and Graphic Novels. I have also created several learning aids.
First is an example of a <a itemprop="exampleOfWork" href="handout.pdf" target="_blank">handout</a> I created discussing some basic information on virtual machines. This is an example of a <a itemprop="exampleOfWork" href="link_insert_here" target="_blank">video tutorial</a> I created on how to sign up for a Local Public Library eCard.
</div>
</div>
</div>
I'm not sure I nested everything properly, and when I use various structured testing tools it picks up my microdata. While it seems right, I just can't tell.
I'd like to use Microdata for a web page. But none of the existing available schema seem to fit my content. Do I need to stick with only defined schema or can I define my own? Also, can I have an empty itemscope or is it better to define?
<h1>Page Title</h1>
(table of contents)
term 1
term 2
...
<div itemscope>
<h2 itemprop="term">1. Piston</h2>
<h3>Definition - What does Piston mean?</h3>
<span itemprop="definition">A definition</span>
<h3>Explanation of Piston</h3>
<span itemprop="explanation">An explanation</span>
<h3>How to use Piston in a sentence.</h3>
<span itemprop="usage">Sentence using term.</span>
</div>
I have 10 terms on the same page, each with this same bit of info. Is it ok to have an undefined itemscope? Or should I define it something like "car parts"? Or can we not define our own itemscope and instead, choose from existing schema structure?
Ran through Google schema tool and it says no warning or errors, but of course gives me the 'unspecified type' and the following.
#type
https://search.google.com/term
https://search.google.com/definition
https://search.google.com/usage
Option 1: You could use itemscope without itemtype (like in your example). That would be a local vocabulary, and you can’t expect Microdata consumers to make use of the data.
<div itemscope>
<p itemprop="term">…</p>
<p itemprop="definition">…</p>
</div>
Option 2: You could define and use your own vocabulary. It’s unlikely that many Microdata consumers would make use of the data, though, as most of them only recognize certain vocabularies.
<div itemscope itemtype="https://example.com/my-vocabulary/">
<p itemprop="term">…</p>
<p itemprop="definition">…</p>
</div>
Option 3 (preferable): You could use Schema.org as far as possible, and use your own types/properties where Schema.org doesn’t offer suitable terms. Your own properties would have to be specified as absolute URIs, and your own types would have to be specified as URI values for Schema.org’s additionalType property. As Schema.org type, you could always use Thing if there is no more specific type available.
<div itemscope itemtype="http://schema.org/Thing">
<link itemprop="additionalType" href="https://example.com/my-vocabulary/CarPartTerm" />
<p itemprop="https://example.com/my-vocabulary/term">…</p>
<p itemprop="https://example.com/my-vocabulary/definition">…</p>
</div>
That said, it could be the case that Schema.org does offer suitable types/properties for your case, e.g., maybe DefinedTerm (Pending). If you think that a useful type/property is missing in Schema.org, you could propose that it gets added.
Schema.org is what I've been using to add microdata to my first website but I'm finding out that the website is very vague and most of the questions I've had so far I have been able to find the answer on Stackoverflow or WebMaster.
On one page I have the schema set up as
<div itemscope itemtype="https://schema.org/Person">
<h1><span itemprop="name">Name Here</span> — SEO</h1>
<h2 itemprop="address"><i>Manchester, New Hampshire</i></h2>
<h3>Email Me
—<span itemprop="email">email#gmail.com</span></h3>
</div>
No problem there, I hope.
On another page of my website I only have the email me header as none of the other information is relevant. Right now I have that schema set up as
<h2><a href="mailto:email#gmail.com?
Subject=Service%20Inquiry">Email Me</a> —<span itemscope
itemtype="https://schema.org/email">email#gmail.com</span></h2>
Email is an itemprop of person but I can't find the documentation saying that I can't use an itemprop as the itemtype. Did I use this correctly,and will the schema be read any differently to a crawler than the itemprop use of email?
You should not use a property as type and vice versa. While nothing stops you from doing this, it’s not defined what this would mean, so it’s likely useless for consumers.
If you want to markup the email address on the other page, you should add the appropriate type (to which this email address belongs to), e.g.:
<div itemscope itemtype="http://schema.org/Person">
<h2>Email Me — <span itemprop="email">email#gmail.com</span></h2>
</div>
If you want to make sure that consumers can understand that both Person items describe the same person, you could provide an itemid attribute. An implicit alternative would be to provide properties with unique values (and you are doing exactly this by specifying email). See my answer about both ways (itemid and unique property values).
Could you please help me out, which type of schema.org should I use in this structure?
<h1>Country or city name</h1>
<div id="country_info">some info</div>
<div class="advice">
<div class="date">03-03-2015</div>
<div class="tags">tag1 tag2</div>
<div class="text">
user text...
</div>
<div class="author">name</div>
</div>
<div class="advice">
<div class="date">05-05-2015</div>
<div class="tags">tag5 tag1</div>
<div class="text">
user text...
</div>
<div class="author">name2</div>
</div>
and so on …
Is it a "Place" and "Comment" types, "Place" with no physical address? Or maybe a "Blog"/"BlogPosting" type? I'm confused.
These user texts are short. Each text is not enough for an article. But the full page becomes very informative.
Start at Thing and check its "More specific Types". Select the types that seem to match and check their definitions. Go as deep/detailed as possible. That’s it.
You’ll see that each advice is a CreativeWork. Check its "More specific Types". Only you can know what these advices really are.
If these are random advices about a country/city, you probably should look at Article. None of its sub-types (BlogPosting, NewsArticle, ScholarlyArticle, TechArticle) seem to be appropriate, so stay with Article. There is no "too short" for an article, they don’t have to be long.
If these are advices for a specific problem, Answer could be appropriate.
From the information you’ve given in your question, Comment doesn’t seem to be appropriate.
It’s only a BlogPosting if these are part of a blog.
You could use the about property to reference the country (Country/State) or city (City) the advice is about.
So the structure could look like this in Microdata:
<section itemprop="about" itemscope itemtype="http://schema.org/City" id="city">
<h1 itemprop="name">City name</h1>
<article itemscope itemtype="http://schema.org/Article" itemref="city">
</article>
<article itemscope itemtype="http://schema.org/Article" itemref="city">
</article>
</section>
The first thing we need to figure out is what is the objective of the info. It seems your main objective is to show a Country or a City, so probably your best choice is Country or City. Keep in mind that this types include the Thing properties that includes description, name, image, ... that could serve to include the rest of the parameter. For example, the user comments would be the "description" property.
When you want figure out what type of schema you must use think in the main you want to offer to browsers or apps. If you are talking about Countries, then Country is your type, if you are talking about Persons, then Person is your choice. But never use Person if you are talking about countries although it seems that your fields fit better in that scheme.
I'm making a small web-chat utility and am looking for advice on which elements to use for messages.
Here's what I'm thinking of using at the moment:
<p id="message-1">
<span class="timestamp" id="2009-03-10T12:04:01+00:00">
12:04
</span>
<cite class="admin">
Ross
</cite>
Lorem ipsum dolor sit amet.
</p>
I'd take advantage of CSS here to add brackets around the timestamp, icons for the cited user etc. I figured it would be silly (and incorrect) to use a blockquote for each message, although I consider the cite correct as it's referring to the user that posted the message.
I know this isn't a) an exact science and b) entirely essential but I'd prefer to use meaningful elements rather than spans throughout. Are there any other elements I should consider? Any microformats?
HTML isn't very semantic in a customizable way. Nevertheless your format should be understandable in any browser (with proper CSS, as you have pointed out).
What I see in the code example above is very similar to XML. It might be cumbersome and overkill for your needs, but I'd like to point out that you can use XML with XSLT as a substitute to both (X)HTML. This way you can get your tags as semantic as possible, and don't need to compromise with the limitations of the HTML tags.
w3schools has an article about the topic. I could swear that I saw a webpage in sun.com that was done in XML, but I can't find it anymore.
If you don't intend this to be interpreted or parsed by third party software, I'd nevertheless advise against this method, and stick with the proven HTML.
Seems reasonable to me, except that the ‘id’ is invalid. NAME tokens can't start with a number or contain ‘+’.
Plus if two people spoke at once you'd have non-unique IDs. Perhaps that data should go in another attribute, such as ‘title’ (so you can hover to see the exact timestamp).
If you're going for semantic HTML, you'll probably want to know that HTML5 doesn't consider your use of the <cite> element correct anymore.
A person's name is not the title of a work — even if people call that person a piece of work — and the element must therefore not be used to mark up people's names.
<ol>
<li class="message" value="1">
<span class="timestamp" id="2009-03-10T12:04:01+00:00">
12:04
</span>
<cite class="admin">
<address class="email">
<a href="mailto:ross#email.com">
Ross
</a>
</address>
</cite>
Lorem ipsum dolor sit amet.
</li>
</ol>
I would try something like the above. Notice I have placed everything in an Ordered list, as comments can be construed in the linear manner fitting an ordered list. Also, I have embedded, inside your Cite tag, an Address tag with an Anchor element. The unfortunately named Address element is actually meant to convey contact information for an Author, so you would probably want to link to the author's email address there.
What you suggested is already very good. If you want to take it a step further and be able to allow tons of different presentation options with the same markup (at the expense of heavier html) you may want to do something like:
<dl class="message" id="message-1">
<dt class="datetime">Datetime</dt>
<dd class="datetime">
<span class="day">Wed</span>
<span class="dayOfMonth">11</span>
<span class="month">Mar</span>
<span class="year">2009</span>
<span class="hourMin">17:34</span>
<span class="sec">33</span>
</dd>
<dt class="author">Author</dt>
<dd class="author">Ross</dd>
<dt class="message">Message</dt>
<dd class="message">Lorem ipsum dolor sit amet</dd>
</dl>
Since you mention microformats in the question, you are no doubt already familiar with the microformats wiki. It contains a good number of examples for different situations.
Another possibility would be to borrow parts of SIOC, which among other things is an ontology for forums - pretty similar to chat.
By re-using existing formats, you can take advantage of plugins and tools like Operator and maybe get more out of your app for free.
I'd use XML with XSLT to transform (style) the data.
It makes sense semantically here, but you also have the conversations in a suitable format for archiving (i.e. XML) - I assume you will have some sort of log or 'history'.
As #bobince said, the id="2009-03-10T12:04:01+00:00" is invalid.
You should change this:
<span class="timestamp" id="2009-03-10T12:04:01+00:00">
12:04
</span>
To this:
<time class="timestamp" datetime="2009-03-10T12:04:01+00:00">
12:04
</time>
You can get more information about the time tag at HTML5 Doctor and W3C:
The time tag on HTML5 offers a new element for unambiguously encoding dates and times for machines while still displaying them in a human-readable way.
The time element represents either a time on a 24 hour clock, or a precise date in the proleptic Gregorian calendar, optionally with a time and a time-zone offset.
...
I agree with the ordered list (ol) solution posted by #Robotsu, except by the time tag I just posted and the incorrect address inside cite tag!