Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Semantic elements for footnote list and content

Tags:

html

Given a set of footnotes at the end of an article:

<article>
    <p>Some content here</p>
    <ol class="footnotes">
        <li id="footnote-1">Footnote 1 text</li>
        <li id="footnote-2">Footnote 2 text</li>
    </ol>
</article>

Is there an HTML5 container element more descriptive/semantic than a ol or div with class = "footnotes" (or is there an appropriate container that should be wrapping the ol element)? And, is there a text element more descriptive/semantic than a p or li for each individual footnote? If not, is there perhaps a microformat out there that at least establishes some common class names to use?

Note this question is not about the markup for footnote links - that's already been discussed and it appears that there is still no element in HTML to semantically identify a footnote link. I left out the footnote links and back-links from the sample markup here for brevity.

like image 606
Mike Mertsock Avatar asked Aug 10 '13 12:08

Mike Mertsock


People also ask

Which semantic element is best suitable for content?

question. The answer is <article>. The semantic element that is best suitable for content like blog post that is self contained, independent and can be republished is <article>. The content enclosed in the article tag must make sense by itself and independent of the remaining content in the website.

What are semantic elements?

What are Semantic Elements? A semantic element clearly describes its meaning to both the browser and the developer. Examples of non-semantic elements: <div> and <span> - Tells nothing about its content. Examples of semantic elements: <form> , <table> , and <article> - Clearly defines its content.

Is footer is a semantic tag?

Elements such as <header> , <footer> and <article> are all considered semantic because they accurately describe the purpose of the element and the type of content that is inside them.

What is the purpose of adding header and footer semantic elements to a page?

The main difference: we have replaced div tags with 3 new tags: header, main, and footer. header , main , and footer tags are semantic because they are used to represent different sections on an HTML page. These are more descriptive than div tags which make partitioning webpages into tangible sections difficult.


1 Answers

There isn't any dedicated mechanism yet, but footnotes either with linked, or simple footer notes with list elements as well as side notes can be merged into a common suggested alternative markups. You might have seen this already - "HTML5 Common Idioms without dedicated elements"

Sure it's more viable to wrap each footnotes within a <section> element if more than one occurs within a single <article>. If that's not the case you can wrap 'em within <footer> or <aside>. Then content elements follows as usual. Like <p> for descriptive segments.

Here is another example of "Footnotes with microformats"

like image 121
Shajed Evan Avatar answered Sep 29 '22 16:09

Shajed Evan