[html5] question to usage of sub and mark elements

[Jukka K. Korpela]

2014-11-26 22:06, Veli Senol wrote:
> is it recommendet to use the sup element to point to footnotes -may be 
> with an class extension or without-, like below:
>
> <article>
> <p>text text text<sup class="footnotes">*</sup>

The way to present footnote references is a matter of literary style 
rather than particular technologies such as HTML. But if you have 
decided to present them as superscripts, then the sup element 
superficially looks like just the right markup for it. Things are more 
complicated in practice, though.

For example, the asterisk character (*) itself usually looks like a 
superscript in most fonts. By applying superscript style to it, one way 
or another, tends to make it too much of a superscript - hyperscript so 
to say: too small and and in too high a position to be conveniently 
noticeable. HTML documents are mostly viewed on screen rather than on 
paper, making the problem of tiny glyphs worse.

Moreover, the common implementation of <sup> in browsers uses techniques 
that tend to cause uneven line spacing in paragraphs. There are ways to 
deal with this, but the problems are simplest to handle if you use 
markup with no default rendering impact, in practice span: <span 
class="footnotes">*</span>. (If you then wish to make them superscripts, 
the best method is probably relative positioning in CSS; it can be used 
to put the content a bit higher, without affecting line spacing. Font 
size reduction can then be handled separately if desired.)

I suppose an "official" answer (is there is one) might that sup should 
be used for "semantic" reasons. But I have briefly explained why it's a 
wrong approach in practice.

> Second question, is it recommendet to use the mark element similar to 
> usage of permanent markers in books, also probably with class-Attributes.
> The text is german, but do not care, think of the content of article 
> is similar to a site of a book, and the footer is the below part of 
> the same site:
>
>
> |<style> .notizen{background: anyNeonColor;}<style>
> <article>
>    <blockquote cite="http://t3n.de/news/html5-fertig-575078/">
>      <h2>Der schönste Tag eures Lebens: W3C stellt HTML5 fertig<h2>
>      <p>... ... ...</p>
>      <p><mark class="notizen">Mit der Standardisierung von HTML5 hat sich das Leben von Entwicklern schlagartig vereinfacht *</mark>,
>          und eine neue Ära wurde eingeleitet.</p>
>      <time datetime="2014-10-29">29.10.2014</time>
>    </blockquote>
>    <footer>
>      <p>Entweder hat der Verfasser dieses Artikels keinen blassen Schimmer
>          was er da schreibt oder ich habe etwas verpasst!!!<p>
>    </footer>
> </article>|

This looks similar to the usage description and examples at
https://html.spec.whatwg.org/multipage/semantics.html#the-mark-element
and specifically the example where mark is used "to highlight a part of 
quoted text that was originally not emphasized".

On the practical side, however, it should be noted that the common 
default rendering of mark elements (with yellow background) will 
probably be understood as just highlighting something, leaving it to the 
user to figure out whether the emphasis is in the original. So you might 
still consider explaining the convention to the user, much like we say 
"Emphasis mine" in printed matter. The nasty problem is that the 
explanation may need to be in concrete terms (e.g. referring to specific 
background color), even though the specific visual emphasis method 
should be considered as a stylistic matter, not content.

-- 
Yucca, http://www.cs.tut.fi/~jkorpela/