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!
Related
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.
I'm currently writing html/xhtml by hand, and that's fine to me, but I would like to ease things a little bit, especially for writing footnotes.
Today, here is how I write footnotes:
<p>Here is a footnote<a id="ref1b" href="#ref1">[1]</a>.</p>
<!-- And at the end of the document -->
<div class="footnotes">
<h2>Notes</h2>
<p id="ref1">[1] But this one isn't very helpful.
<!-- Let's add a go-back-to-the-text arrow -->
↩
</p>
</div>
The idea would be to make things automatic, and potentially done on the client side (by the browser), so that I could write something like that:
<p>Here is a footnote<ref id="1"/>.</p>
<!-- And at the end of the document -->
<div class="footnotes">
<h2>Notes</h2>
<ref-def id="1">But this one isn't very helpful.</ref-def>
</div>
So ref and ref-def would simply be evaluated on the fly by the browser.
Is this possible only using html/xhtml and css?
For completeness purpose. As of today there is a footnote tag in HTML.
https://www.w3.org/MarkUp/html3/footnotes.html
How it is presented to clients is left to implementors. Yo can use more html or css for a better formatting.
<DL>
<DT>Hamlet: <DD>You should not have believed me, for virtue cannot so inoculate our old stock but we shall relish of it. I loved you not.
<DT>Ophelia: <DD> I was the more deceived.
<DT>Hamlet: <DD>Get thee to a nunnery. Why wouldst thou be a breeder of sinners? I am myself indifferent honest ...
</DL>
<fn id=fn1><i>inoculate</i> - graft</fn>
<fn id=fn2><i>relish of it</i> - smack of it (our old sinful nature)</fn>
<fn id=fn3><i>indifferent honest</i> - moderately virtuous</fn>
the way you're doing this now has the advantage of being accessible and standards compliant - it will work with any browser - even with javascript disabled. Also search engines will be able to make sense out of this.
So there are some benefits in doing it this way.
if you decided to go for a shorter alternative, then there's plenty of jQuery plugins that will make your task more comfortable. e.g. look at https://github.com/nicholascloud/footnote.js
If you go for that approach please also note, that your site speed will suffer as users will have to download plenty of javascript to get your footnotes working.
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
Background/context
As schema.org is relatively new, perhaps this question will promote more discussion than a definitive answer. Either way, hopefully some learning from others' application/experience can be gained.
Having studied the http://schema.org documentation pages – and whilst there seems to be an extensive array of properties (read: itemprop attributes) available to enrich a blog post, there seems to be some inconsistencies and 'grey areas' with regard to the best approach to mark up blog comments. Let me provide an example:
The schema.org documentation for blogs can be found on within Thing > CreativeWork > Blog and for reference, a blog post lives within Thing > CreativeWork > Article > BlogPosting
So far, the documentation and markup examples on the aforementioned pages provide enough reference to format a blog index page, and the bulk of content within an individual post (author, pubDate, articleBody, interactionCount, etc.)
The problem: applying the UserInteraction schema to individual blog comments
It is when we start to look at individual UserInteraction elements (blog comments) within the interactionCount that things get a little vague. The documentation leads us through to Thing > Event > UserInteraction > UserComments, and is described as 'User interaction: A comment about an item.' However all of the suggested properties of UserInteraction are geared towards a physical event.
The only property that appears to be relevant to a blog comment in this schema's documentation is description; which could be used for the comment body. What feels lacking is some specific context for user comments about a blog post. There's also no evidence of example markup for said comments, even a search for 'comments' on the site doesn't seem to yield any clarity.
Has anyone marked up their blog using schema.org – and how did you approach/solve this?
I'll also raise this matter via the schema.org feedback form and update this post if anything comes to light.
Have a look at the examples here http://schema.org/WebPage and notice how the reviews are used for the Books.
You can do the same for Comments in Article, here's an example:
<div itemscope itemtype="http://schema.org/Article">
<-- Article content -->
<div itemprop="comment" itemscope itemtype="http://schema.org/UserComments">
<meta itemprop="discusses" content="A masterpiece of literature" />
<span itemprop="creator">John Doe</span>
<time itemprop="commentTime" datetime="2011-05-08T19:30">May 8, 7:30pm</time>
<span itemprop="commentText">I really enjoyed this book. It captures the essential
challenge people face as they try make sense of their lives.</span>
</div>
<div itemprop="comment" itemscope itemtype="http://schema.org/UserComments">
<meta itemprop="discusses" content="A masterpiece of literature" />
<span itemprop="creator">John Doe</span>
<time itemprop="commentTime" datetime="2011-05-08T19:30">May 8, 7:30pm</time>
<span itemprop="commentText">I really enjoyed this book. It captures the essential
challenge people face as they try make sense of their lives.</span>
</div>
</div>
Some years later, http://schema.org/Comment has been introduced.
A comment on an item - for example, a comment on a blog post. The comment's content is expressed via the "text" property, and its topic via "about", properties shared with all CreativeWorks.
My understanding is that UserComments is not for marking up blog comments. It exists only as one of the possible interaction types to be used with the interactionCount property on CreativeWork, such as:
<div itemscope itemtype="http://schema.org/Article">
<span itemprop="http://schema.org/interactionCount">UserComments:7</span>
</div>
I would mark up each of the comments as a CreativeWork or Article, and make sure that their about property points to the blog post that they are commenting to.
Blaise appears to be correct as of now. The example used on schema.org/Comment is:
A comment on an item - for example, a comment on a blog post. The comment's content is expressed via the "text" property, and its topic via "about", properties shared with all CreativeWorks.
I personally don't like the <meta> approach when I have the content matching the data. Since schema.org is not yet fully documented, I went ahead with this:
<span itemprop="interactionCount">100</span>
and/or this:
<span itemprop="interactionCount">100 comments</span>
I know that it doesn't specify "UserComments" anywhere. Thoughts?
I thought this would be an easy enough thing to find online but it seems not. I'm trying to find out what would be considered the correct way to mark up a list of testimonials - quotes with authors - on a page.
e.g.
"This is what I think"
- My Name, My Company
I'd imagine the quote should go in a blockquote. I've also seen some use of cite to shown where a quote comes from but the HTML reference seems to show that this should be used to give the URL of a web page that the quote comes from, not the name of the person.
Does anyone have any suggestions for how this should be marked up?
The "old" way:
I might be chiming in very late, but I think the following is the correct way to mark up a testimonial:
<figure>
<blockquote>
"This is what I think"
</blockquote>
<footer>
— <cite class="author">My Name</cite>, <cite class="company">My Company</cite>
</footer>
</figure>
Per the W3C spec:
...the citation is contained within the footer of a figure element, this groups and associates the information, about the quote, with the quote...
.
.
.
The figure element represents some flow content, optionally with a caption, that is self-contained (like a complete sentence)...
Update:
As #MCTaylor17 has pointed out, the best practice has changed in regards to citing a quote. Here's the new spec (as of December 2017): https://www.w3.org/TR/html52/textlevel-semantics.html#the-cite-element
Now the <cite> element is expected anywhere you would expect Phrasing Content. This means that it should go within a <p>, <blockquote>, etc.
Example 17 in the spec demonstrates using a <cite> within a <blockquote>:
<blockquote>"Money is the real cause of poverty,"
<footer>
<cite id="baseref">The Ragged-Trousered Philanthropists, page 89.</cite>
</footer>
</blockquote>
To apply this to your own quote:
<blockquote>
"This is what I think"
<footer>
— <cite class="author">My Name</cite>, <cite class="company">My Company</cite>
</footer>
</blockquote>
You are correct in your assumption that a quote is supposed to go into a blockquote element and that the cite attribute should be used for the URI. Personally I handle the author of the quote with a separate div or p at the bottom of the quote like so:
<blockquote cite="http://a.uri.com/">
<p>This is a really insightful sentence.</p>
<p class="quoteCite">Darko Z</p>
</blockquote>
Then I just use CSS to make it look nice. Pretty basic. You might want to go look at Microformats.org as well and search around for ideas.
Hope this helps
EDIT: Its late and it slipped my mind but you could also use the cite element
<blockquote cite="http://a.uri.com/">
<p>This is a really insightful sentence.</p>
<cite>Darko Z</cite>
</blockquote>
but im not a 100% sure how well its supported, to be honest
EDIT 2: According to the HTML 5 draft, cite shoudn't be an author name so for future proofing you probably shouldn't use cite for that purpose.
Things changed. I think a proper structure in this century should look like:
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>
<cite title="Source Title">
Bill Gates
</cite>
</footer>
</blockquote>
You may be interested in using the hReview format--Google is rumored to support it, and it's pretty much applicable to your situation, depending on whether you're only interested in the appearance, or whether you want to facilitate machine readability as well.
Following the Mozilla Developer API this is the correct way to mark up a testimonial:
<figure>
<blockquote>
"This is my testimonial"
</blockquote>
<figcaption>
— <cite class="author">My Name</cite>, <cite class="company">My Company</cite>
</figcaption>
</figure>
Here are two solutions based on the HTML Living Standard:
<blockquote>
<p>This is what I think</p>
</blockquote>
<p>- My Name, My Company</p>
<figure>
<blockquote>
<p>This is what I think</p>
</blockquote>
<figcaption>My Name, My Company</figcaption>
</figure>
As Darko Z. says in the edit of his answer you should not use <cite> for the author's name. This is because, according to the spec today, <cite> is for marking up the title of a work, not for naming the author. In WHATWG's own words:
The cite element represents the title of a work... 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.
The spec also says, that "attribution for the quotation, if any, must be placed outside the blockquote element."
If you are asking how this should be marked up semantically, yes, use a block quote, and yes, the cite attribute is for URL's. As for presentation, you could use whatever you want and style it accordingly.
Visitors will never see the difference unless they look at the source code, and I can't imagine that it would affect SEO either.
HTML5 includes a <figcaption> tag. To whit:
<figure>
<blockquote cite="http://example.com/page">
Nevermore
</blockquote>
<figcaption>
The Raven
</figcaption>
</figure>
A lot of comments here suggesting to use the cite element for the name of the person who wrote the review.
The <cite> HTML element is used to describe a reference to a cited creative work, and must include the title of that work.
The Citation element
<!DOCTYPE html>
<blockquote>
<p>Quote
</blockquote>
<p>Author
would be the most correct.