<commit_before>doctype html
html(lang="en" xmlns="http://www.w3.org/1999/xhtml")
  head
    title Notes on HTML Elements
    meta(charset="utf-8")
    meta(name="author" content="<NAME>")
    meta(name="description" content="Personal notes on HTML5 Elements.")
    meta(name="keywords" content="html, semantic")
    meta(name="viewport" content="width=device-width, initial-scale=1")
    link(rel="stylesheet" href="https://cdn.rawgit.com/chharvey/still-alive/v1.0.0/still-alive.css")
  body.o-GoldenContainer
    include ../../core/include/_snippets.jade
    - var refs = []
    mixin reference(id)
      - refs.push(id)
      a.Rf(id='rf-'+id href='#fn-'+id)= refs.indexOf(id)+1
    mixin footnote(id)
      a.Fn(id='fn-'+id href='#rf-'+id)= refs.indexOf(id)+1
    mixin tag(text, id)
      small.o-Textbox.c-Label.c-Label--info
        = text
        sup: +reference(id)
    main.o-GoldenContainer__Content.c-Document(data-status="draft" itemscope="" itemtype="http://schema.org/Article")
      header
        h1(itemprop="name headline") Notes on HTML Elements
        p.o-GoldenContainer__Content__SideMinor.o-Box.o-Box--island.c-Alert.c-Alert--dang.
          This document is a work in progress.
        dl.c-Document__Meta
          dt Author
          dd(itemprop="author") <NAME>
          dt Description
          dd(itemprop="description") Personal notes on HTML5 Elements.
          dt Keywords
          dd(itemprop="keywords") html
          dd(itemprop="keywords") semantic
          dt Version History
          dd.update: time(datetime="2015-03-03 15:01") Mar 3, 2015 #[span.tod  3:01 PM]
          dd.update: time(datetime="2015-03-08 14:57") Mar 8, 2015 #[span.tod  2:57 PM]
          dd.update: time(datetime="2016-02-14 01:15") Feb 14, 2016 #[span.tod  1:15 AM]
          dd.update: time(datetime="2016-03-06 15:41") Mar  6, 2016 #[span.tod  3:42 PM]
          dd.update
            time(datetime="2016-03-24 13:38" itemprop="dateModified") Mar 24, 2016 #[span.tod  1:38 PM]
            span.o-Textbox.c-Label.c-Label--dang.-ml-1 Latest
        nav#table-contents
          h2 Table of Contents
          ol
            li: a(href="#table-contents") Table of Contents
            li: a(href="#sections") Sections
            li
              a(href="#grouping-content") Grouping Content
              ol
                li: a(href="#paragraph-like-content") Paragraph-Like Content
                li: a(href="#lists") Lists
                li: a(href="#tables") Tables
            li
              a(href="#text-level-semantics") Text-Level Semantics
              ol
                li: a(href="#links-misc") Links &amp; #[abbr(title="miscelaneous") Misc.]
                li: a(href="#stressed-text") Stressed Text
                li: a(href="#documentation-edits") Documentation and Edits
                li: a(href="#machine-readable-data") Machine-Readable Data
            li: a(href="#embedded-content") Embedded Content
            li: a(href="#form-content") Form Content
            li: a(href="#interactive-content") Interactive Content
      section#sections
        h2 Sections
        p May be used where Flow Content is expected.
        ul
          li #[code html]
          li #[code body]    #[+tag('Sectioning Root','body-sectioning-root')]
          li #[code section] #[+tag('Sectioning Content','section-sectioning-content')]
          li #[code article] #[+tag('Sectioning Content','article-sectioning-content')]
          li: section.c-Document__Draft
            h3 #[code aside]
            p: +tag('Sectioning Content','aside-sectioning-content')
            p Two guidelines for using #[code aside]:
            ul
              li.
                The normal flow of the document must not be disturbed if the aside were removed,
                so the reader should be able to completely skip it without missing a beat.
              li.
                The aside itself must make sense isolated and out of context, so reading the aside
                all by itself should make sense.
          li #[code nav]     #[+tag('Sectioning Content','nav-sectioning-content')]
          li #[code main]
          li: section.c-Document__Draft
            h3 #[code header] &amp; #[code footer]
            p.
              The #[code header] element should contain introductory content, data about
              #[em the section itself], such as headings, a table of contents, a list of authors/editors,
              time written/published/updated, and related tags.
            p.
              The #[code footer] element should contain secondary information, data about
              #[em the content in the section], such as copyright information, contact information,
              related links or references, and footnotes.
            footer: p: small Neither element may contain any #[code header] or #[code footer] descendants.
          li #[code h1]&ndash;#[code h6] #[+tag('Phrasing Content Model','hn-phrasing-content-model')]
          li #[code address] #[sup: +reference('address')]
      section#grouping-content
        h2 Grouping Content
        p May be used where Flow Content is expected.
        ul
          li #[code div]
          li #[code hr] #[+tag('Nothing Content Model','hr-nothing-content-model')]
        section#paragraph-like-content
          h3 Paragraph-Like Content
          ul
            li #[code p] #[+tag('Phrasing Content Model','p-phrasing-content-model')]
            li #[code pre] #[+tag('Phrasing Content Model','pre-phrasing-content-model')]
            li: section.c-Document__Draft
              h4 #[code figure]
              p: +tag('Sectioning Root','figure-sectioning-root')
              p.
                A figure is similar to an aside in that it follows the first rule of the aside,
                but it is dissimilar in that it disobeys the second rule.
                More precisely,
                a figure may be removed from its surrounding prose and inserted into, for example,
                an appendix; however it must not be separated from its associated content.
                If taken out of context, the figure would not be useful or make sense;
                It could not be used as stand-alone content.
                This is where #[code figure] and #[code aside] differ.
            li #[code figcaption]
            li #[code blockquote] #[+tag('Sectioning Root','blockquote-sectioning-root')]
        section#lists
          h3 Lists
          ul
            li #[code ol]
            li #[code ul]
            li #[code li] #[sup: +reference('li')]
            li #[code dl]
            li #[code dt] #[sup: +reference('dt')]
            li #[code dd] #[sup: +reference('dd')]
        section#tables
          h3 Tables
          ul
            li #[code table]
            li #[code caption]
            li #[code colgroup]
            li #[code col] #[+tag('Nothing Content Model','col-nothing-content-model')]
            li #[code tbody]
            li #[code thead]
            li #[code tfoot]
            li #[code tr]
            li #[code th] #[sup: +reference('th')]
            li #[code td] #[+tag('Sectioning Root','td-sectioning-root')]
      section#text-level-semantics
        h2 Text-Level Semantics
        p.
          May be used where Phrasing Content is expected.
          All elements in this section have the Phrasing Content Model unless otherwise specified.
        section#links-misc
          h3 Links &amp; #[abbr(title="miscelaneous") Misc.]
          ul
            li: section.c-Document__Draft
              h4 #[code a] &amp; #[code a[href]]
              p: +tag('Transparent Content Model','a-transparent-content-model')
              p.
                When adding a link to #[em one] element, nest the #[code &lt;a&gt;] tag immediately
                #[em inside] the element to be linked.
              pre.
                #[small &lt;!-- &lt;a&gt;&lt;strong&gt;#[strong this is incorrect]&lt;/strong&gt;&lt;/a&gt; --&gt;]
                &lt;strong&gt;&lt;a&gt;#[strong this is correct]&lt;/a&gt;&lt;/strong&gt;
                &lt;strong&gt;&lt;a&gt;do this especially if there is&lt;/a&gt; more, non-linked content
                  inside the element&lt;/strong&gt;
              p.
                When adding a link to a large block of content,
                #[+eg()],
                a #[code section] element, wrap the #[code a] tag around all the content inside the
                element, rather than around the element itself or within each child of the element.
              pre.
                &lt;section itemscope="" itemtype="http://schema.org/Organization"&gt;
                  #[u &lt;a href="//widgetsgalore.com" itemprop="url"&gt;]
                    &lt;h1 itemprop="name"&gt;Widgets Galore, Inc.&lt;/h1&gt;
                    &lt;img src="//widgetsgalore.com/logo" itemprop="image"/&gt;
                    &lt;p itemprop="description"&gt;Our company provides &hellip; &lt;/p&gt;
                  #[u &lt;&#x002f;a&gt;]
                &lt;/section&gt;
              p This helps in two ways:
              ul
                li.
                  Microdata, if present, is structured correctly. If the #[code section] is an
                  itemscope that has a #[code url] itemprop, the #[code: abbr(title="a[itemprop=\"url\"]") a?url]
                  is nested inside.
                li.
                  You don&rsquo;t need to add duplicte #[code a] elements with duplicate attributes
                  inside each child of the #[code section].
              p: strong There might be some exceptions to this rule, but none of them make a strong case.
              ul
                li
                  p when a new element with microdata needs to be nested inside a pre-existing link
                  pre.
                    &lt;a href="//widgetsgalore.com" itemprop="url"&gt;
                      &lt;span itemprop="name"&gt;Widgets Galore, Inc.&lt;/span&gt;
                    &lt;/a&gt;
                  p Although, the following markup is equivalent, so this exception doesn&rsquo;t really count.
                  pre.
                    &lt;span itemprop="name"&gt;
                      &lt;a href="//widgetsgalore.com" itemprop="url"&gt;Widgets Galore, Inc.&lt;/a&gt;
                    &lt;/span&gt;
                li
                  p.
                    when the link contains a lot of text but only some of it needs to be marked up
                    with phrasing content
                  pre.
                    &lt;a&gt;Click this link &lt;em&gt;but only if&lt;/em&gt; you are brave enough!&lt;/a&gt;
                  p.
                    But then again you could argue that the rule doesn&rsquo;t apply here either since you
                    aren&rsquo;t adding a link to #[em just one] element; there are also text nodes
                    to be included in the link.
            li #[code span]
            li #[code br] #[+tag('Nothing Content Model','br-nothing-content-model')]
            li #[code wbr] #[+tag('Nothing Content Model','wbr-nothing-content-model')]
        section#stressed-text
          h3 Stressed Text
          ul
            li: section.c-Document__Draft
              h4 #[code em]
              p.
                Emphasized text represents words or phrases that are stressed, as if the tone of voice would be
                affected. More importantly,
                #[strong the placement of stress should affect the meaning of the passage].
                If the emphasis were to be removed or relocated, the passage&rsquo;s meaning should change.
                The following examples illustrate how the placement of the #[code em] element
                changes the meaning of the statement.
              pre.
                Are you #[u &lt;em&gt;really&lt;&#x002f;em&gt;] going to buy these jeans?
                    (or are you just thinking about it?)
                Are you really going to buy #[u &lt;em&gt;these&lt;&#x002f;em&gt;] jeans?
                    (or wouldn’t you like those jeans better?)
                Are you really going to #[u &lt;em&gt;buy&lt;&#x002f;em&gt;] these jeans?
                    (or are you going to steal them?)
                Are #[u &lt;em&gt;you&lt;&#x002f;em&gt;] really going to buy these jeans?
                    (or am I going to have to buy them for you?)
            li: section.c-Document__Draft
              h4 #[code strong]
              p.
                Strong text has a level of importance. Important text does not necessarily affect tone of voice
                (although it may), but rather upsets the normal prose by causing the reader to examine the text
                more carefully. The placement of importance should not affect the meaning of the passage.
            li: section.c-Document__Draft
              h4 #[code i]
              p.
                A phrase interpreted in an alternate voice or mood, without carrying extra emphasis,
                such as scare quotes and mentions.
                Or a phrase in a foreign language, such as the taxonomic classification (in Latin) of an organism.
                (If a foreign language, be sure to add the #[code [lang]] attribute.)
              p.
                #[dfn#d-scare-quote: a(rel="external" href="https://en.wikipedia.org/wiki/Scare_quotes") Scare quotes]
                are expressions that abuse
                vocabulary or language, sarcastic expressions, double entendres, metaphors or analogies,
                onomatopoeias, and other idioms of the like. In spoken language, people typically
                indicate scare quotes by making
                #[a(rel="external" href="https://en.wikipedia.org/wiki/Air_quotes") air quotes]:
                by holding their hands up and bending
                the first two fingers on each hand. If you would do this while speaking a word or phrase,
                it&rsquo;s most likely a scare quote.
              figure
                pre My hair is not #[u &lt;i&gt;black&lt;&#x002f;i&gt;]; it&rsquo;s just very dark brown.
                pre &lt;q&gt;Penny, you&rsquo;re an #[u &lt;i&gt;actress&lt;&#x002f;i&gt;], right?&lt;/q&gt; Sheldon asked, mockingly.
              p.
                A #[dfn#d-mention mention] refers to an explicit word or phrase
                without conveying meaning to the sentence. If the word or phrase could be replaced with
                nonsense and the sentence would still be syntactically correct, then it is a mention.
                However, if the word or phrase is integral to the meaning of the sentence, then
                #[a(rel="external" href="http://en.wikipedia.org/wiki/Use%E2%80%93mention_distinction") it is not being #[em mentioned], but rather #[em used]].
              figure
                pre Don&rsquo;t say #[u &lt;i&gt;equals&lt;&#x002f;i&gt;] when you mean #[u &lt;i&gt;implies&lt;&#x002f;i&gt;].
                figcaption.c-Caption.c-Caption--after.
                  In this example, the words #[i equals] and
                  #[i implies] are #[em mentioned] because the author is referring to
                  the actual words. They can be replaced with nonsense words and the sentence would
                  still be syntactically correct.
              figure
                pre.
                  The word #[u &lt;i&gt;bed&lt;&#x002f;i&gt;] looks like an actual #[u bed].
                figcaption.c-Caption.c-Caption--after.
                  The word #[i bed] appears twice in this example.
                  The first time it is being #[em mentioned], because the author is referring to
                  the word itself. However, the second time it&rsquo;s being #[em used], because
                  the author is talking about the object one sleeps in.
              aside
                figure.crossgrid-lined
                  p #[q Infection #[u equals] fever,] said Foreman.
                  p
                    | Cameron corrected him. 
                    q.
                      No, infection #[em: u implies] fever. She could still have a fever and not have an
                      infection.
                    |  Turning to House, she suggested, 
                    q It could be autoimmune.
                  figcaption.c-Caption.c-Caption--after.
                    The words #[i equals] and #[i implies] are #[em used] in this example, as
                    they are integral to the content&rsquo;s meaning.
                p.
                  There is no specific markup for indicating used phrases since their semantics are
                  already integral to the element they are in.
                  In the example above, the word #[i implies] is marked up with #[code &lt;em&gt;]
                  only because Cameron used stress emphasis to correct Foreman.
            li: section.c-Document__Draft
              h4 #[code mark]
              p.
                A span of text that is relevant in some context. It is advisable to use the
                #[code [class]] attribute
                to indicate the context in which the span is relevant.
            li: section.c-Document__Draft
              h4 #[code u]
              p.
                A span of text to which the reader&rsquo;s attention should be brought for purposes of illustration.
                This span is typically in a figure or example.
            li: section.c-Document__Draft
              h4 #[code small]
              p.
                The #[code small] element represents a side comment, fine print, disclaimer,
                or caveat of some kind...
            li: section.c-Document__Draft
              h4 #[code s]
              p: +tag('Transparent Content Model','s-transparent-content-model')
              p.
                Text that is shown to be no longer relevant or accurate.
        section#documentation-edits
          h3 Documentation and Edits
          ul
            li: section.c-Document__Draft
              h4 #[code ins] &amp; #[code del]
              p: +tag('Transparent Content Model','ins-transparent-content-model')
              p.
                These elements explicitly indicate changes in a
                document: content that has been inserted into or deleted from the document.
            li: section.c-Document__Draft
              h4 #[code dfn]
              p.
                A vocabulary term.
                Every #[code dfn] should have an #[code [id]] attribute, thus there must only be one #[code dfn] per page that
                contains a given term in question. Furthermore, hyperlinks can point to the defining instance
                of the term.
            li: section.c-Document__Draft
              h4 #[code b]
              p.
                A keyword, technical or specific term, or key phrase.
                A #[code b] element is any generic keyword or term, whose definition is not present.
                If the term is being defined, use the #[code dfn] element.
            li: section.c-Document__Draft
              h4 #[code abbr]
              p.
                An abbreviation or acronym.
                The #[code [id]] and #[code [title]] attributes should be present,
                and #[code [title]] should contain the expanded term.
              p.
                Use this element to only mark up the first instance of the abbreviation on the page.
                If the same exact abbreviation appears elsewhere, there is no need to
                mark it up with #[code abbr].
            li: section.c-Document__Draft
              h4 #[code var]
              p.
                A placeholder for some textual element.
                It could be a placeholder or a filename, or a value,
                #[+etc()]
              p.
                This does #[em not] represent a variable in a coding language
                or a mathematical variable. The following HTML would be incorrect, since
                the content inside the #[code var] elements is not placeholder text; it is actual content.
              pre.
                #[small &lt;!-- these examples are incorrect! --&gt;]
                &lt;code&gt;String &lt;var&gt;$welcome&lt;/var&gt; = 'Hello world!'&lt;/code&gt;
                &lt;p&gt;0 = &lt;var&gt;x&lt;/var&gt;&lt;sup&gt;2&lt;/sup&gt; - &lt;var&gt;x&lt;/var&gt; - 1&lt;/p&gt;
              p: small.
                It would instead be more appropriate to mark up code/mathematical variables with
                a #[code span] (perhaps with a class) for syntax coloring.
              p.
                Rather, the #[code var] element represents a placeholder for when the content is unknown.
                The following example is correct:
              pre.
                Use this git commmand to see diff:
                &lt;kbd&gt;$ git diff #[u &lt;var&gt;filepath&lt;&#x002f;var&gt;]&lt;/kbd&gt;
                where #[u &lt;var&gt;filepath&lt;&#x002f;var&gt;] is the path or name of the file
                you want to see the diff for.
            li: section.c-Document__Draft
              h4 #[code q]
              p.
                An inline quotation: a span of text that is taken directly from another source
                (real or fictional).
            li: section.c-Document__Draft
              h4 #[code cite]
              p.
                References a creative work, some part of a work
                (for example, the name or title of a heading, section, figure,
                table (or column in a table) in the work),
                or the creator of a work.
                This element may also represent a proper noun traditionally italicized,
                #[+eg()], a periodical name or ship name.
                Usually, the content in a #[code cite] element will be capitalized.
            li: section.c-Document__Draft
              h4 #[code sup] &amp; #[code sub]
              p.
                Use the #[code sup] and #[code sub] elements for when their presence
                is semantically required, not just when it looks good there.
                #[i(lang="la"): abbr(title="exampli gratia") E.g.], don&rsquo;t use superscripts
                for the abbreviation of ordinals. There are three reasons for this:
                1st,
                #[q superscripted ordinals are tiny and hard to read]
                #[cite (Matthew&nbsp;Butterick,&nbsp;#[time 2014])],
                and 2nd, you should really be spelling out these ordinal numbers in the first place.
                But third, and most importantly,
                the semantics would remain the same even if the superscript were removed.
                Use super/subscripts only when changing them to normal text would
                drastically affect their meaning. For example,
                #[i(style="quotes:none;") 1#[span(style="font-size:smaller;vertical-align:super;") st]] means the
                same thing as #[i(style="quotes:none;") 1st];
                however, this does not hold
                in math: #[u f(x) = a#[sub 0]x#[sup 2] + a#[sub 1]x + a#[sub 2]],
                in chemical formulae: #[u dihydgogen oxide, or H#[sub 2]O, is commonly known as water], and
                in French abbreviations: #[u #[abbr(title="Mademoiselle") M#[sup lle]] Juliette].
        section#machine-readable-data
          h3 Machine-Readable Data
          ul
            li #[code data]
            li #[code time]
            li #[code code]
            li #[code kbd]
            li #[code samp]
      section#embedded-content
        h2 Embedded Content
        ul
          li #[code img] #[+tag('Nothing Content Model','img-nothing-content-model')]
      section#form-content
        h2 Form Content
        ul
          li #[code fieldset] #[+tag('Sectioning Root','fieldset-sectioning-root')]
          li #[code legend] #[+tag('Phrasing Content Model','legend-phrasing-content-model')]
          li: section.c-Document__Draft
            h3 #[code input]
            p: +tag('Nothing Content Model','input-nothing-content-model')
            p.
              Radio buttons with the same #[code [name]] attribute value are in the same
              #[b radio button group]&mdash;only one radio button in a radio button group
              may be selected.
          li #[code label] #[+tag('Phrasing Content Model','label-phrasing-content-model')] #[sup: +reference('label')]
      section#interactive-content
        h2 Interactive Content
        ul
          li #[code details] #[+tag('Sectioning Root','details-sectioning-root')]
          li #[code summary] #[+tag('Phrasing Content Model','summary-phrasing-content-model')] #[sup: +reference('summary')]
          li #[code dialog] #[+tag('Sectioning Root','dialog-sectioning-root')]
      footer
        ul.c-ListFootnotes
          li
            sup
              +footnote('body-sectioning-root')
              +footnote('figure-sectioning-root')
              +footnote('blockquote-sectioning-root')
              +footnote('td-sectioning-root')
              +footnote('fieldset-sectioning-root')
              +footnote('details-sectioning-root')
              +footnote('dialog-sectioning-root')
            | #[dfn Sectioning Roots] have their own outlines, but they are encapsulated,
            |  hidden from the Document Outline (#[abbr.c-Acro#document-outline(title="document outline") DO]).
          li
            sup
              +footnote('section-sectioning-content')
              +footnote('article-sectioning-content')
              +footnote('aside-sectioning-content')
              +footnote('nav-sectioning-content')
            | Each #[dfn#sectioning-content Sectioning Content] adds a section to the #[span.c-Acro DO].
          li
            sup
              +footnote('hr-nothing-content-model')
              +footnote('col-nothing-content-model')
              +footnote('br-nothing-content-model')
              +footnote('wbr-nothing-content-model')
              +footnote('img-nothing-content-model')
              +footnote('input-nothing-content-model')
            | An element with an #[dfn#nothing-content-model Nothing Content Model] may contain no children. 
            small.
              Most elements with a Nothing Content Model are also #[dfn#void-element void elements], which
              have a start tag but no end tag.
          li
            sup
              +footnote('a-transparent-content-model')
              +footnote('s-transparent-content-model')
              +footnote('ins-transparent-content-model')
              +footnote('del-transparent-content-model')
            | An element with a #[dfn#transparent-content-model Transparent Content Model] may contain only content types
            |  matching the Content Model of that element&rsquo;s parent.
          li
            sup
              +footnote('hn-phrasing-content-model')
              +footnote('p-phrasing-content-model')
              +footnote('pre-phrasing-content-model')
              +footnote('legend-phrasing-content-model')
              +footnote('summary-phrasing-content-model')
            | An element with a #[dfn#phrasing-content-model Phrasing Content Model] may contain only Phrasing Content children. 
            small All text-level elements have the Phrasing Content Model unless otherwise specified.
          li
            sup
              +footnote('li')
              +footnote('dd')
            | The #[code li] and #[code dd] Elements seem like they should be Sectioning Roots
            |  but they are not! Do not contain sectioning content inside these Elements
            |  unless you want to change the #[abbr.c-Acro(title="document outline") DO]!
          li
            sup
              +footnote('address')
              +footnote('dt')
              +footnote('th')
            | The #[code address], #[code dt], and #[code th] elements may contain any Flow Content except
            |  Sectioning Content, Heading Content, #[code header]s, and #[code footer]s.<commit_msg>correct <s> content model<commit_after>doctype html
html(lang="en" xmlns="http://www.w3.org/1999/xhtml")
  head
    title Notes on HTML Elements
    meta(charset="utf-8")
    meta(name="author" content="<NAME>")
    meta(name="description" content="Personal notes on HTML5 Elements.")
    meta(name="keywords" content="html, semantic")
    meta(name="viewport" content="width=device-width, initial-scale=1")
    link(rel="stylesheet" href="https://cdn.rawgit.com/chharvey/still-alive/v1.0.0/still-alive.css")
  body.o-GoldenContainer
    include ../../core/include/_snippets.jade
    - var refs = []
    mixin reference(id)
      - refs.push(id)
      a.Rf(id='rf-'+id href='#fn-'+id)= refs.indexOf(id)+1
    mixin footnote(id)
      a.Fn(id='fn-'+id href='#rf-'+id)= refs.indexOf(id)+1
    mixin tag(text, id)
      small.o-Textbox.c-Label.c-Label--info
        = text
        sup: +reference(id)
    main.o-GoldenContainer__Content.c-Document(data-status="draft" itemscope="" itemtype="http://schema.org/Article")
      header
        h1(itemprop="name headline") Notes on HTML Elements
        p.o-GoldenContainer__Content__SideMinor.o-Box.o-Box--island.c-Alert.c-Alert--dang.
          This document is a work in progress.
        dl.c-Document__Meta
          dt Author
          dd(itemprop="author") <NAME>
          dt Description
          dd(itemprop="description") Personal notes on HTML5 Elements.
          dt Keywords
          dd(itemprop="keywords") html
          dd(itemprop="keywords") semantic
          dt Version History
          dd.update: time(datetime="2015-03-03 15:01") Mar 3, 2015 #[span.tod  3:01 PM]
          dd.update: time(datetime="2015-03-08 14:57") Mar 8, 2015 #[span.tod  2:57 PM]
          dd.update: time(datetime="2016-02-14 01:15") Feb 14, 2016 #[span.tod  1:15 AM]
          dd.update: time(datetime="2016-03-06 15:41") Mar  6, 2016 #[span.tod  3:42 PM]
          dd.update
            time(datetime="2016-03-24 13:38" itemprop="dateModified") Mar 24, 2016 #[span.tod  1:38 PM]
            span.o-Textbox.c-Label.c-Label--dang.-ml-1 Latest
        nav#table-contents
          h2 Table of Contents
          ol
            li: a(href="#table-contents") Table of Contents
            li: a(href="#sections") Sections
            li
              a(href="#grouping-content") Grouping Content
              ol
                li: a(href="#paragraph-like-content") Paragraph-Like Content
                li: a(href="#lists") Lists
                li: a(href="#tables") Tables
            li
              a(href="#text-level-semantics") Text-Level Semantics
              ol
                li: a(href="#links-misc") Links &amp; #[abbr(title="miscelaneous") Misc.]
                li: a(href="#stressed-text") Stressed Text
                li: a(href="#documentation-edits") Documentation and Edits
                li: a(href="#machine-readable-data") Machine-Readable Data
            li: a(href="#embedded-content") Embedded Content
            li: a(href="#form-content") Form Content
            li: a(href="#interactive-content") Interactive Content
      section#sections
        h2 Sections
        p May be used where Flow Content is expected.
        ul
          li #[code html]
          li #[code body]    #[+tag('Sectioning Root','body-sectioning-root')]
          li #[code section] #[+tag('Sectioning Content','section-sectioning-content')]
          li #[code article] #[+tag('Sectioning Content','article-sectioning-content')]
          li: section.c-Document__Draft
            h3 #[code aside]
            p: +tag('Sectioning Content','aside-sectioning-content')
            p Two guidelines for using #[code aside]:
            ul
              li.
                The normal flow of the document must not be disturbed if the aside were removed,
                so the reader should be able to completely skip it without missing a beat.
              li.
                The aside itself must make sense isolated and out of context, so reading the aside
                all by itself should make sense.
          li #[code nav]     #[+tag('Sectioning Content','nav-sectioning-content')]
          li #[code main]
          li: section.c-Document__Draft
            h3 #[code header] &amp; #[code footer]
            p.
              The #[code header] element should contain introductory content, data about
              #[em the section itself], such as headings, a table of contents, a list of authors/editors,
              time written/published/updated, and related tags.
            p.
              The #[code footer] element should contain secondary information, data about
              #[em the content in the section], such as copyright information, contact information,
              related links or references, and footnotes.
            footer: p: small Neither element may contain any #[code header] or #[code footer] descendants.
          li #[code h1]&ndash;#[code h6] #[+tag('Phrasing Content Model','hn-phrasing-content-model')]
          li #[code address] #[sup: +reference('address')]
      section#grouping-content
        h2 Grouping Content
        p May be used where Flow Content is expected.
        ul
          li #[code div]
          li #[code hr] #[+tag('Nothing Content Model','hr-nothing-content-model')]
        section#paragraph-like-content
          h3 Paragraph-Like Content
          ul
            li #[code p] #[+tag('Phrasing Content Model','p-phrasing-content-model')]
            li #[code pre] #[+tag('Phrasing Content Model','pre-phrasing-content-model')]
            li: section.c-Document__Draft
              h4 #[code figure]
              p: +tag('Sectioning Root','figure-sectioning-root')
              p.
                A figure is similar to an aside in that it follows the first rule of the aside,
                but it is dissimilar in that it disobeys the second rule.
                More precisely,
                a figure may be removed from its surrounding prose and inserted into, for example,
                an appendix; however it must not be separated from its associated content.
                If taken out of context, the figure would not be useful or make sense;
                It could not be used as stand-alone content.
                This is where #[code figure] and #[code aside] differ.
            li #[code figcaption]
            li #[code blockquote] #[+tag('Sectioning Root','blockquote-sectioning-root')]
        section#lists
          h3 Lists
          ul
            li #[code ol]
            li #[code ul]
            li #[code li] #[sup: +reference('li')]
            li #[code dl]
            li #[code dt] #[sup: +reference('dt')]
            li #[code dd] #[sup: +reference('dd')]
        section#tables
          h3 Tables
          ul
            li #[code table]
            li #[code caption]
            li #[code colgroup]
            li #[code col] #[+tag('Nothing Content Model','col-nothing-content-model')]
            li #[code tbody]
            li #[code thead]
            li #[code tfoot]
            li #[code tr]
            li #[code th] #[sup: +reference('th')]
            li #[code td] #[+tag('Sectioning Root','td-sectioning-root')]
      section#text-level-semantics
        h2 Text-Level Semantics
        p.
          May be used where Phrasing Content is expected.
          All elements in this section have the Phrasing Content Model unless otherwise specified.
        section#links-misc
          h3 Links &amp; #[abbr(title="miscelaneous") Misc.]
          ul
            li: section.c-Document__Draft
              h4 #[code a] &amp; #[code a[href]]
              p: +tag('Transparent Content Model','a-transparent-content-model')
              p.
                When adding a link to #[em one] element, nest the #[code &lt;a&gt;] tag immediately
                #[em inside] the element to be linked.
              pre.
                #[small &lt;!-- &lt;a&gt;&lt;strong&gt;#[strong this is incorrect]&lt;/strong&gt;&lt;/a&gt; --&gt;]
                &lt;strong&gt;&lt;a&gt;#[strong this is correct]&lt;/a&gt;&lt;/strong&gt;
                &lt;strong&gt;&lt;a&gt;do this especially if there is&lt;/a&gt; more, non-linked content
                  inside the element&lt;/strong&gt;
              p.
                When adding a link to a large block of content,
                #[+eg()],
                a #[code section] element, wrap the #[code a] tag around all the content inside the
                element, rather than around the element itself or within each child of the element.
              pre.
                &lt;section itemscope="" itemtype="http://schema.org/Organization"&gt;
                  #[u &lt;a href="//widgetsgalore.com" itemprop="url"&gt;]
                    &lt;h1 itemprop="name"&gt;Widgets Galore, Inc.&lt;/h1&gt;
                    &lt;img src="//widgetsgalore.com/logo" itemprop="image"/&gt;
                    &lt;p itemprop="description"&gt;Our company provides &hellip; &lt;/p&gt;
                  #[u &lt;&#x002f;a&gt;]
                &lt;/section&gt;
              p This helps in two ways:
              ul
                li.
                  Microdata, if present, is structured correctly. If the #[code section] is an
                  itemscope that has a #[code url] itemprop, the #[code: abbr(title="a[itemprop=\"url\"]") a?url]
                  is nested inside.
                li.
                  You don&rsquo;t need to add duplicte #[code a] elements with duplicate attributes
                  inside each child of the #[code section].
              p: strong There might be some exceptions to this rule, but none of them make a strong case.
              ul
                li
                  p when a new element with microdata needs to be nested inside a pre-existing link
                  pre.
                    &lt;a href="//widgetsgalore.com" itemprop="url"&gt;
                      &lt;span itemprop="name"&gt;Widgets Galore, Inc.&lt;/span&gt;
                    &lt;/a&gt;
                  p Although, the following markup is equivalent, so this exception doesn&rsquo;t really count.
                  pre.
                    &lt;span itemprop="name"&gt;
                      &lt;a href="//widgetsgalore.com" itemprop="url"&gt;Widgets Galore, Inc.&lt;/a&gt;
                    &lt;/span&gt;
                li
                  p.
                    when the link contains a lot of text but only some of it needs to be marked up
                    with phrasing content
                  pre.
                    &lt;a&gt;Click this link &lt;em&gt;but only if&lt;/em&gt; you are brave enough!&lt;/a&gt;
                  p.
                    But then again you could argue that the rule doesn&rsquo;t apply here either since you
                    aren&rsquo;t adding a link to #[em just one] element; there are also text nodes
                    to be included in the link.
            li #[code span]
            li #[code br] #[+tag('Nothing Content Model','br-nothing-content-model')]
            li #[code wbr] #[+tag('Nothing Content Model','wbr-nothing-content-model')]
        section#stressed-text
          h3 Stressed Text
          ul
            li: section.c-Document__Draft
              h4 #[code em]
              p.
                Emphasized text represents words or phrases that are stressed, as if the tone of voice would be
                affected. More importantly,
                #[strong the placement of stress should affect the meaning of the passage].
                If the emphasis were to be removed or relocated, the passage&rsquo;s meaning should change.
                The following examples illustrate how the placement of the #[code em] element
                changes the meaning of the statement.
              pre.
                Are you #[u &lt;em&gt;really&lt;&#x002f;em&gt;] going to buy these jeans?
                    (or are you just thinking about it?)
                Are you really going to buy #[u &lt;em&gt;these&lt;&#x002f;em&gt;] jeans?
                    (or wouldn’t you like those jeans better?)
                Are you really going to #[u &lt;em&gt;buy&lt;&#x002f;em&gt;] these jeans?
                    (or are you going to steal them?)
                Are #[u &lt;em&gt;you&lt;&#x002f;em&gt;] really going to buy these jeans?
                    (or am I going to have to buy them for you?)
            li: section.c-Document__Draft
              h4 #[code strong]
              p.
                Strong text has a level of importance. Important text does not necessarily affect tone of voice
                (although it may), but rather upsets the normal prose by causing the reader to examine the text
                more carefully. The placement of importance should not affect the meaning of the passage.
            li: section.c-Document__Draft
              h4 #[code i]
              p.
                A phrase interpreted in an alternate voice or mood, without carrying extra emphasis,
                such as scare quotes and mentions.
                Or a phrase in a foreign language, such as the taxonomic classification (in Latin) of an organism.
                (If a foreign language, be sure to add the #[code [lang]] attribute.)
              p.
                #[dfn#d-scare-quote: a(rel="external" href="https://en.wikipedia.org/wiki/Scare_quotes") Scare quotes]
                are expressions that abuse
                vocabulary or language, sarcastic expressions, double entendres, metaphors or analogies,
                onomatopoeias, and other idioms of the like. In spoken language, people typically
                indicate scare quotes by making
                #[a(rel="external" href="https://en.wikipedia.org/wiki/Air_quotes") air quotes]:
                by holding their hands up and bending
                the first two fingers on each hand. If you would do this while speaking a word or phrase,
                it&rsquo;s most likely a scare quote.
              figure
                pre My hair is not #[u &lt;i&gt;black&lt;&#x002f;i&gt;]; it&rsquo;s just very dark brown.
                pre &lt;q&gt;Penny, you&rsquo;re an #[u &lt;i&gt;actress&lt;&#x002f;i&gt;], right?&lt;/q&gt; Sheldon asked, mockingly.
              p.
                A #[dfn#d-mention mention] refers to an explicit word or phrase
                without conveying meaning to the sentence. If the word or phrase could be replaced with
                nonsense and the sentence would still be syntactically correct, then it is a mention.
                However, if the word or phrase is integral to the meaning of the sentence, then
                #[a(rel="external" href="http://en.wikipedia.org/wiki/Use%E2%80%93mention_distinction") it is not being #[em mentioned], but rather #[em used]].
              figure
                pre Don&rsquo;t say #[u &lt;i&gt;equals&lt;&#x002f;i&gt;] when you mean #[u &lt;i&gt;implies&lt;&#x002f;i&gt;].
                figcaption.c-Caption.c-Caption--after.
                  In this example, the words #[i equals] and
                  #[i implies] are #[em mentioned] because the author is referring to
                  the actual words. They can be replaced with nonsense words and the sentence would
                  still be syntactically correct.
              figure
                pre.
                  The word #[u &lt;i&gt;bed&lt;&#x002f;i&gt;] looks like an actual #[u bed].
                figcaption.c-Caption.c-Caption--after.
                  The word #[i bed] appears twice in this example.
                  The first time it is being #[em mentioned], because the author is referring to
                  the word itself. However, the second time it&rsquo;s being #[em used], because
                  the author is talking about the object one sleeps in.
              aside
                figure.crossgrid-lined
                  p #[q Infection #[u equals] fever,] said Foreman.
                  p
                    | Cameron corrected him. 
                    q.
                      No, infection #[em: u implies] fever. She could still have a fever and not have an
                      infection.
                    |  Turning to House, she suggested, 
                    q It could be autoimmune.
                  figcaption.c-Caption.c-Caption--after.
                    The words #[i equals] and #[i implies] are #[em used] in this example, as
                    they are integral to the content&rsquo;s meaning.
                p.
                  There is no specific markup for indicating used phrases since their semantics are
                  already integral to the element they are in.
                  In the example above, the word #[i implies] is marked up with #[code &lt;em&gt;]
                  only because Cameron used stress emphasis to correct Foreman.
            li: section.c-Document__Draft
              h4 #[code mark]
              p.
                A span of text that is relevant in some context. It is advisable to use the
                #[code [class]] attribute
                to indicate the context in which the span is relevant.
            li: section.c-Document__Draft
              h4 #[code u]
              p.
                A span of text to which the reader&rsquo;s attention should be brought for purposes of illustration.
                This span is typically in a figure or example.
            li: section.c-Document__Draft
              h4 #[code small]
              p.
                The #[code small] element represents a side comment, fine print, disclaimer,
                or caveat of some kind...
            li: section.c-Document__Draft
              h4 #[code s]
              p.
                Text that is shown to be no longer relevant or accurate.
        section#documentation-edits
          h3 Documentation and Edits
          ul
            li: section.c-Document__Draft
              h4 #[code ins] &amp; #[code del]
              p: +tag('Transparent Content Model','ins-transparent-content-model')
              p.
                These elements explicitly indicate changes in a
                document: content that has been inserted into or deleted from the document.
            li: section.c-Document__Draft
              h4 #[code dfn]
              p.
                A vocabulary term.
                Every #[code dfn] should have an #[code [id]] attribute, thus there must only be one #[code dfn] per page that
                contains a given term in question. Furthermore, hyperlinks can point to the defining instance
                of the term.
            li: section.c-Document__Draft
              h4 #[code b]
              p.
                A keyword, technical or specific term, or key phrase.
                A #[code b] element is any generic keyword or term, whose definition is not present.
                If the term is being defined, use the #[code dfn] element.
            li: section.c-Document__Draft
              h4 #[code abbr]
              p.
                An abbreviation or acronym.
                The #[code [id]] and #[code [title]] attributes should be present,
                and #[code [title]] should contain the expanded term.
              p.
                Use this element to only mark up the first instance of the abbreviation on the page.
                If the same exact abbreviation appears elsewhere, there is no need to
                mark it up with #[code abbr].
            li: section.c-Document__Draft
              h4 #[code var]
              p.
                A placeholder for some textual element.
                It could be a placeholder or a filename, or a value,
                #[+etc()]
              p.
                This does #[em not] represent a variable in a coding language
                or a mathematical variable. The following HTML would be incorrect, since
                the content inside the #[code var] elements is not placeholder text; it is actual content.
              pre.
                #[small &lt;!-- these examples are incorrect! --&gt;]
                &lt;code&gt;String &lt;var&gt;$welcome&lt;/var&gt; = 'Hello world!'&lt;/code&gt;
                &lt;p&gt;0 = &lt;var&gt;x&lt;/var&gt;&lt;sup&gt;2&lt;/sup&gt; - &lt;var&gt;x&lt;/var&gt; - 1&lt;/p&gt;
              p: small.
                It would instead be more appropriate to mark up code/mathematical variables with
                a #[code span] (perhaps with a class) for syntax coloring.
              p.
                Rather, the #[code var] element represents a placeholder for when the content is unknown.
                The following example is correct:
              pre.
                Use this git commmand to see diff:
                &lt;kbd&gt;$ git diff #[u &lt;var&gt;filepath&lt;&#x002f;var&gt;]&lt;/kbd&gt;
                where #[u &lt;var&gt;filepath&lt;&#x002f;var&gt;] is the path or name of the file
                you want to see the diff for.
            li: section.c-Document__Draft
              h4 #[code q]
              p.
                An inline quotation: a span of text that is taken directly from another source
                (real or fictional).
            li: section.c-Document__Draft
              h4 #[code cite]
              p.
                References a creative work, some part of a work
                (for example, the name or title of a heading, section, figure,
                table (or column in a table) in the work),
                or the creator of a work.
                This element may also represent a proper noun traditionally italicized,
                #[+eg()], a periodical name or ship name.
                Usually, the content in a #[code cite] element will be capitalized.
            li: section.c-Document__Draft
              h4 #[code sup] &amp; #[code sub]
              p.
                Use the #[code sup] and #[code sub] elements for when their presence
                is semantically required, not just when it looks good there.
                #[i(lang="la"): abbr(title="exampli gratia") E.g.], don&rsquo;t use superscripts
                for the abbreviation of ordinals. There are three reasons for this:
                1st,
                #[q superscripted ordinals are tiny and hard to read]
                #[cite (Matthew&nbsp;Butterick,&nbsp;#[time 2014])],
                and 2nd, you should really be spelling out these ordinal numbers in the first place.
                But third, and most importantly,
                the semantics would remain the same even if the superscript were removed.
                Use super/subscripts only when changing them to normal text would
                drastically affect their meaning. For example,
                #[i(style="quotes:none;") 1#[span(style="font-size:smaller;vertical-align:super;") st]] means the
                same thing as #[i(style="quotes:none;") 1st];
                however, this does not hold
                in math: #[u f(x) = a#[sub 0]x#[sup 2] + a#[sub 1]x + a#[sub 2]],
                in chemical formulae: #[u dihydgogen oxide, or H#[sub 2]O, is commonly known as water], and
                in French abbreviations: #[u #[abbr(title="Mademoiselle") M#[sup lle]] Juliette].
        section#machine-readable-data
          h3 Machine-Readable Data
          ul
            li #[code data]
            li #[code time]
            li #[code code]
            li #[code kbd]
            li #[code samp]
      section#embedded-content
        h2 Embedded Content
        ul
          li #[code img] #[+tag('Nothing Content Model','img-nothing-content-model')]
      section#form-content
        h2 Form Content
        ul
          li #[code fieldset] #[+tag('Sectioning Root','fieldset-sectioning-root')]
          li #[code legend] #[+tag('Phrasing Content Model','legend-phrasing-content-model')]
          li: section.c-Document__Draft
            h3 #[code input]
            p: +tag('Nothing Content Model','input-nothing-content-model')
            p.
              Radio buttons with the same #[code [name]] attribute value are in the same
              #[b radio button group]&mdash;only one radio button in a radio button group
              may be selected.
          li #[code label] #[+tag('Phrasing Content Model','label-phrasing-content-model')] #[sup: +reference('label')]
      section#interactive-content
        h2 Interactive Content
        ul
          li #[code details] #[+tag('Sectioning Root','details-sectioning-root')]
          li #[code summary] #[+tag('Phrasing Content Model','summary-phrasing-content-model')] #[sup: +reference('summary')]
          li #[code dialog] #[+tag('Sectioning Root','dialog-sectioning-root')]
      footer
        ul.c-ListFootnotes
          li
            sup
              +footnote('body-sectioning-root')
              +footnote('figure-sectioning-root')
              +footnote('blockquote-sectioning-root')
              +footnote('td-sectioning-root')
              +footnote('fieldset-sectioning-root')
              +footnote('details-sectioning-root')
              +footnote('dialog-sectioning-root')
            | #[dfn Sectioning Roots] have their own outlines, but they are encapsulated,
            |  hidden from the Document Outline (#[abbr.c-Acro#document-outline(title="document outline") DO]).
          li
            sup
              +footnote('section-sectioning-content')
              +footnote('article-sectioning-content')
              +footnote('aside-sectioning-content')
              +footnote('nav-sectioning-content')
            | Each #[dfn#sectioning-content Sectioning Content] adds a section to the #[span.c-Acro DO].
          li
            sup
              +footnote('hr-nothing-content-model')
              +footnote('col-nothing-content-model')
              +footnote('br-nothing-content-model')
              +footnote('wbr-nothing-content-model')
              +footnote('img-nothing-content-model')
              +footnote('input-nothing-content-model')
            | An element with an #[dfn#nothing-content-model Nothing Content Model] may contain no children. 
            small.
              Most elements with a Nothing Content Model are also #[dfn#void-element void elements], which
              have a start tag but no end tag.
          li
            sup
              +footnote('a-transparent-content-model')
              +footnote('ins-transparent-content-model')
              +footnote('del-transparent-content-model')
            | An element with a #[dfn#transparent-content-model Transparent Content Model] may contain only content types
            |  matching the Content Model of that element&rsquo;s parent.
          li
            sup
              +footnote('hn-phrasing-content-model')
              +footnote('p-phrasing-content-model')
              +footnote('pre-phrasing-content-model')
              +footnote('legend-phrasing-content-model')
              +footnote('summary-phrasing-content-model')
            | An element with a #[dfn#phrasing-content-model Phrasing Content Model] may contain only Phrasing Content children. 
            small All text-level elements have the Phrasing Content Model unless otherwise specified.
          li
            sup
              +footnote('li')
              +footnote('dd')
            | The #[code li] and #[code dd] Elements seem like they should be Sectioning Roots
            |  but they are not! Do not contain sectioning content inside these Elements
            |  unless you want to change the #[abbr.c-Acro(title="document outline") DO]!
          li
            sup
              +footnote('address')
              +footnote('dt')
              +footnote('th')
            | The #[code address], #[code dt], and #[code th] elements may contain any Flow Content except
            |  Sectioning Content, Heading Content, #[code header]s, and #[code footer]s.
{'fraction_non_alphanumeric': 0.09798199095988895, 'fraction_numerical': 0.0075808805210520695, 'mean_word_length': 1.7898029091992256, 'pattern_counts': {'":': 0, '<': 8, '<?xml version=': 0, '>': 8, 'https://': 6, 'lorem ipsum': 0, 'www.': 2, 'xml': 2}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4922494', 'n_tokens_mistral': 15282, 'n_tokens_neox': 14760, 'n_words': 5279}