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.
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? 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.
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.
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.
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"
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With