Синтаксический сахар в html/xhtml

Question

Я сейчас пишу html/xhtml вручную, и это хорошо для меня, но я хотел бы немного облегчить ситуацию, особенно для написания сносок.

Сегодня, вот как я пишу сноски:

<p>Here is a footnote<a id="ref1b" href="#ref1">[1]</a>.</p> 
<!-- And at the end of the document --> 
<div class="footnotes"> 
    <h2>Notes</h2> 
    <p id="ref1">[1] But this one isn't very helpful. 
    <!-- Let's add a go-back-to-the-text arrow --> 
    <a href="#ref1b">↩</a> 
    </p> 
</div> 

Идея заключается в том, чтобы сделать вещи автоматически, и, возможно, сделано на стороне клиента (в браузере), так что я мог бы написать что-то как то:

<p>Here is a footnote<ref id="1"/>.</p> 
<!-- And at the end of the document --> 
<div class="footnotes"> 
    <h2>Notes</h2> 
    <ref-def id="1">But this one isn't very helpful.</ref-def> 
</div> 

ref так и ref-def просто быть оценены на лету браузере.

Возможно ли это только при использовании html/xhtml и css?

Answer 1

способ, которым вы это делаете, имеет то преимущество, что он доступен и соответствует стандартам - он будет работать с любым браузером - даже с отключенным javascript. Кроме того, поисковые системы смогут понять это. Итак, есть некоторые преимущества в этом.

Если вы решили пойти на более короткую альтернативу, то есть много плагинов jQuery, которые сделают вашу задачу более комфортной. например посмотрите на https://github.com/nicholascloud/footnote.js

Если вы идете на этот подход, пожалуйста, обратите внимание, что скорость вашего сайта будет страдать, так как пользователям придется загружать большое количество javascript для работы ваших сносок.