Day 66 of 100DaysOfSpec, blockquote and ol elements

I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. Read the initial intent/backstory. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft’s official opinion of the spec. Subsections not listed below were read without comment.

Currently reading in 4.4 Grouping content

UAs = user agents = browsers and other HTML document parsers/renderers

4.4.4 The blockquote element

“The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element, and optionally with in-line changes such as annotations and abbreviations.”

How that ends up looking, in code:

<figure>
  <blockquote>
    Hello yes I am a blockquote filled with many wonderous things culled probably from Ira Glass or a TED Talk full of wisdom and wonder and you should absolutely pay attention to my sage words.
  </blockquote>
  <footer><cite>Mr. Fancypants</cite>
  </footer>
</figure>

or

<blockquote>
  Hello yes I am a blockquote filled with many wonderous things culled probably from Ira Glass or a TED Talk full of wisdom and wonder and you should absolutely pay attention to my sage words.
  <footer><cite>Mr. Fancypants</cite>
  </footer>
</blockquote>

There’s some more examples you should consider perusing, but those are some super basic cases.

  • “Another source” can be text from the same page by another person. For example, when you’re snarkily responding to someone else’s comment and would like to refrence their opinions directly in your comment.
  • The optional cite attribute is a valid URL to the original source, and is mainly for “private use”, though it can be surfaced by UAs if they desire.
  • You can abbreviate, annotate, etc. but all notes about how you’ve changed the quote (“emphasis mine”, for example) go INSIDE the blockquote element. I suppose this helps keep the notations attached to the content if it gets parsed in interesting ways.

4.4.5 The ol element

  • Considered palpable content if the element has at least one li child element.
  • Can contain as direct children li and script-supporting elements.
  • Besides global HTML attributes, you can set reversed (boolean value), start (what value to start counting items at, default is “1”), type (list style).
  • Quite a few ARIA role attributes available besides the default list: directory, listbox, menu, menubar, presentation, tablist, toolbar, or tree. Get specific with your list semantics!
  • Should note for those that don’t know: you can set a value attribute on a list item inside an ol element and disrupt the natural (ordinal) counting value. (1,2,3,4,500 or 10, 9, 8, 7.5…)
  • The values for the type attribute are very shorthand: type="1" for decimal numbering (1., 2., 3.) or type="a" for lowercase alphabetical (a., b., c.), for example.

Comments

More on the blog