The OneNote API is not returning supported tags in some lists.
It seems to be an issue with complex bulleted lists; we just see OutlineGroupNode is not supported in the returned markup.
The docs give some guidelines on how to write out tags to lists, but there's no mention of the API not returning any supported tags in certain situations.
Please see the below example, what rules is this list breaking?
What constitutes an OutlineGroupNode?
Some clarity over what pre-existing list/tag content is supported would be appreciated please.
Thanks
The resulting markup is:
<snip>
<!-- OutlineGroupNode is not supported --><br>
<ul>
<li>
<p lang="en-GB" style="margin-top:0pt;margin-bottom:0pt">
Top level no tag</p>
<ul>
<li style="list-style-type:circle"><span lang="en-GB"
data-tag="to-do">Sub level with tag</span></li>
<li style="list-style-type:circle"><span lang="en-GB">Sub
level no tag</span></li>
</ul>
</li>
<li style="list-style: none"><br></li>
</ul>
</snip>
4 days later it now works; no code changes on my part.
The complex list is returned correctly. No HTML comment in the markup mentioning OutlineGroupNode.
I can only assume that something has changed under the API hood.
Related
I'm just writing to inquire what would be more correct for xHTML and a CSS question.
For the HTML:
Say I have a list of:
Apples,
Bananas,
and Carrots
Would this be more correct:
<ul> <li> Apples </li> <li> Bananas </li> <li> Carrots </li> </ul>
Or would this be:
<ol> <li> Apples </li> <li> Bananas </li> <li> Carrots </li> </ol>
For CSS, after an element has been floated, which attribute can be used to restore flow to block alignment?
Thank you so much.
The ul element stands for "unordered list" which implies it was ordered to begin with (the proper English approach would be no for non-ordered). The ol element stands for "ordered list". Is this list intentionally ordered or not? If you order them alphabetically then I'd considered using the ul element since it's more of a technicality and not some life-or-death importance.
You can work with display and float together. Generally speaking you should look in to the CSS display property. As flexbox support has improved and the bugs have been ironed out I've migrated to using it and reserving float for neat tricks like applying it to an image nested within a bunch of paragraph elements.
Also something people who make six figures have no idea about: XHTML and HTML5 aren't opposed. My platform uses the XML parser while the code is HTML5. A parser takes text and determines how to interpret it for processing. The XML parser is very strict (though not perfectly strict and each browser engine varies, currently Gecko's has been superior) while the HTML parser doesn't mind if there are hobos all over your front lawn and will likely invite even more while it knows you're watching.
I want to semantically enhance my HTML markup by adding elements from the schema.org WebPage vocabulary including semantic markup for the breadcrumb navigation. According to the definition I should use schema.org BreadcrumbList to achieve this.
When looking at Google's documentation about adding structured data for Breadcrumbs though, they explicitly state that the schema.org markup for breadcrumbs is not yet supported.
Instead, the apparently older definition for a data-vocabulary.org Breadcrumb should be applied. This seems to be due to the fact, that the schema.org BreadcrumbList is still disputed. Actually Google parses schema.org BreadcrumbList markup in their Structured Data Testing Tool but don't use it for nice representation in the search results like they do for breadcrumbs annoted using the data-vocabulary.org Breadcrumb definition.
However, it would be nice to bring together both worlds and have semantic markup for webpage and breadcrumbs. The best I was able to come up with looks like this (using itemref to prevent needing to nest each Breadcrumb into the other):
<body itemscope itemtype="http://schema.org/WebPage">
<h1 itemprop="name">George Orwell</h1>
<p itemprop="description">Eric Arthur Blair (25 June 1903 – 21 January
1950), who used the pen name George Orwell, was an English novelist,
essayist, journalist and critic.</p>
<nav itemprop="breadcrumb">
<ul itemscope>
<li id="bc1"itemscope itemref="bc2"
itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://example.com/books" itemprop="url">
<span itemprop="title">Books</span>
</a> ›
</li>
<li id="bc2" itemscope itemprop="child" itemref="bc3"
itemtype="http://data-vocabulary.org/Breadcrumb">>
<a href="http://example.com/books/authors" itemprop="url">
<span itemprop="title">Authors</span>
</a> ›
</li>
<li id="bc3" itemscope itemprop="child"
itemtype="http://data-vocabulary.org/Breadcrumb">>
<a href="http://example.com/books/authors/orwell" itemprop="url">
<span itemprop="title">George Orwell</span>
</a>
</li>
</ul>
</nav>
</body>
The itemscope attribute on the <ul> is needed so the subsequent breadcrumbs with itemprop="child" are not interpreted as properties of WebPage.
When I throw this code at the Structured Data testing tool, all data is recognised as I want it to be, but there are warnings for the undefined ul item.
Is it safe to ignore these errors? Are there other approaches or even best practices to solve the problem? What about future-proofness: would it be wise to use this kind of code on a website that may not be updated for years?
When testing your markup, Google’s Testing Tool doesn’t seem to report any errors or warnings. It says "All good" for every item.
Your use of Microdata is valid. You are adding an item without type, which does not have any content (because no properties are added).
Using Schema.org’s breadcrumb property seems to be appropriate, as one of its expected types is Text. So Schema.org consumers would extract only the text content of the child items, no URLs:
Books › > Authors › > George Orwell
I don’t think that the linked issue is the reason why Google does not support Schema.org’s BreadcrumbList: the issue is from 2012, but the BreadcrumbList type was added only a few months ago (2014-12-11) to Schema.org.
The issue is about using the breadcrumb property without a type (which did not exist back then), which is not ideal because this does not allow to specify metadata for each breadcrumb (e.g., its URL).
The future-proof way would be to use both vocabularies for breadcrumbs. The Microdata syntax makes this hard/impossible, but the RDFa syntax allows this (however, the odd requirement from Data-Vocabulary.org that the breadcrumbs have to be nested might require markup changes).
I'm currently trying to come up with a good and accessible way to format a status indicator which should be rendered within a set of wizard-like pages on a website. The website should provide a multipage form with a status indicator on top of it as demonstrated in the wireframe below:
Given the new progress-tag in HTML my first thought was to do something like this:
<progress value="2" max="3">
<ul>
<li>Beginning</li>
<li class="now">Right now</li>
<li>End</li>
</ul>
</progress>
... but since <progress> only accepts phrasing content using a list is not really an option. So right now I would probably go with something like this, integratinng the ARIA progressbar-role:
<ul aria-role="progressbar" aria-valuenow="2" aria-valuemin="1" aria-valuemax="3" aria-describedby="state2" aria-valuetext="Right now">
<li id="state1">Beginning</li>
<li id="state2" class="now">Right now</li>
<li id="state3">End</li>
</ul>
But again, I'm not really sure if the progressbar role can be applied in such a way to a list.
Another problem is, that <progress> is rendered as progress bar in Opera, for instance, so >progress> itself is probably not really a viable solution altogether :-(
Can anyone perhaps recommend an accessible status bar that does not only rely on using a single image?
Current solution
For now I will go with following markup:
<section class="progress">
<h1 class="supportive">Your current progress</h1>
<ol>
<li><span class="supportive">Completed step:</span> Login</li>
<li class="now"><span class="supportive">Current step:</span> Right now</li>
<li><span class="supportive">Future step:</span> End</li>
</ol>
</section>
All elements of the class "supportive" will be positioned off-screen. IMO this way we should have a nice compromise of semantic markup (the state succession is in my opinion really an ordered list ;-)) and accessibility thanks to the additional header and status text for each step.
According to whatwg, you're not supposed to assign progressbar role to <ul> elements.
I'd just ditch <ul> and describe progress using (surprise) phrasing content:
<section role="status">
<h2>Task Progress</h2>
<p>You're now at <progress value=2 max=3>"Right now" step</progress>.
</section>
Update: You're right, progress doesn't suit here, it's more like an interactive form widget. I should've checked first, before taking it from your first example. But anyway, the point is there's no need to use a list (even more so, unordered list), when you can just describe what's going on in plain text. In the case that the list of past and future steps is necessary, I'd just add two more paragraphs, one before the status (‘You've completed the "Beginning" step’), and one after (‘Next step will be the "End" step’).
However, I admit that this isn't a complete answer to your question.
Also, I'd say some aria attributes look redundant to me. For example, aria-valuetext perhaps would make more sense in the context of interactive widget, when there's no other human-friendly description of its state. Though I may be wrong here.
As it's valid markup, I have done the following;
<div class="list">
Link 1
Link 2
</div>
My question is, does it have to be written as this;
<ul class="list">
<li>Login to Broker Site</li>
<li>Register</li>
</ul>
what are the + and - of doing one than the other? And are these both correct according to semantic web?
Thanks.
It totally depends on the greater context, but seeing as it seems to be a navigational sub-menu, a ul is indeed the most semantically correct element to use.
The clue is in the class name you chose.
As you see it as a list then use a list. This is a lot more semantic and is helpful for screen readers, which will then treat the contents as a list of links.
So, according the W3C spec, the 'start' attribute in an ordered list is deprecated.
If you want to continue a list that's been broken up by a series of heading, you might have:
<ol start="15">
But that would not be allowed. The questions is how else could you/would you do it other than that which works in current browsers? Mission impossible?
The start attribute may be deprecated for HTML4.01, but it has returned for HTML5. Is there a browser compatibility issue?
EDIT: SitePoint says no. So the only real issue is validation. You can use HTML 4.01 Transitional, or HTML5, but not Strict, if you're really concerned about validation.
Otherwise, you're stuck with having the other lines in the HTML and hiding them.
<style type="text/css">.hidden { display: none }</style>
<ol>
<li class="hidden"></li>
<li class="hidden"></li>
<li class="hidden"></li>
<li class="hidden"></li>
<li>Starting at 5</li>
</ol>
You can do it with CSS counters, but they are not supported in all browsers. The start attribute is your best bet after all.